import React, { useState, useRef, useCallback } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import { FiUser, FiMenu, FiX, FiLogOut } from 'react-icons/fi';
import { useUser } from '../contexts/UserContext';
import toast from 'react-hot-toast';

const logoSrc = `${process.env.PUBLIC_URL}/assets/logo.png`;

const HeaderContainer = styled.header`
  background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
  color: white;
  padding: 12px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
`;

const HeaderContent = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const Logo = styled.div`
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: white;
  cursor: pointer;
  user-select: none;
  
  .logo-icon {
    margin-right: 8px;
    width: 36px;
    height: 36px;
    object-fit: cover;
  }
  
  @media (max-width: 768px) {
    font-size: 18px;
    
    .logo-icon {
      width: 30px;
      height: 30px;
    }
  }
`;

const Nav = styled.nav`
  display: flex;
  align-items: center;
  gap: 24px;
  
  @media (max-width: 768px) {
    display: none;
  }
`;

const NavLink = styled(Link).withConfig({
  shouldForwardProp: (prop) => prop !== 'isActive'
})`
  color: ${props => props.isActive ? 'white' : 'rgba(255, 255, 255, 0.9)'};
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  font-weight: ${props => props.isActive ? '600' : '500'};
  background: ${props => props.isActive ? 'rgba(255, 255, 255, 0.2)' : 'transparent'};
  box-shadow: ${props => props.isActive ? '0 4px 12px rgba(0, 0, 0, 0.15)' : 'none'};
  transform: ${props => props.isActive ? 'translateY(-1px)' : 'translateY(0)'};
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  &:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    
    &::before {
      opacity: 1;
    }
  }
  
  &:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
  }
`;

const UserSection = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
`;

const UserButton = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  @media (max-width: 768px) {
    padding: 8px 12px;
    
    .user-text {
      display: none;
    }
  }
`;

const UserAvatar = styled.img`
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
`;

const UserInfo = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  
  @media (max-width: 768px) {
    .user-name {
      display: none;
    }
  }
`;

const MobileMenuButton = styled.button`
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  
  @media (max-width: 768px) {
    display: block;
  }
`;

const MobileMenu = styled.div.withConfig({
  shouldForwardProp: (prop) => prop !== 'isOpen'
})`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: ${props => props.isOpen ? 'block' : 'none'};
  
  @media (min-width: 769px) {
    display: none;
  }
`;

const MobileMenuContent = styled.div.withConfig({
  shouldForwardProp: (prop) => prop !== 'isOpen'
})`
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: linear-gradient(135deg, 
    rgba(255, 240, 245, 0.95) 0%,   /* 淡粉红色 */
    rgba(255, 253, 240, 0.95) 35%,  /* 淡黄色 */
    rgba(240, 255, 240, 0.95) 70%,  /* 淡绿色 */
    rgba(248, 250, 252, 0.95) 100%  /* 接近白色 */
  );
  backdrop-filter: blur(10px);
  transform: translateX(${props => props.isOpen ? '0' : '100%'});
  transition: transform 0.3s ease;
  padding: 20px;
  overflow-y: auto;
`;

const MobileMenuHeader = styled.div`
  display: flex;
  justify-content: between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
`;

const MobileMenuTitle = styled.h3`
  color: #1f2937;
  margin: 0;
`;

const CloseButton = styled.button`
  background: none;
  border: none;
  font-size: 24px;
  color: #6b7280;
  cursor: pointer;
`;

const MobileNavLink = styled(Link).withConfig({
  shouldForwardProp: (prop) => prop !== 'isActive'
})`
  display: block;
  color: ${props => props.isActive ? '#4ade80' : '#374151'};
  text-decoration: none;
  padding: 16px 20px;
  margin: 4px 0;
  border-radius: 12px;
  border-bottom: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  font-weight: ${props => props.isActive ? '600' : '500'};
  background: ${props => props.isActive ? 'rgba(74, 222, 128, 0.1)' : 'transparent'};
  transform: ${props => props.isActive ? 'translateX(8px)' : 'translateX(0)'};
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: ${props => props.isActive ? '4px' : '0'};
    height: 60%;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    border-radius: 0 2px 2px 0;
    transition: width 0.3s ease;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  &:hover {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    transform: translateX(12px);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.15);
    
    &::after {
      opacity: 1;
    }
    
    &::before {
      width: 4px;
    }
  }
  
  &:active {
    transform: translateX(6px);
    transition: transform 0.1s ease;
  }
`;

const AdminModal = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
`;

const AdminModalContent = styled.div`
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  padding: 32px;
  border-radius: 18px;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  text-align: center;
`;

const AdminModalTitle = styled.h3`
  margin: 0 0 8px;
  font-size: 20px;
  color: #1b5e20;
`;

const AdminModalDesc = styled.p`
  margin: 0 0 20px;
  font-size: 13px;
  color: #6b7280;
`;

const AdminInput = styled.input`
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s;
  &:focus { border-color: #4ade80; outline: none; }
`;

const AdminSubmit = styled.button`
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
  &:hover { transform: translateY(-1px); }
`;

const AdminCancel = styled.button`
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  &:hover { color: #374151; }
`;

const ADMIN_TOKEN = 'shumengya520';

const Header = () => {
  const { user, isLoggedIn, logout } = useUser();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [showAdminModal, setShowAdminModal] = useState(false);
  const [adminInput, setAdminInput] = useState('');
  const navigate = useNavigate();
  const location = useLocation();

  // logo 五次点击检测
  const clickCountRef = useRef(0);
  const clickTimerRef = useRef(null);

  const handleLogoClick = useCallback((e) => {
    e.preventDefault();
    clickCountRef.current += 1;
    clearTimeout(clickTimerRef.current);

    if (clickCountRef.current >= 5) {
      clickCountRef.current = 0;
      // 如果已登录管理员，直接进入
      if (localStorage.getItem('admin_token') === ADMIN_TOKEN) {
        navigate('/admin');
      } else {
        setAdminInput('');
        setShowAdminModal(true);
      }
      return;
    }

    // 2 秒内未达到 5 次则重置，并正常跳转首页
    clickTimerRef.current = setTimeout(() => {
      clickCountRef.current = 0;
    }, 2000);

    navigate('/');
  }, [navigate]);

  const handleAdminSubmit = () => {
    if (adminInput === ADMIN_TOKEN) {
      localStorage.setItem('admin_token', ADMIN_TOKEN);
      setShowAdminModal(false);
      toast.success('管理员验证通过');
      navigate('/admin');
    } else {
      toast.error('令牌错误');
      setAdminInput('');
    }
  };

  const isActive = (path) => {
    return location.pathname.startsWith(path);
  };

  const handleLogout = async () => {
    await logout();
    setIsMenuOpen(false);
    navigate('/');
  };

  const handleMenuToggle = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  const handleMenuClose = () => {
    setIsMenuOpen(false);
  };

  return (
    <>
      <HeaderContainer>
        <HeaderContent>
          <Logo onClick={handleLogoClick}>
            <img className="logo-icon" src={logoSrc} alt="InfoGenie Logo" />
            万象口袋
          </Logo>

          <Nav>
            <NavLink to="/60sapi" isActive={isActive('/60sapi')}>60sAPI</NavLink>
            <NavLink to="/smallgame" isActive={isActive('/smallgame')}>休闲游戏</NavLink>
            <NavLink to="/toolbox" isActive={isActive('/toolbox')}>工具箱</NavLink>
            <NavLink to="/aimodel" isActive={isActive('/aimodel')}>AI应用</NavLink>
            <NavLink to="/profile" isActive={isActive('/profile')}>个人中心</NavLink>
          </Nav>

          <UserSection>
            {isLoggedIn && user ? (
              <>
                <UserInfo>
                  {user.avatarUrl ? (
                    <UserAvatar 
                      src={user.avatarUrl} 
                      alt="头像"
                      onError={(e) => {
                        e.target.style.display = 'none';
                        e.target.nextSibling.style.display = 'inline';
                      }}
                    />
                  ) : null}
                  <FiUser style={{ display: user.avatarUrl ? 'none' : 'inline' }} />
                  <span className="user-name">{user.username || user.account}</span>
                </UserInfo>
                <UserButton onClick={handleLogout}>
                  <FiLogOut size={16} />
                  <span className="user-text">退出</span>
                </UserButton>
              </>
            ) : (
              <UserButton as={Link} to="/login">
                <FiUser />
                <span className="user-text">登录</span>
              </UserButton>
            )}

            <MobileMenuButton onClick={handleMenuToggle}>
              <FiMenu />
            </MobileMenuButton>
          </UserSection>
        </HeaderContent>
      </HeaderContainer>

      <MobileMenu isOpen={isMenuOpen} onClick={handleMenuClose}>
        <MobileMenuContent isOpen={isMenuOpen} onClick={(e) => e.stopPropagation()}>
          <MobileMenuHeader>
            <MobileMenuTitle>菜单</MobileMenuTitle>
            <CloseButton onClick={handleMenuClose}>
              <FiX />
            </CloseButton>
          </MobileMenuHeader>

          <MobileNavLink to="/" onClick={handleMenuClose} isActive={location.pathname === '/'}>
            首页
          </MobileNavLink>
          <MobileNavLink to="/60sapi" onClick={handleMenuClose} isActive={isActive('/60sapi')}>
            60sAPI
          </MobileNavLink>
          <MobileNavLink to="/smallgame" onClick={handleMenuClose} isActive={isActive('/smallgame')}>
            休闲游戏
          </MobileNavLink>
          <MobileNavLink to="/toolbox" onClick={handleMenuClose} isActive={isActive('/toolbox')}>
            工具箱
          </MobileNavLink>
          <MobileNavLink to="/aimodel" onClick={handleMenuClose} isActive={isActive('/aimodel')}>
            AI应用
          </MobileNavLink>
          <MobileNavLink to="/profile" onClick={handleMenuClose} isActive={isActive('/profile')}>
            个人中心
          </MobileNavLink>

          {isLoggedIn && user ? (
            <>
              <div style={{ 
                padding: '12px 0', 
                borderBottom: '1px solid #f3f4f6',
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
              }}>
                {user.avatarUrl ? (
                  <UserAvatar 
                    src={user.avatarUrl} 
                    alt="头像"
                    style={{ width: '32px', height: '32px' }}
                  />
                ) : (
                  <FiUser size={24} color="#666" />
                )}
                <span style={{ color: '#374151', fontWeight: '500' }}>{user.username || user.account}</span>
              </div>
              <MobileNavLink as="button" 
                style={{ 
                  background: 'none', 
                  border: 'none', 
                  width: '100%', 
                  textAlign: 'left',
                  color: '#ef4444'
                }}
                onClick={() => {
                  handleLogout();
                  handleMenuClose();
                }}
              >
                🚪 退出登录
              </MobileNavLink>
            </>
          ) : (
            <MobileNavLink to="/login" onClick={handleMenuClose}>
              登录注册
            </MobileNavLink>
          )}
        </MobileMenuContent>
      </MobileMenu>

      {showAdminModal && (
        <AdminModal onClick={() => setShowAdminModal(false)}>
          <AdminModalContent onClick={e => e.stopPropagation()}>
            <AdminModalTitle>🔐 管理员验证</AdminModalTitle>
            <AdminModalDesc>请输入管理员令牌以进入后台</AdminModalDesc>
            <AdminInput
              type="password"
              placeholder="请输入管理员令牌"
              value={adminInput}
              onChange={e => setAdminInput(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleAdminSubmit()}
              autoFocus
            />
            <AdminSubmit onClick={handleAdminSubmit}>验证并进入</AdminSubmit>
            <AdminCancel onClick={() => setShowAdminModal(false)}>取消</AdminCancel>
          </AdminModalContent>
        </AdminModal>
      )}
    </>
  );
};

export default Header;
