type Props = {
  modeName: string
  activatedAt: string | null
  nextReplanIn: number | null
  onReplan: () => void
  onModeChange: () => void
}

const MODE_DOT: Record<string, string> = {
  AUTO: '#1D9E75',
  SELF_SUSTAIN: '#E24B4A',
  CHARGE_CHEAP: '#EF9F27',
  PRESERVE: '#378ADD',
  MANUAL: '#888780',
}

function fmtActivatedPrague(iso: string | null): string | null {
  if (!iso) return null
  return new Intl.DateTimeFormat('cs-CZ', {
    timeZone: 'Europe/Prague',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  }).format(new Date(iso))
}

export function ModeBar({ modeName, activatedAt, nextReplanIn, onReplan, onModeChange }: Props) {
  const code = (modeName || 'AUTO').toUpperCase().replace(/-/g, '_')
  const dot = MODE_DOT[code] ?? MODE_DOT.MANUAL!
  const tAct = fmtActivatedPrague(activatedAt)
  const subParts: string[] = []
  if (tAct) subParts.push(`aktivní od ${tAct}`)
  if (nextReplanIn != null) subParts.push(`příští replan za ${nextReplanIn} min`)

  return (
    <>
      <style>{`
        @keyframes ems-mode-auto-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
        .ems-mode-auto-pulse {
          animation: ems-mode-auto-pulse 2s ease-in-out infinite;
        }
      `}</style>
      <div className="flex flex-wrap items-center gap-3 rounded-lg border border-slate-700/90 bg-slate-950/95 px-3 py-2 text-sm text-slate-200">
        <div className="flex min-w-0 flex-1 items-center gap-2">
          <span
            className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${code === 'AUTO' ? 'ems-mode-auto-pulse' : ''}`}
            style={{ backgroundColor: dot }}
            aria-hidden
          />
          <span className="font-semibold tracking-wide text-slate-100">{code}</span>
          {subParts.length > 0 ? (
            <span className="truncate text-xs text-slate-400 sm:text-sm">{subParts.join(' · ')}</span>
          ) : null}
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <button
            type="button"
            onClick={onReplan}
            className="rounded-md border border-slate-600 bg-slate-800/80 px-3 py-1.5 text-xs font-medium text-slate-100 hover:bg-slate-700"
          >
            Přeplánovat
          </button>
          <button
            type="button"
            onClick={onModeChange}
            className="rounded-md border border-slate-600 bg-slate-800/80 px-3 py-1.5 text-xs font-medium text-slate-100 hover:bg-slate-700"
          >
            Změnit režim
          </button>
        </div>
      </div>
    </>
  )
}