"use client";

import { useEffect, useRef, useState } from "react";

import type { CatalogEntry, TopologyGraph } from "@/lib/api/topology";

/** A journaled step — the same shape whether mid-run (checkpoint) or final. */
interface StepRecord {
  node_id: string;
  role: string;
  phase: string;
  output: string;
  tokens: number;
  gated: unknown[];
}
interface RunSummary {
  id: string;
  task: string;
  status: string;
  kind: string;
  created_at: string;
}

const STATUS_STYLE: Record<string, string> = {
  queued: "bg-muted text-muted-foreground",
  running: "bg-coral/15 text-coral",
  completed: "bg-emerald-500/15 text-emerald-500",
  failed: "bg-red-500/15 text-red-500",
  cancelled: "bg-muted text-muted-foreground",
};

/** Run ONE topology as a durable job: enqueue, then stream live turn-by-turn
 *  progress over SSE (the server checkpoints each step) until it completes. This
 *  is the surface for long-horizon runs — the work happens server-side, not in
 *  the request, so it survives navigation and restarts. */
export function TopologyRun({ catalog }: { catalog: CatalogEntry[] }) {
  const [task, setTask] = useState("Draft a go-to-market launch plan in 3 bullet points.");
  const [kind, setKind] = useState(catalog[0]?.kind ?? "pipeline");
  const [roles, setRoles] = useState("researcher, analyst, writer");
  const [steps, setSteps] = useState<StepRecord[]>([]);
  const [status, setStatus] = useState<string | null>(null);
  const [finalOutput, setFinalOutput] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [runs, setRuns] = useState<RunSummary[]>([]);
  const [runId, setRunId] = useState<string | null>(null);
  const esRef = useRef<EventSource | null>(null);

  async function loadRuns() {
    try {
      const r = await fetch("/api/topology-runs");
      if (r.ok) setRuns((await r.json()) as RunSummary[]);
    } catch {
      /* best-effort */
    }
  }

  useEffect(() => {
    // Initial recent-runs load; setRuns runs after a fetch await (not a
    // synchronous cascading render), so the rule is a false positive here.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void loadRuns();
    return () => {
      esRef.current?.close();
    };
  }, []);

  /** Stream live progress over SSE (the same-origin proxy adds auth). The
   *  browser auto-sends Last-Event-ID on reconnect so the server resumes. */
  function stream(id: string) {
    esRef.current?.close();
    setRunId(id);
    const es = new EventSource(`/api/topology-runs/${id}/events`);
    esRef.current = es;
    setStatus("running");
    es.addEventListener("step", (e) => {
      try {
        setSteps((s) => [...s, JSON.parse((e as MessageEvent).data) as StepRecord]);
      } catch {
        /* ignore malformed frame */
      }
    });
    es.addEventListener("done", (e) => {
      try {
        const d = JSON.parse((e as MessageEvent).data) as {
          status: string;
          error: string | null;
          final_output: string | null;
        };
        setStatus(d.status);
        if (d.final_output) setFinalOutput(d.final_output);
        if (d.error) setError(d.error);
      } catch {
        /* ignore */
      }
      es.close();
      esRef.current = null;
      setBusy(false);
      void loadRuns();
    });
    es.onerror = () => {
      // Transient or terminal close; the run continues server-side regardless.
      es.close();
      esRef.current = null;
      setBusy(false);
    };
  }

  async function run() {
    setBusy(true);
    setError(null);
    setSteps([]);
    setFinalOutput(null);
    setStatus("queued");
    esRef.current?.close();
    try {
      const roleList = roles
        .split(",")
        .map((r) => r.trim())
        .filter(Boolean);
      if (roleList.length === 0) throw new Error("Add at least one role");
      const b = await fetch("/api/topologies/build", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ kind, roles: roleList }),
      });
      if (!b.ok) throw new Error(`Build failed (${b.status})`);
      const graph = (await b.json()) as TopologyGraph;
      const res = await fetch("/api/topologies/run", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ task, graph }),
      });
      if (res.status !== 202) throw new Error(`Enqueue failed (${res.status})`);
      const { run_id } = (await res.json()) as { run_id: string };
      void loadRuns();
      stream(run_id);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Run failed");
      setBusy(false);
    }
  }

  /** Request cancellation; the SSE `done` event reports the cancelled status. */
  async function cancel() {
    if (!runId) return;
    try {
      await fetch(`/api/topology-runs/${runId}/cancel`, { method: "POST" });
    } catch {
      /* the worker also stops on the next status read */
    }
  }

  /** Deep-link into a past/running run: the SSE endpoint replays its steps from
   *  the checkpoint, then tails live if it's still running. */
  function openRun(id: string) {
    setError(null);
    setSteps([]);
    setFinalOutput(null);
    setStatus("running");
    setBusy(true);
    stream(id);
  }

  const started = status !== null;

  return (
    <div className="flex flex-col gap-4">
      <label className="text-xs text-muted-foreground">
        Task
        <input
          value={task}
          onChange={(e) => setTask(e.target.value)}
          className="mt-1 w-full rounded-lg border border-border bg-transparent px-3 py-2 text-sm text-foreground"
        />
      </label>
      <div className="flex gap-3">
        <label className="flex-1 text-xs text-muted-foreground">
          Topology
          <select
            value={kind}
            onChange={(e) => setKind(e.target.value)}
            className="mt-1 w-full rounded-lg border border-border bg-transparent px-3 py-2 text-sm text-foreground"
          >
            {catalog.map((c) => (
              <option key={c.kind} value={c.kind}>
                {c.name}
              </option>
            ))}
          </select>
        </label>
        <label className="flex-[2] text-xs text-muted-foreground">
          Roles (comma-separated)
          <input
            value={roles}
            onChange={(e) => setRoles(e.target.value)}
            className="mt-1 w-full rounded-lg border border-border bg-transparent px-3 py-2 text-sm text-foreground"
          />
        </label>
      </div>
      <div className="flex gap-2">
        <button
          type="button"
          onClick={run}
          disabled={busy}
          className="rounded-lg bg-coral px-4 py-2 text-sm font-medium text-white disabled:opacity-50"
        >
          {busy ? "Running…" : "Run topology"}
        </button>
        {busy ? (
          <button
            type="button"
            onClick={cancel}
            className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
          >
            Cancel
          </button>
        ) : null}
      </div>

      {error ? <p className="text-sm text-red-500">{error}</p> : null}

      {started ? (
        <div className="flex flex-col gap-3 rounded-lg border border-border p-4">
          <div className="flex items-center gap-2">
            <span
              className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                STATUS_STYLE[status ?? ""] ?? "bg-muted text-muted-foreground"
              }`}
            >
              {status}
            </span>
            <span className="text-xs text-muted-foreground">
              {steps.length} step{steps.length === 1 ? "" : "s"}
            </span>
          </div>

          <ol className="flex flex-col gap-2">
            {steps.map((s, i) => (
              <li key={`${s.node_id}-${i}`} className="rounded-md border border-border/60 p-3">
                <div className="mb-1 flex items-center gap-2 text-xs text-muted-foreground">
                  <span className="font-medium text-foreground">{s.role}</span>
                  <span>· {s.phase}</span>
                  <span>· {s.node_id}</span>
                </div>
                <p className="whitespace-pre-wrap text-sm text-foreground">{s.output}</p>
              </li>
            ))}
          </ol>

          {finalOutput ? (
            <div className="rounded-md bg-muted/40 p-3">
              <p className="mb-1 text-xs font-medium text-muted-foreground">Final output</p>
              <p className="whitespace-pre-wrap text-sm text-foreground">{finalOutput}</p>
            </div>
          ) : null}
        </div>
      ) : null}

      {runs.length > 0 ? (
        <div className="mt-2">
          <p className="mb-2 text-xs font-medium text-muted-foreground">Recent runs</p>
          <ul className="flex flex-col gap-1">
            {runs.slice(0, 8).map((r) => (
              <li key={r.id}>
                <button
                  type="button"
                  onClick={() => openRun(r.id)}
                  className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-xs text-muted-foreground hover:bg-muted/40"
                >
                  <span
                    className={`rounded-full px-2 py-0.5 ${
                      STATUS_STYLE[r.status] ?? "bg-muted text-muted-foreground"
                    }`}
                  >
                    {r.status}
                  </span>
                  <span className="text-foreground">{r.kind}</span>
                  <span className="truncate">{r.task}</span>
                </button>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
}