import { useState, useEffect, useRef } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useLanguage } from '../../contexts/LanguageContext';
import { useAuth } from '../../contexts/AuthContext';

export default function MarketingNavbar() {
  const { language, setLanguage } = useLanguage();
  const { user, signOut } = useAuth();
  const location = useLocation();
  const isHome = location.pathname === '/';
  const [scrolled, setScrolled] = useState(false);
  const [activeSection, setActiveSection] = useState('');
  const [userMenuOpen, setUserMenuOpen] = useState(false);
  const userMenuRef = useRef<HTMLDivElement>(null);

  // Scroll: sticky style + active nav section
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10);
      if (!isHome) return;
      let current = '';
      document.querySelectorAll('section[id]').forEach((s) => {
        if (window.scrollY >= (s as HTMLElement).offsetTop - 100) {
          current = s.id;
        }
      });
      setActiveSection(current);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, [isHome]);

  // Close user menu on outside click
  useEffect(() => {
    const handle = (e: MouseEvent) => {
      if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
        setUserMenuOpen(false);
      }
    };
    document.addEventListener('mousedown', handle);
    return () => document.removeEventListener('mousedown', handle);
  }, []);

  const navLinks = [
    { href: '/', label: language === 'zh' ? '首页' : 'Home' },
    { href: '/docs', label: language === 'zh' ? '文档' : 'Docs' },
    { href: '/blog', label: language === 'zh' ? '博客' : 'Blog' },
  ];

  const anchorLinks = isHome
    ? [{ href: '#pricing', label: language === 'zh' ? '价格' : 'Pricing' }]
    : [];

  return (
    <nav style={{ opacity: scrolled ? 1 : undefined }}>
      <div className="nav-inner">
        <Link to="/" className="nav-logo">
          <div className="logo-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
              <path d="M4 6h16M4 10h10M4 14h12M4 18h8" />
            </svg>
          </div>
          <span style={{ fontFamily: "'Lora', serif" }}>TexPixel</span>
        </Link>

        <ul className="nav-links">
          {navLinks.map((link) => (
            <li key={link.href}>
              <Link
                to={link.href}
                className={location.pathname === link.href ? 'active' : ''}
              >
                {link.label}
              </Link>
            </li>
          ))}
          {anchorLinks.map((link) => (
            <li key={link.href}>
              <a
                href={link.href}
                className={activeSection === link.href.slice(1) ? 'active' : ''}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>

        <div className="nav-right">
          <button
            className="lang-switch"
            onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}
          >
            {language === 'zh' ? 'EN' : '中文'}
          </button>

          {user ? (
            <div className="nav-user" ref={userMenuRef} style={{ position: 'relative' }}>
              <div
                className="nav-avatar"
                onClick={() => setUserMenuOpen((o) => !o)}
                style={{ cursor: 'pointer' }}
              >
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <circle cx="12" cy="8" r="4" />
                  <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                </svg>
              </div>
              {userMenuOpen && (
                <div className="nav-user-menu" style={{ display: 'block' }}>
                  <div className="nav-menu-divider" />
                  <Link to="/app" className="nav-menu-item" onClick={() => setUserMenuOpen(false)}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
                      <rect x="2" y="3" width="20" height="14" rx="2" />
                      <path d="M8 21h8M12 17v4" />
                    </svg>
                    {language === 'zh' ? '启动应用' : 'Launch App'}
                  </Link>
                  <div className="nav-menu-divider" />
                  <button
                    className="nav-menu-item nav-menu-logout"
                    onClick={() => { signOut(); setUserMenuOpen(false); }}
                    style={{ background: 'none', border: 'none', width: '100%', textAlign: 'left', cursor: 'pointer' }}
                  >
                    {language === 'zh' ? '退出登录' : 'Sign Out'}
                  </button>
                </div>
              )}
            </div>
          ) : (
            <div className="nav-login-btn">
              <Link to="/app" className="btn-cta" style={{ display: 'inline-block', lineHeight: '52px', padding: '0 24px', textDecoration: 'none' }}>
                {language === 'zh' ? '免费试用' : 'Try Free'}
              </Link>
            </div>
          )}
        </div>
      </div>
    </nav>
  );
}