"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { Badge, Button, EmptyState } from "@/components/ui";
import { adminFetch, adminFetchText, type ConfigListItem, type SaveConfigResult, type ValidateConfigResult } from "@/lib/admin-api";
import { Checkbox, DiffView, ErrorNote, Field, Input, KV, Mono, Panel, Select, Spinner } from "../primitives";
import { useToast } from "../toast";
import { bumpVersion } from "../yaml";
import type { DevtoolShared } from "./state";

interface DeployLog {
  step: string;
  ok: boolean;
  detail: string;
}

/** Loads config/connectors/<id>.yaml text; `token` forces a reload. Loading is derived from the key, never set in the effect. */
function useSavedYaml(id: string, token: number): { loading: boolean; text: string | null; error: string | null } {
  const key = `${id}|${token}`;
  const [slot, setSlot] = useState<{ key: string; text: string | null; error: string | null }>({ key: "", text: null, error: null });
  useEffect(() => {
    if (!id) return;
    let alive = true;
    void adminFetchText(`devtool/configs/${encodeURIComponent(id)}`).then((r) => {
      if (!alive) return;
      setSlot({ key, text: r.ok ? r.text : null, error: r.ok ? null : r.status === 404 ? `No saved config for "${id}" — this would be a new connector (save it in step 4 first).` : (r.error ?? "load failed") });
    });
    return () => {
      alive = false;
    };
  }, [id, key]);
  const current = slot.key === key;
  return { loading: Boolean(id) && !current, text: current ? slot.text : null, error: current ? slot.error : null };
}

export function StepDeploy({ s, configs, onReloadConfigs }: { s: DevtoolShared; configs: ConfigListItem[]; onReloadConfigs: () => void }) {
  const { draft, update, validation, setValidation, setSaveResult } = s;
  const [id, setId] = useState(draft.meta.id);
  const [reloadToken, setReloadToken] = useState(0);
  const savedQ = useSavedYaml(id, reloadToken);
  const savedText = savedQ.text;
  const saved = useMemo(() => (savedText != null ? { id, text: savedText } : null), [id, savedText]);
  const [versionInput, setVersionInput] = useState<string | null>(null);
  const [reprocess, setReprocess] = useState(true);
  const [busy, setBusy] = useState(false);
  const [log, setLog] = useState<DeployLog[]>([]);
  const toast = useToast();
  const listed = configs.find((c) => c.id === id);
  const savedVersion = useMemo(() => {
    const m = /^parserVersion:\s*["']?([^"'\n#]+)/m.exec(saved?.text ?? "");
    return m?.[1]?.trim() ?? listed?.parserVersion ?? "v1";
  }, [saved, listed]);
  const draftVersion = useMemo(() => /^parserVersion:\s*["']?([^"'\n#]+)/m.exec(draft.yaml)?.[1]?.trim() ?? null, [draft.yaml]);
  const version = versionInput ?? bumpVersion(savedVersion);

  const changeId = (v: string) => {
    setId(v.toLowerCase());
    setVersionInput(null);
    setLog([]);
  };

  const deploy = async () => {
    if (!id) return;
    if (!/^[a-z0-9][a-z0-9-]*$/.test(id)) return toast({ tone: "danger", title: "Invalid connector id" });
    if (!draft.yaml.trim()) return toast({ tone: "danger", title: "No YAML to deploy (step 4)" });
    if (!window.confirm(`Deploy ${id}: set parserVersion ${version}, write ${id}.yaml (backup kept), upsert the connectors row${reprocess ? ", then enqueue a reprocess run over stored documents" : ""}?`)) return;
    setBusy(true);
    const out: DeployLog[] = [];
    const push = (l: DeployLog) => {
      out.push(l);
      setLog([...out]);
    };
    const v = await adminFetch<ValidateConfigResult>("devtool/validate-config", { method: "POST", body: { yaml: draft.yaml } });
    if (!v.ok || !v.data.ok) {
      push({ step: "validate", ok: false, detail: v.ok ? (v.data.ok ? "" : v.data.errors.map((e) => `${e.path}: ${e.message}`).join("; ")) : v.error });
      setValidation(v.ok ? v.data : null);
      setBusy(false);
      toast({ tone: "danger", title: "Deploy aborted: YAML invalid" });
      return;
    }
    setValidation(v.data);
    if (String(v.data.config.id) !== id) {
      push({ step: "validate", ok: false, detail: `YAML id "${String(v.data.config.id)}" does not match "${id}"` });
      setBusy(false);
      return;
    }
    push({ step: "validate", ok: true, detail: `${v.data.warnings.length} warning(s)` });
    const sv = await adminFetch<SaveConfigResult>("devtool/save-config", { method: "POST", body: { id, yaml: draft.yaml, version: version.trim() || undefined } });
    if (!sv.ok) {
      push({ step: "save-config", ok: false, detail: sv.error });
      setBusy(false);
      toast({ tone: "danger", title: "Deploy failed at save", description: sv.error });
      return;
    }
    setSaveResult(sv.data);
    push({ step: "save-config", ok: true, detail: `${sv.data.path} · parser ${sv.data.parserVersion}${sv.data.backup ? ` · backup ${sv.data.backup.split("/").pop()}` : ""}` });
    // reflect the bumped version in the editor
    update((d) => ({ ...d, yaml: /^parserVersion:/m.test(d.yaml) ? d.yaml.replace(/^parserVersion:.*$/m, `parserVersion: ${sv.data.parserVersion}`) : `${d.yaml.trimEnd()}\nparserVersion: ${sv.data.parserVersion}\n`, meta: { ...d.meta, id } }));
    if (reprocess) {
      const run = await adminFetch<{ enqueued: boolean; job?: { id?: string } }>(`connectors/${encodeURIComponent(id)}/run`, { method: "POST", body: { task: "reprocess" } });
      if (run.ok) push({ step: "run reprocess", ok: true, detail: run.data.job?.id ? `job ${run.data.job.id}` : "enqueued" });
      else push({ step: "run reprocess", ok: false, detail: run.error });
    }
    setBusy(false);
    setReloadToken((t) => t + 1);
    setVersionInput(null);
    onReloadConfigs();
    toast({ tone: out.every((l) => l.ok) ? "ok" : "warn", title: `Deployed ${id} @ ${sv.data.parserVersion}`, description: out.map((l) => `${l.step}: ${l.ok ? "ok" : "failed"}`).join(" · ") });
  };

  return (
    <div className="space-y-3">
      <Panel title="6 · Compare with the saved connector" description="Left = config/connectors/<id>.yaml on disk, right = the YAML in your editor (step 4).">
        <div className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
          <Field label="Connector id">
            <div className="flex gap-2">
              <Input value={id} onChange={(e) => changeId(e.target.value)} mono placeholder="connector id" className="flex-1" />
              <Select value="" onChange={(e) => { if (e.target.value) changeId(e.target.value); }} className="w-[200px]" aria-label="Pick saved connector">
                <option value="">pick saved…</option>
                {configs.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.id} · {c.parserVersion}
                  </option>
                ))}
              </Select>
            </div>
          </Field>
          <Button size="md" variant="secondary" onClick={() => setReloadToken((t) => t + 1)} disabled={!id || savedQ.loading}>
            {savedQ.loading ? <Spinner /> : null} Reload saved
          </Button>
        </div>
        <ErrorNote error={savedQ.error} className="mt-3" />
        {saved && (
          <div className="mt-3">
            <KV
              cols={3}
              items={[
                { k: "Saved parser version", v: <Mono>{savedVersion}</Mono> },
                { k: "Editor parser version", v: <Mono>{draftVersion ?? "(none)"}</Mono> },
                {
                  k: "Listed",
                  v: listed ? (
                    <span>
                      {listed.valid ? (
                        <Badge size="xs" tone="ok">
                          valid
                        </Badge>
                      ) : (
                        <Badge size="xs" tone="danger">
                          invalid
                        </Badge>
                      )}{" "}
                      · enabled {String(listed.enabled)}
                    </span>
                  ) : (
                    "not on disk list"
                  ),
                },
              ]}
            />
            <div className="mt-3">
              <DiffView before={saved.text} after={draft.yaml} context={3} labels={[`${saved.id}.yaml (saved)`, "editor"]} maxHeight={520} />
            </div>
          </div>
        )}
        {!saved && !savedQ.error && !savedQ.loading && !id && <EmptyState compact title="Pick or type a connector id" />}
      </Panel>

      <Panel title="Deploy parser version" description="Bumps parserVersion in the YAML, saves it (backup kept), upserts the connectors row, then enqueues `reprocess` so stored bodies are re-extracted with the new rules — no refetch, no premium credits.">
        <div className="grid gap-3 sm:grid-cols-[180px_1fr_auto] sm:items-end">
          <Field label="New parserVersion" hint={`saved: ${savedVersion}`}>
            <Input value={version} onChange={(e) => setVersionInput(e.target.value)} mono placeholder={bumpVersion(savedVersion)} />
          </Field>
          <Checkbox label="enqueue reprocess run after saving" checked={reprocess} onChange={(e) => setReprocess(e.target.checked)} />
          <Button variant="accent" onClick={() => void deploy()} disabled={busy || !id || !draft.yaml.trim()}>
            {busy ? <Spinner className="text-white" /> : null} Deploy
          </Button>
        </div>
        {validation && !validation.ok && <ErrorNote error={`YAML invalid: ${validation.errors.map((e) => `${e.path}: ${e.message}`).join("; ")}`} className="mt-3" />}
        {log.length > 0 && (
          <ol className="mt-3 space-y-1 text-[12.5px]">
            {log.map((l, i) => (
              <li key={i} className="flex flex-wrap items-center gap-2">
                <Badge size="xs" tone={l.ok ? "ok" : "danger"}>
                  {l.ok ? "ok" : "failed"}
                </Badge>
                <Mono className="text-ink">{l.step}</Mono>
                <span className="text-ink-2">{l.detail}</span>
              </li>
            ))}
            {log.some((l) => l.step === "save-config" && l.ok) && (
              <li className="pt-1 text-[12px] text-ink-3">
                Follow the run on{" "}
                <Link href={`/admin/connectors/${encodeURIComponent(id)}`} className="text-accent underline">
                  the connector page
                </Link>
                . Remember to set <Mono>enabled: true</Mono> and document the source in docs/connectors/{id}.md before scheduling it.
              </li>
            )}
          </ol>
        )}
      </Panel>
    </div>
  );
}