"use client";

// Sidebar for the Research tier — real topic list, +New opens the wizard.
// Each row also carries a delete affordance with inline confirm; delete is
// hard on the backend (research_topics DELETE cascades to agents/approvals/
// outcomes; topology_runs.research_topic_id is SET NULL).

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

import type { Agent } from "@/lib/api/schemas";
import {
  deleteTopic,
  listTopics,
  type TopicListItem,
  type TopicStatus,
} from "@/lib/api/research";

import { ResearchWizard } from "./ResearchWizard";

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

const STATUS_COLOR: Record<TopicStatus, string> = {
  standby: "#8a8a92",
  processing: "#5ec8d8",
  reviewing: "#ffb44a",
  publishing: "#c98af0",
  published: "#5fd08a",
};

export function ResearchList({
  agents,
  selectedId,
  onSelect,
  refreshKey,
  onCreated,
}: {
  agents: Agent[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  /** Bump to force a re-fetch after external mutations (start/publish/etc). */
  refreshKey: number;
  onCreated: (id: string) => void;
}) {
  const [topics, setTopics] = useState<TopicListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [wizardOpen, setWizardOpen] = useState(false);
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [localBump, setLocalBump] = useState(0);

  useEffect(() => {
    let alive = true;
    const load = async () => {
      setLoading(true);
      try {
        const rows = await listTopics();
        if (alive) setTopics(rows);
      } catch {
        if (alive) setTopics([]);
      } finally {
        if (alive) setLoading(false);
      }
    };
    load();
    return () => {
      alive = false;
    };
  }, [refreshKey, localBump]);

  // Light polling while any topic is actively running so the spinner + status
  // in the sidebar transition automatically without waiting on a parent bump.
  // Depending only on the boolean prevents the effect from thrashing every
  // time the polled response substitutes a fresh array.
  const anyActive = topics.some(
    (t) => t.status === "processing" || t.status === "publishing",
  );
  useEffect(() => {
    if (!anyActive) return;
    let alive = true;
    const tick = async () => {
      try {
        const rows = await listTopics();
        if (alive) setTopics(rows);
      } catch { /* transient — keep the last snapshot */ }
    };
    const handle = setInterval(tick, 6000);
    return () => {
      alive = false;
      clearInterval(handle);
    };
  }, [anyActive]);

  async function doDelete(id: string) {
    if (busyId) return;
    setBusyId(id);
    setError(null);
    try {
      await deleteTopic(id);
      setConfirmDeleteId(null);
      if (selectedId === id) onSelect("");
      setLocalBump((n) => n + 1);
    } catch (e) {
      setError(e instanceof Error ? e.message : "delete failed");
    } finally {
      setBusyId(null);
    }
  }

  return (
    <>
      <div
        style={{
          padding: "16px 16px 12px",
          borderBottom: "1px solid rgba(255,255,255,.06)",
          display: "flex",
          alignItems: "flex-start",
          gap: 8,
        }}
      >
        <div style={{ flex: 1, minWidth: 0 }}>
          <div
            style={{
              fontFamily: mono,
              fontSize: 10,
              letterSpacing: ".12em",
              color: "#5a5a62",
              marginBottom: 6,
            }}
          >
            {topics.length} TOPIC{topics.length === 1 ? "" : "S"}
          </div>
          <div
            style={{
              fontSize: 18,
              fontWeight: 700,
              color: "#f3f3f5",
              letterSpacing: "-.01em",
            }}
          >
            Research
          </div>
        </div>
        <button
          type="button"
          onClick={() => setWizardOpen(true)}
          disabled={agents.length === 0}
          title={
            agents.length === 0
              ? "Add an agent to your roster first"
              : "New research topic"
          }
          aria-label="New research topic"
          style={{
            flex: "none",
            width: 34,
            height: 34,
            borderRadius: 9,
            border: `1px dashed ${agents.length === 0 ? "rgba(255,255,255,.14)" : "rgba(255,111,97,.4)"}`,
            background:
              agents.length === 0
                ? "rgba(255,255,255,.02)"
                : "rgba(255,111,97,.06)",
            color: agents.length === 0 ? "#5a5a62" : "#ff6f61",
            cursor: agents.length === 0 ? "not-allowed" : "pointer",
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Plus aria-hidden size={17} />
        </button>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflow: "auto", padding: "8px" }}>
        {loading && topics.length === 0 ? (
          <p
            style={{
              fontFamily: mono,
              fontSize: 11,
              color: "#5a5a62",
              textAlign: "center",
              padding: 24,
            }}
          >
            Loading…
          </p>
        ) : topics.length === 0 ? (
          <p
            style={{
              fontFamily: mono,
              fontSize: 11,
              color: "#5a5a62",
              textAlign: "center",
              padding: 24,
              lineHeight: 1.6,
            }}
          >
            No topics yet. Hit the + button to launch the wizard.
          </p>
        ) : (
          topics.map((t) => {
            const on = t.id === selectedId;
            const dot = STATUS_COLOR[t.status];
            const confirming = confirmDeleteId === t.id;
            return (
              <div
                key={t.id}
                style={{
                  padding: "10px 12px",
                  marginBottom: 4,
                  borderRadius: 9,
                  border: `1px solid ${on ? "rgba(255,111,97,.5)" : "rgba(255,255,255,.06)"}`,
                  background: on ? "rgba(255,111,97,.08)" : "#101014",
                  display: "flex",
                  flexDirection: "column",
                  gap: 6,
                }}
              >
                <button
                  type="button"
                  onClick={() => onSelect(t.id)}
                  style={{
                    all: "unset",
                    cursor: "pointer",
                    color: "#eaeaee",
                    display: "flex",
                    flexDirection: "column",
                    gap: 4,
                  }}
                >
                  <div
                    style={{
                      fontSize: 13.5,
                      fontWeight: 600,
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                    }}
                  >
                    {t.title}
                  </div>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      fontFamily: mono,
                      fontSize: 10,
                      color: "#8a8a92",
                    }}
                  >
                    {t.status === "processing" || t.status === "publishing" ? (
                      <MiniSpinner color={dot} />
                    ) : (
                      <span
                        style={{
                          width: 7,
                          height: 7,
                          borderRadius: "50%",
                          background: dot,
                        }}
                      />
                    )}
                    <span style={{ color: dot }}>{t.status}</span>
                    <span style={{ opacity: 0.5 }}>·</span>
                    <span>{t.outcome_kind.replace("_", " ")}</span>
                  </div>
                </button>

                {confirming ? (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      marginTop: 4,
                    }}
                  >
                    <span
                      style={{
                        fontFamily: mono,
                        fontSize: 10.5,
                        color: "#ff8a7a",
                        flex: 1,
                      }}
                    >
                      Delete topic + all outcomes?
                    </span>
                    <button
                      type="button"
                      onClick={() => doDelete(t.id)}
                      disabled={busyId === t.id}
                      style={{
                        ...dangerBtn,
                        opacity: busyId === t.id ? 0.6 : 1,
                      }}
                    >
                      {busyId === t.id ? "…" : "Delete"}
                    </button>
                    <button
                      type="button"
                      onClick={() => setConfirmDeleteId(null)}
                      style={ghostBtn}
                    >
                      Cancel
                    </button>
                  </div>
                ) : (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 4,
                      marginTop: 2,
                    }}
                  >
                    <button
                      type="button"
                      title="Delete topic"
                      aria-label="Delete topic"
                      onClick={() => setConfirmDeleteId(t.id)}
                      disabled={busyId === t.id}
                      style={{
                        width: 24,
                        height: 24,
                        borderRadius: 6,
                        border: "1px solid rgba(255,255,255,.08)",
                        background: "transparent",
                        color: "#ff8a7a",
                        cursor: busyId === t.id ? "not-allowed" : "pointer",
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        opacity: busyId === t.id ? 0.5 : 1,
                      }}
                    >
                      <Trash2 aria-hidden size={12} />
                    </button>
                  </div>
                )}
              </div>
            );
          })
        )}
        {error ? (
          <p
            style={{
              fontFamily: mono,
              fontSize: 11,
              color: "#ff8a7a",
              padding: "8px 12px",
            }}
          >
            {error}
          </p>
        ) : null}
      </div>
      {wizardOpen && (
        <ResearchWizard
          agents={agents}
          onClose={() => setWizardOpen(false)}
          onCreated={(id) => {
            setWizardOpen(false);
            onCreated(id);
          }}
        />
      )}
    </>
  );
}

function MiniSpinner({ color }: { color: string }) {
  return (
    <svg width={10} height={10} viewBox="0 0 20 20" aria-hidden>
      <g fill="none" stroke={color} strokeWidth="2.6" strokeLinecap="round">
        <circle cx="10" cy="10" r="7.5" opacity="0.22" />
        <path d="M17.5 10 A7.5 7.5 0 0 0 10 2.5">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 10 10"
            to="360 10 10"
            dur="0.9s"
            repeatCount="indefinite"
          />
        </path>
      </g>
    </svg>
  );
}

const dangerBtn: React.CSSProperties = {
  padding: "4px 10px",
  borderRadius: 6,
  border: 0,
  background: "linear-gradient(135deg,#ff8a7a,#ff5f57)",
  color: "#2a0d0a",
  fontSize: 11,
  fontWeight: 700,
  cursor: "pointer",
};
const ghostBtn: React.CSSProperties = {
  padding: "4px 10px",
  borderRadius: 6,
  border: "1px solid rgba(255,255,255,.14)",
  background: "transparent",
  color: "#cfcfd5",
  fontSize: 11,
  fontWeight: 600,
  cursor: "pointer",
};