/** 테스트 검색 — 임의 상품을 실제 파이프라인(큐→워커→네이버·쿠팡→AI 매칭)에 흘려보내고
 * 단계별 퍼널·소스별 결과·매칭 상품·검색 원가를 시각화한다. 셀렉터·프록시·매칭 회귀 점검용.
 *
 * product_code 는 TEST-<시각> 으로 자동 생성 — 프로덕션 데이터(잡·이력·비용통계)와 필터로
 * 구분되고, negodata 는 UUID 만 매핑하므로 연동에 영향 없다. 자격증명은 서버에만 있으며
 * 여기 결과엔 집계된 프록시 사용량(바이트·$)만 표시된다. */

import { useMutation, useQuery } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { get, post } from "../api/client";
import type { JobDetailRes, JobOutput, SearchRes } from "../api/types";
import { Card, Empty, ErrorNote } from "../components/ui";
import { usd, won } from "../lib/format";

const SOURCE_LABEL: Record<string, string> = { naver: "네이버", coupang: "쿠팡", gmarket: "G마켓", auction: "옥션", st11: "11번가" };
const sourceLabel = (s: string) => SOURCE_LABEL[s] ?? s;

// 파이프라인 단계 한글 라벨 — result.stages 의 stage 키 매핑.
const STAGE_LABEL: Record<string, string> = {
  filter: "가격/몰 필터",
  outlier: "이상치 제거",
  ai_match: "AI 같은상품 판정",
  top_n: "최저가 top-N",
};

function makeTestCode() {
  // Date.now 로 사람이 읽을 수 있는 시각 코드(중복 방지 + 목록 필터 구분).
  const d = new Date();
  const p = (n: number) => String(n).padStart(2, "0");
  return `TEST-${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
}

interface FormState {
  product_name: string;
  model: string;
  specification: string;
  company: string;
  price: string;
}

export default function TestSearch() {
  const [form, setForm] = useState<FormState>({ product_name: "", model: "", specification: "", company: "", price: "" });
  const [jobId, setJobId] = useState<string | null>(null);
  const [testCode, setTestCode] = useState<string | null>(null);
  const startedAt = useRef<number>(0);

  const submit = useMutation({
    mutationFn: async () => {
      const code = makeTestCode();
      const res = await post<SearchRes>("/v1/lps/search", {
        data: [{
          product_code: code,
          product_name: form.product_name.trim(),
          job_type: "manual",
          model: form.model.trim(),
          specification: form.specification.trim(),
          company: form.company.trim(),
          price: form.price.trim(),
        }],
      });
      return { res, code };
    },
    onSuccess: ({ res, code }) => {
      const entry = res.items[0];
      setTestCode(code);
      startedAt.current = Date.now();
      setJobId(entry?.job_id ?? null);
    },
  });

  // 잡 완료까지 2초 폴링. DONE/DEAD 면 멈춘다.
  const job = useQuery({
    queryKey: ["test-job", jobId],
    queryFn: () => get<JobDetailRes>(`/v1/lps/jobs/${jobId}`),
    enabled: !!jobId,
    refetchInterval: (q) => {
      const st = q.state.data?.status;
      return st === "DONE" || st === "DEAD" ? false : 2000;
    },
  });

  const status = job.data?.status;
  const output = job.data?.output;
  const done = status === "DONE" || status === "DEAD";

  // 진행 중엔 1초마다 경과 시간을 갱신(폴링 간격과 무관하게 매끄럽게), 완료되면 정지.
  const [elapsed, setElapsed] = useState(0);
  useEffect(() => {
    if (!jobId || done) return;
    const tick = () => setElapsed(Math.floor((Date.now() - startedAt.current) / 1000));
    tick();
    const t = setInterval(tick, 1000);
    return () => clearInterval(t);
  }, [jobId, done]);

  const pendingTooLong = status === "PENDING" && elapsed > 8;

  const reset = () => {
    setJobId(null);
    setTestCode(null);
    submit.reset();
  };

  return (
    <div className="space-y-4">
      <h1 className="text-[17px] font-bold tracking-tight">테스트 검색</h1>
      <p className="max-w-2xl text-[12px] leading-relaxed text-ink-500">
        임의의 상품을 실제 검색 파이프라인에 흘려보내 셀렉터·프록시·AI 매칭이 정상인지 점검합니다.
        워커가 실제로 크롤하므로 <b>프록시 대역폭 비용이 실제로 발생</b>하고, 결과는 비용 통계에 집계됩니다
        (상품코드는 <code className="rounded bg-surface-2 px-1">TEST-</code> 접두로 구분).
      </p>

      <div className="grid gap-4 lg:grid-cols-[380px_1fr]">
        <Card title="검색 조건">
          <form
            className="space-y-3"
            onSubmit={(e) => { e.preventDefault(); if (form.product_name.trim()) submit.mutate(); }}
          >
            <Field id="pn" label="상품명" required value={form.product_name}
              onChange={(v) => setForm((f) => ({ ...f, product_name: v }))} placeholder="예: 맥심 모카골드 커피믹스" />
            <div className="grid grid-cols-2 gap-3">
              <Field id="model" label="모델명" value={form.model} onChange={(v) => setForm((f) => ({ ...f, model: v }))} placeholder="선택" />
              <Field id="company" label="제조사" value={form.company} onChange={(v) => setForm((f) => ({ ...f, company: v }))} placeholder="선택" />
            </div>
            <Field id="spec" label="규격" value={form.specification}
              onChange={(v) => setForm((f) => ({ ...f, specification: v }))} placeholder="선택 — 예: 1박스 160개입" />
            <Field id="price" label="현재가(원)" value={form.price} inputMode="numeric"
              onChange={(v) => setForm((f) => ({ ...f, price: v.replace(/[^0-9]/g, "") }))} placeholder="선택 — 있으면 가격밴드 필터 기준" />
            <div className="flex gap-2 pt-1">
              <button type="submit" disabled={!form.product_name.trim() || submit.isPending || (!!jobId && status !== "DONE" && status !== "DEAD")}
                className="flex-1 rounded-lg bg-primary-600 px-3 py-2 text-[13px] font-semibold text-white hover:bg-primary-700 disabled:opacity-50">
                {submit.isPending ? "제출 중…" : "검색 실행"}
              </button>
              {jobId && (
                <button type="button" onClick={reset}
                  className="rounded-lg border border-line-200 px-3 py-2 text-[13px] font-semibold text-ink-700 hover:bg-surface-2">
                  초기화
                </button>
              )}
            </div>
            {submit.isError && <ErrorNote error={submit.error} />}
          </form>
        </Card>

        <div className="space-y-4">
          {!jobId && (
            <Card title="결과"><Empty>왼쪽에서 상품명을 입력하고 검색을 실행하세요</Empty></Card>
          )}

          {jobId && (
            <Card title="진행 상태" hint={testCode ?? undefined}>
              <Progress status={status} elapsed={elapsed} />
              {job.isError && <div className="mt-2"><ErrorNote error={job.error} /></div>}
              {pendingTooLong && (
                <p role="alert" className="mt-3 rounded-lg bg-warn-50 px-3 py-2 text-[12px] font-medium text-warn-700">
                  {elapsed}초째 대기 중 — 워커가 실행 중인지 확인하세요 (<code>./run_local_worker.sh</code>). 워커가 없으면 크롤이 시작되지 않습니다.
                </p>
              )}
              {status === "DEAD" && (
                <p role="alert" className="mt-3 rounded-lg bg-dead-50 px-3 py-2 text-[12px] font-medium text-dead-600">
                  검색 실패(재시도 소진) — {job.data?.last_error || "차단·오류로 결과를 얻지 못했습니다"}
                </p>
              )}
            </Card>
          )}

          {status === "DONE" && output && <ResultView output={output} />}
        </div>
      </div>
    </div>
  );
}

// ── 진행 스텝퍼 ──────────────────────────────────────────────
function Progress({ status, elapsed }: { status?: string; elapsed: number }) {
  const steps = [
    { key: "PENDING", label: "대기" },
    { key: "RUNNING", label: "크롤·판정 중" },
    { key: "DONE", label: "완료" },
  ];
  const order = ["PENDING", "RUNNING", "DONE"];
  const curIdx = status === "DEAD" ? 1 : Math.max(0, order.indexOf(status ?? "PENDING"));
  return (
    <div className="flex items-center gap-2">
      {steps.map((s, i) => {
        const done = i < curIdx || status === "DONE";
        const active = i === curIdx && status !== "DONE";
        return (
          <div key={s.key} className="flex items-center gap-2">
            <span className={`flex h-6 items-center rounded-full px-2.5 text-[12px] font-semibold ${
              done ? "bg-ok-50 text-ok-600" : active ? "bg-run-50 text-run-600" : "bg-surface-2 text-ink-400"
            }`}>
              {active && <span className="mr-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-run-600" aria-hidden />}
              {s.label}
            </span>
            {i < steps.length - 1 && <span className="h-px w-4 bg-line-200" aria-hidden />}
          </div>
        );
      })}
      <span className="ml-auto tnum text-[12px] text-ink-400">{elapsed}초</span>
    </div>
  );
}

// ── 결과 뷰: 판정 요약 + 퍼널 + 소스별 + 매칭 상품 + 비용 ──────
function ResultView({ output }: { output: JobOutput }) {
  const found = output.outcome === "found";
  const m = output.metrics;
  return (
    <>
      <Card title="판정" hint={output.round ? `${output.round} 라운드에서 매칭` : output.cached ? "네거티브 캐시" : undefined}>
        {found ? (
          <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
            <span className="rounded-full bg-ok-50 px-2 py-0.5 text-[12px] font-semibold text-ok-600">같은 상품 찾음</span>
            {output.lowest && (
              <span className="text-[15px] font-bold">
                최저가 {won(output.lowest.price)}
                <span className="ml-1.5 text-[12px] font-medium text-ink-400">
                  ({sourceLabel(output.lowest.source)}{output.lowest.mall_name ? ` · ${output.lowest.mall_name}` : ""})
                </span>
              </span>
            )}
          </div>
        ) : (
          <span className="rounded-full bg-surface-2 px-2 py-0.5 text-[12px] font-semibold text-ink-500">
            같은 상품 없음 {output.rounds_tried ? `· ${output.rounds_tried}개 검색어로 시도` : ""}
          </span>
        )}
        {output.query && <p className="mt-2 text-[12px] text-ink-500">최종 검색어: <b>{output.query}</b></p>}
      </Card>

      {output.stages && output.stages.length > 0 && (
        <Card title="파이프라인 퍼널" hint="각 단계가 몇 건을 남겼나">
          <FunnelChart stages={output.stages} totalFound={output.total_found} />
        </Card>
      )}

      <div className="grid gap-4 md:grid-cols-2">
        {output.sources && Object.keys(output.sources).length > 0 && (
          <Card title="소스별 수집" hint="검색어 매칭 전 원본 건수">
            <ul className="space-y-1.5 text-[12px]">
              {Object.entries(output.sources).map(([s, v]) => (
                <li key={s} className="flex items-baseline justify-between gap-2">
                  <span className="font-semibold">{sourceLabel(s)}</span>
                  <span className="tnum text-right">
                    {v.error ? (
                      <span className="font-semibold text-dead-600">실패 · {v.error.split(":")[0]}</span>
                    ) : (
                      <>{v.count ?? 0}건</>
                    )}
                    {m?.source_ms?.[s] != null && <span className="ml-1 text-ink-400">· {(m.source_ms[s] / 1000).toFixed(1)}초</span>}
                  </span>
                </li>
              ))}
            </ul>
          </Card>
        )}

        {m && (
          <Card title="검색 원가" hint={m.duration_ms != null ? `${(m.duration_ms / 1000).toFixed(1)}초 소요` : undefined}>
            <ul className="space-y-1.5 text-[12px]">
              <li className="flex justify-between"><span className="text-ink-500">총 비용</span><span className="tnum font-bold">{usd(m.cost?.total_usd)}</span></li>
              <li className="flex justify-between"><span className="text-ink-500">AI 판정·검색어</span><span className="tnum">{usd(m.cost?.ai_usd)}</span></li>
              <li className="flex justify-between"><span className="text-ink-500">프록시 대역폭</span><span className="tnum">{usd(m.cost?.proxy_usd)}</span></li>
              {m.crawl && (
                <li className="flex justify-between border-t border-line-100 pt-1.5">
                  <span className="text-ink-500">프록시 전송량</span>
                  <span className="tnum text-ink-400">{(m.crawl.proxy_bytes / 1024).toFixed(0)} KB · fetch {m.crawl.fetches}회</span>
                </li>
              )}
            </ul>
          </Card>
        )}
      </div>

      {output.top && output.top.length > 0 && (
        <Card title="매칭된 상품" hint={`최저가순 상위 ${output.top.length}건`}>
          <div className="overflow-x-auto">
            <table className="w-full text-left text-[12px]">
              <thead>
                <tr className="border-b border-line-200 text-[11px] text-ink-400">
                  <th className="pb-1.5 pr-3 font-semibold">소스</th>
                  <th className="pb-1.5 pr-3 font-semibold">상품명</th>
                  <th className="pb-1.5 pr-3 text-right font-semibold">가격</th>
                  <th className="pb-1.5 font-semibold">링크</th>
                </tr>
              </thead>
              <tbody>
                {output.top.map((p, i) => (
                  <tr key={i} className="border-b border-line-100">
                    <td className="py-1.5 pr-3 font-semibold">{sourceLabel(p.source)}</td>
                    <td className="max-w-md truncate py-1.5 pr-3">{p.name}</td>
                    <td className="tnum py-1.5 pr-3 text-right font-semibold">{won(p.price)}</td>
                    <td className="py-1.5">
                      {p.detail_url && <a href={p.detail_url} target="_blank" rel="noreferrer" className="text-primary-600 hover:underline">열기 ↗</a>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      <details>
        <summary className="cursor-pointer text-[12px] font-semibold text-ink-400">원본 결과(JSON)</summary>
        <pre className="mt-1 max-h-72 overflow-auto rounded-lg bg-surface-2 p-2 text-[11px] leading-relaxed">{JSON.stringify(output, null, 2)}</pre>
      </details>
    </>
  );
}

// ── 퍼널: 단계별 남은 건수 가로 막대(수집→최종 매칭) ──────────
function FunnelChart({ stages, totalFound }: { stages: { stage: string; in: number; out: number }[]; totalFound?: number }) {
  const rows = [
    ...(totalFound != null ? [{ label: "수집", value: totalFound }] : []),
    ...stages.map((s) => ({ label: STAGE_LABEL[s.stage] ?? s.stage, value: s.out })),
  ];
  const max = Math.max(1, ...rows.map((r) => r.value));
  return (
    <ul className="space-y-1.5">
      {rows.map((r, i) => (
        <li key={i} className="flex items-center gap-2 text-[12px]">
          <span className="w-28 shrink-0 text-ink-500">{r.label}</span>
          <div className="h-5 flex-1 overflow-hidden rounded bg-surface-2">
            <div className="h-full rounded bg-primary-600" style={{ width: `${(r.value / max) * 100}%`, minWidth: r.value > 0 ? "2px" : 0 }} aria-hidden />
          </div>
          <span className="tnum w-10 shrink-0 text-right font-semibold">{r.value}</span>
        </li>
      ))}
    </ul>
  );
}

// ── 폼 필드(라벨-인풋 연결, Settings 패턴 준수) ──────────────
function Field({ id, label, value, onChange, placeholder, required, inputMode }: {
  id: string; label: string; value: string; onChange: (v: string) => void;
  placeholder?: string; required?: boolean; inputMode?: "numeric";
}) {
  return (
    <div>
      <label htmlFor={id} className="mb-1 block text-[12px] font-semibold text-ink-700">
        {label}{required && <span className="ml-0.5 text-dead-600">*</span>}
      </label>
      <input id={id} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        inputMode={inputMode} autoComplete="off"
        className="w-full rounded-lg border border-line-200 bg-surface px-3 py-2 text-[13px] outline-none focus:border-primary-600" />
    </div>
  );
}