import React, { useState, useEffect } from 'react';
import { 
  ShieldAlert, 
  Terminal as TerminalIcon, 
  Radio, 
  Cpu, 
  Globe, 
  FileText, 
  PlusCircle, 
  Activity, 
  Clock, 
  Zap,
  Layers,
  Lock,
  Scale
} from 'lucide-react';

interface HeaderProps {
  activeCaseCount: number;
  criticalAlertCount: number;
  onOpenNewCaseModal: () => void;
  onOpenAnycastSandbox: () => void;
  onOpenWebRtcProbe: () => void;
  onOpenExportModal: () => void;
  onOpenProvenanceModal: () => void;
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

export const Header: React.FC<HeaderProps> = ({
  activeCaseCount,
  criticalAlertCount,
  onOpenNewCaseModal,
  onOpenAnycastSandbox,
  onOpenWebRtcProbe,
  onOpenExportModal,
  onOpenProvenanceModal,
}) => {
  const [timeStr, setTimeStr] = useState<string>('');

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTimeStr(now.toISOString().replace('T', ' ').slice(0, 19) + ' UTC');
    };
    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <header className="bg-[#0f172a] border-b border-slate-800 text-slate-100 px-4 py-2.5 shrink-0 shadow-lg select-none">
      <div className="flex flex-wrap items-center justify-between gap-3">
        {/* Logo & Platform Badge */}
        <div className="flex items-center gap-3">
          <div className="relative flex items-center justify-center w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-700 shadow-md shadow-cyan-500/20 border border-cyan-400/30">
            <ShieldAlert className="w-5 h-5 text-white" />
            <span className="absolute -top-1 -right-1 w-2.5 h-2.5 bg-rose-500 rounded-full border-2 border-[#0f172a] animate-pulse" />
          </div>
          
          <div>
            <div className="flex items-center gap-2">
              <span className="font-extrabold text-sm tracking-wider uppercase bg-gradient-to-r from-cyan-400 via-blue-400 to-indigo-300 bg-clip-text text-transparent">
                SENTINEL CORE // THREAT & FRAUD ENGINE
              </span>
              <span className="text-[10px] font-mono px-2 py-0.5 rounded-full bg-cyan-950/80 border border-cyan-700/50 text-cyan-300 font-semibold">
                ENCLAVE v4.2
              </span>
            </div>
            <p className="text-[11px] text-slate-400 font-medium">
              Multi-Jurisdictional Digital Review • Counter-Terrorism • AML Smurfing & Evasion Triangulation
            </p>
          </div>
        </div>

        {/* Telemetry Status Badges */}
        <div className="flex items-center gap-2">
          {/* Live Clock */}
          <div className="hidden lg:flex items-center gap-1.5 bg-slate-900/90 border border-slate-800 px-2.5 py-1 rounded text-[11px] font-mono text-slate-300">
            <Clock className="w-3.5 h-3.5 text-cyan-400" />
            <span>{timeStr || '2026-09-01 15:00:00 UTC'}</span>
          </div>

          {/* Enclave Status */}
          <div className="flex items-center gap-1.5 bg-emerald-950/60 border border-emerald-800/60 px-2.5 py-1 rounded text-[11px] font-mono text-emerald-300">
            <Radio className="w-3.5 h-3.5 text-emerald-400 animate-pulse" />
            <span className="font-semibold">PTY BRIDGE ACTIVE</span>
          </div>

          {/* Critical Alerts Pill */}
          {criticalAlertCount > 0 && (
            <div className="flex items-center gap-1.5 bg-rose-950/70 border border-rose-800/80 px-2.5 py-1 rounded text-[11px] font-mono text-rose-300 font-bold animate-pulse">
              <Zap className="w-3.5 h-3.5 text-rose-400" />
              <span>{criticalAlertCount} CRITICAL DOCKETS</span>
            </div>
          )}
        </div>

        {/* Action Tool Sandbox Buttons */}
        <div className="flex items-center gap-2">
          <button
            onClick={onOpenProvenanceModal}
            className="flex items-center gap-1.5 bg-slate-800/90 hover:bg-slate-700 border border-slate-700 text-cyan-300 px-3 py-1.5 rounded-md text-xs font-medium transition-all shadow-sm active:scale-95 cursor-pointer"
            title="Albert Lane Proprietary License & SEC Whistleblower #17684-273-411-436"
          >
            <Scale className="w-3.5 h-3.5 text-cyan-400" />
            <span>Provenance / IP</span>
          </button>

          <button
            onClick={onOpenAnycastSandbox}
            className="flex items-center gap-1.5 bg-slate-800/90 hover:bg-slate-700 border border-slate-700 text-slate-200 px-3 py-1.5 rounded-md text-xs font-medium transition-all shadow-sm active:scale-95 cursor-pointer"
            title="Anycast Speed-of-Light Propagation Formula Sandbox"
          >
            <Globe className="w-3.5 h-3.5 text-cyan-400" />
            <span>Speed-of-Light Calc</span>
          </button>

          <button
            onClick={onOpenWebRtcProbe}
            className="flex items-center gap-1.5 bg-slate-800/90 hover:bg-slate-700 border border-slate-700 text-slate-200 px-3 py-1.5 rounded-md text-xs font-medium transition-all shadow-sm active:scale-95 cursor-pointer"
            title="Inspect Client-side WebRTC STUN candidate leakages"
          >
            <Cpu className="w-3.5 h-3.5 text-amber-400" />
            <span>STUN / ICE Probe</span>
          </button>

          <button
            onClick={onOpenExportModal}
            className="flex items-center gap-1.5 bg-slate-800/90 hover:bg-slate-700 border border-slate-700 text-slate-200 px-3 py-1.5 rounded-md text-xs font-medium transition-all shadow-sm active:scale-95 cursor-pointer"
            title="Export Master Forensic Report & Legal Referral Packet"
          >
            <FileText className="w-3.5 h-3.5 text-indigo-400" />
            <span>Export Dossier</span>
          </button>

          <button
            onClick={onOpenNewCaseModal}
            className="flex items-center gap-1.5 bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-bold px-3 py-1.5 rounded-md text-xs transition-all shadow-md shadow-cyan-500/20 active:scale-95 cursor-pointer"
            title="Ingest and scan a new target IP, wallet, or manifesto"
          >
            <PlusCircle className="w-3.5 h-3.5" />
            <span>Ingest Target</span>
          </button>
        </div>
      </div>
    </header>
  );
};