"use client";

// Sidebar for the Missions tier — the unified list that replaces
// ResearchList + LoopsList after Slice 9's cutover. During Slice 2 it
// runs in parallel with the old two lists so we can iterate on the
// UX without breaking existing workflows.

import { useCallback, useEffect, useState } from "react";
import { Plus, RotateCw, Trash2, Wrench } from "lucide-react";

import {
  deleteMission,
  listMissions,
  type MissionListItem,
  type MissionStatus,
  type PhaseKind,
  type TemplateKind,
} from "@/lib/api/missions";
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 TEMPLATE_BADGE: Record<TemplateKind, { label: string; color: string }> = {
  research_only: { label: "RESEARCH", color: "#7cd6e0" },
  research_and_code: { label: "R+CODE", color: "#c98af0" },
  security_hardening: { label: "SECURITY", color: "#ff8a7a" },
  refactor: { label: "REFACTOR", color: "#ffb44a" },
  benchmark: { label: "BENCHMARK", color: "#83e6a5" },
  custom: { label: "CUSTOM", color: "#8a8a92" },
};

export function MissionsList({
  selectedId,
  onSelect,
  refreshKey,
  onCreated,
  onDeleted,
}: {
  selectedId: string | null;
  onSelect: (id: string) => void;
  refreshKey: number;
  onCreated: (id: string) => void;
  /** Called after bulk delete completes; parent clears selection if the
   *  currently-open mission was among the deleted rows. */
  onDeleted?: (deletedIds: string[]) => void;
}) {
  const [missions, setMissions] = useState<MissionListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [wizardOpen, setWizardOpen] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [selectMode, setSelectMode] = useState(false);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [bulkBusy, setBulkBusy] = useState(false);

  const load = useCallback(async () => {
    setError(null);
    try {
      const rows = await listMissions(100);
      setMissions(rows);
    } catch (e) {
      setError(e instanceof Error ? e.message : "load failed");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    let alive = true;
    (async () => {
      if (alive) await load();
    })();
    return () => {
      alive = false;
    };
  }, [load, refreshKey]);

  return (
    <>
      <div
        style={{
          flex: "none",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "12px 14px 8px",
          gap: 8,
        }}
      >
        <span
          style={{
            fontFamily: mono,
            fontSize: 10,
            letterSpacing: ".16em",
            color: "#8a8a92",
          }}
        >
          MISSIONS · {missions.length}
        </span>
        <div style={{ display: "flex", gap: 6 }}>
          <button
            type="button"
            onClick={() => {
              setSelectMode((v) => {
                if (v) setSelectedIds(new Set());
                return !v;
              });
            }}
            title={selectMode ? "Exit select mode" : "Select missions to manage"}
            aria-label="Toggle select mode"
            style={{
              ...iconBtn,
              color: selectMode ? "#ff8a7a" : "#9a9aa2",
              borderColor: selectMode
                ? "rgba(255,138,122,.5)"
                : "rgba(255,255,255,.12)",
              background: selectMode ? "rgba(255,138,122,.08)" : "transparent",
            }}
          >
            <Wrench size={13} />
          </button>
          {selectMode && selectedIds.size > 0 && (
            <button
              type="button"
              onClick={async () => {
                if (bulkBusy) return;
                const ids = Array.from(selectedIds);
                const ok = window.confirm(
                  `Delete ${ids.length} mission${ids.length === 1 ? "" : "s"}? Cascades to phases, tasks, artifacts, and benchmark snapshots.`,
                );
                if (!ok) return;
                setBulkBusy(true);
                setError(null);
                const failures: string[] = [];
                for (const id of ids) {
                  try {
                    await deleteMission(id);
                  } catch (e) {
                    failures.push(id);
                    console.error(`delete ${id}`, e);
                  }
                }
                setBulkBusy(false);
                const deletedIds = ids.filter((id) => !failures.includes(id));
                setSelectedIds(new Set(failures));
                if (failures.length === 0) setSelectMode(false);
                else
                  setError(`${failures.length} of ${ids.length} deletes failed`);
                onDeleted?.(deletedIds);
                await load();
              }}
              disabled={bulkBusy}
              title={`Delete ${selectedIds.size} selected`}
              aria-label="Delete selected missions"
              style={{
                ...iconBtn,
                color: "#ff8a7a",
                borderColor: "rgba(255,138,122,.5)",
                background: "rgba(255,138,122,.1)",
                opacity: bulkBusy ? 0.5 : 1,
                width: "auto",
                padding: "0 8px",
                gap: 4,
                fontFamily: mono,
                fontSize: 11,
              }}
            >
              <Trash2 size={12} />
              {selectedIds.size}
            </button>
          )}
          <button
            type="button"
            onClick={load}
            disabled={loading}
            title="Refresh"
            aria-label="Refresh"
            style={{ ...iconBtn, opacity: loading ? 0.6 : 1 }}
          >
            <RotateCw
              size={13}
              style={loading ? { animation: "cm-spin 1s linear infinite" } : undefined}
            />
          </button>
          <button
            type="button"
            onClick={() => setWizardOpen(true)}
            title="New mission"
            aria-label="New mission"
            style={{
              ...iconBtn,
              color: "#ff8a7a",
              borderColor: "rgba(255,138,122,.5)",
            }}
          >
            <Plus size={13} />
          </button>
        </div>
      </div>

      <div
        style={{
          flex: 1,
          minHeight: 0,
          overflowY: "auto",
          padding: "4px 10px 12px",
          display: "flex",
          flexDirection: "column",
          gap: 6,
        }}
      >
        {loading ? (
          <div style={{ fontFamily: mono, fontSize: 11, color: "#5ec8d8", padding: 8 }}>
            Loading…
          </div>
        ) : error ? (
          <div style={{ fontSize: 12, color: "#ff8a7a", padding: 8 }}>{error}</div>
        ) : missions.length === 0 ? (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 10,
              padding: 12,
              alignItems: "flex-start",
            }}
          >
            <span style={{ fontSize: 12.5, color: "#cfcfd5", lineHeight: 1.5 }}>
              No missions yet. Pick a workflow template to get started.
            </span>
            <button
              type="button"
              onClick={() => setWizardOpen(true)}
              style={ctaBtn}
            >
              <Plus size={13} /> New mission
            </button>
          </div>
        ) : (
          missions.map((m) => {
            const active = !selectMode && selectedId === m.id;
            const picked = selectMode && selectedIds.has(m.id);
            const badge = TEMPLATE_BADGE[m.template_kind] ?? TEMPLATE_BADGE.custom;
            return (
              <button
                key={m.id}
                type="button"
                onClick={() => {
                  if (selectMode) {
                    setSelectedIds((prev) => {
                      const next = new Set(prev);
                      if (next.has(m.id)) next.delete(m.id);
                      else next.add(m.id);
                      return next;
                    });
                  } else {
                    onSelect(m.id);
                  }
                }}
                style={{
                  width: "100%",
                  textAlign: "left",
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                  padding: "10px 11px",
                  borderRadius: 9,
                  border: `1px solid ${
                    picked
                      ? "rgba(255,138,122,.55)"
                      : active
                        ? "rgba(94,200,216,.5)"
                        : "rgba(255,255,255,.07)"
                  }`,
                  background: picked
                    ? "rgba(255,138,122,.1)"
                    : active
                      ? "rgba(94,200,216,.08)"
                      : "#101013",
                  cursor: "pointer",
                  color: "#eaeaee",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  {selectMode && (
                    <span
                      aria-hidden
                      style={{
                        width: 12,
                        height: 12,
                        borderRadius: 3,
                        border: `1px solid ${picked ? "#ff8a7a" : "rgba(255,255,255,.25)"}`,
                        background: picked ? "#ff8a7a" : "transparent",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: "#101013",
                        fontSize: 10,
                        flex: "none",
                      }}
                    >
                      {picked ? "✓" : ""}
                    </span>
                  )}
                  <span
                    style={{
                      width: 7,
                      height: 7,
                      borderRadius: "50%",
                      background: STATUS_COLOR[m.status],
                      flex: "none",
                    }}
                  />
                  <span
                    style={{
                      fontFamily: mono,
                      fontSize: 9,
                      color: STATUS_COLOR[m.status],
                      textTransform: "uppercase",
                    }}
                  >
                    {m.status}
                  </span>
                  <span
                    style={{
                      marginLeft: "auto",
                      fontFamily: mono,
                      fontSize: 9,
                      color: badge.color,
                    }}
                  >
                    {badge.label}
                  </span>
                </div>
                <div
                  style={{
                    fontSize: 13,
                    color: "#f3f3f5",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    fontWeight: 500,
                  }}
                >
                  {m.title}
                </div>
                {/* Where the mission actually IS. A status dot alone
                    doesn't distinguish "just launched" from "nearly done". */}
                {m.phases_total > 0 && (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      marginTop: 2,
                    }}
                  >
                    <div
                      style={{
                        flex: 1,
                        height: 3,
                        borderRadius: 2,
                        background: "rgba(255,255,255,.08)",
                        overflow: "hidden",
                      }}
                    >
                      <div
                        style={{
                          width: `${Math.round((m.phases_done / m.phases_total) * 100)}%`,
                          height: "100%",
                          background: STATUS_COLOR[m.status],
                        }}
                      />
                    </div>
                    <span
                      style={{
                        fontFamily: mono,
                        fontSize: 9,
                        color: "#6a6a72",
                        flex: "none",
                      }}
                    >
                      {m.current_phase
                        ? `${PHASE_LABEL[m.current_phase] ?? m.current_phase} · `
                        : ""}
                      {m.phases_done}/{m.phases_total}
                    </span>
                  </div>
                )}
              </button>
            );
          })
        )}
      </div>

      {wizardOpen && (
        <MissionWizard
          onClose={() => setWizardOpen(false)}
          onCreated={(id) => {
            setWizardOpen(false);
            onCreated(id);
            void load();
          }}
        />
      )}
    </>
  );
}

const PHASE_LABEL: Record<PhaseKind, string> = {
  research: "Research",
  coding: "Coding",
  benchmark: "Benchmark",
  security_scan: "Security",
};

const iconBtn: React.CSSProperties = {
  width: 26,
  height: 26,
  borderRadius: 7,
  border: "1px solid rgba(255,255,255,.12)",
  background: "transparent",
  color: "#9a9aa2",
  cursor: "pointer",
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
};

const ctaBtn: React.CSSProperties = {
  display: "inline-flex",
  alignItems: "center",
  gap: 6,
  padding: "8px 12px",
  borderRadius: 9,
  border: 0,
  background: "#ff8a7a",
  color: "#1a0d0b",
  fontSize: 12.5,
  fontWeight: 700,
  cursor: "pointer",
};