"use client";

// The integrated post-login dashboard (design comp: Clawmates Dashboard.html).
// One screen: top bar (breadcrumb) · ORG/CO/TEAM/CLAW tier rail · context list ·
// topology canvas · agent "computer" slide-out · status bar. Self-contained
// in-memory state machine, wired to the existing API.

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Plus } from "lucide-react";

import { MeshMark } from "@/components/brand/MeshMark";
import { ComputerPanel } from "@/components/computer/ComputerPanel";
import type { Agent } from "@/lib/api/schemas";
import type { GroupSummary, StructureNode, StructureStats } from "@/lib/api/structure";
import {
  TopologyCanvas,
  modeForKind,
  type CanvasNode,
  type TopologyMode,
} from "./TopologyCanvas";

type Tier = "org" | "company" | "team" | "claw";

async function getJSON<T>(url: string, fallback: T): Promise<T> {
  try {
    const r = await fetch(url);
    return r.ok ? ((await r.json()) as T) : fallback;
  } catch {
    return fallback;
  }
}

const railIcon: Record<Tier, React.ReactNode> = {
  org: (
    <svg width="20" height="20" viewBox="0 0 20 20">
      <circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.4" fill="none" />
      <circle cx="10" cy="10" r="2.6" fill="currentColor" />
    </svg>
  ),
  company: (
    <svg width="20" height="20" viewBox="0 0 20 20">
      <rect x="3.5" y="5" width="6" height="11" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" />
      <rect x="10.5" y="2.5" width="6" height="13.5" rx="1" stroke="currentColor" strokeWidth="1.4" fill="none" />
    </svg>
  ),
  team: (
    <svg width="20" height="20" viewBox="0 0 20 20">
      <circle cx="10" cy="5" r="2.2" fill="currentColor" />
      <circle cx="5" cy="13.5" r="2.2" fill="currentColor" />
      <circle cx="15" cy="13.5" r="2.2" fill="currentColor" />
      <path d="M10 5 L5 13.5 M10 5 L15 13.5 M5 13.5 L15 13.5" stroke="currentColor" strokeWidth="1.1" opacity=".5" />
    </svg>
  ),
  claw: (
    <svg width="20" height="20" viewBox="0 0 20 20">
      <rect x="4" y="4" width="12" height="12" rx="3.5" stroke="currentColor" strokeWidth="1.4" fill="none" />
      <circle cx="10" cy="10" r="2.4" fill="currentColor" />
    </svg>
  ),
};
const TIERS: { key: Tier; label: string }[] = [
  { key: "org", label: "ORG" },
  { key: "company", label: "CO" },
  { key: "team", label: "TEAM" },
  { key: "claw", label: "CLAW" },
];

export function Dashboard({ user }: { user: { display_name?: string; email?: string } }) {
  const [tier, setTier] = useState<Tier>("team");
  const [orgId, setOrgId] = useState<string | null>(null);
  const [companyId, setCompanyId] = useState<string | null>(null);
  const [teamId, setTeamId] = useState<string | null>(null);
  const [clawId, setClawId] = useState<string | null>(null);
  const [mode, setMode] = useState<TopologyMode>("hub-spoke");

  const [orgs, setOrgs] = useState<GroupSummary[]>([]);
  const [companies, setCompanies] = useState<GroupSummary[]>([]);
  const [teams, setTeams] = useState<GroupSummary[]>([]);
  const [roster, setRoster] = useState<Agent[]>([]);
  const [stats, setStats] = useState<StructureStats | null>(null);
  const [node, setNode] = useState<StructureNode | null>(null);
  const [loaded, setLoaded] = useState(false);
  const modeKey = useRef<string>("");

  // Load the workspace + default to the most-recent team.
  useEffect(() => {
    let live = true;
    void (async () => {
      const [t, c, o, r, s] = await Promise.all([
        getJSON<GroupSummary[]>("/api/teams", []),
        getJSON<GroupSummary[]>("/api/companies", []),
        getJSON<GroupSummary[]>("/api/orgs", []),
        getJSON<Agent[]>("/api/team/claws", []),
        getJSON<StructureStats | null>("/api/structure/stats", null),
      ]);
      if (!live) return;
      setTeams(t);
      setCompanies(c);
      setOrgs(o);
      setRoster(r);
      setStats(s);
      if (t[0]) {
        setTier("team");
        setTeamId(t[0].id);
      } else if (c[0]) {
        setTier("company");
        setCompanyId(c[0].id);
      } else if (o[0]) {
        setTier("org");
        setOrgId(o[0].id);
      }
      setLoaded(true);
    })();
    return () => {
      live = false;
    };
  }, []);

  // The canvas always renders a group's children; a claw selection keeps the
  // team canvas and opens the slide-out.
  const canvasLevel: "org" | "company" | "team" | null =
    tier === "org" ? "org" : tier === "company" ? "company" : "team";
  const canvasId = tier === "org" ? orgId : tier === "company" ? companyId : teamId;

  // Clear the canvas when its target changes (render-phase reset — avoids a
  // synchronous setState inside the effect).
  const ckey = `${canvasLevel ?? ""}:${canvasId ?? ""}`;
  const [seenCanvas, setSeenCanvas] = useState(ckey);
  if (seenCanvas !== ckey) {
    setSeenCanvas(ckey);
    setNode(null);
  }

  useEffect(() => {
    if (!canvasLevel || !canvasId) return;
    let live = true;
    void (async () => {
      const n = await getJSON<StructureNode | null>(
        `/api/structure/${canvasLevel}/${canvasId}`,
        null,
      );
      if (!live) return;
      setNode(n);
      // Reset the view-mode to the group's real kind only when the group changes.
      const key = `${canvasLevel}:${canvasId}`;
      if (n && modeKey.current !== key) {
        modeKey.current = key;
        setMode(modeForKind(n.kind));
      }
    })();
    return () => {
      live = false;
    };
  }, [canvasLevel, canvasId]);

  const rosterMap = new Map(roster.map((a) => [a.id, a]));
  const nodes: CanvasNode[] = (node?.children ?? []).map((c) => ({
    id: c.child_id,
    label: c.child_name || rosterMap.get(c.child_id)?.name || c.role,
    role: c.role,
    level: c.child_level,
    status: rosterMap.get(c.child_id)?.status,
  }));

  function onNodeClick(n: CanvasNode) {
    if (n.level === "claw") {
      setClawId(n.id);
      setTier("claw");
    } else if (n.level === "team") {
      setTeamId(n.id);
      setClawId(null);
      setTier("team");
    } else {
      setCompanyId(n.id);
      setTeamId(null);
      setClawId(null);
      setTier("company");
    }
  }

  function gotoTier(t: Tier) {
    if (t === "org" && !orgId && orgs[0]) setOrgId(orgs[0].id);
    if (t === "company" && !companyId && companies[0]) setCompanyId(companies[0].id);
    if (t === "team" && !teamId && teams[0]) setTeamId(teams[0].id);
    if (t === "claw" && !clawId) return; // nothing selected yet
    setTier(t);
  }

  const teamName = teams.find((x) => x.id === teamId)?.name;
  const companyName = companies.find((x) => x.id === companyId)?.name;
  const orgName = orgs.find((x) => x.id === orgId)?.name;
  const clawName = clawId ? (rosterMap.get(clawId)?.name ?? "Claw") : null;
  const crumbs = [orgName, companyName, teamName, tier === "claw" ? clawName : null].filter(
    Boolean,
  ) as string[];
  const initial = (user.display_name || user.email || "?").trim().charAt(0).toUpperCase();
  const running = stats?.running_now ?? 0;
  const clawCount = stats?.claw_count ?? roster.length;

  const empty = loaded && teams.length === 0 && companies.length === 0 && orgs.length === 0;

  return (
    <div className="flex h-dvh flex-col bg-background text-foreground">
      {/* TOP BAR */}
      <header className="flex h-[54px] flex-none items-center gap-3.5 border-b border-white/[0.06] bg-gradient-to-b from-[#0d0d10] to-[#0a0a0c] px-4">
        <Link href="/" className="flex items-center gap-2.5 text-coral">
          <MeshMark size={22} title="" />
          <span className="text-[15px] font-bold tracking-[-0.01em] text-foreground">Clawmates</span>
        </Link>
        <span className="h-[22px] w-px bg-white/[0.08]" />
        <nav className="flex items-center gap-1.5 font-mono text-xs">
          {crumbs.length === 0 ? (
            <span className="text-[#6a6a72]">Workspace</span>
          ) : (
            crumbs.map((c, i) => (
              <span key={i} className="flex items-center gap-1.5">
                {i > 0 ? <span className="text-[#3a3a40]">/</span> : null}
                <span className={i === crumbs.length - 1 ? "text-coral-light" : "text-[#9a9aa2]"}>
                  {c}
                </span>
              </span>
            ))
          )}
        </nav>
        <div className="flex-1" />
        <div
          className="hidden items-center gap-1.5 rounded-[7px] border px-2.5 py-[5px] font-mono text-[11px] text-online sm:flex"
          style={{ borderColor: "rgba(95,208,138,.25)", background: "rgba(95,208,138,.06)" }}
        >
          <span className={`size-[7px] rounded-full bg-online ${running > 0 ? "cm-blink" : ""}`} />
          {clawCount} claws{running > 0 ? " · running" : ""}
        </div>
        <Link
          href="/claws/new"
          className="flex items-center gap-1.5 rounded-lg bg-gradient-to-br from-coral-light to-coral-dark px-3 py-1.5 text-xs font-bold text-[#2a0d0a] transition-[filter] hover:brightness-110"
        >
          <span className="text-[15px] leading-none">+</span> Deploy
        </Link>
        <span
          className="flex size-8 items-center justify-center rounded-lg text-[13px] font-bold text-[#2a0d0a]"
          style={{ background: "linear-gradient(135deg,#ff8a7a,#ff5f57)" }}
          title={user.display_name || user.email}
        >
          {initial}
        </span>
      </header>

      {/* BODY */}
      <div className="flex min-h-0 flex-1">
        {/* TIER RAIL */}
        <div className="flex w-[60px] flex-none flex-col items-center border-r border-white/[0.06] bg-[#0a0a0c] py-3.5">
          <div className="flex flex-col items-center gap-1.5">
            {TIERS.map((t) => {
              const active = tier === t.key;
              return (
                <button
                  key={t.key}
                  type="button"
                  onClick={() => gotoTier(t.key)}
                  className={`relative flex h-12 w-[42px] flex-col items-center justify-center gap-1 rounded-[10px] transition-colors ${
                    active ? "bg-coral/[0.12] text-coral" : "text-[#6a6a72] hover:text-foreground"
                  }`}
                >
                  {active ? (
                    <span className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r bg-coral" />
                  ) : null}
                  {railIcon[t.key]}
                  <span className="font-mono text-[8px]">{t.label}</span>
                </button>
              );
            })}
          </div>
          <div className="flex-1" />
          <Link
            href="/claws/new"
            title="Deploy"
            className="flex size-[30px] items-center justify-center rounded-lg border border-dashed border-white/[0.16] text-coral"
          >
            <Plus size={16} />
          </Link>
        </div>

        {/* CONTEXT LIST */}
        <div className="flex w-[252px] flex-none flex-col border-r border-white/[0.06] bg-[#0b0b0e]">
          <div className="px-4 pb-2.5 pt-4">
            <div className="font-mono text-[10px] tracking-[0.12em] text-[#5a5a62]">
              {tier === "org" || tier === "company" || tier === "team"
                ? `${tier.toUpperCase()} · ${nodes.length}`
                : "CLAW"}
            </div>
            <div className="text-[18px] font-bold tracking-[-0.01em]">{node?.name ?? "…"}</div>
          </div>
          <div className="flex-1 overflow-y-auto px-2 pb-2 [&::-webkit-scrollbar]:hidden">
            {nodes.length === 0 ? (
              <p className="px-2 text-xs text-muted-foreground">
                {loaded ? "Empty" : "Loading…"}
              </p>
            ) : (
              <ul className="flex flex-col gap-0.5">
                {nodes.map((n) => {
                  const sel = n.level === "claw" && n.id === clawId;
                  const grad = rosterMap.get(n.id)?.accent;
                  return (
                    <li key={n.id}>
                      <button
                        type="button"
                        onClick={() => onNodeClick(n)}
                        className={`relative flex w-full items-center gap-2.5 rounded-[9px] px-2.5 py-2 text-left transition-colors ${
                          sel ? "bg-coral/[0.12]" : "hover:bg-hover-bg"
                        }`}
                      >
                        {sel ? (
                          <span className="absolute left-0 top-2 bottom-2 w-[3px] rounded-r bg-coral" />
                        ) : null}
                        <span
                          className="flex size-[30px] shrink-0 items-center justify-center rounded-lg text-xs font-bold text-[#08080a]"
                          style={{ background: grad || "var(--color-coral)" }}
                        >
                          {(n.label || n.role).charAt(0).toUpperCase()}
                        </span>
                        <span className="min-w-0 flex-1">
                          <span className="block truncate text-[13px] font-semibold">{n.label}</span>
                          <span className="block truncate font-mono text-[10px] text-[#6a6a72]">
                            {n.role}
                          </span>
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            )}
          </div>
        </div>

        {/* CANVAS */}
        <div className="min-w-0 flex-1">
          {empty ? (
            <div className="flex h-full flex-col items-center justify-center gap-3 text-center">
              <MeshMark size={40} title="" />
              <h1 className="text-xl font-semibold">No teams yet</h1>
              <p className="text-sm text-muted-foreground">Deploy a team to populate your dashboard.</p>
              <Link
                href="/claws/new"
                className="rounded-full bg-coral px-4 py-2 text-sm font-medium text-white"
              >
                Deploy a team
              </Link>
            </div>
          ) : (
            <TopologyCanvas
              nodes={nodes}
              mode={mode}
              onModeChange={setMode}
              onNodeClick={onNodeClick}
              selectedId={clawId}
            />
          )}
        </div>

        {/* COMPUTER SLIDE-OUT */}
        {clawId ? (
          <div className="cm-fade flex w-[330px] flex-none flex-col border-l border-white/[0.06] bg-[#0a0a0c] p-3">
            <div className="mb-2 flex items-center justify-between">
              <span className="font-mono text-[10px] tracking-[0.12em] text-[#5a5a62]">COMPUTER</span>
              <button
                type="button"
                onClick={() => {
                  setClawId(null);
                  if (tier === "claw") setTier("team");
                }}
                className="text-muted-foreground hover:text-foreground"
                aria-label="Close computer"
              >
                ✕
              </button>
            </div>
            <div className="min-h-0 flex-1 overflow-y-auto [&::-webkit-scrollbar]:hidden">
              <ComputerPanel clawId={clawId} clawName={clawName ?? "Claw"} />
            </div>
          </div>
        ) : null}
      </div>

      {/* STATUS BAR */}
      <footer className="flex h-7 flex-none items-center gap-4 border-t border-white/[0.06] bg-[#0a0a0c] px-4 font-mono text-[10px] text-[#6a6a72]">
        <span className="flex items-center gap-1.5">
          <span className={`size-[6px] rounded-full ${running > 0 ? "bg-running cm-blink" : "bg-[#3a3a40]"}`} />
          durable runner {running > 0 ? `· ${running} active` : "· idle"}
        </span>
        <span className="text-[#3a3a40]">·</span>
        <span className="text-online">§15 sandbox: isolated</span>
        <div className="flex-1" />
        <Link href="/approvals" className="hover:text-foreground">
          doors awaiting approval
        </Link>
      </footer>
    </div>
  );
}