import { cn } from '@/lib/utils'

interface Props {
  testName: string
  timeLeft: number   // seconds remaining; -1 = no limit (count-up mode)
  timeUsed: number   // seconds elapsed (used when no limit)
  onSubmit: () => void
}

function formatTime(s: number): string {
  const h = Math.floor(s / 3600)
  const m = Math.floor((s % 3600) / 60)
  const sec = s % 60
  if (h > 0) return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
}

export function TestSessionHeader({ testName, timeLeft, timeUsed, onSubmit }: Props) {
  const isUnlimited = timeLeft === -1
  const displaySeconds = isUnlimited ? timeUsed : timeLeft
  const isUrgent = !isUnlimited && timeLeft < 300  // last 5 min

  return (
    <header className="h-14 flex items-center justify-between px-5 bg-white border-b border-slate-200 shadow-sm flex-shrink-0 z-10">
      <span className="font-bold text-slate-800 text-sm truncate max-w-xs">{testName}</span>

      <span className={cn(
        'text-2xl font-extrabold tabular-nums',
        isUrgent ? 'text-red-600 timer-urgent' : 'text-blue-600',
      )}>
        {isUnlimited ? <span className="text-slate-400 text-base">∞</span> : formatTime(displaySeconds)}
      </span>

      <button
        onClick={onSubmit}
        className="flex items-center gap-1.5 px-4 py-2 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
      >
        <span className="material-symbols-outlined" style={{ fontSize: 16 }}>send</span>
        Nộp bài
      </button>
    </header>
  )
}