"use client";

import { useMemo, useState } from "react";
import { Badge, Button, EmptyState, Table, TBody, Td, Th, THead, Tr } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { DASH, fmtInt, fmtValue } from "@/lib/format";
import { adminFetch, type RunSampleResult } from "@/lib/admin-api";
import { Disclosure, ErrorNote, ExtLink, Field, fmtMs, JsonView, LevelBadge, Mono, Panel, Select, Spinner, Textarea } from "../primitives";
import { useToast } from "../toast";
import { fieldUnion, isEmptyValue, parseUrls, type DevtoolShared } from "./state";

const HIDDEN = new Set(["provenance", "entityType", "key", "sourceUrl", "url"]);

export function StepSample({ s }: { s: DevtoolShared }) {
  const { draft, update, sampleResult: r, setSampleResult } = s;
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [level, setLevel] = useState<string>("");
  const toast = useToast();
  const urls = useMemo(() => parseUrls(draft.sampleUrls), [draft.sampleUrls]);

  const run = async () => {
    if (!draft.yaml.trim()) return setError("No YAML — generate or paste it in step 4 first.");
    if (urls.length === 0) return setError("Enter at least one http(s) URL (one per line).");
    if (urls.length > 10) return setError("At most 10 URLs per run.");
    setBusy(true);
    setError(null);
    const res = await adminFetch<RunSampleResult>("devtool/run-sample", { method: "POST", body: { yaml: draft.yaml, urls, level: level ? Number(level) : undefined }, timeoutMs: 290_000 });
    setBusy(false);
    if (!res.ok) {
      setError(res.error);
      toast({ tone: "danger", title: "Sample run failed", description: res.error });
      return;
    }
    setSampleResult(res.data);
    toast({ tone: res.data.summary.ok === res.data.summary.urls ? "ok" : "warn", title: `${res.data.summary.ok}/${res.data.summary.urls} pages produced valid entities`, description: res.data.summary.credits ? `${res.data.summary.credits} premium credits spent` : "no premium credits" });
  };

  const firstEntities = useMemo(() => (r ? r.results.map((x) => x.entities?.[0] ?? null) : []), [r]);
  const fields = useMemo(() => fieldUnion(firstEntities.filter((e): e is Record<string, unknown> => Boolean(e)), ["name", "operatorName", "city", "countryIso2", "lat", "lng", "status", "facilityType", "itCapacityMw", "totalPowerMw", "plannedPowerMw", "openedOn"]).filter((f) => !HIDDEN.has(f)), [firstEntities]);

  return (
    <div className="space-y-3">
      <Panel title="5 · Run on multiple pages" description="Fetch + extract + normalize + validate each URL with the YAML from step 4 (test context: nothing is persisted; premium credits are counted). Up to 10 URLs.">
        <div className="grid gap-3 lg:grid-cols-[1fr_160px_auto] lg:items-end">
          <Field label={`URLs (${urls.length} valid)`} hint="one per line — use “+ sample” in the step-1 links tab to collect them">
            <Textarea rows={6} mono value={draft.sampleUrls} onChange={(e) => update({ sampleUrls: e.target.value })} placeholder={"https://www.example.com/data-centers/a\nhttps://www.example.com/data-centers/b"} />
          </Field>
          <Field label="Min fetch level" hint="override the YAML start level">
            <Select value={level} onChange={(e) => setLevel(e.target.value)}>
              <option value="">from YAML</option>
              <option value="1">L1 direct</option>
              <option value="2">L2 browser UA</option>
              <option value="3">L3 Firecrawl</option>
              <option value="4">L4 Scrapfly</option>
            </Select>
          </Field>
          <Button variant="accent" onClick={() => void run()} disabled={busy || urls.length === 0}>
            {busy ? <Spinner className="text-white" /> : null}
            {busy ? `Running ${urls.length} page(s)…` : "Run sample"}
          </Button>
        </div>
        <ErrorNote error={error} className="mt-3" />
      </Panel>

      {r && (
        <>
          <div className="flex flex-wrap items-center gap-2 text-[12.5px]">
            <Badge size="sm" tone={r.summary.ok === r.summary.urls ? "ok" : r.summary.ok ? "warn" : "danger"}>
              {r.summary.ok} / {r.summary.urls} ok
            </Badge>
            <span className="text-ink-3">
              credits <span className={cn("figure", r.summary.credits > 0 && "text-accent")}>{fmtInt(r.summary.credits)}</span>
            </span>
            <span className="text-ink-3">field coverage:</span>
            {Object.entries(r.summary.fieldCoverage)
              .filter(([k]) => !HIDDEN.has(k))
              .sort((a, b) => b[1] - a[1])
              .map(([k, n]) => (
                <Badge key={k} size="xs" mono tone={n === r.summary.urls ? "ok" : n === 0 ? "danger" : "outline"}>
                  {k} {n}/{r.summary.urls}
                </Badge>
              ))}
          </div>

          <Panel title="Comparison — first entity per URL" description="Empty cells highlighted: a rule that works on one page and not another usually means the markup differs." padded={false}>
            {fields.length === 0 ? (
              <EmptyState compact title="No entities extracted on any page" />
            ) : (
              <div className="overflow-auto">
                <Table responsive={false} className="min-w-[720px] text-[12px]">
                  <THead>
                    <Tr>
                      <Th className="pl-3">URL</Th>
                      <Th>OK</Th>
                      {fields.map((f) => (
                        <Th key={f}>
                          <Mono className="text-ink-3">{f}</Mono>
                        </Th>
                      ))}
                    </Tr>
                  </THead>
                  <TBody>
                    {r.results.map((x, i) => {
                      const e = firstEntities[i];
                      return (
                        <Tr key={x.url}>
                          <Td className="max-w-[260px] pl-3">
                            <ExtLink href={x.url} />
                          </Td>
                          <Td>{x.ok ? <span className="text-ok">✓</span> : <span className="text-danger">✗</span>}</Td>
                          {fields.map((f) => (
                            <Td key={f} className={cn("max-w-[200px] truncate", (!e || isEmptyValue(e[f])) && "bg-warn/10 text-warn")} title={e ? (typeof e[f] === "object" ? JSON.stringify(e[f]) : String(e[f] ?? "")) : ""}>
                              {!e || isEmptyValue(e[f]) ? "empty" : fmtValue(e[f])}
                            </Td>
                          ))}
                        </Tr>
                      );
                    })}
                  </TBody>
                </Table>
              </div>
            )}
          </Panel>

          <div className="space-y-1.5">
            {r.results.map((x) => (
              <Disclosure
                key={x.url}
                summary={
                  <span className="flex flex-wrap items-center gap-2">
                    {x.ok ? (
                      <Badge size="xs" tone="ok">
                        ok
                      </Badge>
                    ) : (
                      <Badge size="xs" tone="danger">
                        failed
                      </Badge>
                    )}
                    <span className="min-w-0 max-w-[420px] truncate font-mono text-[12px] text-ink">{x.url.replace(/^https?:\/\//, "")}</span>
                    {x.fetch && (
                      <>
                        <Mono>HTTP {x.fetch.status}</Mono>
                        <LevelBadge level={x.fetch.level} />
                        <span className="text-ink-3">{x.fetch.fetcher}</span>
                      </>
                    )}
                    <span className="figure text-ink-3">{fmtMs(x.durationMs)}</span>
                    {x.entities && <span className="figure text-ink-3">{fmtInt(x.records?.length ?? 0)} rec → {fmtInt(x.entities.length)} ent</span>}
                    {x.validation && (
                      <span className={cn("figure", x.validation.rejected ? "text-danger" : "text-ink-3")}>
                        {fmtInt(x.validation.valid)} valid / {fmtInt(x.validation.rejected)} rejected
                      </span>
                    )}
                    {x.error && <span className="truncate text-danger">{x.error}</span>}
                  </span>
                }
              >
                <div className="grid gap-3 lg:grid-cols-2">
                  <div>
                    <div className="label-caps mb-1">Validation issues</div>
                    {!x.validation || x.validation.issues.length === 0 ? (
                      <p className="text-[12px] text-ink-4">{x.validation ? "none" : DASH}</p>
                    ) : (
                      <ul className="space-y-0.5 text-[12px]">
                        {x.validation.issues.map((i, k) => (
                          <li key={k} className="flex flex-wrap gap-2">
                            <Badge size="xs" tone={String(i.level ?? i.severity ?? "error").startsWith("warn") ? "warn" : "danger"}>
                              {String(i.level ?? i.severity ?? "error")}
                            </Badge>
                            {(i.field ?? i.path) && <Mono className="text-ink">{String(i.field ?? i.path)}</Mono>}
                            <span className="text-ink-2">{String(i.message ?? JSON.stringify(i))}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                    {x.logs && x.logs.length > 0 && (
                      <>
                        <div className="label-caps mb-1 mt-3">Log</div>
                        <div className="max-h-[160px] overflow-auto font-mono text-[11.5px] text-ink-3">
                          {x.logs.map((l, k) => (
                            <div key={k} className={cn(l.level === "error" && "text-danger", l.level === "warn" && "text-warn")}>
                              [{l.level}] {l.msg}
                            </div>
                          ))}
                        </div>
                      </>
                    )}
                  </div>
                  <div>
                    <div className="label-caps mb-1">Entities</div>
                    {x.entities && x.entities.length ? <JsonView value={x.entities} maxHeight={300} /> : <p className="text-[12px] text-ink-4">none</p>}
                  </div>
                </div>
              </Disclosure>
            ))}
          </div>
        </>
      )}
    </div>
  );
}