import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router';
import { useAuth } from '@/client/mobile/hooks/AuthProvider';
import { UserType } from '@/server/modules/users/user.enum';
import { getGlobalConfig } from '@/client/utils/utils';
import { cn } from '@/client/lib/utils';
import {
  MessageCircle,
  Users,
  FileText,
  Heart,
  Video,
  User,
  X,
  Menu
} from 'lucide-react';

/**
 * 主布局组件 - shadcn风格
 * 包含侧边栏、顶部导航和内容区域
 */
export const MainLayout = () => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { user } = useAuth();
  const navigate = useNavigate();

  const handleClassroomClick = (classId = '') => {
    if (user?.userType === UserType.TEACHER) {
      navigate(`/mobile/classroom/${classId}/${UserType.TEACHER}`);
    } else {
      navigate(`/mobile/classroom/${classId}/${UserType.STUDENT}`);
    }
    setSidebarOpen(false);
  };

  const menuItems = [
    {
      id: 'public-chatroom',
      label: '公开解盘',
      icon: <MessageCircle className="w-5 h-5" />,
      onClick: () => handleClassroomClick(getGlobalConfig('PUBLIC_CHATROOM_ID'))
    },
    {
      id: 'private-chatroom',
      label: '学员解盘',
      icon: <Users className="w-5 h-5" />,
      onClick: () => handleClassroomClick(getGlobalConfig('PRIVATE_CHATROOM_ID'))
    },
    // {
    //   id: 'exam',
    //   label: '考试模式',
    //   icon: <FileText className="w-5 h-5" />,
    //   onClick: () => navigate('/mobile/exam')
    // },
    {
      id: 'training',
      label: '训练模式',
      icon: <Heart className="w-5 h-5" />,
      onClick: () => {
        navigate('/mobile/xunlian');
        setSidebarOpen(false);
      }
    },
    {
      id: 'video-replay',
      label: '视频回放',
      icon: <Video className="w-5 h-5" />,
      onClick: () => {
        navigate('/mobile/video-replay');
        setSidebarOpen(false);
      }
    }
  ];

  return (
    <div className="min-h-screen bg-background flex">
      {/* 侧边栏 - 桌面端收起状态 */}
      <aside className={cn(
        "fixed lg:static inset-y-0 left-0 z-50 w-16 lg:w-16 bg-card border-r border-border transition-all duration-300",
        sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
      )}>
        <div className="flex flex-col h-full">
          {/* 侧边栏头部 - 包含用户头像和用户名 */}
          <div className="flex flex-col items-center justify-center h-20 border-b border-border py-2 relative">
            {user && (
              <>
                <button
                  onClick={() => {
                    navigate('/mobile/member');
                    setSidebarOpen(false);
                  }}
                  className="w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center mb-1"
                >
                  <User className="w-4 h-4" />
                </button>
                <span className="text-xs text-muted-foreground truncate max-w-[60px]">
                  {user.username}
                </span>
              </>
            )}
          </div>

          {/* 菜单项 */}
          <nav className="flex-1 px-2 py-4 space-y-2">
            {menuItems.map((item) => (
              <button
                key={item.id}
                onClick={item.onClick}
                className={cn(
                  "w-full flex flex-col items-center p-2 rounded-md text-sm font-medium transition-colors",
                  "hover:bg-muted hover:text-foreground",
                  "text-muted-foreground hover:text-foreground"
                )}
              >
                <div className="mb-1">
                  {item.icon}
                </div>
                <span className="text-xs leading-tight whitespace-nowrap text-center">
                  {item.label}
                </span>
              </button>
            ))}
          </nav>
          
          {/* 关闭按钮 - 放在侧边栏底部 */}
          <div className="lg:hidden p-4 border-t border-border">
            <button
              onClick={() => setSidebarOpen(false)}
              className="w-full flex items-center justify-center p-2 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>
      </aside>

      {/* 遮罩层 - 移动端 */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* 内容区域 */}
        <main className="flex-1">
          <Outlet />
        </main>
      </div>

      {/* 浮动菜单按钮 - 移动端 */}
      <button
        onClick={() => setSidebarOpen(true)}
        className="lg:hidden fixed top-6 right-6 z-50 w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:bg-primary/90 transition-colors"
      >
        <Menu className="w-5 h-5" />
      </button>
    </div>
  );
};
