import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Activity, Settings, Move, Camera, Layers, Cpu, Target } from 'lucide-react';

interface HeaderProps {
    currentTime: Date;
    onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null) => void;
    activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | 'initialize' | null;

}

export const Header: React.FC<HeaderProps> = ({ currentTime, onTabChange, activeTab }) => {
    const navigate = useNavigate();
    const location = useLocation();

    const isWebView = typeof window !== 'undefined' && !!window.chrome?.webview;
    const isIOPage = location.pathname === '/io-monitor';

    return (
        <header className="absolute top-0 left-0 right-0 h-20 px-6 flex items-center justify-between z-40 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
            <div
                className="flex items-center gap-4 pointer-events-auto cursor-pointer group"
                onClick={() => {
                    navigate('/');
                    onTabChange(null);
                }}
            >
                <div className="w-12 h-12 border-2 border-neon-blue flex items-center justify-center rounded shadow-glow-blue bg-black/50 backdrop-blur group-hover:bg-neon-blue/10 transition-colors">
                    <Cpu className="text-neon-blue w-8 h-8 animate-pulse-slow" />
                </div>
                <div>
                    <h1 className="text-3xl font-tech font-bold text-white tracking-widest uppercase italic text-shadow-glow-blue group-hover:text-neon-blue transition-colors">
                        EQUI-HANDLER <span className="text-neon-blue text-sm not-italic">PRO</span>
                    </h1>
                    <div className="flex gap-2 text-[10px] text-neon-blue/70 font-mono">
                        <span>SYS.VER 4.2.0</span>
                        <span>|</span>
                        <span className={isWebView ? "text-neon-green" : "text-amber-500"}>
                            LINK: {isWebView ? "NATIVE" : "SIMULATION"}
                        </span>
                    </div>
                </div>
            </div>

            {/* Top Navigation */}
            <div className="flex items-center gap-2 pointer-events-auto">
                {/* IO Tab Switcher (only on IO page) */}


                <div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
                    {[
                        { id: 'recipe', icon: Layers, label: 'RECIPE', path: '/' },
                        { id: 'io', icon: Activity, label: 'I/O MONITOR', path: '/io-monitor' },
                        { id: 'motion', icon: Move, label: 'MOTION', path: '/' },
                        { id: 'camera', icon: Camera, label: 'VISION', path: '/' },
                        { id: 'setting', icon: Settings, label: 'CONFIG', path: '/' },
                        { id: 'initialize', icon: Target, label: 'INITIALIZE', path: '/' }
                    ].map(item => {
                        const isActive = item.id === 'io'
                            ? location.pathname === '/io-monitor'
                            : activeTab === item.id;

                        return (
                            <button
                                key={item.id}
                                onClick={() => {
                                    if (item.id === 'io') {
                                        navigate('/io-monitor');
                                        onTabChange(null);
                                    } else {
                                        if (location.pathname !== '/') {
                                            navigate('/');
                                        }
                                        onTabChange(activeTab === item.id ? null : item.id as any);
                                    }
                                }}
                                className={`
                                flex items-center gap-2 px-6 py-2 rounded-full font-tech font-bold text-sm transition-all border border-transparent
                                ${isActive
                                        ? 'bg-neon-blue/10 text-neon-blue border-neon-blue shadow-glow-blue'
                                        : 'text-slate-400 hover:text-white hover:bg-white/5'}
                            `}
                            >
                                <item.icon className="w-4 h-4" /> {item.label}
                            </button>
                        );
                    })}
                </div>
            </div>

            <div className="text-right pointer-events-auto">
                <div className="text-2xl font-mono font-bold text-white text-shadow-glow-blue">
                    {currentTime.toLocaleTimeString('en-GB')}
                </div>
                <div className="text-xs font-tech text-slate-400 tracking-[0.3em]">
                    {currentTime.toLocaleDateString().toUpperCase()}
                </div>
            </div>
        </header>
    );
};