import { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Menu, X, Building2, Phone, Mail, Search, ChevronDown } 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.div
        className={`fixed top-0 left-0 right-0 z-50 text-white text-xs transition-all duration-300 border-b border-white/10 ${
          isScrolled ? 'h-0 opacity-0 overflow-hidden' : 'h-10'
        }`}
        style={{
          background: 'linear-gradient(to right, rgba(20, 56, 93, 0.85), rgba(33, 93, 155, 0.85))',
          backdropFilter: 'blur(12px) saturate(150%)',
          WebkitBackdropFilter: 'blur(12px) saturate(150%)',
        }}
        initial={{ y: -40 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.3 }}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center justify-between">
          <div className="flex items-center gap-6">
            <div className="flex items-center gap-2">
              <Phone size={14} />
              <span>400-123-4567</span>
            </div>
            <div className="hidden sm:flex items-center gap-2">
              <Mail size={14} />
              <span>contact@chengyu.com</span>
            </div>
          </div>
          <div className="hidden md:flex items-center gap-4">
            <span className="text-white/80">欢迎来到示例集团官网</span>
            <div className="flex items-center gap-2">
              <span className="text-white/60">|</span>
              <button className="hover:text-accent transition-colors">简体中文</button>
              <span className="text-white/60">/</span>
              <button className="hover:text-accent transition-colors">English</button>
            </div>
          </div>
        </div>
      </motion.div>

      {/* 主导航栏 */}
      <motion.header
        className={`fixed left-0 right-0 z-50 transition-all duration-300 ${
          isScrolled
            ? 'top-0 bg-white/80 backdrop-blur-xl backdrop-saturate-150 shadow-lg border-b border-white/20'
            : 'top-10 bg-white/60 backdrop-blur-lg backdrop-saturate-120 shadow-md border-b border-white/30'
        }`}
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.3, delay: 0.1 }}
        style={{
          background: isScrolled 
            ? 'rgba(255, 255, 255, 0.8)' 
            : 'rgba(255, 255, 255, 0.6)',
          backdropFilter: isScrolled 
            ? 'blur(20px) saturate(150%)' 
            : 'blur(16px) saturate(120%)',
          WebkitBackdropFilter: isScrolled 
            ? 'blur(20px) saturate(150%)' 
            : 'blur(16px) saturate(120%)',
        }}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-[80px]">
          {/* Logo 区域 - 增强版 */}
          <Link
            to="/"
            className="flex items-center gap-3 group relative"
            aria-label="返回首页"
          >
            <motion.div
              className="relative flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-light text-white shadow-lg"
              whileHover={{ scale: 1.05, rotate: 5 }}
              whileTap={{ scale: 0.95 }}
            >
              <Building2 size={26} />
              {/* 光晕效果 */}
              <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-primary to-primary-light opacity-20 blur-xl group-hover:opacity-40 transition-opacity" />
            </motion.div>
            <div className="hidden sm:block">
              <span className="text-xl font-bold bg-gradient-to-r from-primary-dark to-primary bg-clip-text text-transparent group-hover:from-primary group-hover:to-primary-light transition-all">
                示例集团
              </span>
              <p className="text-xs text-gray-500 -mt-1 font-medium tracking-wider">CHENGYU GROUP</p>
            </div>
          </Link>

          {/* 桌面端导航菜单 - 增强版 */}
          <nav
            className="hidden lg:flex items-center gap-1"
            role="navigation"
            aria-label="主导航"
          >
            {NAVIGATION_MENU.map((item, index) => (
              <motion.div
                key={item.id}
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                <Link
                  to={item.path}
                  className={`group relative px-5 py-3 text-sm font-medium rounded-xl transition-all duration-300 flex items-center gap-2 ${
                    isActive(item.path)
                      ? 'text-primary bg-primary/5'
                      : 'text-gray-700 hover:text-primary hover:bg-primary/5'
                  }`}
                  aria-current={isActive(item.path) ? 'page' : undefined}
                >
                  <span className="relative z-10">{item.label}</span>

                  {/* 悬停背景效果 */}
                  <motion.div
                    className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    initial={false}
                  />
                </Link>
              </motion.div>
            ))}
          </nav>

          {/* 桌面端操作区域 */}
          <div className="hidden lg:flex items-center gap-3">
            {/* 搜索按钮 */}
            <motion.button
              className="p-2.5 rounded-lg text-gray-600 hover:text-primary hover:bg-primary/5 transition-all"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              aria-label="搜索"
            >
              <Search size={20} />
            </motion.button>

            {/* 联系电话按钮 */}
            <motion.a
              href="tel:400-123-4567"
              className="flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-primary border-2 border-primary rounded-lg hover:bg-primary hover:text-white transition-all"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <Phone size={16} />
              <span className="hidden xl:inline">400-123-4567</span>
            </motion.a>

            {/* CTA 按钮 - 渐变风格 */}
            <motion.button
              className="relative px-6 py-2.5 text-sm font-medium text-white rounded-lg overflow-hidden group"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-primary to-primary-light" />
              <div className="absolute inset-0 bg-gradient-to-r from-accent to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              <span className="relative z-10 flex items-center gap-2">
                立即咨询
                <motion.span
                  animate={{ x: [0, 3, 0] }}
                  transition={{ repeat: Infinity, duration: 1.5 }}
                >
                  →
                </motion.span>
              </span>
            </motion.button>
          </div>

          {/* 移动端菜单按钮 */}
          <motion.button
            className="lg:hidden p-2.5 rounded-xl text-gray-600 hover:bg-primary/5 hover:text-primary transition-all"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label={isMobileMenuOpen ? '关闭菜单' : '打开菜单'}
            aria-expanded={isMobileMenuOpen}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            <motion.div
              animate={{ rotate: isMobileMenuOpen ? 90 : 0 }}
              transition={{ duration: 0.2 }}
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </motion.div>
          </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.3 }}
            className="lg:hidden overflow-hidden shadow-xl border-b border-white/20"
            style={{
              background: 'rgba(255, 255, 255, 0.85)',
              backdropFilter: 'blur(20px) saturate(150%)',
              WebkitBackdropFilter: 'blur(20px) saturate(150%)',
            }}
            role="navigation"
            aria-label="移动端导航"
          >
            <div className="px-4 py-6 space-y-3">
              {NAVIGATION_MENU.map((item, index) => (
                <motion.div
                  key={item.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.05 }}
                >
                  <Link
                    to={item.path}
                    className={`block px-5 py-3.5 rounded-xl text-base font-medium transition-all duration-200 ${
                      isActive(item.path)
                        ? 'bg-gradient-to-r from-primary/15 to-accent/15 text-primary shadow-sm backdrop-blur-sm'
                        : 'text-gray-700 hover:bg-white/30 active:scale-95 backdrop-blur-sm'
                    }`}
                    aria-current={isActive(item.path) ? 'page' : undefined}
                  >
                    <div className="flex items-center justify-between">
                      <span>{item.label}</span>
                    </div>
                  </Link>
                </motion.div>
              ))}
              
              {/* 移动端联系方式 */}
              <motion.div 
                className="pt-4 mt-2 border-t border-white/20 space-y-3"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3 }}
              >
                <a
                  href="tel:400-123-4567"
                  className="flex items-center gap-3 px-5 py-3 rounded-xl text-gray-700 hover:bg-white/30 transition-all backdrop-blur-sm"
                >
                  <Phone size={18} className="text-primary" />
                  <span className="text-sm font-medium">400-123-4567</span>
                </a>
                
                <motion.button
                  className="w-full px-5 py-3.5 text-base font-medium text-white rounded-xl bg-gradient-to-r from-primary to-primary-light shadow-lg shadow-primary/30 backdrop-blur-sm"
                  whileTap={{ scale: 0.98 }}
                >
                  立即咨询
                </motion.button>
              </motion.div>
            </div>
          </motion.nav>
        )}
      </AnimatePresence>
      </motion.header>
    </>
  );
};

export default Header;
