// pages/SystemStatus.jsx
import { useLiveData } from '../context/LiveDataContext'
import { Card, StatusBadge, MetricCard } from '../components/ui'
import { Activity, Brain, Car, Radio } from 'lucide-react'

export default function SystemStatus() {
  const { status, junctions, wsStatus } = useLiveData()

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-lg font-bold text-white">System Status</h2>
        <p className="text-sm text-slate-400">Runtime health and configuration overview</p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <MetricCard label="SUMO Status" value={status?.system_status ?? '—'} icon={Activity}
          accent={status?.system_status === 'running' ? 'green' : 'blue'} />
        <MetricCard label="Sim Time" value={status?.simulation_time != null ? `${Number(status.simulation_time).toFixed(1)}s` : '—'} icon={Activity} accent="blue" />
        <MetricCard label="Junctions" value={junctions?.length ?? 0} icon={Radio} accent="blue" />
        <MetricCard label="Vehicles" value={status?.vehicle_count ?? 0} icon={Car} accent="blue" />
      </div>

      <Card title="System Information">
        <div className="space-y-3 text-sm">
          <Row label="System Status" value={<StatusBadge status={status?.system_status ?? 'stopped'} />} />
          <Row label="Simulation Mode" value={status?.simulation_mode ?? '—'} />
          <Row label="GNN Prediction" value={<StatusBadge status={status?.prediction_available ? 'ACTIVE' : 'INACTIVE'} />} />
          <Row label="WebSocket" value={<StatusBadge status={wsStatus.toUpperCase()} />} />
          <Row label="Started At" value={status?.started_at ? new Date(status.started_at).toLocaleString() : '—'} />
          <Row label="Last Updated" value={status?.updated_at ? new Date(status.updated_at).toLocaleTimeString() : '—'} />
          <Row label="Emergency Count" value={status?.emergency_count ?? 0} />
          <Row label="Current AI Method" value={status?.current_ai_method ?? '—'} />
        </div>
      </Card>

      <Card title="Architecture">
        <pre className="text-xs text-slate-400 whitespace-pre-wrap leading-relaxed">
{`SUMO / TraCI
  → dynamic signalized-junction discovery
  → topology, movements, phase-derived conflict graph
  → valid green phases
  → SUMO traffic state and 10×36 history
  → GNN prediction
  → movement and phase demand
  → near-miss safety risk
  → DecisionEngine
  → emergency priority when present
  → SafetyGate
  → AI / rule / density / fixed-time / safe-stop fallback
  → yellow transition and TraCI phase execution`}
        </pre>
      </Card>
    </div>
  )
}

function Row({ label, value }) {
  return (
    <div className="flex items-center justify-between py-1.5 border-b border-slate-700/30 last:border-0">
      <span className="text-slate-400">{label}</span>
      <span className="text-slate-200">{value}</span>
    </div>
  )
}