function fmt(seconds) {
  if (seconds == null) return null
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  if (h > 0) return `${h}h ${m}m`
  return `${m}m`
}

export default function TimeDisplay({ elapsedSeconds, estimatedRemainingSeconds, byType }) {
  const missingTypes = byType
    ? Object.entries(byType)
        .filter(([, v]) => v.remaining > 0 && v.avgSeconds === null)
        .map(([t]) => t)
    : []

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 flex flex-col gap-3">
      <div className="flex gap-6">
        <div>
          <p className="text-slate-400 text-xs uppercase tracking-widest">Time Elapsed</p>
          <p className="text-2xl font-bold text-slate-100 mt-0.5">
            {fmt(elapsedSeconds) ?? '—'}
          </p>
        </div>
        <div>
          <p className="text-slate-400 text-xs uppercase tracking-widest">Est. Remaining</p>
          <p className={`text-2xl font-bold mt-0.5 ${estimatedRemainingSeconds != null ? 'text-slate-100' : 'text-amber-400'}`}>
            {estimatedRemainingSeconds != null ? fmt(estimatedRemainingSeconds) : '—'}
          </p>
        </div>
      </div>

      {missingTypes.length > 0 && (
        <p className="text-amber-400 text-xs">
          ⚠ No completed {missingTypes.join('/')} tests yet — enter avg time in Settings to estimate.
        </p>
      )}
    </div>
  )
}
