Teamup/client/src/pages/TeamPage.tsx

import { useCallback, useEffect, useMemo, useState } from 'react'
import { Sparkles } from 'lucide-react'
import { toast } from 'sonner'
import { AppShell } from '@/components/AppShell'
import type { FaceState } from '@/components/AgentFace'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { api } from '@/lib/api'
import { useAgentActivity } from '@/lib/useAgentActivity'
import { useAuth } from '@/store/auth'
import './team.css'

interface Product {
  id: string
  name: string
  kind: string
}

interface Team {
  id: string
  name: string
  productId: string | null
}

interface SeatRow {
  id: string
  teamId: string
  roleName: string
  state: string
  agentId: string | null
}

interface Agent {
  id: string
  name: string
  monogram: string | null
  autonomy: string
  skillKeys: string[]
}

interface AgentCard {
  seatId: string
  role: string
  team: string
  agent: Agent
}

/** Deterministic gradient + avatar ink per role family. Gradients are a deliberate exception to the
 * app's flat house style — used only on this showcase team view. */
function styleFor(role: string): { bg: string; ink: string } {
  const n = role.toLowerCase()
  if (/(product|owner|\bpo\b|\bpm\b)/.test(n)) return { bg: 'linear-gradient(135deg,#6366f1,#8b5cf6)', ink: '#5b21b6' }
  if (/(analyst|analysis|business)/.test(n)) return { bg: 'linear-gradient(135deg,#3b82f6,#06b6d4)', ink: '#0e7490' }
  if (/(backend|\bapi\b|server)/.test(n)) return { bg: 'linear-gradient(135deg,#4f46e5,#2563eb)', ink: '#3730a3' }
  if (/(frontend|front|web|client)/.test(n)) return { bg: 'linear-gradient(135deg,#7c3aed,#db2777)', ink: '#9d174d' }
  if (/(design|ux|ui)/.test(n)) return { bg: 'linear-gradient(135deg,#c026d3,#f43f5e)', ink: '#9d174d' }
  if (/(qa|test|quality)/.test(n)) return { bg: 'linear-gradient(135deg,#0d9488,#10b981)', ink: '#0f766e' }
  return { bg: 'linear-gradient(135deg,#475569,#6366f1)', ink: '#334155' }
}

const STATUS_LABEL: Record<FaceState, string> = {
  idle: 'idle · awaiting work',
  thinking: 'queued',
  working: 'working…',
  review: 'awaiting review',
  done: 'just delivered',
  failed: 'run failed',
}

function summaryOf(identity: string | null): string {
  if (!identity) return 'No product identity yet — set a PRODUCT.md to give the team shared context.'
  const m = identity.match(/^summary:\s*(.+)$/m)
  return m ? m[1].trim() : 'Shared PRODUCT.md identity is set for this product.'
}

/** A gradient-card overview of a product and its AI team — the product, its agents, and live status. */
export function TeamPage() {
  const organizationId = useAuth((s) => s.organizationId)
  const [products, setProducts] = useState<Product[]>([])
  const [productId, setProductId] = useState<string | null>(null)
  const [summary, setSummary] = useState('')
  const [cards, setCards] = useState<AgentCard[]>([])
  const [teamCount, setTeamCount] = useState(0)

  useEffect(() => {
    if (!organizationId) return
    void (async () => {
      try {
        const list = await api.get<Product[]>(`/api/orgboard/products?organizationId=${organizationId}`)
        setProducts(list)
        setProductId((cur) => cur ?? list[0]?.id ?? null)
      } catch (err) {
        toast.error((err as Error).message)
      }
    })()
  }, [organizationId])

  const loadProduct = useCallback(async (pid: string) => {
    try {
      const [teams, identity] = await Promise.all([
        api.get<Team[]>(`/api/orgboard/teams?organizationId=${organizationId}`),
        api.get<{ identity: string | null }>(`/api/orgboard/products/${pid}/identity`).catch(() => ({ identity: null })),
      ])
      const productTeams = teams.filter((t) => t.productId === pid)
      setTeamCount(productTeams.length)
      setSummary(summaryOf(identity.identity))

      const built: AgentCard[] = []
      for (const team of productTeams) {
        const seats = await api.get<SeatRow[]>(`/api/orgboard/seats?teamId=${team.id}`)
        for (const seat of seats.filter((s) => s.state === 'Ai' && s.agentId)) {
          const agent = await api.get<Agent>(`/api/orgboard/seats/${seat.id}/agent`).catch(() => null)
          if (agent) built.push({ seatId: seat.id, role: seat.roleName, team: team.name, agent })
        }
      }
      setCards(built)
    } catch (err) {
      toast.error((err as Error).message)
    }
  }, [organizationId])

  useEffect(() => {
    if (productId) void loadProduct(productId)
  }, [productId, loadProduct])

  const product = products.find((p) => p.id === productId) ?? null
  const stateFor = useAgentActivity(organizationId, useMemo(() => cards.map((c) => c.agent.id), [cards]))

  return (
    <AppShell>
      <div className="mx-auto max-w-5xl p-6">
        <header className="mb-5 flex items-center justify-between gap-4">
          <h1 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
            <Sparkles className="size-6" /> Team
          </h1>
          {products.length > 0 && (
            <Select value={productId ?? ''} onValueChange={setProductId}>
              <SelectTrigger className="w-56"><SelectValue placeholder="Pick a product" /></SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {products.map((p) => <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>)}
                </SelectGroup>
              </SelectContent>
            </Select>
          )}
        </header>

        {product && (
          <div className="team-hero">
            <div className="team-orb" />
            <span className="team-tag">Product · shared identity</span>
            <h3>{product.name}</h3>
            <p>{summary}</p>
            <div className="team-stats">
              <div><b>{teamCount}</b><span>teams</span></div>
              <div><b>{cards.length}</b><span>AI agents</span></div>
            </div>
          </div>
        )}

        <div className="team-grid">
          {cards.map((c) => {
            const s = styleFor(c.role)
            const face = stateFor(c.agent.id)
            const active = face === 'working' || face === 'thinking'
            return (
              <div key={c.seatId} className="team-card" style={{ background: s.bg }}>
                <div className="team-sheen" />
                <div className="team-top">
                  <div className="team-avatar" style={{ color: s.ink }}>{c.agent.monogram || c.agent.name.slice(0, 2).toUpperCase()}</div>
                  <span className="team-auto">{c.agent.autonomy}</span>
                </div>
                <div className="team-name">{c.agent.name}</div>
                <div className="team-role">{c.role} · {c.team}</div>
                <div className="team-chips">
                  {c.agent.skillKeys.slice(0, 3).map((k) => <span key={k}>{k}</span>)}
                  {c.agent.skillKeys.length === 0 && <span>no skills yet</span>}
                </div>
                <div className="team-status">
                  <span className={`team-dot${active ? ' team-dot-on' : ''}`} /> {STATUS_LABEL[face]}
                </div>
              </div>
            )
          })}
        </div>

        {cards.length === 0 && product && (
          <p className="mt-4 text-sm text-muted-foreground">
            No AI agents on {product.name} yet — staff its seats on the AI seats page.
          </p>
        )}
      </div>
    </AppShell>
  )
}