import { useState, useRef, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Languages, ChevronDown, Check, Menu, X } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';

export default function MarketingNavbar() {
  const { language, setLanguage, t } = useLanguage();
  const location = useLocation();
  const [showLangMenu, setShowLangMenu] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const langMenuRef = useRef<HTMLDivElement>(null);
  const isHome = location.pathname === '/';

  const navLinks = [
    { to: '/', label: t.marketing.nav.home },
    { to: '/docs', label: t.marketing.nav.docs },
    { to: '/blog', label: t.marketing.nav.blog },
  ];

  const anchorLinks = isHome
    ? [
        { href: '#pricing', label: t.marketing.nav.pricing },
        { href: '#contact', label: t.marketing.nav.contact },
      ]
    : [];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (langMenuRef.current && !langMenuRef.current.contains(event.target as Node)) {
        setShowLangMenu(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 10);
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav
      className={`h-16 flex items-center justify-between px-6 flex-shrink-0 z-[60] relative transition-all duration-300 ${
        scrolled
          ? 'bg-white/90 backdrop-blur-md border-b border-cream-300 shadow-sm'
          : 'bg-transparent border-b border-transparent'
      }`}
    >
      <Link to="/" className="flex items-center gap-2.5 group">
        <img src="/texpixel-app-icon.svg" alt="TexPixel" className="w-8 h-8 transition-transform group-hover:scale-110 duration-200" />
        <span className="text-xl font-display font-bold text-ink tracking-tight">TexPixel</span>
      </Link>

      <div className="hidden md:flex items-center gap-1">
        {navLinks.map((link) => {
          const isActive = location.pathname === link.to;
          return (
            <Link
              key={link.to}
              to={link.to}
              className={`relative px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
                isActive
                  ? 'text-coral-600 bg-coral-50'
                  : 'text-ink-secondary hover:text-ink hover:bg-cream-200/60'
              }`}
            >
              {link.label}
            </Link>
          );
        })}
        {anchorLinks.map((link) => (
          <a
            key={link.href}
            href={link.href}
            className="px-4 py-2 text-sm font-medium text-ink-secondary hover:text-ink hover:bg-cream-200/60 rounded-lg transition-colors duration-200"
          >
            {link.label}
          </a>
        ))}
      </div>

      <div className="flex items-center gap-2">
        {/* Language Switcher */}
        <div className="relative" ref={langMenuRef}>
          <button
            onClick={() => setShowLangMenu(!showLangMenu)}
            className="flex items-center gap-1.5 px-3 py-2 hover:bg-cream-200/60 rounded-lg text-ink-secondary text-sm font-medium transition-colors"
          >
            <Languages size={16} />
            <span className="hidden sm:inline">{language === 'en' ? 'EN' : '中文'}</span>
            <ChevronDown size={12} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
          </button>
          {showLangMenu && (
            <div className="absolute right-0 top-full mt-2 w-36 bg-white rounded-xl shadow-lg border border-cream-300 py-1.5 z-50">
              {(['en', 'zh'] as const).map((lang) => (
                <button
                  key={lang}
                  onClick={() => { setLanguage(lang); setShowLangMenu(false); }}
                  className={`w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-cream-100 ${
                    language === lang ? 'text-coral-600 font-semibold' : 'text-ink-secondary'
                  }`}
                >
                  {lang === 'en' ? 'English' : '简体中文'}
                  {language === lang && <Check size={14} />}
                </button>
              ))}
            </div>
          )}
        </div>

        <Link
          to="/app"
          className="hidden sm:inline-flex items-center px-5 py-2 btn-primary text-sm rounded-lg"
        >
          {t.marketing.nav.launchApp}
        </Link>

        <button className="md:hidden p-2 text-ink-secondary hover:text-ink" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
          {mobileMenuOpen ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>

      {/* Mobile menu */}
      {mobileMenuOpen && (
        <div className="absolute top-16 left-0 right-0 bg-white/95 backdrop-blur-md border-b border-cream-300 shadow-lg md:hidden z-50 py-3 px-6 flex flex-col gap-1">
          {navLinks.map((link) => (
            <Link
              key={link.to}
              to={link.to}
              className={`text-sm font-medium py-2.5 px-3 rounded-lg transition-colors ${
                location.pathname === link.to ? 'text-coral-600 bg-coral-50' : 'text-ink-secondary hover:bg-cream-200/60'
              }`}
              onClick={() => setMobileMenuOpen(false)}
            >
              {link.label}
            </Link>
          ))}
          {anchorLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="text-sm font-medium text-ink-secondary py-2.5 px-3 rounded-lg hover:bg-cream-200/60"
              onClick={() => setMobileMenuOpen(false)}
            >
              {link.label}
            </a>
          ))}
          <Link
            to="/app"
            className="text-sm font-semibold text-coral-600 py-2.5 px-3"
            onClick={() => setMobileMenuOpen(false)}
          >
            {t.marketing.nav.launchApp}
          </Link>
        </div>
      )}
    </nav>
  );
}