"use client";

// Canvas for the Research tier — selected topic detail: title, description,
// outcome chip, assigned agents grid, status pill, and the state-appropriate
// primary action button (start → submit-review → request-publish).

import { useEffect, useState } from "react";

import type { Agent } from "@/lib/api/schemas";
import {
  getTopic,
  requestPublish,
  startTopic,
  submitReview,
  type TopicDetail,
  type TopicStatus,
} from "@/lib/api/research";

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",
};

function nextAction(status: TopicStatus): {
  label: string;
  run: (id: string) => Promise<unknown>;
} | null {
  switch (status) {
    case "standby":
      return { label: "Start research", run: startTopic };
    case "processing":
      return { label: "Submit for review", run: submitReview };
    case "reviewing":
      return { label: "Request publish", run: requestPublish };
    default:
      return null;
  }
}

export function ResearchCanvas({
  selectedId,
  agents,
  refreshKey,
  onChanged,
}: {
  selectedId: string | null;
  agents: Agent[];
  refreshKey: number;
  onChanged: () => void;
}) {
  const [topic, setTopic] = useState<TopicDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [acting, setActing] = useState(false);

  useEffect(() => {
    let alive = true;
    const load = async () => {
      if (!selectedId) {
        if (alive) setTopic(null);
        return;
      }
      setLoading(true);
      setError(null);
      try {
        const d = await getTopic(selectedId);
        if (alive) setTopic(d);
      } catch (e) {
        if (alive) setError(e instanceof Error ? e.message : "load failed");
      } finally {
        if (alive) setLoading(false);
      }
    };
    load();
    return () => {
      alive = false;
    };
  }, [selectedId, refreshKey]);

  if (!selectedId) {
    return <Placeholder />;
  }
  if (loading && !topic) {
    return (
      <PlaceholderText>Loading topic…</PlaceholderText>
    );
  }
  if (error) {
    return <PlaceholderText color="#ff8a7a">{error}</PlaceholderText>;
  }
  if (!topic) {
    return <Placeholder />;
  }

  const dot = STATUS_COLOR[topic.status];
  const action = nextAction(topic.status);
  const agentById = new Map(agents.map((a) => [a.id, a]));

  async function runAction() {
    if (!action) return;
    setActing(true);
    try {
      await action.run(topic!.id);
      onChanged();
    } catch (e) {
      setError(e instanceof Error ? e.message : "action failed");
    } finally {
      setActing(false);
    }
  }

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        overflow: "auto",
        background:
          "radial-gradient(120% 90% at 55% 38%, #0e0e13 0%, #08080a 70%)",
        padding: 32,
      }}
    >
      <div style={{ maxWidth: 780, margin: "0 auto", display: "flex", flexDirection: "column", gap: 24 }}>
        {/* Header */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              fontFamily: mono,
              fontSize: 11,
              color: "#8a8a92",
            }}
          >
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot }} />
            <span style={{ color: dot, fontWeight: 700 }}>{topic.status.toUpperCase()}</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{topic.outcome_kind.replace("_", " ")}</span>
            {topic.published_at && (
              <>
                <span style={{ opacity: 0.5 }}>·</span>
                <span>published {new Date(topic.published_at).toLocaleDateString()}</span>
              </>
            )}
          </div>
          <h1
            style={{
              fontSize: 30,
              fontWeight: 700,
              color: "#f3f3f5",
              letterSpacing: "-.02em",
              margin: 0,
            }}
          >
            {topic.title}
          </h1>
        </div>

        {/* Agents */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={sectionHeader}>Agents ({topic.agents.length})</div>
          {topic.agents.length === 0 ? (
            <p style={hintStyle}>None assigned yet.</p>
          ) : (
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
                gap: 10,
              }}
            >
              {topic.agents.map((slot) => {
                const a = agentById.get(slot.agent_id);
                return (
                  <div
                    key={slot.agent_id}
                    style={{
                      padding: 12,
                      borderRadius: 10,
                      background: "#101014",
                      border: "1px solid rgba(255,255,255,.06)",
                      display: "flex",
                      flexDirection: "column",
                      gap: 4,
                    }}
                  >
                    <div style={{ fontSize: 14, fontWeight: 600, color: "#f3f3f5" }}>
                      {a?.name ?? "(missing agent)"}
                    </div>
                    <div style={{ fontFamily: mono, fontSize: 11, color: "#8a8a92" }}>
                      {slot.role_slot ?? a?.job_title ?? "—"}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Description */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={sectionHeader}>Description</div>
          <pre
            style={{
              padding: 16,
              borderRadius: 10,
              background: "#101014",
              border: "1px solid rgba(255,255,255,.06)",
              color: "#eaeaee",
              fontFamily: mono,
              fontSize: 12.5,
              lineHeight: 1.6,
              whiteSpace: "pre-wrap",
              wordBreak: "break-word",
              margin: 0,
            }}
          >
            {topic.description}
          </pre>
        </div>

        {/* Action */}
        {action && (
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <button
              type="button"
              onClick={runAction}
              disabled={acting}
              style={{
                padding: "12px 22px",
                borderRadius: 10,
                border: 0,
                background: "linear-gradient(135deg,#ff8a7a,#ff5f57)",
                color: "#2a0d0a",
                fontSize: 14,
                fontWeight: 700,
                cursor: acting ? "default" : "pointer",
                opacity: acting ? 0.6 : 1,
              }}
            >
              {acting ? "Working…" : action.label}
            </button>
            {error && (
              <span style={{ fontFamily: mono, fontSize: 12, color: "#ff8a7a" }}>{error}</span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function Placeholder() {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        background:
          "radial-gradient(120% 90% at 55% 38%, #0e0e13 0%, #08080a 70%)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: 48,
      }}
    >
      <div style={{ maxWidth: 460, textAlign: "center" }}>
        <div style={{ fontSize: 22, fontWeight: 700, color: "#f3f3f5", marginBottom: 12 }}>
          Research
        </div>
        <div style={{ fontFamily: mono, fontSize: 12, color: "#8a8a92", lineHeight: 1.6 }}>
          Pick a topic on the left, or hit the + button in the sidebar to launch
          the wizard.
        </div>
      </div>
    </div>
  );
}

function PlaceholderText({
  children,
  color = "#8a8a92",
}: {
  children: React.ReactNode;
  color?: string;
}) {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: mono,
        fontSize: 12,
        color,
      }}
    >
      {children}
    </div>
  );
}

const sectionHeader: React.CSSProperties = {
  fontFamily: mono,
  fontSize: 10,
  letterSpacing: ".12em",
  color: "#5a5a62",
  textTransform: "uppercase",
};
const hintStyle: React.CSSProperties = {
  fontFamily: mono,
  fontSize: 12,
  color: "#8a8a92",
};