import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'

interface StatusSummaryProps {
  redCount: number
  yellowCount: number
  greenCount: number
  totalParticipants: number
  elapsedSeconds: number
  lastUpdated?: string
}

function formatElapsed(totalSeconds: number): string {
  const h = Math.floor(totalSeconds / 3600)
  const m = Math.floor((totalSeconds % 3600) / 60)
  const s = totalSeconds % 60
  return [h, m, s].map((n) => String(n).padStart(2, '0')).join(':')
}

export function StatusSummary({
  redCount,
  yellowCount,
  greenCount,
  totalParticipants,
  elapsedSeconds,
  lastUpdated,
}: StatusSummaryProps) {
  const items = [
    { name: 'RED', label: 'Butuh Bantuan', count: redCount, bg: 'bg-red-soft', text: 'text-red', accent: 'border-t-red' },
    { name: 'YELLOW', label: 'Punya Pertanyaan', count: yellowCount, bg: 'bg-yellow-soft', text: 'text-yellow', accent: 'border-t-yellow' },
    { name: 'GREEN', label: 'Lancar', count: greenCount, bg: 'bg-green-soft', text: 'text-green', accent: 'border-t-green' },
  ]

  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between space-y-0">
        <CardTitle>Status Langsung</CardTitle>
        <div className="flex items-center gap-4 text-sm text-body">
          <span>{totalParticipants} peserta</span>
          <span className="tabular-nums">{formatElapsed(elapsedSeconds)}</span>
          {lastUpdated && <span>Diperbarui {new Date(lastUpdated).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>}
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 gap-3" role="status" aria-live="polite">
          {items.map((item) => (
            <div key={item.name} className={`rounded-xl border-t-4 ${item.accent} ${item.bg} p-4 text-center`}>
              <p className={`text-sm font-semibold tracking-wide ${item.text}`}>{item.name}</p>
              <p className="mt-2 text-4xl font-bold text-ink">{item.count}</p>
              <p className="mt-1 text-xs text-body">{item.label}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}