import { Phone, Menu, Globe } from 'lucide-react';
import { useState } from 'react';
import { useLanguage } from '../contexts/LanguageContext';
import { useRouter } from '../contexts/RouterContext';
import { Language, languages } from '../lib/i18n';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';

export function Header() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const { language, setLanguage, t } = useLanguage();
  const { currentPage, navigateTo } = useRouter();

  const scrollToSection = (id: string) => {
    // Close mobile menu first for better UX
    console.log(currentPage, id,3333)
    setMobileMenuOpen(false);
    navigateTo('home', id);
    // if (currentPage !== 'home') {
    //   navigateTo('home', id);
    // } else {
      // Small delay to ensure mobile menu is closed
      setTimeout(() => {
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
          window.history.pushState(null, '', `#${id}`);
        }
      }, 50);
    // }
  };

  const handleNavigation = (page: 'faq' | 'contact') => {
    setMobileMenuOpen(false);
    console.log(page)
    navigateTo(page);
  };

  const scrollToTop = () => {
    setMobileMenuOpen(false);
    
    if (currentPage !== 'home') {
      navigateTo('home');
    } else {
      setTimeout(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
        window.history.pushState(null, '', '');
      }, 50);
    }
  };

  return (
    <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200">
      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-14 sm:h-16">
          <button onClick={() => navigateTo('home')} className="flex items-center gap-2">
            <div className="w-9 h-9 sm:w-10 sm:h-10 bg-gray-900 rounded-lg sm:rounded-xl flex items-center justify-center">
              <Phone className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
            </div>
            <span className="text-xl sm:text-2xl text-gray-900">Anycall</span>
          </button>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-8">
            <button
              onClick={scrollToTop}
              className="text-gray-600 hover:text-gray-900 transition-colors"
            >
              {t.home}
            </button>
            <button
              onClick={() => scrollToSection('features')}
              className="text-gray-600 hover:text-gray-900 transition-colors"
            >
              {t.features}
            </button>
            <button
              onClick={() => scrollToSection('faq')}
              className="text-gray-600 hover:text-gray-900 transition-colors"
            >
              {t.faq}
            </button>
            <button
              onClick={() => scrollToSection('contact')}
              className="text-gray-600 hover:text-gray-900 transition-colors"
            >
              {t.contact}
            </button>
            
            {/* Language Switcher */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors">
                  <Globe className="w-4 h-4" />
                  <span>{languages[language]}</span>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                {Object.entries(languages).map(([code, name]) => (
                  <DropdownMenuItem
                    key={code}
                    onClick={() => setLanguage(code as Language)}
                    className={language === code ? 'bg-gray-100 text-gray-900' : ''}
                  >
                    {name}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          {/* Mobile menu button */}
          <button
            className="md:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            aria-label="Toggle menu"
          >
            <Menu className="w-6 h-6 text-gray-900" />
          </button>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <div className="md:hidden py-4 space-y-2 border-t border-gray-200">
            <button
              onClick={scrollToTop}
              className="block w-full text-left px-4 py-3 text-base text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
            >
              {t.home}
            </button>
            <button
              onClick={() => scrollToSection('features')}
              className="block w-full text-left px-4 py-3 text-base text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
            >
              {t.features}
            </button>
            <button
              onClick={() => handleNavigation('faq')}
              className="block w-full text-left px-4 py-3 text-base text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
            >
              {t.faq}
            </button>
            <button
              onClick={() => handleNavigation('contact')}
              className="block w-full text-left px-4 py-3 text-base text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-colors"
            >
              {t.contact}
            </button>
            
            {/* Mobile Language Switcher */}
            <div className="px-4 pt-4 pb-2 mt-2 border-t border-gray-200">
              <p className="text-sm text-gray-500 mb-3 flex items-center gap-2">
                <Globe className="w-4 h-4" />
                {t.contact.includes('Contact') ? 'Language' : '语言'}
              </p>
              <div className="grid grid-cols-2 gap-2">
                {Object.entries(languages).map(([code, name]) => (
                  <button
                    key={code}
                    onClick={() => setLanguage(code as Language)}
                    className={`px-3 py-2.5 rounded-lg text-sm transition-colors ${
                      language === code
                        ? 'bg-gray-900 text-white'
                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                    }`}
                  >
                    {name}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
      </nav>
    </header>
  );
}