"use client";

import { 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 DevtoolPreviewResult } from "@/lib/admin-api";
import { ErrorNote, Field, fmtMs, Input, JsonView, LevelBadge, Mono, Panel, Spinner } from "../primitives";
import { useToast } from "../toast";
import { defaultsToConfig, extractorToConfig, fieldUnion, isEmptyValue, type DevtoolShared } from "./state";

export function StepPreview({ s }: { s: DevtoolShared }) {
  const { draft, update, fetchResult, previewResult: r, setPreviewResult } = s;
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [details, setDetails] = useState<unknown>(null);
  const toast = useToast();
  const d = draft.defaults;
  const setDefaults = (patch: Partial<typeof d>) => update({ defaults: { ...d, ...patch } });
  const canReuseHtml = Boolean(fetchResult?.html && fetchResult.url === draft.fetch.url && !fetchResult.error);

  const run = async () => {
    const url = draft.fetch.url.trim();
    if (!url) return setError("No URL — go back to step 1.");
    const extractor = extractorToConfig(draft.extractor);
    if (!extractor.fields && !extractor.parser) return setError("Define at least one field rule (or a parser) in step 2.");
    setBusy(true);
    setError(null);
    setDetails(null);
    const body: Record<string, unknown> = { url, extractor, defaults: defaultsToConfig(d), connectorId: draft.meta.id || undefined, kind: draft.extractor.kind, level: draft.fetch.level, maxLevel: Math.max(draft.fetch.level, draft.fetch.maxLevel) };
    if (canReuseHtml) body.html = fetchResult!.html;
    const res = await adminFetch<DevtoolPreviewResult>("devtool/preview", { method: "POST", body, timeoutMs: 120_000 });
    setBusy(false);
    if (!res.ok) {
      setError(res.error);
      setDetails(res.details ?? null);
      toast({ tone: "danger", title: "Preview failed", description: res.error });
      return;
    }
    setPreviewResult(res.data);
    const v = res.data.validation;
    toast({ tone: v.rejected > 0 ? "warn" : res.data.entities.length ? "ok" : "warn", title: `${fmtInt(res.data.records.length)} record(s) → ${fmtInt(res.data.entities.length)} entit${res.data.entities.length === 1 ? "y" : "ies"}`, description: `${fmtInt(v.valid)} valid · ${fmtInt(v.rejected)} rejected · ${fmtInt(v.issues.length)} issue(s)` });
  };

  const entityFields = r ? fieldUnion(r.entities, ["entityType", "key", "name", "operatorName", "city", "countryIso2", "lat", "lng", "status", "facilityType", "itCapacityMw", "totalPowerMw", "plannedPowerMw"]) : [];
  const recordFields = r ? fieldUnion(r.records) : [];
  const ruleNames = draft.extractor.fields.map((f) => f.name.trim()).filter(Boolean);
  const emptyRules = r && r.records.length ? ruleNames.filter((n) => r.records.every((rec) => isEmptyValue(rec[n]))) : [];

  return (
    <div className="space-y-3">
      <Panel title="3 · Preview extraction" description={canReuseHtml ? "Runs the extractor on the HTML fetched in step 1 (no new request), then normalize → validate through GenericConnector." : "The page will be fetched again (step 1 result is for another URL or failed)."}>
        <div className="grid gap-3 lg:grid-cols-[repeat(5,1fr)_auto] lg:items-end">
          <Field label="Default operator" hint="merged into every entity">
            <Input value={d.operatorName} onChange={(e) => setDefaults({ operatorName: e.target.value })} placeholder="Digital Realty" />
          </Field>
          <Field label="Operator kind">
            <Input value={d.operatorKind} onChange={(e) => setDefaults({ operatorKind: e.target.value })} placeholder="colocation" mono />
          </Field>
          <Field label="Country (iso2)">
            <Input value={d.countryIso2} onChange={(e) => setDefaults({ countryIso2: e.target.value.toUpperCase().slice(0, 2) })} placeholder="US" mono />
          </Field>
          <Field label="Facility type">
            <Input value={d.facilityType} onChange={(e) => setDefaults({ facilityType: e.target.value })} placeholder="colocation" mono />
          </Field>
          <Field label="Status">
            <Input value={d.status} onChange={(e) => setDefaults({ status: e.target.value })} placeholder="operational" mono />
          </Field>
          <Button variant="accent" onClick={() => void run()} disabled={busy}>
            {busy ? <Spinner className="text-white" /> : null}
            {busy ? "Running…" : "Preview fields"}
          </Button>
        </div>
        <ErrorNote error={error} className="mt-3" />
        {details ? <JsonView value={details} maxHeight={160} className="mt-2" /> : null}
      </Panel>

      {r && (
        <>
          <div className="flex flex-wrap items-center gap-2 text-[12.5px]">
            <Badge size="sm" tone="outline" mono>
              HTTP {r.fetch.status}
            </Badge>
            <Badge size="sm" tone="outline">
              {r.fetch.fetcher}
            </Badge>
            <LevelBadge level={r.fetch.level} />
            <span className="text-ink-3">{fmtMs(r.fetch.durationMs)}</span>
            <span className="figure text-ink">{fmtInt(r.records.length)} records</span>
            <span className="text-ink-4">→</span>
            <span className="figure text-ink">{fmtInt(r.entities.length)} entities</span>
            <span className="text-ink-4">→</span>
            <span className={cn("figure", r.validation.rejected ? "text-danger" : "text-ok")}>
              {fmtInt(r.validation.valid)} valid / {fmtInt(r.validation.rejected)} rejected
            </span>
            {emptyRules.length > 0 && (
              <Badge size="sm" tone="warn">
                empty on every record: {emptyRules.join(", ")}
              </Badge>
            )}
          </div>

          <div className="grid gap-3 xl:grid-cols-2">
            <Panel title="Records (raw extraction)" description="Field values as produced by the rules, before normalization. Empty cells are highlighted." padded={false}>
              {r.records.length === 0 ? (
                <EmptyState compact title="No records" description="The rules matched nothing — check the selectors against the HTML source in step 1 (or `each` selects no element)." />
              ) : (
                <div className="max-h-[440px] overflow-auto">
                  <Table responsive={false} className="text-[12px]">
                    <THead>
                      <Tr>
                        <Th className="pl-3">Field</Th>
                        {r.records.slice(0, 6).map((_, i) => (
                          <Th key={i}>#{i + 1}</Th>
                        ))}
                      </Tr>
                    </THead>
                    <TBody>
                      {[...new Set([...ruleNames, ...recordFields])].map((k) => (
                        <Tr key={k}>
                          <Td className="pl-3">
                            <Mono className={cn(ruleNames.includes(k) ? "text-ink" : "text-ink-3")}>{k}</Mono>
                          </Td>
                          {r.records.slice(0, 6).map((rec, i) => (
                            <Td key={i} className={cn("max-w-[260px] truncate", isEmptyValue(rec[k]) && "bg-warn/10 text-warn")} title={typeof rec[k] === "object" ? JSON.stringify(rec[k]) : String(rec[k] ?? "")}>
                              {isEmptyValue(rec[k]) ? "empty" : fmtValue(rec[k])}
                            </Td>
                          ))}
                        </Tr>
                      ))}
                    </TBody>
                  </Table>
                  {r.records.length > 6 && <p className="px-3 py-1.5 text-[11.5px] text-ink-4">Showing 6 of {fmtInt(r.records.length)} records.</p>}
                </div>
              )}
            </Panel>

            <Panel title="Normalized entities" description="After normalize(): units parsed, statuses mapped, defaults merged. Empty fields highlighted." padded={false}>
              {r.entities.length === 0 ? (
                <EmptyState compact title="No entities" description="Records did not survive normalization (missing name / key?). Check the validation issues." />
              ) : (
                <div className="max-h-[440px] overflow-auto">
                  <Table responsive={false} className="text-[12px]">
                    <THead>
                      <Tr>
                        <Th className="pl-3">Field</Th>
                        {r.entities.slice(0, 6).map((_, i) => (
                          <Th key={i}>#{i + 1}</Th>
                        ))}
                      </Tr>
                    </THead>
                    <TBody>
                      {entityFields.map((k) => (
                        <Tr key={k}>
                          <Td className="pl-3">
                            <Mono className="text-ink">{k}</Mono>
                          </Td>
                          {r.entities.slice(0, 6).map((e, i) => (
                            <Td key={i} className={cn("max-w-[260px] truncate", isEmptyValue(e[k]) && "bg-warn/10 text-warn")} title={typeof e[k] === "object" ? JSON.stringify(e[k]) : String(e[k] ?? "")}>
                              {isEmptyValue(e[k]) ? "empty" : fmtValue(e[k])}
                            </Td>
                          ))}
                        </Tr>
                      ))}
                    </TBody>
                  </Table>
                </div>
              )}
            </Panel>
          </div>

          <div className="grid gap-3 xl:grid-cols-2">
            <Panel title="Validation issues" description={`${fmtInt(r.validation.issues.length)} issue(s) — rejected entities never reach the index`} padded={false}>
              {r.validation.issues.length === 0 ? (
                <EmptyState compact title="No validation issues" />
              ) : (
                <ul className="max-h-[320px] divide-y divide-hair overflow-auto text-[12.5px]">
                  {r.validation.issues.map((i, k) => {
                    const level = String(i.level ?? i.severity ?? "error");
                    return (
                      <li key={k} className="flex flex-wrap items-center gap-2 px-3 py-1.5">
                        <Badge size="xs" tone={level === "warn" || level === "warning" ? "warn" : "danger"}>
                          {level}
                        </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>
                        {(i.entity ?? i.key) != null && <Mono className="ml-auto text-ink-4">{String(i.entity ?? i.key)}</Mono>}
                      </li>
                    );
                  })}
                </ul>
              )}
            </Panel>
            <Panel title="Pipeline log" padded={false}>
              {r.logs.length === 0 ? (
                <EmptyState compact title="No log lines" />
              ) : (
                <div className="max-h-[320px] overflow-auto font-mono text-[11.5px] leading-[1.5]">
                  {r.logs.map((l, i) => (
                    <div key={i} className={cn("flex gap-2 border-b border-hair/60 px-3 py-0.5 last:border-0", l.level === "error" && "text-danger", l.level === "warn" && "text-warn")}>
                      <span className="w-10 shrink-0 text-ink-4">{l.level}</span>
                      <span className="min-w-0 break-all text-ink-2">{l.msg}</span>
                    </div>
                  ))}
                </div>
              )}
            </Panel>
          </div>
          {r.entities.length > 0 && (
            <details className="rounded-sm border border-hair bg-surface">
              <summary className="cursor-pointer px-3 py-2 text-[12.5px] text-ink-2">Raw JSON (first entity)</summary>
              <div className="px-3 pb-3">
                <JsonView value={r.entities[0] ?? DASH} maxHeight={360} />
              </div>
            </details>
          )}
        </>
      )}
    </div>
  );
}