import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router';
import { Button } from '@/client/components/ui/button';
import { User } from 'lucide-react';
import { useAuth } from '../hooks/AuthProvider';
import UserInfoModal from '../components/UserInfoModal';

/**
 * 元亨科技网站主布局组件
 * 包含顶部导航菜单和内容区域
 */
export const MainLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { user, isAuthenticated } = useAuth();
  const [showUserModal, setShowUserModal] = useState(false);

  const navItems = [
    { path: '/', label: '首页' },
    { path: '/about', label: '公司介绍' },
    { path: '/ai-tools', label: 'AI工具' },
    { path: '/design-planning', label: '设计规划' },
    { path: '/software-requirements', label: '软件需求' },
    { path: '/talent-sharing', label: '共享人才' },
    { path: '/contact', label: '联系我们' },
  ];

  const isActive = (path: string) => {
    if (path === '/') {
      return location.pathname === '/';
    }
    return location.pathname.startsWith(path);
  };

  return (
    <div className="min-h-screen bg-white">
      {/* 顶部导航栏 */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">元</span>
              </div>
              <h1 className="text-xl font-bold text-gray-900">元亨科技</h1>
            </div>
            
            {/* 主导航菜单 */}
            <nav className="hidden md:flex items-center space-x-1">
              {navItems.map((item) => (
                <Button
                  key={item.path}
                  variant={isActive(item.path) ? "default" : "ghost"}
                  className={`px-4 py-2 text-sm font-medium transition-colors ${
                    isActive(item.path) 
                      ? 'bg-blue-600 text-white' 
                      : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'
                  }`}
                  onClick={() => navigate(item.path)}
                >
                  {item.label}
                </Button>
              ))}
            </nav>

            {/* 用户操作区域 */}
            <div className="flex items-center space-x-3">
              {isAuthenticated ? (
                <Button
                  variant="ghost"
                  size="sm"
                  className="flex items-center space-x-2 text-gray-700 hover:text-blue-600"
                  onClick={() => setShowUserModal(true)}
                >
                  <User className="h-4 w-4" />
                  <span className="hidden sm:inline">{user?.nickname || user?.username || '个人中心'}</span>
                </Button>
              ) : (
                <div className="flex items-center space-x-2">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => navigate('/login')}
                    className="text-gray-700 hover:text-blue-600"
                  >
                    登录
                  </Button>
                  <Button
                    size="sm"
                    onClick={() => navigate('/register')}
                    className="bg-blue-600 hover:bg-blue-700 text-white"
                  >
                    注册
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* 移动端导航菜单（简化版） */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-40">
        <div className="flex overflow-x-auto py-2 px-4 space-x-1">
          {navItems.slice(0, 4).map((item) => (
            <Button
              key={item.path}
              variant={isActive(item.path) ? "default" : "ghost"}
              size="sm"
              className={`flex-1 min-w-0 text-xs px-2 py-1 ${
                isActive(item.path) 
                  ? 'bg-blue-600 text-white' 
                  : 'text-gray-700 hover:text-blue-600'
              }`}
              onClick={() => navigate(item.path)}
            >
              {item.label}
            </Button>
          ))}
        </div>
      </div>

      {/* 主要内容区域 */}
      <main className="pt-16 pb-20 md:pb-0">
        <Outlet />
      </main>

      <UserInfoModal
        isOpen={showUserModal}
        onClose={() => setShowUserModal(false)}
      />
    </div>
  );
};