import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'umi';
import { Button } from 'antd';
import { ArrowRightOutlined, MenuOutlined, XOutlined } from '@ant-design/icons';

const Navbar: React.FC = () => {
  const navigate = useNavigate();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header className={`navbar ${isScrolled ? 'scrolled' : ''}`} style={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      right: 0, 
      zIndex: 1000, 
      transition: 'all 0.3s ease', 
      background: isScrolled ? 'rgba(255, 255, 255, 0.98)' : 'transparent', 
      padding: isScrolled ? '12px 0' : '20px 0',
      boxShadow: isScrolled ? '0 2px 16px rgba(0, 0, 0, 0.12)' : 'none'
    }}>
      <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px' }}>
        <div className="navbar-content" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="logo" style={{ fontSize: '28px', fontWeight: 'bold', color: '#1890ff' }}>
            <Link to="/" style={{ color: '#1890ff', textDecoration: 'none' }}>Crawlful Hub</Link>
          </div>
          
          {/* 桌面导航 */}
          <nav className="nav-links" style={{ 
            display: 'flex', 
            alignItems: 'center', 
            gap: '30px'
          }}>
            <Link to="/" style={{ 
              color: isScrolled ? '#333' : '#fff', 
              fontWeight: '500', 
              transition: 'all 0.3s ease',
              textDecoration: 'none',
              position: 'relative',
              '&:hover': {
                color: '#1890ff',
              }
            }}>首页</Link>
            <Link to="/pricing" style={{ 
              color: isScrolled ? '#333' : '#fff', 
              fontWeight: '500', 
              transition: 'all 0.3s ease',
              textDecoration: 'none'
            }}>定价</Link>
            <Link to="/case-study" style={{ 
              color: isScrolled ? '#333' : '#fff', 
              fontWeight: '500', 
              transition: 'all 0.3s ease',
              textDecoration: 'none'
            }}>成功案例</Link>
            <Link to="/auth/login" style={{ 
              color: isScrolled ? '#333' : '#fff', 
              fontWeight: '500', 
              transition: 'all 0.3s ease',
              textDecoration: 'none'
            }}>登录</Link>
            <Button 
              type="primary" 
              onClick={() => navigate('/auth/register')}
              style={{
                borderRadius: '25px',
                padding: '8px 24px',
                boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)'
              }}
            >
              免费注册
            </Button>
          </nav>
          
          {/* 移动端菜单按钮 */}
          <div className="mobile-menu-button" style={{ 
            display: 'none'
          }}>
            <Button 
              type="text" 
              icon={isMobileMenuOpen ? <XOutlined style={{ fontSize: '24px' }} /> : <MenuOutlined style={{ fontSize: '24px' }} />}
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              style={{
                color: isScrolled ? '#333' : '#fff'
              }}
            />
          </div>
        </div>
        
        {/* 移动端导航菜单 */}
        {isMobileMenuOpen && (
          <div className="mobile-menu" style={{ 
            marginTop: '20px', 
            display: 'flex', 
            flexDirection: 'column', 
            gap: '15px', 
            padding: '20px 0',
            background: 'rgba(255, 255, 255, 0.98)',
            borderRadius: '8px',
            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)'
          }}>
            <Link to="/" onClick={() => setIsMobileMenuOpen(false)} style={{ 
              color: '#333', 
              textDecoration: 'none',
              padding: '10px 0'
            }}>首页</Link>
            <Link to="/pricing" onClick={() => setIsMobileMenuOpen(false)} style={{ 
              color: '#333', 
              textDecoration: 'none',
              padding: '10px 0'
            }}>定价</Link>
            <Link to="/case-study" onClick={() => setIsMobileMenuOpen(false)} style={{ 
              color: '#333', 
              textDecoration: 'none',
              padding: '10px 0'
            }}>成功案例</Link>
            <Link to="/auth/login" onClick={() => setIsMobileMenuOpen(false)} style={{ 
              color: '#333', 
              textDecoration: 'none',
              padding: '10px 0'
            }}>登录</Link>
            <Button 
              type="primary" 
              block 
              onClick={() => {
                navigate('/auth/register');
                setIsMobileMenuOpen(false);
              }}
              style={{
                borderRadius: '25px',
                padding: '12px 0'
              }}
            >
              免费注册
            </Button>
          </div>
        )}
      </div>
    </header>
  );
};

export default Navbar;