import { useState, useEffect } from 'react';
import { Link, useLocation } from '@remix-run/react';

interface MenuItem {
  id: string;
  title: string;
  path: string;
  icon: string;
  children?: MenuItem[];
}

interface SidebarProps {
  onToggle: () => void;
  collapsed: boolean;
}

export function Sidebar({ onToggle, collapsed }: SidebarProps) {
  const location = useLocation();
  const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({});
  
  const menuItems: MenuItem[] = [
    {
      id: 'home',
      title: '首页',
      path: '/',
      icon: 'ri-home-line'
    },
    {
      id: 'file-management',
      title: '文件管理',
      path: '/files',
      icon: 'ri-folder-line',
      children: [
        {
          id: 'file-upload',
          title: '文件上传',
          path: '/files/new',
          icon: 'ri-upload-cloud-line'
        },
        {
          id: 'file-list',
          title: '文件列表',
          path: '/files',
          icon: 'ri-file-list-3-line'
        }
      ]
    },
    {
      id: 'rule-management',
      title: '评查规则库',
      path: '/rules',
      icon: 'ri-book-3-line',
      children: [
        {
          id: 'rule-groups',
          title: '评查点分组',
          path: '/rule-groups',
          icon: 'ri-folder-open-line'
        },
        {
          id: 'rule-list',
          title: '评查点列表',
          path: '/rules',
          icon: 'ri-list-check-3'
        },
        // {
        //   id: 'rule-new',
        //   title: '新增评查点',
        //   path: '/rules/new',
        //   icon: 'ri-add-circle-line'
        // }
      ]
    },
    {
      id: 'review-management',
      title: '评查结果',
      path: '/reviews',
      icon: 'ri-bar-chart-box-line',
      children: [
        {
          id: 'review-detail',
          title: '评查详情',
          path: '/reviews',
          icon: 'ri-file-chart-line'
        }
      ]
    },
    {
      id: 'system-settings',
      title: '系统设置',
      path: '/settings',
      icon: 'ri-settings-4-line',
      children: [
        {
          id: 'basic-settings',
          title: '基础设置',
          path: '/settings',
          icon: 'ri-equalizer-line'
        },
        {
          id: 'document-types',
          title: '文档类型',
          path: '/doc-types',
          icon: 'ri-file-list-line'
        },
        {
          id: 'prompt-management',
          title: '提示词管理',
          path: '/prompts',
          icon: 'ri-chat-1-line'
        }
      ]
    }
  ];
  
  // 初始化展开状态，默认全部展开
  useEffect(() => {
    const initialExpandedState: Record<string, boolean> = {};
    menuItems.forEach(item => {
      if (item.children) {
        initialExpandedState[item.id] = true;
      }
    });
    setExpandedMenus(initialExpandedState);
  }, []);
  
  const toggleMenu = (id: string, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    
    setExpandedMenus(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };
  
  const isActive = (path: string) => {
    return location.pathname === path || location.pathname.startsWith(`${path}/`);
  };
  
  // 处理侧边栏切换事件
  const handleToggleSidebar = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onToggle();
  };
  
  return (
    <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
      <div className="py-6 px-4 border-b border-gray-100 flex justify-between items-center">
        <div className="flex items-center">
          <i className="ri-file-search-line text-primary text-xl mr-2"></i>
          {!collapsed && <h2 className="text-lg font-medium">AI审核系统</h2>}
        </div>
        <button 
          className="sidebar-toggle"
          onClick={handleToggleSidebar}
          aria-label={collapsed ? "展开侧边栏" : "折叠侧边栏"}
          type="button"
        >
          <i className={`${collapsed ? 'ri-menu-unfold-line' : 'ri-menu-fold-line'}`}></i>
        </button>
      </div>
      
      {!collapsed && (
        <div className="user-profile p-4 border-b border-gray-100 flex items-center">
          <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
            <span>管</span>
          </div>
          <div className="ml-3">
            <p className="text-sm font-medium">系统管理员</p>
            <p className="text-xs text-gray-500">超级管理员</p>
          </div>
        </div>
      )}
      
      <div className="py-4 px-[10px]">
        {menuItems.map((item) => (
          <div key={item.id} className={`${collapsed ? 'px-0' : ''}`}>
            {!item.children ? (
              <Link
                to={item.path}
                className={`sidebar-menu-item ${isActive(item.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
              >
                <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
                {!collapsed && <span>{item.title}</span>}
              </Link>
            ) : (
              <>
                <div 
                  className={`sidebar-menu-item flex items-center ${collapsed ? 'justify-center' : 'justify-between'} cursor-pointer`}
                  onClick={(e) => toggleMenu(item.id, e)}
                  role="button"
                  tabIndex={0}
                  aria-expanded={expandedMenus[item.id] || false}
                  aria-controls={`submenu-${item.id}`}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      toggleMenu(item.id, e as unknown as React.MouseEvent);
                    }
                  }}
                >
                  <div className="flex items-center">
                    <i className={`${item.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
                    {!collapsed && <span>{item.title}</span>}
                  </div>
                  {!collapsed && (
                    <i className={`ri-arrow-${expandedMenus[item.id] ? 'down' : 'right'}-s-line`}></i>
                  )}
                </div>
                
                {(expandedMenus[item.id] || collapsed) && (
                  <div 
                    className={`${collapsed ? 'border-l-0 pl-0' : 'border-l border-gray-100 ml-4 pl-3'}`}
                    id={`submenu-${item.id}`}
                  >
                    {item.children.map((child) => (
                      <Link
                        key={child.id}
                        to={child.path}
                        className={`sidebar-menu-item ${isActive(child.path) ? 'active' : ''} flex items-center ${collapsed ? 'justify-center' : ''}`}
                      >
                        <i className={`${child.icon} ${collapsed ? 'text-xl' : 'mr-3'}`}></i>
                        {!collapsed && <span>{child.title}</span>}
                      </Link>
                    ))}
                  </div>
                )}
              </>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}