"use client";

// Team roster for a mission. Fetches the mission's team (via
// /api/teams/{id}) and lists each claw with its role + a link that
// hands the operator over to AGENT tier with that claw selected —
// where the existing WorkingOnNow / ReasoningStream / metrics live.

import { useEffect, useState } from "react";
import { ArrowUpRight, User } from "lucide-react";

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

interface Member {
  claw_id: string;
  role: string;
  node_id?: string;
}
interface TeamDetail {
  name?: string;
  members: Member[];
}
interface Claw {
  id: string;
  name: string;
  job_title?: string | null;
}

interface MissionTeamRow {
  team_id: string;
  purpose: string;
  team_name: string;
}

export function MissionTeamTab({
  missionId,
  teamId,
  onOpenClaw,
}: {
  missionId: string;
  teamId: string | null;
  onOpenClaw?: (clawId: string) => void;
}) {
  const [rows, setRows] = useState<MissionTeamRow[]>([]);
  const [teams, setTeams] = useState<Record<string, TeamDetail>>({});
  const [claws, setClaws] = useState<Record<string, Claw>>({});
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const [mtRes, cRes] = await Promise.all([
          fetch(`/api/missions/${missionId}/teams`),
          fetch(`/api/team/claws`),
        ]);
        if (!mtRes.ok) throw new Error(`teams ${mtRes.status}`);
        const data = (await mtRes.json()) as { teams: MissionTeamRow[] };
        // Fallback for legacy single-team missions: mission_teams empty
        // but mission.team_id is set — synthesize one "mission" row so
        // the UI doesn't look empty.
        const list = data.teams.length > 0
          ? data.teams
          : teamId
            ? [{ team_id: teamId, purpose: "mission", team_name: "Team" }]
            : [];
        const details = await Promise.all(
          list.map(async (r) => {
            const t = await fetch(`/api/teams/${r.team_id}`);
            return t.ok
              ? ([r.team_id, (await t.json()) as TeamDetail] as const)
              : null;
          }),
        );
        const clawList = cRes.ok ? ((await cRes.json()) as Claw[]) : [];
        if (!alive) return;
        setRows(list);
        setTeams(Object.fromEntries(details.filter(Boolean) as (readonly [string, TeamDetail])[]));
        setClaws(Object.fromEntries(clawList.map((c) => [c.id, c])));
      } catch (e) {
        if (alive) setError(e instanceof Error ? e.message : "load failed");
      }
    })();
    return () => {
      alive = false;
    };
  }, [missionId, teamId]);

  if (!teamId && rows.length === 0) {
    return (
      <div style={{ padding: 24, color: "#8a8a92", fontSize: 13 }}>
        No teams yet. Launch the mission to materialize teams from the picked
        templates.
      </div>
    );
  }
  if (error) {
    return <div style={{ padding: 24, color: "#ff8a7a", fontSize: 12 }}>{error}</div>;
  }

  // Group rows by purpose so each section renders as one card.
  const grouped = rows.reduce<Record<string, MissionTeamRow[]>>((acc, r) => {
    (acc[r.purpose] = acc[r.purpose] ?? []).push(r);
    return acc;
  }, {});

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {Object.entries(grouped).map(([purpose, purposeRows]) => (
        <div key={purpose} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <div
            style={{
              fontFamily: mono,
              fontSize: 10,
              letterSpacing: ".14em",
              color: "#7cd6e0",
              textTransform: "uppercase",
            }}
          >
            {purpose} · {purposeRows.length} team{purposeRows.length === 1 ? "" : "s"}
          </div>
          {purposeRows.map((r) => {
            const detail = teams[r.team_id];
            const members = detail?.members ?? [];
            return (
              <div
                key={r.team_id}
                style={{
                  border: "1px solid rgba(255,255,255,.07)",
                  borderRadius: 10,
                  background: "#101014",
                  overflow: "hidden",
                }}
              >
                <div
                  style={{
                    padding: "8px 12px",
                    borderBottom: "1px solid rgba(255,255,255,.05)",
                    display: "flex",
                    alignItems: "center",
                    gap: 8,
                  }}
                >
                  <span style={{ fontSize: 13, color: "#f3f3f5", fontWeight: 600 }}>
                    {r.team_name}
                  </span>
                  <span style={{ marginLeft: "auto", fontFamily: mono, fontSize: 10, color: "#8a8a92" }}>
                    {members.length} member{members.length === 1 ? "" : "s"}
                  </span>
                </div>
                {members.length === 0 ? (
                  <div style={{ padding: 12, color: "#8a8a92", fontSize: 12 }}>
                    Materializing…
                  </div>
                ) : (
                  members.map((m) => {
                    const claw = claws[m.claw_id];
                    return (
                      <div
                        key={m.claw_id}
                        style={{
                          display: "flex",
                          alignItems: "center",
                          gap: 10,
                          padding: "9px 12px",
                          borderTop: "1px solid rgba(255,255,255,.04)",
                        }}
                      >
                        <span
                          style={{
                            width: 24,
                            height: 24,
                            borderRadius: 6,
                            background: "rgba(255,111,97,.1)",
                            border: "1px solid rgba(255,111,97,.25)",
                            color: "#ff8a7a",
                            display: "inline-flex",
                            alignItems: "center",
                            justifyContent: "center",
                            flex: "none",
                          }}
                        >
                          <User size={12} />
                        </span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div
                            style={{
                              fontSize: 12.5,
                              color: "#f3f3f5",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              whiteSpace: "nowrap",
                            }}
                          >
                            {claw?.name ?? `claw ${m.claw_id.slice(0, 8)}`}
                          </div>
                          <div
                            style={{
                              fontFamily: mono,
                              fontSize: 10,
                              letterSpacing: ".08em",
                              color: "#8a8a92",
                              textTransform: "uppercase",
                            }}
                          >
                            {m.role}
                          </div>
                        </div>
                        {onOpenClaw && (
                          <button
                            type="button"
                            onClick={() => onOpenClaw(m.claw_id)}
                            title="Open this claw in the AGENT tier"
                            style={{
                              padding: "4px 9px",
                              borderRadius: 6,
                              border: "1px solid rgba(94,200,216,.4)",
                              background: "transparent",
                              color: "#5ec8d8",
                              fontSize: 11,
                              cursor: "pointer",
                              display: "inline-flex",
                              alignItems: "center",
                              gap: 4,
                            }}
                          >
                            Open
                            <ArrowUpRight size={10} />
                          </button>
                        )}
                      </div>
                    );
                  })
                )}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}