import { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Building2 } from 'lucide-react';
import { NAVIGATION_MENU } from '../lib/constants';

/**
 * Header 组件 - 企业官网导航栏
 */
export const Header: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 关闭移动端菜单 - 使用回调避免直接 setState
  const closeMobileMenu = useCallback(() => {
    setIsMobileMenuOpen(false);
  }, []);

  useEffect(() => {
    closeMobileMenu();
  }, [location.pathname, closeMobileMenu]);

  // 检查当前路径是否为活动状态
  const isActive = (path: string): boolean => {
    if (path === '/') {
      return location.pathname === '/';
    }
    return location.pathname.startsWith(path);
  };

  return (
    <motion.header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        isScrolled
          ? 'bg-white/95 backdrop-blur-sm shadow-md'
          : 'bg-white shadow-sm'
      }`}
      initial={{ y: -100 }}
      animate={{ y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-[70px]">
          {/* Logo 区域 */}
          <Link
            to="/"
            className="flex items-center gap-3 group"
            aria-label="返回首页"
          >
            <motion.div
              className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Building2 size={24} />
            </motion.div>
            <div className="hidden sm:block">
              <span className="text-lg font-bold text-primary-dark group-hover:text-primary transition-colors">
                诚裕集团
              </span>
              <p className="text-xs text-gray-500 -mt-1">Chengyu Group</p>
            </div>
          </Link>

          {/* 桌面端导航菜单 */}
          <nav
            className="hidden md:flex items-center gap-1"
            role="navigation"
            aria-label="主导航"
          >
            {NAVIGATION_MENU.map((item) => (
              <Link
                key={item.id}
                to={item.path}
                className={`relative px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
                  isActive(item.path)
                    ? 'text-primary'
                    : 'text-gray-600 hover:text-primary'
                }`}
                aria-current={isActive(item.path) ? 'page' : undefined}
              >
                {item.label}
                {/* 活动状态指示器 */}
                {isActive(item.path) && (
                  <motion.div
                    layoutId="activeIndicator"
                    className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-accent rounded-full"
                    transition={{ type: 'spring', stiffness: 500, damping: 30 }}
                  />
                )}
                {/* 悬停效果 */}
                {!isActive(item.path) && (
                  <span className="absolute inset-0 rounded-lg bg-primary/5 scale-0 transition-transform duration-200 group-hover:scale-100" />
                )}
              </Link>
            ))}
          </nav>

          {/* 桌面端 CTA 按钮 */}
          <div className="hidden md:flex items-center gap-3">
            <motion.button
              className="px-5 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-light transition-colors shadow-sm"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              立即咨询
            </motion.button>
          </div>

          {/* 移动端菜单按钮 */}
          <motion.button
            className="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'}
            aria-expanded={isMobileMenuOpen}
            whileTap={{ scale: 0.95 }}
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </motion.button>
        </div>
      </div>

      {/* 移动端菜单 */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.nav
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
            className="md:hidden bg-white border-t border-gray-100 overflow-hidden"
            role="navigation"
            aria-label="移动端导航"
          >
            <div className="px-4 py-4 space-y-2">
              {NAVIGATION_MENU.map((item) => (
                <Link
                  key={item.id}
                  to={item.path}
                  className={`block px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 ${
                    isActive(item.path)
                      ? 'bg-primary/5 text-primary'
                      : 'text-gray-600 hover:bg-gray-50'
                  }`}
                  aria-current={isActive(item.path) ? 'page' : undefined}
                >
                  {item.label}
                </Link>
              ))}
              <div className="pt-4 border-t border-gray-100">
                <motion.button
                  className="w-full px-4 py-3 text-base font-medium text-white bg-primary rounded-lg"
                  whileTap={{ scale: 0.98 }}
                >
                  立即咨询
                </motion.button>
              </div>
            </div>
          </motion.nav>
        )}
      </AnimatePresence>
    </motion.header>
  );
};

export default Header;
