import { useState } from 'react'
import { DetailDrawer, SectionCard, StatusChip, formatDurationMs } from '@overdeck/deck-ui'
import { useCollectorState } from '../../lib/collector-queries'
import { CollectorQueryBoundary } from '../shared/CollectorQueryBoundary'
import { CollectorPageApp } from '../shared/CollectorPageApp'

type Row = { host: string; slot: number; state: 'free' | 'held' | 'wedged' | 'unknown'; holder: null | { pid: number; sessionId: string | null; sessionName: string | null; workKey: string | null; adwId: string | null; heldForSec: number } }
type Snapshot = { hosts: { host: string; cap: number; queueDepth: number; emergencyDebt: number }[]; rows: Row[]; observedAt: string }
const chip = (state: Row['state']) => state === 'free' ? 'success' : state === 'held' ? 'info' : state === 'wedged' ? 'danger' : 'warning'
function SeatsContent() {
 const query = useCollectorState(); const [selected, setSelected] = useState<Row | null>(null)
 return <CollectorQueryBoundary query={query}>{state => {
  const panel = state.panels.find(entry => entry.id === 'seats'); const data = panel?.data as Snapshot | undefined
  if (!data) return <SectionCard title="Seats"><p className="text-fg-muted">Limiter state unavailable.</p></SectionCard>
  return <div className="flex flex-col gap-3.5">{data.hosts.map(host => { const rows = data.rows.filter(row => row.host === host.host); const free = rows.filter(row => row.state === 'free').length
   return <SectionCard key={host.host} title={host.host} titleBadge={<span className="text-fg-subtle">{free} free of {host.cap}</span>}>
    <div className="mb-3 flex flex-wrap gap-3 text-sm text-fg-muted"><span>{host.queueDepth} waiting</span>{host.emergencyDebt > 0 ? <StatusChip status="warning" label="Emergency seat active — next free slot repays it" /> : null}</div>
    <ul className="flex flex-col divide-y divide-border">{rows.map(row => <li key={row.slot} className="flex items-center justify-between gap-3 py-3"><div className="min-w-0"><div className="flex items-center gap-2"><span className="font-medium text-fg">{row.slot < 0 ? 'Limiter wedge' : `Seat ${row.slot + 1}`}</span><StatusChip status={chip(row.state)} label={row.state} /></div>{row.holder ? <div className="mt-1 text-sm text-fg-muted"><span className="font-medium text-fg">{row.holder.sessionName ?? 'Unresolved holder'}</span>{row.holder.workKey ? <> · {row.holder.workKey}</> : null}{row.holder.heldForSec > 0 ? <> · held for {formatDurationMs(row.holder.heldForSec * 1000)}</> : null}</div> : <p className="mt-1 text-sm text-fg-muted">Available</p>}</div><div className="flex shrink-0 gap-2">{row.holder?.adwId ? <a className="text-sm text-accent focus-visible:outline focus-visible:outline-accent" href={`/factory/${encodeURIComponent(row.holder.adwId)}`}>Open run</a> : null}{row.holder ? <button type="button" className="text-sm text-accent focus-visible:outline focus-visible:outline-accent" onClick={() => setSelected(row)}>Details</button> : null}</div></li>)}</ul>
   </SectionCard> })}{selected?.holder ? <DetailDrawer eyebrow="Seat diagnostics" title={selected.slot < 0 ? 'Limiter wedge' : `Seat ${selected.slot + 1}`} titleId="seat-details" onClose={() => setSelected(null)}><dl className="mt-4 flex flex-col gap-2 text-sm text-fg-muted"><div><dt>Process</dt><dd className="text-fg">{selected.holder.pid || 'Not available'}</dd></div><div><dt>Session id</dt><dd className="text-fg">{selected.holder.sessionId ?? 'Not resolved'}</dd></div><div><dt>Work key</dt><dd className="text-fg">{selected.holder.workKey ?? 'Not resolved'}</dd></div></dl></DetailDrawer> : null}</div>
 }}</CollectorQueryBoundary>
}
export function SeatsApp() { return <CollectorPageApp><SeatsContent /></CollectorPageApp> }