"use client";

// MissionCanvas — unified detail view for the missions tier. Tabs:
//   Overview  · title, description, template kind, team, repo, schedule
//   Phases    · ordered timeline of phase kinds + statuses
//   Tasks     · INT-XX cards (Slice 5 fills these; Slice 2 renders shell)
//   Artifacts · MD/PDF/benchmark/security files with PDF-render status
//
// This replaces ResearchCanvas + LoopsCanvas after Slice 9's cutover.

import React, { useCallback, useEffect, useMemo, useState } from "react";
import { FileText, Pencil, Play, Plus, RefreshCw, Sparkles, Trash2 } from "lucide-react";

import {
  deleteMission,
  getMission,
  refineMission,
  setMissionDescription,
  setMissionStatus,
  triggerBenchmark,
  triggerSecurityScan,
  updateMission,
  type MissionDetail,
  type MissionStatus,
  type PhaseKind,
  type PhaseStatus,
  type RefineResult,
  type TaskStatus,
  type TemplateKind,
} from "@/lib/api/missions";
import { MarkdownBlock } from "./MarkdownBlock";
import { MissionWizard } from "./MissionWizard";

const mono =
  "ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace";

const STATUS_COLOR: Record<MissionStatus, string> = {
  draft: "#8a8a92",
  running: "#5ec8d8",
  completed: "#5fd08a",
  failed: "#ff8a7a",
  cancelled: "#6a6a72",
};
const PHASE_STATUS_COLOR: Record<PhaseStatus, string> = {
  pending: "#6a6a72",
  running: "#5ec8d8",
  completed: "#5fd08a",
  failed: "#ff8a7a",
  skipped: "#8a8a92",
};
const TASK_STATUS_COLOR: Record<TaskStatus, string> = {
  created: "#8a8a92",
  working: "#5ec8d8",
  validating: "#ffb44a",
  complete: "#5fd08a",
  failed: "#ff8a7a",
};
const PHASE_LABEL: Record<PhaseKind, string> = {
  research: "Research",
  coding: "Coding",
  benchmark: "Benchmark",
  security_scan: "Security scan",
};
const TEMPLATE_LABEL: Record<TemplateKind, string> = {
  research_only: "Research only",
  research_and_code: "Research + Coding Loop",
  security_hardening: "Security Hardening",
  refactor: "Refactor",
  benchmark: "Benchmark",
  custom: "Custom",
};

type Tab = "overview" | "phases" | "tasks" | "artifacts" | "benchmarks";

export function MissionCanvas({
  selectedId,
  refreshKey,
  onChanged,
  onSelect,
  onDeleted,
}: {
  selectedId: string | null;
  refreshKey: number;
  onChanged: () => void;
  onSelect?: (id: string) => void;
  onDeleted?: () => void;
}) {
  const [mission, setMission] = useState<MissionDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [tab, setTab] = useState<Tab>("overview");
  const [launching, setLaunching] = useState(false);
  const [refining, setRefining] = useState(false);
  const [refineDiff, setRefineDiff] = useState<RefineResult | null>(null);
  const [accepting, setAccepting] = useState(false);
  const [phaseBusy, setPhaseBusy] = useState<string | null>(null);
  const [pdfPreviewId, setPdfPreviewId] = useState<string | null>(null);
  const [wizardOpen, setWizardOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [deleteBusy, setDeleteBusy] = useState(false);

  const load = useCallback(async () => {
    if (!selectedId) {
      setMission(null);
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const m = await getMission(selectedId);
      setMission(m);
    } catch (e) {
      setError(e instanceof Error ? e.message : "load failed");
    } finally {
      setLoading(false);
    }
  }, [selectedId]);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    void load();
  }, [load, refreshKey]);

  const refine = useCallback(async () => {
    if (!mission) return;
    setRefining(true);
    setError(null);
    try {
      const result = await refineMission(mission.id);
      setRefineDiff(result);
    } catch (e) {
      setError(e instanceof Error ? e.message : "refine failed");
    } finally {
      setRefining(false);
    }
  }, [mission]);

  const acceptRefine = useCallback(async () => {
    if (!mission || !refineDiff) return;
    setAccepting(true);
    setError(null);
    try {
      await setMissionDescription(mission.id, refineDiff.refined);
      setRefineDiff(null);
      onChanged();
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "accept failed");
    } finally {
      setAccepting(false);
    }
  }, [mission, refineDiff, onChanged, load]);

  const undoRefine = useCallback(async () => {
    if (!mission || !refineDiff) return;
    setAccepting(true);
    setError(null);
    try {
      await setMissionDescription(mission.id, refineDiff.original);
      setRefineDiff(null);
      onChanged();
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "undo failed");
    } finally {
      setAccepting(false);
    }
  }, [mission, refineDiff, onChanged, load]);

  const runSecurityScan = useCallback(
    async (phaseId: string) => {
      if (!mission) return;
      setPhaseBusy(`sec:${phaseId}`);
      setError(null);
      try {
        await triggerSecurityScan(mission.id, phaseId);
        await load();
      } catch (e) {
        setError(e instanceof Error ? e.message : "security scan failed");
      } finally {
        setPhaseBusy(null);
      }
    },
    [mission, load],
  );

  const runBenchmark = useCallback(
    async (phaseId: string, slot: "baseline" | "after") => {
      if (!mission) return;
      setPhaseBusy(`bench:${phaseId}:${slot}`);
      setError(null);
      try {
        await triggerBenchmark(
          mission.id,
          phaseId,
          slot,
          slot === "after" ? Math.max(1, mission.benchmarks.length) : undefined,
        );
        await load();
      } catch (e) {
        setError(e instanceof Error ? e.message : "benchmark failed");
      } finally {
        setPhaseBusy(null);
      }
    },
    [mission, load],
  );

  const launch = useCallback(async () => {
    if (!mission) return;
    setLaunching(true);
    try {
      await setMissionStatus(mission.id, "running");
      onChanged();
      await load();
    } catch (e) {
      setError(e instanceof Error ? e.message : "launch failed");
    } finally {
      setLaunching(false);
    }
  }, [mission, onChanged, load]);

  const orderedPhases = useMemo(
    () =>
      mission
        ? [...mission.phases].sort((a, b) => a.order_idx - b.order_idx)
        : [],
    [mission],
  );

  if (!selectedId) {
    return (
      <div
        style={{
          flex: 1,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#6a6a72",
          fontSize: 13,
          padding: 24,
          textAlign: "center",
        }}
      >
        Pick a mission from the left, or hit + to create one.
      </div>
    );
  }
  if (loading && !mission) {
    return (
      <div style={{ padding: 20, fontFamily: mono, color: "#5ec8d8" }}>
        Loading…
      </div>
    );
  }
  if (error) {
    return (
      <div style={{ padding: 20, color: "#ff8a7a", fontSize: 12 }}>{error}</div>
    );
  }
  if (!mission) return null;

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
      <div
        style={{
          flex: "none",
          padding: "16px 22px 12px",
          borderBottom: "1px solid rgba(255,255,255,.06)",
          display: "flex",
          flexDirection: "column",
          gap: 8,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span
            style={{
              width: 9,
              height: 9,
              borderRadius: "50%",
              background: STATUS_COLOR[mission.status],
            }}
          />
          <span
            style={{
              fontFamily: mono,
              fontSize: 10.5,
              letterSpacing: ".14em",
              color: STATUS_COLOR[mission.status],
              textTransform: "uppercase",
            }}
          >
            {mission.status}
          </span>
          <span
            style={{
              fontFamily: mono,
              fontSize: 10.5,
              letterSpacing: ".12em",
              color: "#7cd6e0",
              marginLeft: 8,
            }}
          >
            {TEMPLATE_LABEL[mission.template_kind] ?? mission.template_kind}
          </span>
          <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            <button
              type="button"
              onClick={() => setWizardOpen(true)}
              title="Create a new mission"
              aria-label="Add mission"
              style={iconBtn}
            >
              <Plus size={13} />
            </button>
            {mission.status === "draft" && (
              <button
                type="button"
                onClick={() => setEditOpen(true)}
                title="Edit title + description"
                aria-label="Edit mission"
                style={iconBtn}
              >
                <Pencil size={13} />
              </button>
            )}
            <button
              type="button"
              onClick={async () => {
                if (deleteBusy) return;
                const ok = window.confirm(
                  `Delete mission "${mission.title}"? This cascades to its phases, tasks, artifacts, and benchmark snapshots.`,
                );
                if (!ok) return;
                setDeleteBusy(true);
                try {
                  await deleteMission(mission.id);
                  onDeleted?.();
                  onChanged();
                } catch (e) {
                  setError(e instanceof Error ? e.message : "delete failed");
                } finally {
                  setDeleteBusy(false);
                }
              }}
              disabled={deleteBusy}
              title="Delete this mission"
              aria-label="Delete mission"
              style={{
                ...iconBtn,
                color: "#ff8a7a",
                borderColor: "rgba(255,138,122,.35)",
                opacity: deleteBusy ? 0.5 : 1,
              }}
            >
              <Trash2 size={13} />
            </button>
            {mission.status === "draft" && (
              <button
                type="button"
                onClick={refine}
                disabled={refining || !mission.description?.trim()}
                title={
                  mission.description?.trim()
                    ? "Refine the description into a sectioned brief"
                    : "Add a description first"
                }
                aria-label="Refine"
                style={{
                  ...secondaryBtn,
                  opacity: refining || !mission.description?.trim() ? 0.5 : 1,
                }}
              >
                <Sparkles size={13} style={{ marginRight: 4 }} />
                {refining ? "Refining…" : "Refine"}
              </button>
            )}
            <button
              type="button"
              onClick={load}
              title="Refresh"
              aria-label="Refresh"
              style={iconBtn}
            >
              <RefreshCw size={13} />
            </button>
            {mission.status === "draft" && (
              <button
                type="button"
                onClick={launch}
                disabled={launching}
                style={{
                  ...primaryBtn,
                  opacity: launching ? 0.5 : 1,
                }}
              >
                <Play size={13} style={{ marginRight: 4 }} />
                {launching ? "Launching…" : "Launch"}
              </button>
            )}
          </div>
        </div>
        <h1 style={{ margin: 0, fontSize: 20, color: "#f3f3f5" }}>{mission.title}</h1>
        {mission.description && (
          <div style={{ marginTop: 4 }}>
            <MarkdownBlock source={mission.description} />
          </div>
        )}
        {refineDiff && (
          <RefineDiffModal
            original={refineDiff.original}
            refined={refineDiff.refined}
            busy={accepting}
            onAccept={acceptRefine}
            onCancel={() => setRefineDiff(null)}
            onUndoAfterAccept={undoRefine}
          />
        )}
        {wizardOpen && (
          <MissionWizard
            onClose={() => setWizardOpen(false)}
            onCreated={(id) => {
              setWizardOpen(false);
              onSelect?.(id);
              onChanged();
            }}
          />
        )}
        {editOpen && (
          <EditMissionModal
            mission={mission}
            onClose={() => setEditOpen(false)}
            onSaved={async () => {
              setEditOpen(false);
              onChanged();
              await load();
            }}
          />
        )}
        <div style={{ display: "flex", gap: 4, marginTop: 4 }}>
          {(["overview", "phases", "tasks", "artifacts", "benchmarks"] as Tab[]).map((t) => {
            const active = tab === t;
            const badge =
              t === "tasks"
                ? mission.tasks.length
                : t === "artifacts"
                  ? mission.artifacts.length
                  : t === "phases"
                    ? mission.phases.length
                    : t === "benchmarks"
                      ? mission.benchmarks.length
                      : null;
            return (
              <button
                key={t}
                type="button"
                onClick={() => setTab(t)}
                style={{
                  padding: "5px 12px",
                  borderRadius: 8,
                  border: `1px solid ${active ? "rgba(255,138,122,.5)" : "rgba(255,255,255,.08)"}`,
                  background: active ? "rgba(255,138,122,.08)" : "transparent",
                  color: active ? "#ff8a7a" : "#a0a0a8",
                  fontFamily: mono,
                  fontSize: 11,
                  letterSpacing: ".08em",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                }}
              >
                {t}
                {badge !== null && (
                  <span
                    style={{
                      fontSize: 10,
                      color: active ? "#ff8a7a" : "#8a8a92",
                    }}
                  >
                    {badge}
                  </span>
                )}
              </button>
            );
          })}
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 0, overflow: "auto", padding: 22 }}>
        {tab === "overview" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <FieldRow k="Template" v={TEMPLATE_LABEL[mission.template_kind] ?? mission.template_kind} />
            <FieldRow k="Status" v={mission.status} />
            <FieldRow k="Team" v={mission.team_id ?? "(auto-provision on launch)"} />
            <FieldRow k="Repo" v={mission.repo_id ?? "—"} />
            <FieldRow
              k="Schedule"
              v={
                mission.schedule.kind === "cron"
                  ? `cron: ${mission.schedule.cron ?? "?"}`
                  : mission.schedule.kind === "on_event"
                    ? `on: ${mission.schedule.event ?? "?"}`
                    : "one-shot"
              }
            />
            <FieldRow k="Created" v={new Date(mission.created_at).toLocaleString()} />
            {mission.completed_at && (
              <FieldRow k="Completed" v={new Date(mission.completed_at).toLocaleString()} />
            )}
          </div>
        )}

        {tab === "phases" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {orderedPhases.length === 0 ? (
              <Empty label="no phases" />
            ) : (
              orderedPhases.map((p) => (
                <div
                  key={p.id}
                  style={{
                    padding: 12,
                    borderRadius: 10,
                    border: "1px solid rgba(255,255,255,.07)",
                    background: "#101014",
                    display: "flex",
                    flexDirection: "column",
                    gap: 4,
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span
                      style={{
                        width: 7,
                        height: 7,
                        borderRadius: "50%",
                        background: PHASE_STATUS_COLOR[p.status],
                      }}
                    />
                    <span
                      style={{
                        fontFamily: mono,
                        fontSize: 9,
                        color: PHASE_STATUS_COLOR[p.status],
                        textTransform: "uppercase",
                      }}
                    >
                      {p.status}
                    </span>
                    <span
                      style={{
                        fontSize: 13.5,
                        fontWeight: 700,
                        color: "#f3f3f5",
                        marginLeft: 8,
                      }}
                    >
                      #{p.order_idx + 1} · {PHASE_LABEL[p.kind] ?? p.kind}
                    </span>
                  </div>
                  {(p.started_at || p.completed_at) && (
                    <span style={{ fontFamily: mono, fontSize: 11, color: "#8a8a92" }}>
                      {p.started_at ? `started ${new Date(p.started_at).toLocaleTimeString()}` : "—"}
                      {p.completed_at
                        ? ` · finished ${new Date(p.completed_at).toLocaleTimeString()}`
                        : ""}
                    </span>
                  )}
                  {mission.status === "running" || mission.status === "completed" ? (
                    <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                      {p.kind === "security_scan" && (
                        <button
                          type="button"
                          onClick={() => runSecurityScan(p.id)}
                          disabled={phaseBusy === `sec:${p.id}`}
                          style={{
                            ...secondaryBtn,
                            opacity: phaseBusy === `sec:${p.id}` ? 0.5 : 1,
                          }}
                        >
                          {phaseBusy === `sec:${p.id}` ? "Scanning…" : "Run scan"}
                        </button>
                      )}
                      {p.kind === "benchmark" && (
                        <>
                          <button
                            type="button"
                            onClick={() => runBenchmark(p.id, "baseline")}
                            disabled={phaseBusy === `bench:${p.id}:baseline`}
                            style={{
                              ...secondaryBtn,
                              opacity:
                                phaseBusy === `bench:${p.id}:baseline` ? 0.5 : 1,
                            }}
                          >
                            {phaseBusy === `bench:${p.id}:baseline`
                              ? "Running…"
                              : "Baseline"}
                          </button>
                          <button
                            type="button"
                            onClick={() => runBenchmark(p.id, "after")}
                            disabled={phaseBusy === `bench:${p.id}:after`}
                            style={{
                              ...secondaryBtn,
                              opacity:
                                phaseBusy === `bench:${p.id}:after` ? 0.5 : 1,
                            }}
                          >
                            {phaseBusy === `bench:${p.id}:after` ? "Running…" : "After"}
                          </button>
                        </>
                      )}
                    </div>
                  ) : null}
                </div>
              ))
            )}
          </div>
        )}

        {tab === "tasks" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {mission.tasks.length === 0 ? (
              <Empty label="no tasks yet — task-card parser lands in Slice 5" />
            ) : (
              mission.tasks.map((t) => (
                <div
                  key={t.id}
                  style={{
                    padding: 11,
                    borderRadius: 10,
                    border: "1px solid rgba(255,255,255,.07)",
                    background: "#101014",
                    display: "flex",
                    flexDirection: "column",
                    gap: 4,
                  }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span
                      style={{
                        width: 7,
                        height: 7,
                        borderRadius: "50%",
                        background: TASK_STATUS_COLOR[t.status],
                      }}
                    />
                    <span
                      style={{
                        fontFamily: mono,
                        fontSize: 9,
                        color: TASK_STATUS_COLOR[t.status],
                        textTransform: "uppercase",
                      }}
                    >
                      {t.status}
                    </span>
                    {t.external_id && (
                      <span
                        style={{
                          fontFamily: mono,
                          fontSize: 10.5,
                          color: "#7cd6e0",
                        }}
                      >
                        {t.external_id}
                      </span>
                    )}
                    <span
                      style={{
                        fontSize: 13,
                        color: "#f3f3f5",
                        marginLeft: 4,
                      }}
                    >
                      {t.title}
                    </span>
                  </div>
                  {t.artifact_paths.length > 0 && (
                    <div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}>
                      {t.artifact_paths.join(" · ")}
                    </div>
                  )}
                </div>
              ))
            )}
          </div>
        )}

        {tab === "artifacts" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {mission.artifacts.length === 0 ? (
              <Empty label="no artifacts yet — phases produce them as they run" />
            ) : (
              mission.artifacts.map((a) => {
                const isPreviewing = pdfPreviewId === a.id;
                return (
                  <div
                    key={a.id}
                    style={{ display: "flex", flexDirection: "column", gap: 8 }}
                  >
                    <div
                      style={{
                        padding: 11,
                        borderRadius: 10,
                        border: "1px solid rgba(255,255,255,.07)",
                        background: "#101014",
                        display: "flex",
                        alignItems: "center",
                        gap: 10,
                      }}
                    >
                      <FileText size={16} style={{ color: "#7cd6e0", flex: "none" }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 500 }}>
                          {a.title ?? a.path.split("/").pop() ?? a.path}
                        </div>
                        <div style={{ fontFamily: mono, fontSize: 10.5, color: "#8a8a92" }}>
                          {a.kind} · {a.path}
                        </div>
                      </div>
                      {a.rendered_pdf_path ? (
                        <>
                          <button
                            type="button"
                            onClick={() =>
                              setPdfPreviewId(isPreviewing ? null : a.id)
                            }
                            style={{
                              ...secondaryBtn,
                              padding: "5px 10px",
                              fontSize: 11,
                            }}
                          >
                            {isPreviewing ? "Hide" : "Preview"}
                          </button>
                          <a
                            href={a.rendered_pdf_path}
                            target="_blank"
                            rel="noreferrer"
                            style={{
                              ...secondaryBtn,
                              padding: "5px 10px",
                              fontSize: 11,
                              textDecoration: "none",
                            }}
                          >
                            Open
                          </a>
                        </>
                      ) : a.render_pdf_status !== "skip" ? (
                        <span
                          style={{
                            fontFamily: mono,
                            fontSize: 10.5,
                            color:
                              a.render_pdf_status === "failed"
                                ? "#ff8a7a"
                                : "#8a8a92",
                          }}
                        >
                          pdf: {a.render_pdf_status}
                        </span>
                      ) : null}
                    </div>
                    {isPreviewing && a.rendered_pdf_path && (
                      <iframe
                        src={a.rendered_pdf_path}
                        title={a.title ?? a.path}
                        style={{
                          width: "100%",
                          height: 640,
                          border: "1px solid rgba(255,255,255,.06)",
                          borderRadius: 8,
                          background: "#0a0a0d",
                        }}
                      />
                    )}
                  </div>
                );
              })
            )}
          </div>
        )}

        {tab === "benchmarks" && (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {mission.benchmarks.length === 0 ? (
              <Empty label="no benchmark snapshots yet — trigger a baseline via /api/missions/{id}/benchmark or a workflow with benchmark = { mode = &quot;before_after&quot; }" />
            ) : (
              mission.benchmarks.map((s) => {
                const delta = s.delta as
                  | { kind?: string; samples?: Array<Record<string, unknown>> }
                  | null
                  | undefined;
                return (
                  <div
                    key={s.id}
                    style={{
                      padding: 12,
                      borderRadius: 10,
                      border: "1px solid rgba(255,255,255,.07)",
                      background: "#101014",
                      display: "flex",
                      flexDirection: "column",
                      gap: 6,
                    }}
                  >
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span
                        style={{
                          fontFamily: mono,
                          fontSize: 10.5,
                          color: s.iteration === 0 ? "#7cd6e0" : "#5fd08a",
                          letterSpacing: ".08em",
                          textTransform: "uppercase",
                        }}
                      >
                        {s.iteration === 0 ? "baseline" : `iter ${s.iteration}`}
                      </span>
                      {s.driver && (
                        <span
                          style={{
                            fontFamily: mono,
                            fontSize: 10,
                            color: "#8a8a92",
                            marginLeft: 4,
                          }}
                        >
                          {s.driver}
                        </span>
                      )}
                      <span
                        style={{
                          marginLeft: "auto",
                          fontFamily: mono,
                          fontSize: 10.5,
                          color: "#6a6a72",
                        }}
                      >
                        {new Date(s.created_at).toLocaleString()}
                      </span>
                    </div>
                    {delta?.samples && delta.samples.length > 0 && (
                      <div
                        style={{
                          display: "grid",
                          gridTemplateColumns: "1fr 100px 100px 100px",
                          gap: 6,
                          fontSize: 12,
                          alignItems: "center",
                        }}
                      >
                        <span style={{ color: "#8a8a92" }}>bench</span>
                        <span style={{ color: "#8a8a92", textAlign: "right" }}>before</span>
                        <span style={{ color: "#8a8a92", textAlign: "right" }}>after</span>
                        <span style={{ color: "#8a8a92", textAlign: "right" }}>Δ%</span>
                        {(delta.samples as Array<Record<string, unknown>>).map((row, i) => {
                          const pct = Number(row["delta_pct"] ?? 0);
                          const dir = String(row["direction"] ?? "");
                          const color = dir === "improved" ? "#5fd08a" : "#ff8a7a";
                          return (
                            <React.Fragment key={i}>
                              <span
                                style={{
                                  fontFamily: mono,
                                  fontSize: 11.5,
                                  color: "#d7d7db",
                                  overflow: "hidden",
                                  textOverflow: "ellipsis",
                                  whiteSpace: "nowrap",
                                }}
                              >
                                {String(row["name"])}
                              </span>
                              <span
                                style={{
                                  fontFamily: mono,
                                  fontSize: 11.5,
                                  color: "#a0a0a8",
                                  textAlign: "right",
                                }}
                              >
                                {String(row["before_ns"])} ns
                              </span>
                              <span
                                style={{
                                  fontFamily: mono,
                                  fontSize: 11.5,
                                  color: "#a0a0a8",
                                  textAlign: "right",
                                }}
                              >
                                {String(row["after_ns"])} ns
                              </span>
                              <span
                                style={{
                                  fontFamily: mono,
                                  fontSize: 11.5,
                                  color,
                                  textAlign: "right",
                                }}
                              >
                                {pct > 0 ? "+" : ""}
                                {pct.toFixed(1)}%
                              </span>
                            </React.Fragment>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function FieldRow({ k, v }: { k: string; v: string }) {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "140px 1fr",
        gap: 12,
        padding: "10px 12px",
        borderRadius: 8,
        border: "1px solid rgba(255,255,255,.06)",
        background: "#101014",
      }}
    >
      <span
        style={{
          fontFamily: mono,
          fontSize: 10.5,
          letterSpacing: ".1em",
          color: "#8a8a92",
          textTransform: "uppercase",
        }}
      >
        {k}
      </span>
      <span style={{ fontSize: 12.5, color: "#eaeaee", wordBreak: "break-word" }}>
        {v}
      </span>
    </div>
  );
}

function Empty({ label }: { label: string }) {
  return (
    <div
      style={{
        padding: 24,
        textAlign: "center",
        color: "#6a6a72",
        fontSize: 12.5,
        fontFamily: mono,
      }}
    >
      {label}
    </div>
  );
}

function EditMissionModal({
  mission,
  onClose,
  onSaved,
}: {
  mission: MissionDetail;
  onClose: () => void;
  onSaved: () => void;
}) {
  const [title, setTitle] = useState(mission.title);
  const [description, setDescription] = useState(mission.description ?? "");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const dirty =
    title.trim() !== mission.title || description !== (mission.description ?? "");
  const save = async () => {
    if (!dirty) {
      onClose();
      return;
    }
    if (!title.trim()) {
      setError("title is required");
      return;
    }
    setBusy(true);
    setError(null);
    try {
      await updateMission(mission.id, {
        title: title.trim() !== mission.title ? title.trim() : undefined,
        description:
          description !== (mission.description ?? "") ? description : undefined,
      });
      onSaved();
    } catch (e) {
      setError(e instanceof Error ? e.message : "save failed");
    } finally {
      setBusy(false);
    }
  };
  return (
    <div
      role="dialog"
      aria-modal
      onClick={onClose}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,.55)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 900,
        padding: 24,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(620px, 100%)",
          background: "#141419",
          borderRadius: 12,
          border: "1px solid rgba(255,255,255,.08)",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div
          style={{
            padding: "12px 18px",
            borderBottom: "1px solid rgba(255,255,255,.06)",
            display: "flex",
            alignItems: "center",
            gap: 10,
          }}
        >
          <span
            style={{
              fontFamily: mono,
              fontSize: 10.5,
              letterSpacing: ".14em",
              color: "#7cd6e0",
              textTransform: "uppercase",
            }}
          >
            Edit mission
          </span>
        </div>
        <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
          <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span
              style={{
                fontFamily: mono,
                fontSize: 10,
                letterSpacing: ".12em",
                color: "#a0a0a8",
                textTransform: "uppercase",
              }}
            >
              Title
            </span>
            <input
              type="text"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              disabled={busy}
              autoFocus
              style={{
                padding: "8px 12px",
                borderRadius: 8,
                border: "1px solid rgba(255,255,255,.1)",
                background: "#0a0a0d",
                color: "#f3f3f5",
                fontSize: 14,
              }}
            />
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span
              style={{
                fontFamily: mono,
                fontSize: 10,
                letterSpacing: ".12em",
                color: "#a0a0a8",
                textTransform: "uppercase",
              }}
            >
              Description (Markdown; use Refine to structure)
            </span>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              disabled={busy}
              rows={12}
              style={{
                padding: "8px 12px",
                borderRadius: 8,
                border: "1px solid rgba(255,255,255,.1)",
                background: "#0a0a0d",
                color: "#f3f3f5",
                fontFamily: mono,
                fontSize: 12,
                resize: "vertical",
                minHeight: 160,
              }}
            />
          </label>
          {error && (
            <div style={{ color: "#ff8a7a", fontSize: 12 }}>{error}</div>
          )}
        </div>
        <div
          style={{
            padding: "12px 18px",
            borderTop: "1px solid rgba(255,255,255,.06)",
            display: "flex",
            gap: 8,
            justifyContent: "flex-end",
          }}
        >
          <button
            type="button"
            onClick={onClose}
            disabled={busy}
            style={{
              padding: "6px 14px",
              borderRadius: 8,
              border: "1px solid rgba(255,255,255,.1)",
              background: "transparent",
              color: "#a0a0a8",
              fontSize: 12,
              cursor: "pointer",
              opacity: busy ? 0.5 : 1,
            }}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={save}
            disabled={busy || !dirty}
            style={{
              padding: "6px 14px",
              borderRadius: 8,
              border: "1px solid rgba(127,208,160,.5)",
              background: "rgba(127,208,160,.12)",
              color: "#7fd0a0",
              fontSize: 12,
              cursor: dirty ? "pointer" : "not-allowed",
              opacity: busy || !dirty ? 0.5 : 1,
            }}
          >
            {busy ? "Saving…" : "Save"}
          </button>
        </div>
      </div>
    </div>
  );
}

function RefineDiffModal({
  original,
  refined,
  busy,
  onAccept,
  onCancel,
  onUndoAfterAccept,
}: {
  original: string;
  refined: string;
  busy: boolean;
  onAccept: () => void;
  onCancel: () => void;
  onUndoAfterAccept: () => void;
}) {
  return (
    <div
      role="dialog"
      aria-modal
      onClick={onCancel}
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,.6)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 900,
        padding: 24,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "min(1100px, 100%)",
          height: "min(720px, calc(100vh - 48px))",
          background: "#141419",
          borderRadius: 12,
          border: "1px solid rgba(255,255,255,.08)",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div
          style={{
            padding: "12px 18px",
            borderBottom: "1px solid rgba(255,255,255,.06)",
            display: "flex",
            alignItems: "center",
            gap: 10,
          }}
        >
          <span
            style={{
              fontFamily: mono,
              fontSize: 10.5,
              letterSpacing: ".14em",
              color: "#ffb44a",
              textTransform: "uppercase",
            }}
          >
            Refine — review before/after
          </span>
          <span style={{ flex: 1 }} />
          <button
            type="button"
            onClick={onUndoAfterAccept}
            disabled={busy}
            title="Restore the original description (drops the refinement)"
            style={{
              padding: "5px 12px",
              borderRadius: 8,
              border: "1px solid rgba(255,255,255,.1)",
              background: "transparent",
              color: "#a0a0a8",
              fontSize: 12,
              cursor: "pointer",
              opacity: busy ? 0.5 : 1,
            }}
          >
            Restore original
          </button>
          <button
            type="button"
            onClick={onCancel}
            disabled={busy}
            style={{
              padding: "5px 12px",
              borderRadius: 8,
              border: "1px solid rgba(255,255,255,.1)",
              background: "transparent",
              color: "#a0a0a8",
              fontSize: 12,
              cursor: "pointer",
              opacity: busy ? 0.5 : 1,
            }}
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={onAccept}
            disabled={busy}
            style={{
              padding: "5px 14px",
              borderRadius: 8,
              border: "1px solid rgba(127,208,160,.5)",
              background: "rgba(127,208,160,.12)",
              color: "#7fd0a0",
              fontSize: 12,
              cursor: "pointer",
              opacity: busy ? 0.5 : 1,
            }}
          >
            {busy ? "Applying…" : "Accept"}
          </button>
        </div>
        <div
          style={{
            flex: 1,
            minHeight: 0,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 1,
            background: "rgba(255,255,255,.06)",
          }}
        >
          <DiffPane
            title="Before"
            color="#8a8a92"
            body={original}
            renderAsMarkdown={false}
          />
          <DiffPane
            title="After"
            color="#7fd0a0"
            body={refined}
            renderAsMarkdown
          />
        </div>
      </div>
    </div>
  );
}

function DiffPane({
  title,
  color,
  body,
  renderAsMarkdown,
}: {
  title: string;
  color: string;
  body: string;
  renderAsMarkdown: boolean;
}) {
  return (
    <div
      style={{
        background: "#0e0e12",
        display: "flex",
        flexDirection: "column",
        minHeight: 0,
      }}
    >
      <div
        style={{
          padding: "8px 14px",
          borderBottom: "1px solid rgba(255,255,255,.05)",
          fontFamily: mono,
          fontSize: 10,
          letterSpacing: ".14em",
          color,
          textTransform: "uppercase",
        }}
      >
        {title}
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", padding: 14 }}>
        {renderAsMarkdown ? (
          <MarkdownBlock source={body} />
        ) : (
          <pre
            style={{
              margin: 0,
              whiteSpace: "pre-wrap",
              wordBreak: "break-word",
              fontFamily: mono,
              fontSize: 12,
              color: "#cfcfd5",
              lineHeight: 1.55,
            }}
          >
            {body}
          </pre>
        )}
      </div>
    </div>
  );
}

const iconBtn: React.CSSProperties = {
  width: 30,
  height: 30,
  borderRadius: 8,
  border: "1px solid rgba(255,255,255,.12)",
  background: "transparent",
  color: "#9a9aa2",
  cursor: "pointer",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
};
const primaryBtn: React.CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  gap: 4,
  padding: "6px 12px",
  borderRadius: 8,
  border: 0,
  background: "#ff8a7a",
  color: "#1a0d0b",
  fontSize: 12,
  fontWeight: 700,
  cursor: "pointer",
};
const secondaryBtn: React.CSSProperties = {
  padding: "6px 12px",
  borderRadius: 8,
  border: "1px solid rgba(255,255,255,.14)",
  background: "transparent",
  color: "#d7d7db",
  fontSize: 12,
  cursor: "pointer",
};