import React, { useState, useEffect } from 'react';
import { Radio, Zap } from 'lucide-react';
import { motion } from 'framer-motion';

export const StudioHeader: React.FC = () => {
  const [time, setTime] = useState(new Date());

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

  const formatTime = (date: Date) => {
    return date.toLocaleTimeString('en-US', { 
      hour12: false, 
      hour: '2-digit', 
      minute: '2-digit', 
      second: '2-digit' 
    });
  };

  return (
    <div className="radio-rack w-full py-6 px-8 rounded-xl flex flex-col md:flex-row items-center justify-between gap-6 overflow-hidden">
      {/* Brand & Status */}
      <div className="flex items-center gap-6">
        <div className="relative">
          <div className="w-16 h-16 rounded-full bg-studio-inset border border-studio-edge flex items-center justify-center shadow-lg">
            <Radio className="w-8 h-8 glow-amber" />
          </div>
          <motion.div 
            animate={{ opacity: [1, 0.5, 1] }} 
            transition={{ duration: 2, repeat: Infinity }}
            className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-studio-glow-red border-2 border-studio-panel shadow-[0_0_10px_var(--studio-glow-red)]" 
          />
        </div>
        
        <div className="flex flex-col">
          <h1 className="text-3xl font-black tracking-tighter text-white font-mono uppercase">
            Morning <span className="glow-amber">Radio</span>
          </h1>
          <div className="flex items-center gap-2 mt-1">
            <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">Broadcast Studio 01</span>
            <div className="h-1 w-1 rounded-full bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]" />
          </div>
        </div>
      </div>

      {/* Center Display: Time & On Air */}
      <div className="flex items-center gap-8 studio-inset py-3 px-10">
        <div className="flex flex-col items-center">
          <span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Local Time</span>
          <span className="text-3xl font-mono font-black glow-green tracking-widest">
            {formatTime(time)}
          </span>
        </div>
        
        <div className="h-10 w-px bg-studio-edge" />

        <div className="flex flex-col items-center">
            <span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Status</span>
            <div className="px-4 py-1 rounded bg-studio-glow-red/10 border border-studio-glow-red/30">
                <span className="text-sm font-black text-studio-glow-red uppercase tracking-widest animate-pulse">On Air</span>
            </div>
        </div>
      </div>

      {/* Metrics Mini-Readout */}
      <div className="hidden xl:flex items-center gap-6">
        <div className="flex flex-col items-end">
            <span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest opacity-50">Signal Strength</span>
            <div className="flex gap-1 mt-1">
                {[1, 2, 3, 4, 5].map((i) => (
                    <div key={i} className={`w-1.5 h-4 rounded-full ${i <= 4 ? 'bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]' : 'bg-studio-edge'}`} />
                ))}
            </div>
        </div>
        <div className="p-3 rounded-lg bg-studio-inset border border-studio-edge">
            <Zap className="w-5 h-5 text-amber-500" />
        </div>
      </div>
    </div>
  );
};