import { useEffect, useState } from 'react'
import { seatsApi, type SeatUsage } from '@/api/seats'

interface RowProps { label: string; check: SeatUsage['engineer'] }

function SeatRow({ label, check }: RowProps) {
  const overLimit = check.limit !== null && check.current > check.limit
  const limitText = check.limit === null ? '∞' : check.limit
  return (
    <div className={overLimit ? 'text-warning' : ''}>
      <p className="text-xs uppercase tracking-wider text-muted-foreground mb-1">{label}</p>
      <p className="text-lg font-mono">{check.current} / {limitText}</p>
      {overLimit && <p className="text-xs">Over limit (grandfathered)</p>}
    </div>
  )
}

export function SeatCounterWidget() {
  const [usage, setUsage] = useState<SeatUsage | null>(null)

  useEffect(() => {
    seatsApi.getUsage().then(setUsage).catch(() => setUsage(null))
  }, [])

  if (!usage) return null

  return (
    <div className="rounded-lg border border-default bg-card p-4 grid grid-cols-2 gap-4">
      <SeatRow label="Engineer seats" check={usage.engineer} />
      <SeatRow label="L1 seats" check={usage.l1_tech} />
    </div>
  )
}