import { useSystemOverview, useBrainStats } from '../hooks/usePulseAPI'
import BrainStats from '../components/BrainStats'
import TaskBoard from '../components/TaskBoard'
import AgentGrid from '../components/AgentGrid'

function StatCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
  return (
    <div className="glass-card p-4">
      <p className="text-xs text-slate-400 uppercase tracking-wider">{label}</p>
      <p className="text-2xl font-bold text-sky-400 mt-1">{value}</p>
      {sub && <p className="text-xs text-slate-500 mt-1">{sub}</p>}
    </div>
  )
}


export default function Dashboard() {
  const { data: overview, loading: overviewLoading } = useSystemOverview()
  const { data: brainStats } = useBrainStats()

  return (
    <div className="min-h-screen bg-slate-950 p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-8">
        <div>
          <h1 className="text-3xl font-bold text-sky-400 tracking-tight">PULSE</h1>
          <p className="text-sm text-slate-500">Neural Operating System</p>
        </div>
        <div className="flex items-center gap-2">
          <span className={`status-dot ${overviewLoading ? 'stopped' : 'working'}`} />
          <span className="text-xs text-slate-400">{overviewLoading ? 'Connecting...' : 'Live'}</span>
        </div>
      </div>

      {/* Stat cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <StatCard label="Workforce" value={overview?.agents?.total ?? '—'} sub={`${overview?.agents?.working ?? 0} working`} />
        <StatCard label="Tasks Open" value={overview?.tasks?.open ?? '—'} />
        <StatCard label="Tasks Done" value={overview?.tasks?.done ?? '—'} />
        <StatCard label="Synapses" value={brainStats?.total_synapses ?? '—'} sub={`${((brainStats?.integrity_ratio ?? 0) * 100).toFixed(0)}% integrity`} />
      </div>

      {/* Agent Grid Component */}
      <div className="mb-8">
        <AgentGrid />
      </div>

      {/* Task Board Component */}
      <div className="mb-8">
        <TaskBoard />
      </div>

      {/* Brain Stats Component */}
      <div className="mt-8">
        <BrainStats />
      </div>
    </div>
  )
}
