"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { Badge, Button } from "@/components/ui";
import { cn } from "@/components/ui/cn";
import { adminFetch, type SaveConfigResult, type ValidateConfigResult } from "@/lib/admin-api";
import { Code, ErrorNote, Field, Input, Mono, Panel, Select, Spinner, Textarea } from "../primitives";
import { useToast } from "../toast";
import { buildYaml, SOURCE_KINDS_LIST, type DevtoolShared } from "./state";

/** Returns the 1-based line of the first occurrence of a dotted config path in the YAML, best effort. */
function lineForPath(yaml: string, path: string): number | null {
  if (!path) return null;
  const parts = path.split(".");
  const lines = yaml.split("\n");
  let depth = 0;
  let from = 0;
  let found: number | null = null;
  for (const part of parts) {
    let hit = -1;
    for (let i = from; i < lines.length; i++) {
      const l = lines[i]!;
      const indent = l.length - l.trimStart().length;
      if (indent < depth * 2 && i > from && depth > 0) break;
      if (/^\d+$/.test(part)) {
        if (/^\s*-\s/.test(l)) {
          hit = i;
          break;
        }
      } else if (new RegExp(`^\\s*"?${part.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"?\\s*:`).test(l)) {
        hit = i;
        break;
      }
    }
    if (hit < 0) break;
    found = hit + 1;
    from = hit + 1;
    depth++;
  }
  return found;
}

export function StepSave({ s }: { s: DevtoolShared }) {
  const { draft, update, validation, setValidation, saveResult, setSaveResult } = s;
  const [busy, setBusy] = useState<"validate" | "save" | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [view, setView] = useState<"edit" | "highlight">("edit");
  const toast = useToast();
  const meta = draft.meta;
  const ta = useRef<HTMLTextAreaElement>(null);

  // first entry: generate the template from the steps when the editor is empty
  useEffect(() => {
    if (!draft.yaml.trim()) update((d) => ({ ...d, yaml: buildYaml(d), yamlDirty: false }));
  }, [draft.yaml, update]);

  const setMeta = (patch: Partial<typeof meta>) => update({ meta: { ...meta, ...patch } });
  const regenerate = () => {
    if (draft.yamlDirty && !window.confirm("Replace the hand-edited YAML with a template regenerated from steps 1–3?")) return;
    update((d) => ({ ...d, yaml: buildYaml(d), yamlDirty: false }));
    setValidation(null);
    setSaveResult(null);
  };

  const validate = async (): Promise<ValidateConfigResult | null> => {
    setBusy("validate");
    setError(null);
    const r = await adminFetch<ValidateConfigResult>("devtool/validate-config", { method: "POST", body: { yaml: draft.yaml } });
    setBusy(null);
    if (!r.ok) {
      setError(r.error);
      return null;
    }
    setValidation(r.data);
    if (r.data.ok) {
      const cfg = r.data.config;
      if (typeof cfg.id === "string" && cfg.id !== meta.id) setMeta({ id: cfg.id });
      toast({ tone: r.data.warnings.length ? "warn" : "ok", title: "YAML is valid", description: r.data.warnings.length ? `${r.data.warnings.length} warning(s)` : `connector ${String(cfg.id)} · parser ${String(cfg.parserVersion)}` });
    } else toast({ tone: "danger", title: `${r.data.errors.length} schema error(s)` });
    return r.data;
  };

  const save = async () => {
    const v = await validate();
    if (!v || !v.ok) return;
    const id = String(v.config.id);
    if (id.startsWith("_") && !id.startsWith("_devtool")) return setError("ids starting with _ are reserved (except _devtool-* test ids)");
    if (!window.confirm(`Write config/connectors/${id}.yaml (previous file backed up) and upsert the connectors row?`)) return;
    setBusy("save");
    const r = await adminFetch<SaveConfigResult>("devtool/save-config", { method: "POST", body: { id, yaml: draft.yaml } });
    setBusy(null);
    if (!r.ok) {
      setError(r.error);
      toast({ tone: "danger", title: "Save failed", description: r.error });
      return;
    }
    setSaveResult(r.data);
    setMeta({ id });
    toast({ tone: "ok", title: `Saved ${id}.yaml`, description: `parser ${r.data.parserVersion}${r.data.backup ? " · backup kept" : ""}${r.data.enabled ? "" : " · enabled: false"}` });
  };

  const errorLines = useMemo(() => {
    const errs = validation && !validation.ok ? validation.errors : [];
    return new Set(errs.map((e) => lineForPath(draft.yaml, e.path)).filter((n): n is number => n != null));
  }, [validation, draft.yaml]);
  const jumpTo = (line: number | null) => {
    if (!line || !ta.current) return;
    setView("edit");
    const el = ta.current;
    const idx = draft.yaml.split("\n").slice(0, line - 1).join("\n").length + (line > 1 ? 1 : 0);
    el.focus();
    el.setSelectionRange(idx, idx + (draft.yaml.split("\n")[line - 1]?.length ?? 0));
    const lh = 18.2;
    el.scrollTop = Math.max(0, (line - 4) * lh);
  };

  return (
    <div className="space-y-3">
      <Panel title="4 · Connector metadata" description="Used by the template generator; the YAML below is what gets saved. License and attribution are recorded on the source (legal crawling rule).">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <Field label="Connector id" hint="lowercase, digits, dashes — file name">
            <Input value={meta.id} onChange={(e) => setMeta({ id: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, "-") })} mono placeholder="digitalrealty" />
          </Field>
          <Field label="Source name">
            <Input value={meta.name} onChange={(e) => setMeta({ name: e.target.value })} placeholder="Digital Realty" />
          </Field>
          <Field label="Domain">
            <Input value={meta.domain} onChange={(e) => setMeta({ domain: e.target.value })} mono placeholder="www.digitalrealty.com" />
          </Field>
          <Field label="Source kind">
            <Select value={meta.kind} onChange={(e) => setMeta({ kind: e.target.value })}>
              {SOURCE_KINDS_LIST.map((k) => (
                <option key={k} value={k}>
                  {k}
                </option>
              ))}
            </Select>
          </Field>
          <Field label="License" className="sm:col-span-2">
            <Input value={meta.license} onChange={(e) => setMeta({ license: e.target.value })} placeholder="Publicly accessible operator pages; factual data only; © …" />
          </Field>
          <Field label="Attribution">
            <Input value={meta.attribution} onChange={(e) => setMeta({ attribution: e.target.value })} placeholder="Digital Realty" />
          </Field>
          <Field label="Homepage">
            <Input value={meta.homepage} onChange={(e) => setMeta({ homepage: e.target.value })} mono placeholder="https://…" />
          </Field>
          <Field label="Schedule group">
            <Input value={meta.scheduleGroup} onChange={(e) => setMeta({ scheduleGroup: e.target.value })} mono placeholder="facility_pages" />
          </Field>
          <Field label="Interval">
            <Input value={meta.scheduleInterval} onChange={(e) => setMeta({ scheduleInterval: e.target.value })} mono placeholder="weekly" list="dci-intervals" />
          </Field>
          <Field label="Requests / min">
            <Input value={meta.rpm} onChange={(e) => setMeta({ rpm: e.target.value })} mono inputMode="numeric" />
          </Field>
          <Field label="Max credits / run">
            <Input value={meta.maxCreditsPerRun} onChange={(e) => setMeta({ maxCreditsPerRun: e.target.value })} mono inputMode="numeric" />
          </Field>
        </div>
        <datalist id="dci-intervals">
          {["hourly", "6h", "12h", "daily", "weekly", "biweekly", "monthly", "quarterly", "never"].map((v) => (
            <option key={v} value={v} />
          ))}
        </datalist>
      </Panel>

      <Panel
        title="Connector YAML"
        description={draft.yamlDirty ? "Edited by hand — regenerate to rebuild from steps 1–3 (your edits would be lost)." : "Generated from steps 1–3. Edit freely; validate before saving."}
        padded={false}
        aside={
          <div className="flex flex-wrap items-center gap-1.5">
            <Button size="xs" variant={view === "edit" ? "primary" : "ghost"} onClick={() => setView("edit")}>
              Edit
            </Button>
            <Button size="xs" variant={view === "highlight" ? "primary" : "ghost"} onClick={() => setView("highlight")}>
              Highlight
            </Button>
            <Button size="xs" variant="ghost" onClick={regenerate}>
              Regenerate from steps
            </Button>
            <Button size="sm" variant="secondary" onClick={() => void validate()} disabled={busy !== null}>
              {busy === "validate" ? <Spinner /> : null} Validate
            </Button>
            <Button size="sm" variant="accent" onClick={() => void save()} disabled={busy !== null || !draft.yaml.trim()}>
              {busy === "save" ? <Spinner className="text-white" /> : null} Save connector
            </Button>
          </div>
        }
      >
        {view === "edit" ? (
          <Textarea ref={ta} rows={28} mono value={draft.yaml} onChange={(e) => { update({ yaml: e.target.value, yamlDirty: true }); setSaveResult(null); }} className="rounded-none border-0 leading-[1.4] focus:border-0" spellCheck={false} />
        ) : (
          <Code text={draft.yaml} lang="yaml" maxHeight={620} />
        )}
        <ErrorNote error={error} className="m-3" />
        {validation && (
          <div className="border-t border-hair px-3 py-2">
            {validation.ok ? (
              <div className="space-y-1 text-[12.5px]">
                <div className="flex flex-wrap items-center gap-2">
                  <Badge tone="ok" size="sm">
                    valid
                  </Badge>
                  <Mono>
                    {String(validation.config.id)} · {String(validation.config.kind)} · parser {String(validation.config.parserVersion)} · {Object.keys((validation.config.extractors as object) ?? {}).length} extractor(s) · enabled {String(validation.config.enabled)}
                  </Mono>
                </div>
                {validation.warnings.map((w, i) => (
                  <div key={i} className="text-warn">
                    ⚠ {w}
                  </div>
                ))}
              </div>
            ) : (
              <ul className="space-y-1 text-[12.5px]">
                {validation.errors.map((e, i) => {
                  const line = lineForPath(draft.yaml, e.path);
                  return (
                    <li key={i} className="flex flex-wrap items-center gap-2">
                      <Badge tone="danger" size="xs">
                        error
                      </Badge>
                      <Mono className="text-ink">{e.path || "(root)"}</Mono>
                      <span className="text-ink-2">{e.message}</span>
                      {line && (
                        <button type="button" className="text-[11.5px] text-accent hover:underline" onClick={() => jumpTo(line)}>
                          line {line}
                        </button>
                      )}
                    </li>
                  );
                })}
                {errorLines.size > 0 && <li className="text-[11.5px] text-ink-4">Lines referenced: {[...errorLines].sort((a, b) => a - b).join(", ")}</li>}
              </ul>
            )}
          </div>
        )}
        {saveResult && (
          <div className={cn("border-t border-hair px-3 py-2 text-[12.5px]", "bg-ok/5")}>
            Saved <Mono className="text-ink">{saveResult.path}</Mono>
            {saveResult.backup && (
              <>
                {" "}
                · backup <Mono>{saveResult.backup}</Mono>
              </>
            )}{" "}
            · parser <Mono>{saveResult.parserVersion}</Mono> · enabled <Mono>{String(saveResult.enabled)}</Mono>. The connectors row was upserted; the worker picks the file up on its next config sync.
          </div>
        )}
      </Panel>
    </div>
  );
}