
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Menu, X, Sun, Moon } from 'lucide-react';

interface SharedHeaderProps {
    theme?: 'light' | 'dark';
}

const SharedHeader = ({ theme = 'light', onThemeToggle, onLangToggle, currentLang = 'zh' }: SharedHeaderProps & { onThemeToggle?: () => void, onLangToggle?: () => void, currentLang?: 'zh' | 'en' }) => {
    const navigate = useNavigate();
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    // Default formatting based on theme prop
    const isDark = theme === 'dark';

    // Navigation items that link back to sections on the homepage
    const navItems = [
        { label: currentLang === 'zh' ? '企业咨询' : 'Consulting', id: 'consulting' },
        { label: currentLang === 'zh' ? '文旅运营' : 'Tourism', id: 'tourism' },
        { label: currentLang === 'zh' ? '开发者' : 'Developers', id: 'dev' },
        { label: currentLang === 'zh' ? '联系我们' : 'Contact', id: 'contact' }
    ];

    const handleNavClick = (id: string) => {
        // Navigate to home with hash
        navigate(`/#${id}`);
        // Dispatch a custom event or use a timeout to handle scrolling if needed, 
        // but react-router-hash-link is better. For now simple navigate.
        // We can check if we are already on home in a real app, but here we assume we are on subpages.
        setIsMenuOpen(false);

        // Detailed implementation for scrolling after navigation would go here
        // For now, basic navigation is fine
        setTimeout(() => {
            const element = document.getElementById(id);
            if (element) element.scrollIntoView({ behavior: 'smooth' });
        }, 100);
    };

    return (
        <nav className={`fixed w-full z-[100] transition-all duration-300 ${isDark ? 'bg-stone-900/90 border-b border-stone-800 text-stone-100' : 'bg-white/90 border-b border-stone-100 text-stone-800'} backdrop-blur-sm`}>
            <div className="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
                {/* Custom CCDW Logo */}
                <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigate('/')}>
                    <div className="flex items-baseline font-bold text-3xl tracking-tighter" style={{ fontFamily: '"Nunito", sans-serif' }}>
                        <span className="text-orange-400">CC</span>
                        <span className="text-blue-500">D</span>
                        <span className="text-cyan-400">W</span>
                    </div>
                    <div className={`h-6 w-px ${isDark ? 'bg-stone-700' : 'bg-stone-300'} mx-1`}></div>
                    <span className={`text-sm tracking-widest ${isDark ? 'text-stone-400' : 'text-stone-500 group-hover:text-stone-800'} transition-colors`}>
                        {currentLang === 'zh' ? '纯粹的玩' : 'Pure Play'}
                    </span>
                </div>

                {/* Desktop Menu */}
                <div className="hidden md:flex items-center space-x-8">
                    {navItems.map((item, index) => (
                        <button
                            key={index}
                            onClick={() => handleNavClick(item.id)}
                            className={`text-sm font-medium hover:-translate-y-0.5 transition-transform ${isDark ? 'text-stone-400 hover:text-white' : 'text-stone-500 hover:text-stone-900'}`}
                        >
                            {item.label}
                        </button>
                    ))}

                    <div className="flex items-center gap-2 pl-4">
                        {/* Visual-only theme toggle for consistency */}
                        <button
                            onClick={onThemeToggle}
                            className={`p-2 rounded-full hover:bg-black/5 transition-colors ${isDark ? 'text-stone-400' : 'text-stone-400'}`}
                        >
                            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
                        </button>
                        <button
                            onClick={onLangToggle}
                            className={`text-xs font-bold px-2 py-1 rounded hover:bg-black/5 ${isDark ? 'text-stone-400' : 'text-stone-500'}`}
                        >
                            {currentLang === 'zh' ? 'EN' : '中'}
                        </button>
                    </div>
                </div>

                {/* Mobile Menu Toggle */}
                <div className="md:hidden">
                    <button onClick={() => setIsMenuOpen(!isMenuOpen)} className={isDark ? 'text-stone-100' : 'text-stone-800'}>
                        {isMenuOpen ? <X /> : <Menu />}
                    </button>
                </div>
            </div>

            {/* Mobile Dropdown */}
            {isMenuOpen && (
                <div className={`md:hidden absolute top-full left-0 w-full p-6 shadow-lg border-b ${isDark ? 'bg-stone-900 border-stone-800' : 'bg-white border-stone-100'}`}>
                    {navItems.map((item, index) => (
                        <button
                            key={index}
                            onClick={() => handleNavClick(item.id)}
                            className={`block w-full text-left py-3 text-lg ${isDark ? 'text-stone-300' : 'text-stone-600'}`}
                        >
                            {item.label}
                        </button>
                    ))}
                    <div className="flex gap-4 mt-4 pt-4 border-t border-stone-800/10">
                        <button
                            onClick={() => { onThemeToggle?.(); setIsMenuOpen(false); }}
                            className={`p-2 rounded-full ${isDark ? 'text-stone-400' : 'text-stone-600'}`}
                        >
                            {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
                        </button>
                        <button
                            onClick={() => { onLangToggle?.(); setIsMenuOpen(false); }}
                            className={`text-sm font-bold px-3 py-2 rounded ${isDark ? 'text-stone-400' : 'text-stone-600'}`}
                        >
                            {currentLang === 'zh' ? 'Switch to English' : '切换中文'}
                        </button>
                    </div>
                </div>
            )}
        </nav>
    );
};

export default SharedHeader;
