"use client";

import { Check } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useMounted } from "@/components/theme";
import { Badge, Button } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { adminFetch, adminFetchText, type ConfigListItem, type DevtoolFetchResult, type DevtoolPreviewResult, type RunSampleResult, type SaveConfigResult, type ValidateConfigResult } from "@/lib/admin-api";
import { ErrorNote, Mono, Select, Spinner } from "../primitives";
import { AdminPageHeader } from "../shell";
import { useToast } from "../toast";
import { useAdminQuery } from "../use-admin-query";
import { useUrlState } from "../use-url-state";
import { buildYaml, draftFromConfig, EMPTY_DRAFT, loadDraft, saveDraft, type DevtoolShared, type Draft } from "./state";
import { StepDeploy } from "./step-deploy";
import { StepFetch } from "./step-fetch";
import { StepPreview } from "./step-preview";
import { StepRules } from "./step-rules";
import { StepSample } from "./step-sample";
import { StepSave } from "./step-save";

const STEPS = [
  { n: 1, label: "Fetch", short: "Fetch sample" },
  { n: 2, label: "Rules", short: "Extraction rules" },
  { n: 3, label: "Preview", short: "Preview fields" },
  { n: 4, label: "Save", short: "Save connector" },
  { n: 5, label: "Sample", short: "Run on pages" },
  { n: 6, label: "Deploy", short: "Compare & deploy" },
] as const;

export function DevTool() {
  const [params, setParams] = useUrlState();
  const step = Math.min(6, Math.max(1, Number(params.step ?? 1) || 1));
  // Draft is read lazily from localStorage (+ ?url=) on the client; the server render and the first client render
  // both return null (useMounted) so there is no hydration mismatch and no setState inside an effect.
  const hydrated = useMounted();
  const [draft, setDraft] = useState<Draft>(() => {
    if (typeof window === "undefined") return EMPTY_DRAFT;
    const stored = loadDraft() ?? EMPTY_DRAFT;
    const u = new URLSearchParams(window.location.search).get("url");
    return u ? { ...stored, fetch: { ...stored.fetch, url: u } } : stored;
  });
  const [initialId] = useState<string | null>(() => (typeof window === "undefined" ? null : new URLSearchParams(window.location.search).get("id")));
  const [fetchResult, setFetchResult] = useState<DevtoolFetchResult | null>(null);
  const [previewResult, setPreviewResult] = useState<DevtoolPreviewResult | null>(null);
  const [validation, setValidation] = useState<ValidateConfigResult | null>(null);
  const [saveResult, setSaveResult] = useState<SaveConfigResult | null>(null);
  const [sampleResult, setSampleResult] = useState<RunSampleResult | null>(null);
  const [loadingId, setLoadingId] = useState<string | null>(null);
  const [loadError, setLoadError] = useState<string | null>(null);
  const toast = useToast();
  const configs = useAdminQuery<ConfigListItem[]>("devtool/configs", { timeoutMs: 30_000 });

  // ?id=<connector> different from the stored draft → load it once after mount
  const requestedId = useRef<string | null>(initialId && initialId !== draft.meta.id ? initialId : null);

  // persist (debounced)
  useEffect(() => {
    if (!hydrated) return;
    const t = setTimeout(() => saveDraft(draft), 300);
    return () => clearTimeout(t);
  }, [draft, hydrated]);

  const update = useCallback((patch: Partial<Draft> | ((d: Draft) => Draft)) => {
    setDraft((d) => (typeof patch === "function" ? patch(d) : { ...d, ...patch }));
  }, []);

  const goto = useCallback(
    (n: number) => {
      setParams({ step: n === 1 ? null : n, url: draft.fetch.url || null, id: draft.meta.id || null }, { push: true });
    },
    [setParams, draft.fetch.url, draft.meta.id],
  );

  // keep url/id in the address bar in sync (replace, no history)
  useEffect(() => {
    if (!hydrated) return;
    const wantUrl = draft.fetch.url || null;
    const wantId = draft.meta.id || null;
    if ((params.url ?? null) !== wantUrl || (params.id ?? null) !== wantId) setParams({ url: wantUrl, id: wantId });
  }, [draft.fetch.url, draft.meta.id, hydrated, params.url, params.id, setParams]);

  const loadConnector = useCallback(
    async (id: string) => {
      if (!id) return;
      setLoadingId(id);
      setLoadError(null);
      const text = await adminFetchText(`devtool/configs/${encodeURIComponent(id)}`);
      if (!text.ok) {
        setLoadingId(null);
        setLoadError(`Could not load ${id}.yaml: ${text.error}`);
        return;
      }
      const v = await adminFetch<ValidateConfigResult>("devtool/validate-config", { method: "POST", body: { yaml: text.text } });
      setLoadingId(null);
      if (!v.ok) {
        setLoadError(`validate-config failed: ${v.error}`);
        return;
      }
      setValidation(v.data);
      if (v.data.ok) {
        setDraft((d) => draftFromConfig(v.data.ok ? v.data.config : {}, text.text, { ...d, fetch: { ...d.fetch, url: "" } }));
        toast({ tone: "ok", title: `Loaded ${id}`, description: `${Object.keys(v.data.config.extractors as object).length} extractor(s) · parser ${String(v.data.config.parserVersion)}` });
      } else {
        setDraft((d) => ({ ...d, yaml: text.text, yamlDirty: true, meta: { ...d.meta, id } }));
        toast({ tone: "warn", title: `Loaded ${id} with schema errors`, description: v.data.errors.map((e) => `${e.path}: ${e.message}`).join("; ").slice(0, 200) });
        setParams({ step: 4 });
      }
      setFetchResult(null);
      setPreviewResult(null);
      setSaveResult(null);
      setSampleResult(null);
    },
    [toast, setParams],
  );

  useEffect(() => {
    if (!hydrated || !requestedId.current) return;
    const id = requestedId.current;
    requestedId.current = null;
    const t = setTimeout(() => void loadConnector(id), 0);
    return () => clearTimeout(t);
  }, [hydrated, loadConnector]);

  const reset = () => {
    if (!window.confirm("Clear the current draft (rules, YAML, sample URLs)?")) return;
    setDraft(EMPTY_DRAFT);
    setFetchResult(null);
    setPreviewResult(null);
    setValidation(null);
    setSaveResult(null);
    setSampleResult(null);
    setParams({ step: null, url: null, id: null });
  };

  const shared: DevtoolShared = useMemo(
    () => ({ draft, update, fetchResult, setFetchResult, previewResult, setPreviewResult, validation, setValidation, saveResult, setSaveResult, sampleResult, setSampleResult, goto }),
    [draft, update, fetchResult, previewResult, validation, saveResult, sampleResult, goto],
  );

  const done = {
    1: Boolean(fetchResult && !fetchResult.error),
    2: draft.extractor.fields.some((f) => f.name.trim()),
    3: Boolean(previewResult && previewResult.entities.length > 0),
    4: Boolean(saveResult),
    5: Boolean(sampleResult),
    6: false,
  } as Record<number, boolean>;

  if (!hydrated) return null;

  return (
    <div>
      <AdminPageHeader
        title="Connector development tool"
        description="Fetch a live page through the escalation stack, define declarative extraction rules, preview the normalized entities, save the YAML, run it on several pages, then deploy a parser version. Nothing here persists documents or entities."
        aside={
          <>
            <div className="flex items-center gap-2">
              <Select value="" onChange={(e) => void loadConnector(e.target.value)} className="w-[230px]" aria-label="Load existing connector" disabled={loadingId !== null}>
                <option value="">{loadingId ? `Loading ${loadingId}…` : "Load existing connector…"}</option>
                {(configs.data ?? []).map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.id}
                    {c.valid ? "" : " (invalid)"} · {c.parserVersion}
                  </option>
                ))}
              </Select>
              {loadingId && <Spinner />}
            </div>
            <Button size="sm" variant="ghost" onClick={reset}>
              New draft
            </Button>
          </>
        }
      />
      <ErrorNote error={loadError} className="mb-3" />

      <div className="mb-3 flex flex-wrap items-center gap-2 text-[12px] text-ink-3">
        {draft.meta.id ? (
          <span>
            Editing <Mono className="text-ink">{draft.meta.id}</Mono>
          </span>
        ) : (
          <span>New connector draft</span>
        )}
        {draft.fetch.url && (
          <span className="min-w-0 truncate">
            · <Mono>{draft.fetch.url}</Mono>
          </span>
        )}
        {draft.savedAt && <span className="ml-auto text-ink-4">draft kept in this browser</span>}
      </div>

      <ol className="mb-4 flex overflow-x-auto rounded-sm border border-hair bg-surface no-scrollbar">
        {STEPS.map((s) => {
          const active = s.n === step;
          return (
            <li key={s.n} className="flex min-w-0 flex-1">
              <button type="button" onClick={() => goto(s.n)} aria-current={active ? "step" : undefined} className={cn("flex h-11 w-full min-w-[96px] items-center gap-2 border-r border-hair px-3 text-left text-[12.5px] last:border-r-0 sm:min-w-0", active ? "bg-ink text-paper" : "text-ink-2 hover:bg-surface-2")}>
                <span className={cn("inline-flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px] font-medium", active ? "border-paper/50" : done[s.n] ? "border-ok bg-ok text-white" : "border-hair-2")}>{done[s.n] && !active ? <Check className="size-3" strokeWidth={2.5} /> : s.n}</span>
                <span className="truncate">
                  <span className="sm:hidden">{s.label}</span>
                  <span className="hidden sm:inline">{s.short}</span>
                </span>
              </button>
            </li>
          );
        })}
      </ol>

      {step === 1 && <StepFetch s={shared} />}
      {step === 2 && <StepRules s={shared} />}
      {step === 3 && <StepPreview s={shared} />}
      {step === 4 && <StepSave s={shared} />}
      {step === 5 && <StepSample s={shared} />}
      {step === 6 && <StepDeploy s={shared} configs={configs.data ?? []} onReloadConfigs={() => void configs.refresh()} />}

      <div className="mt-4 flex items-center justify-between border-t border-hair pt-3">
        <Button size="sm" variant="ghost" onClick={() => goto(step - 1)} disabled={step <= 1}>
          ← {STEPS[step - 2]?.short ?? ""}
        </Button>
        {step === 3 && !draft.yaml && (
          <Badge size="xs" tone="info">
            the YAML template is generated when you enter step 4
          </Badge>
        )}
        <Button size="sm" variant="secondary" onClick={() => { if (step === 3 && !draft.yamlDirty) update({ yaml: buildYaml(draft) }); goto(step + 1); }} disabled={step >= 6}>
          {STEPS[step]?.short ?? ""} →
        </Button>
      </div>
    </div>
  );
}