scheduler/frontend/src/components/FailedBanner.jsx

export default function FailedBanner({ rerunTests, onDecision }) {
  if (!rerunTests || rerunTests.length === 0) return null

  const totalMinutes = rerunTests.reduce((sum, t) => sum + (t.estimated_minutes ?? 0), 0)
  const hours = Math.floor(totalMinutes / 60)
  const mins = totalMinutes % 60
  const timeStr = hours > 0 ? `${hours}h ${mins}m` : `${mins}m`

  // Group test IDs by device
  const byDevice = rerunTests.reduce((acc, t) => {
    const device = t.device ?? 'Unknown'
    if (!acc[device]) acc[device] = []
    acc[device].push(t.test_id)
    return acc
  }, {})
  const deviceSummaries = Object.entries(byDevice)
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([device, ids]) => `${device}: ${ids.join(', ')}`)

  return (
    <div className="flex items-start gap-4 px-6 py-3 bg-red-900/70 border-b border-red-700 text-red-100">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="w-5 h-5 mt-0.5 shrink-0 text-red-300"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
        />
      </svg>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium">
          <span className="font-semibold">{rerunTests.length} test{rerunTests.length !== 1 ? 's' : ''}</span>
          {' '}require a rerun — not completed in last overnight window:
        </p>
        {deviceSummaries.map((summary) => (
          <p key={summary} className="text-sm font-mono text-red-200 mt-0.5 truncate">
            {summary}
          </p>
        ))}
        <p className="text-sm text-red-300 mt-0.5">
          Estimated rerun time: <span className="font-semibold text-red-100">{timeStr}</span>
          {' '}— Schedule rerun during daytime today?
        </p>
      </div>
      <div className="flex gap-2 shrink-0">
        <button
          onClick={() => onDecision(true)}
          className="px-3 py-1 text-sm font-medium bg-red-700 hover:bg-red-600 text-white rounded-md border border-red-500 transition-colors"
        >
          Yes
        </button>
        <button
          onClick={() => onDecision(false)}
          className="px-3 py-1 text-sm font-medium bg-gray-700 hover:bg-gray-600 text-gray-100 rounded-md border border-gray-500 transition-colors"
        >
          No
        </button>
      </div>
    </div>
  )
}