"use client";
import { DISCIPLINE_LABELS, RESEARCH_MODE_LABELS } from "@autoscholar/schemas";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { useToast } from "@/components/Toast";
import { type ApiError, api } from "@/lib/client/api";

type Validation = {
  ok: boolean;
  sha256: string;
  byteSize: number;
  errors: string[];
  warnings: string[];
  headings: string[];
  sections: { present: string[]; missing: string[] };
  frontmatter: Record<string, unknown> | null;
};
type Props = {
  projects: Array<{ id: string; title: string; discipline: string }>;
  templates: Array<{ slug: string; name: string; mode: string; content: string }>;
  initialTemplate?: string;
  initialProject?: string;
  defaults: { defaultBudget: number; defaultRuntime: number; model: string };
};

const MAX = 256 * 1024;
const HUMAN_REVIEW = new Set(["medicine", "biology", "law", "psychology"]);

export function NewResearchForm({ projects, templates, initialTemplate, initialProject, defaults }: Props) {
  const router = useRouter();
  const toast = useToast();
  const tpl = templates.find((t) => t.slug === initialTemplate);
  const [content, setContent] = useState(tpl?.content ?? "");
  const [filename, setFilename] = useState("CLAUDE.md");
  const [projectId, setProjectId] = useState(initialProject ?? "");
  const [newProject, setNewProject] = useState({ title: "", discipline: "economics", description: "" });
  const [meta, setMeta] = useState({
    title: "",
    discipline: "economics",
    researchMode: tpl?.mode ?? "empirical",
    secondaryModes: [] as string[],
    computeProfile: "standard",
    maxBudgetUsd: defaults.defaultBudget,
    maxRuntimeMinutes: defaults.defaultRuntime,
    maxAttempts: 2,
    autoPublish: false,
  });
  const [uploaded, setUploaded] = useState<{
    id: string;
    version: number;
    validation: Validation;
    projectId: string;
  } | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [idem, setIdem] = useState("");
  useEffect(() => {
    const k = sessionStorage.getItem("as-launch-idem") ?? crypto.randomUUID();
    sessionStorage.setItem("as-launch-idem", k);
    setIdem(k);
  }, []);
  useEffect(() => {
    const p = projects.find((x) => x.id === projectId);
    if (p) setMeta((m) => ({ ...m, discipline: p.discipline, title: m.title || p.title }));
  }, [projectId, projects]);
  const bytes = useMemo(() => new TextEncoder().encode(content).length, [content]);
  const fm = useMemo(() => {
    const m = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
    const out: Record<string, string> = {};
    if (m)
      for (const line of (m[1] ?? "").split("\n")) {
        const kv = line.match(/^(\w+):\s*(.+)$/);
        if (kv) out[kv[1]!] = kv[2]!.trim();
      }
    return out;
  }, [content]);
  useEffect(() => {
    if (fm.mode && fm.mode in RESEARCH_MODE_LABELS) setMeta((m) => ({ ...m, researchMode: fm.mode! }));
    if (fm.title) setMeta((m) => ({ ...m, title: m.title || fm.title! }));
    if (fm.discipline && fm.discipline in DISCIPLINE_LABELS)
      setMeta((m) => ({ ...m, discipline: fm.discipline! }));
  }, [fm.mode, fm.title, fm.discipline]);

  async function onFile(f: File | null) {
    if (!f) return;
    if (!/\.(md|txt)$/i.test(f.name)) return toast.push("error", "Only .md or .txt files are accepted.");
    if (f.size > MAX) return toast.push("error", `File exceeds ${MAX / 1024} KB.`);
    const text = await f.text();
    setFilename(f.name);
    setContent(text);
    setUploaded(null);
  }
  async function ensureProject(): Promise<string> {
    if (projectId) return projectId;
    const r = await api<{ project: { id: string } }>("/api/admin/projects", {
      json: {
        title: newProject.title || meta.title,
        discipline: newProject.discipline,
        description: newProject.description,
      },
    });
    return r.project.id;
  }
  async function validateAndFreeze() {
    setBusy("validate");
    try {
      const pid = await ensureProject();
      setProjectId(pid);
      const r = await api<{ id: string; version: number; validation: Validation; deduplicated: boolean }>(
        `/api/admin/projects/${pid}/instructions`,
        { json: { filename, content } },
      );
      setUploaded({ id: r.id, version: r.version, validation: r.validation, projectId: pid });
      toast.push(
        "success",
        r.deduplicated
          ? `Identical content already stored as v${r.version}.`
          : `Frozen as instruction v${r.version} (${r.validation.sha256.slice(0, 12)}).`,
      );
    } catch (e) {
      const ae = e as ApiError;
      toast.push(
        "error",
        ae.message +
          (Array.isArray((ae.details as { errors?: string[] })?.errors)
            ? `: ${(ae.details as { errors: string[] }).errors.join("; ")}`
            : ""),
      );
    } finally {
      setBusy(null);
    }
  }
  async function launch() {
    if (!uploaded) return;
    setBusy("launch");
    try {
      const r = await api<{ run: { id: string }; created: boolean }>("/api/admin/runs", {
        json: {
          projectId: uploaded.projectId,
          instructionVersionId: uploaded.id,
          idempotencyKey: idem,
          title: meta.title,
          researchMode: meta.researchMode,
          secondaryModes: meta.secondaryModes,
          discipline: meta.discipline,
          computeProfile: meta.computeProfile,
          maxBudgetUsd: meta.maxBudgetUsd,
          maxRuntimeMinutes: meta.maxRuntimeMinutes,
          maxAttempts: meta.maxAttempts,
          autoPublish: meta.autoPublish,
        },
      });
      sessionStorage.removeItem("as-launch-idem");
      toast.push(
        "success",
        r.created ? "Run launched." : "This launch was already recorded; opening the existing run.",
      );
      router.push(`/admin/runs/${r.run.id}`);
    } catch (e) {
      toast.push("error", (e as ApiError).message);
      setBusy(null);
    }
  }
  const humanReview = HUMAN_REVIEW.has(meta.discipline) || meta.researchMode === "experimental";
  const v = uploaded?.validation;
  return (
    <div className="grid gap-6 lg:grid-cols-12">
      <section className="space-y-4 lg:col-span-7">
        <div className="surface p-4">
          <h2 className="title-3">1. Research instruction (CLAUDE.md)</h2>
          <div className="mt-3 flex flex-wrap items-center gap-3 text-sm">
            <label className="btn cursor-pointer">
              Upload .md / .txt
              <input
                type="file"
                accept=".md,.txt,text/markdown,text/plain"
                className="sr-only"
                onChange={(e) => onFile(e.target.files?.[0] ?? null)}
              />
            </label>
            <label className="flex items-center gap-2">
              Template{" "}
              <select
                className="input"
                value={initialTemplate ?? ""}
                onChange={(e) => {
                  const t = templates.find((x) => x.slug === e.target.value);
                  if (t) {
                    setContent(t.content);
                    setMeta((m) => ({ ...m, researchMode: t.mode }));
                    setUploaded(null);
                  }
                }}
              >
                <option value="">—</option>
                {templates.map((t) => (
                  <option key={t.slug} value={t.slug}>
                    {t.name}
                  </option>
                ))}
              </select>
            </label>
            <span
              className={`subtle font-mono text-xs ${bytes > MAX ? "text-[var(--color-danger-500)]" : ""}`}
            >
              {bytes.toLocaleString()} / {MAX.toLocaleString()} bytes
            </span>
          </div>
          <label htmlFor="content" className="label mt-3 mb-1">
            Paste or edit
          </label>
          <textarea
            id="content"
            value={content}
            onChange={(e) => {
              setContent(e.target.value);
              setUploaded(null);
            }}
            rows={18}
            spellCheck={false}
            className="input font-mono text-xs leading-relaxed"
            placeholder="# Research objective…"
          />
          <p className="subtle mt-1 text-xs">
            Editing after freezing creates a new immutable version. Exact bytes and a SHA-256 digest are
            stored.
          </p>
        </div>
        <div className="surface p-4">
          <h2 className="title-3">2. Project</h2>
          <div className="mt-3 grid gap-3 sm:grid-cols-2">
            <label className="text-sm">
              Existing project
              <select className="input mt-1" value={projectId} onChange={(e) => setProjectId(e.target.value)}>
                <option value="">Create a new project</option>
                {projects.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.title}
                  </option>
                ))}
              </select>
            </label>
            {!projectId && (
              <>
                <label className="text-sm">
                  New project title
                  <input
                    className="input mt-1"
                    value={newProject.title}
                    onChange={(e) => setNewProject({ ...newProject, title: e.target.value })}
                    placeholder={meta.title || "Project title"}
                  />
                </label>
                <label className="text-sm">
                  Project discipline
                  <select
                    className="input mt-1"
                    value={newProject.discipline}
                    onChange={(e) => setNewProject({ ...newProject, discipline: e.target.value })}
                  >
                    {Object.entries(DISCIPLINE_LABELS).map(([k, l]) => (
                      <option key={k} value={k}>
                        {l}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="text-sm sm:col-span-2">
                  Description
                  <input
                    className="input mt-1"
                    value={newProject.description}
                    onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}
                  />
                </label>
              </>
            )}
          </div>
          <button
            type="button"
            className="btn mt-4"
            disabled={!content.trim() || bytes > MAX || busy !== null}
            onClick={validateAndFreeze}
          >
            {busy === "validate" ? "Validating…" : "Validate & freeze instruction"}
          </button>
        </div>
        {v && (
          <div className="surface p-4" aria-live="polite">
            <h2 className="title-3">Preflight — instruction v{uploaded?.version}</h2>
            <p className="font-mono text-xs break-all">
              sha256 {v.sha256} · {v.byteSize} bytes
            </p>
            {v.warnings.length > 0 ? (
              <ul className="mt-2 list-disc pl-5 text-sm" style={{ color: "var(--color-warn-500)" }}>
                {v.warnings.map((w) => (
                  <li key={w}>{w}</li>
                ))}
              </ul>
            ) : (
              <p className="mt-2 text-sm" style={{ color: "var(--color-ok-500)" }}>
                No warnings.
              </p>
            )}
            <details className="mt-2 text-sm">
              <summary className="cursor-pointer">
                Headings ({v.headings.length}) · sections present {v.sections.present.length}/12
              </summary>
              <ul className="muted mt-1 list-disc pl-5 text-xs">
                {v.headings.map((h) => (
                  <li key={h}>{h}</li>
                ))}
              </ul>
            </details>
          </div>
        )}
      </section>
      <section className="space-y-4 lg:col-span-5">
        <div className="surface p-4">
          <h2 className="title-3">3. Run configuration</h2>
          <div className="mt-3 grid gap-3">
            <label className="text-sm">
              Working title
              <input
                className="input mt-1"
                value={meta.title}
                onChange={(e) => setMeta({ ...meta, title: e.target.value })}
                required
                minLength={3}
              />
            </label>
            <div className="grid grid-cols-2 gap-3">
              <label className="text-sm">
                Discipline
                <select
                  className="input mt-1"
                  value={meta.discipline}
                  onChange={(e) => setMeta({ ...meta, discipline: e.target.value })}
                >
                  {Object.entries(DISCIPLINE_LABELS).map(([k, l]) => (
                    <option key={k} value={k}>
                      {l}
                    </option>
                  ))}
                </select>
              </label>
              <label className="text-sm">
                Primary mode
                <select
                  className="input mt-1"
                  value={meta.researchMode}
                  onChange={(e) => setMeta({ ...meta, researchMode: e.target.value })}
                >
                  {Object.entries(RESEARCH_MODE_LABELS).map(([k, l]) => (
                    <option key={k} value={k}>
                      {l}
                    </option>
                  ))}
                </select>
              </label>
            </div>
            <fieldset className="text-sm">
              <legend className="label mb-1">Secondary modes</legend>
              <div className="flex flex-wrap gap-3">
                {Object.entries(RESEARCH_MODE_LABELS)
                  .filter(([k]) => k !== meta.researchMode)
                  .map(([k, l]) => (
                    <label key={k} className="flex items-center gap-1">
                      <input
                        type="checkbox"
                        checked={meta.secondaryModes.includes(k)}
                        onChange={(e) =>
                          setMeta({
                            ...meta,
                            secondaryModes: e.target.checked
                              ? [...meta.secondaryModes, k].slice(0, 3)
                              : meta.secondaryModes.filter((x) => x !== k),
                          })
                        }
                      />
                      {l}
                    </label>
                  ))}
              </div>
            </fieldset>
            <div className="grid grid-cols-2 gap-3">
              <label className="text-sm">
                Compute profile
                <select
                  className="input mt-1"
                  value={meta.computeProfile}
                  onChange={(e) => setMeta({ ...meta, computeProfile: e.target.value })}
                >
                  <option value="standard">standard</option>
                  <option value="compute-heavy">compute-heavy</option>
                  <option value="memory-heavy">memory-heavy</option>
                </select>
              </label>
              <label className="text-sm">
                Max attempts
                <input
                  type="number"
                  min={1}
                  max={5}
                  className="input mt-1"
                  value={meta.maxAttempts}
                  onChange={(e) => setMeta({ ...meta, maxAttempts: Number(e.target.value) })}
                />
              </label>
              <label className="text-sm">
                Budget cap (USD)
                <input
                  type="number"
                  min={1}
                  max={2000}
                  step={1}
                  className="input mt-1"
                  value={meta.maxBudgetUsd}
                  onChange={(e) => setMeta({ ...meta, maxBudgetUsd: Number(e.target.value) })}
                />
              </label>
              <label className="text-sm">
                Runtime cap (minutes)
                <input
                  type="number"
                  min={10}
                  max={1440}
                  className="input mt-1"
                  value={meta.maxRuntimeMinutes}
                  onChange={(e) => setMeta({ ...meta, maxRuntimeMinutes: Number(e.target.value) })}
                />
              </label>
            </div>
            <label className="flex items-start gap-2 text-sm">
              <input
                type="checkbox"
                checked={meta.autoPublish}
                onChange={(e) => setMeta({ ...meta, autoPublish: e.target.checked })}
                className="mt-1"
              />
              <span>
                Publish automatically when every hard gate passes
                {humanReview && (
                  <span className="block text-xs" style={{ color: "var(--color-warn-500)" }}>
                    This discipline/mode requires human approval; the run will stop at awaiting approval
                    regardless.
                  </span>
                )}
              </span>
            </label>
          </div>
        </div>
        <div className="surface p-4">
          <h2 className="title-3">4. Launch</h2>
          <dl className="muted mt-2 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-xs">
            <dt>Model</dt>
            <dd className="font-mono">{defaults.model}</dd>
            <dt>Instruction</dt>
            <dd>
              {uploaded
                ? `v${uploaded.version} · ${uploaded.validation.sha256.slice(0, 12)}`
                : "not frozen yet"}
            </dd>
            <dt>Idempotency key</dt>
            <dd className="font-mono break-all">{idem}</dd>
          </dl>
          <button
            type="button"
            className="btn btn-primary mt-4 w-full"
            disabled={!uploaded || !meta.title || meta.title.length < 3 || busy !== null}
            onClick={launch}
          >
            {busy === "launch" ? "Launching…" : "Launch on MacLustr"}
          </button>
          <p className="subtle mt-2 text-xs">
            Double submission and page refresh cannot duplicate a run: the idempotency key is bound to this
            launch.
          </p>
        </div>
      </section>
    </div>
  );
}