import React, { useEffect, useState } from 'react'

export default function StatsBar({ current }) {
  const [s, setS] = useState({})
  useEffect(() => {
    let alive = true
    const tick = async () => {
      try { const r = await fetch('/api/status'); const j = await r.json()
        if (alive) setS(j) } catch {}
    }
    tick(); const id = setInterval(tick, 1500); return () => { alive=false; clearInterval(id) }
  }, [])
  return (
    <header className="bg-panel border-b border-line px-4 py-2 flex items-center gap-5 text-[13px]">
      <div className="font-semibold text-accent flex items-center gap-2">
        <span className="mark-dot bg-accent" /> Helmet v5
      </div>
      <Stat label="cam" value={current.cam_id || '—'} />
      <Stat label="mode" value={current.mode} accent={current.mode==='live'?'text-warn':'text-muted'} />
      <Stat label="frames" value={s.frames_processed ?? 0} />
      <Stat label="viol" value={s.violations_emitted ?? 0} />
      <Stat label="s1" value={`${s.stage1_ms ?? 0}ms`} />
      <Stat label="s2" value={`${s.stage2_ms ?? 0}ms`} />
      <Stat label="plate" value={`${s.plate_ms ?? 0}ms`} />
      <Stat label="total" value={`${s.inference_ms ?? 0}ms`} />
    </header>
  )
}

function Stat({ label, value, accent }) {
  return (
    <div className="flex items-baseline gap-1.5">
      <span className="text-muted text-[11px] uppercase tracking-wider">{label}</span>
      <span className={`font-mono ${accent || 'text-text'}`}>{value}</span>
    </div>
  )
}