import React, { useState, useEffect } from 'react';
import { Sidebar } from './Sidebar';
// import { Header } from './Header';
import { Breadcrumb } from './Breadcrumb';
import { useMatches, useLocation } from '@remix-run/react';
import type { UserRole } from '~/root';

// 定义应用模块类型
type AppModule = 'contract' | 'record' | 'model';

// 应用模块与reviewType的映射
const REVIEW_TYPE_TO_APP: Record<string, AppModule> = {
  'contract': 'contract',  // 合同管理
  'record': 'record',      // 案卷智能评查
  'model': 'model'         // 智慧法务大模型
};

interface LayoutProps {
  children: React.ReactNode;
  userRole?: UserRole;
}

// 添加一个接口表示路由handle可能包含的属性
interface RouteHandle {
  hideBreadcrumb?: boolean;
  [key: string]: unknown;
}

interface Match {
  handle?: RouteHandle;
  pathname: string;
  data: unknown;
}

export function Layout({ children, userRole = 'developer' }: LayoutProps) {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const [selectedApp, setSelectedApp] = useState<AppModule>('contract');
  const matches = useMatches() as Match[];
  const location = useLocation();
  
  // 检查当前路径是否应该隐藏侧边栏
  const noLayoutPaths = ['/login', '/'];
  const shouldHideSidebar = noLayoutPaths.includes(location.pathname);
  
  // 检查当前路由是否应该隐藏默认面包屑
  const shouldHideBreadcrumb = shouldHideSidebar || matches.some(match => 
    match.handle && match.handle.hideBreadcrumb === true
  );
  
  // 从sessionStorage中获取侧边栏状态和reviewType
  useEffect(() => {
    // 从localStorage获取侧边栏状态
    const savedState = localStorage.getItem('sidebarCollapsed');
    if (savedState) {
      setSidebarCollapsed(savedState === 'true');
    }
    
    // 从sessionStorage获取reviewType并设置对应的应用模块
    if (typeof window !== 'undefined') {
      try {
        const reviewType = sessionStorage.getItem('reviewType');
        if (reviewType && REVIEW_TYPE_TO_APP[reviewType]) {
          setSelectedApp(REVIEW_TYPE_TO_APP[reviewType]);
        }
      } catch (error) {
        console.error('获取reviewType失败:', error);
      }
    }
  }, []);
  
  // 路由变化时，检查并更新应用模块
  useEffect(() => {
    if (typeof window !== 'undefined') {
      try {
        const reviewType = sessionStorage.getItem('reviewType');
        console.log('Layout 路由变化, reviewType:', reviewType, '路径:', location.pathname);
        if (reviewType && REVIEW_TYPE_TO_APP[reviewType]) {
          setSelectedApp(REVIEW_TYPE_TO_APP[reviewType]);
        }
      } catch (error) {
        console.error('路由变化时获取reviewType失败:', error);
      }
    }
  }, [location.pathname]);
  
  const toggleSidebar = () => {
    const newState = !sidebarCollapsed;
    setSidebarCollapsed(newState);
    localStorage.setItem('sidebarCollapsed', String(newState));
  };
  
  // 切换应用模块
  // const changeAppModule = (appId: AppModule) => {
  //   setSelectedApp(appId);
  //   localStorage.setItem('selectedApp', appId);
  // };
  
  // 如果是无布局页面，只渲染内容
  if (shouldHideSidebar) {
    return <>{children}</>;
  }
  
  return (
    <div className="layout-container">
      <Sidebar 
        collapsed={sidebarCollapsed} 
        onToggle={toggleSidebar} 
        userRole={userRole}
        selectedApp={selectedApp}
      />
      
      <div className={`main-content ${sidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
        {/* 应用模块选择器 */}
        {/* <div className="app-module-selector py-2 px-4 border-b border-gray-100 flex items-center">
          {APP_MODULES.map(app => (
            <button
              key={app.id}
              onClick={() => changeAppModule(app.id as AppModule)}
              className={`app-module-btn mr-4 py-2 px-4 rounded-md flex items-center ${
                selectedApp === app.id ? 'bg-green-50 text-green-700 border border-green-200' : 'hover:bg-gray-50'
              }`}
            >
              <i className={`${app.icon} mr-2`}></i>
              <span>{app.name}</span>
            </button>
          ))}
        </div> */}
        
        <div className="content-container">
          {!shouldHideBreadcrumb && <Breadcrumb />}
          {children}
        </div>
      </div>
    </div>
  );
}