import { useState, useEffect } from 'react';

const THREAT_LEVEL_STYLES = {
  CRITICAL: 'bg-ap-red text-white animate-pulse-red',
  HIGH: 'bg-ap-orange text-white',
  ELEVATED: 'bg-ap-yellow text-ap-black',
  GUARDED: 'bg-ap-green text-ap-black',
};

function formatTime(date) {
  const h = String(date.getHours()).padStart(2, '0');
  const m = String(date.getMinutes()).padStart(2, '0');
  const s = String(date.getSeconds()).padStart(2, '0');
  return `${h}:${m}:${s}`;
}

export default function Header({ threatLevel = 'GUARDED' }) {
  const [time, setTime] = useState(() => formatTime(new Date()));

  useEffect(() => {
    const id = setInterval(() => {
      setTime(formatTime(new Date()));
    }, 1000);
    return () => clearInterval(id);
  }, []);

  const badgeStyle = THREAT_LEVEL_STYLES[threatLevel] || THREAT_LEVEL_STYLES.GUARDED;

  return (
    <header className="flex items-center justify-between bg-ap-black border-b border-white/10 px-4 py-2">
      {/* Left -- Logo + Title */}
      <div className="flex items-center gap-3">
        <img src="/logo.png" alt="Apophis" className="h-9 w-auto" />
        <span className="font-mono font-bold tracking-wider text-ap-red text-sm select-none">
          APOPHIS SOC
        </span>
      </div>

      {/* Center -- System Clock */}
      <div className="font-mono text-ap-silver-dim text-sm tabular-nums tracking-wide select-none">
        {time}
      </div>

      {/* Right -- Threat Level Indicator */}
      <div className="flex flex-col items-end gap-0.5">
        <span className="text-[10px] text-ap-silver-dim font-mono uppercase tracking-widest select-none">
          Threat Level
        </span>
        <span
          className={`px-3 py-1 font-mono text-xs font-bold uppercase select-none ${badgeStyle}`}
        >
          {threatLevel}
        </span>
      </div>
    </header>
  );
}
