import React, { useState, useEffect } from 'react';
import { useNavigate, Form, useLoaderData } from '@remix-run/react';
import { type MetaFunction, type ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import styles from "~/styles/pages/home.css?url";
import dayjs from 'dayjs';
import type { EntryModule } from '~/api/home/home';
import { getUserSession, logout } from "~/api/login/auth.server";
import { toastService } from '~/components/ui';
import { DOCUMENT_URL, CROSS_CHECKING_ONLY_MODE, CROSS_CHECKING_ONLY_PORT, getCurrentPort } from '~/config/api-config';

export const links = () => [
  { rel: "stylesheet", href: styles }
];

export const meta: MetaFunction = () => {
  return [
    { title: "中国烟草AI合同及卷宗审核系统 - 首页" },
    { name: "description", content: "中国烟草AI合同及卷宗审核系统首页" },
  ];
};

// 处理登出请求
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "logout") {
    return logout(request);
  }

  return null;
}

// 获取用户信息
export async function loader({ request }: LoaderFunctionArgs) {
  // 🔒 认证检查已在 getUserSession() 中统一处理
  // 如果未认证，会自动重定向到登录页，不会执行到这里
  const { userRole, userInfo, frontendJWT } = await getUserSession(request);

  // 🔑 获取用户地区并查询入口模块
  let entryModules: EntryModule[] = [];
  if (frontendJWT) {
    const { getEntryModules } = await import('~/api/home/home');
    entryModules = await getEntryModules(frontendJWT);
    console.log(`📦 [Index Loader] 获取到 ${entryModules.length} 个入口模块`);
  } else {
    console.warn('⚠️ [Index Loader] 缺少 JWT，返回空模块列表');
  }

  // 🔑 检查用户是否有系统设置权限
  let hasSettingsAccess = false;
  let hasCrossCheckingAccess = false;
  let hasChatLLMAccess = false;
  let settingsChildren: { path: string; title: string }[] = [];

  if (userRole && frontendJWT) {
    const { getUserRoutesByRole } = await import('~/api/auth/user-routes');
    const routesResult = await getUserRoutesByRole(userRole, frontendJWT, true); // includeHidden=true
    // console.log('🔍 [Index Loader] 顶级路由paths:', routesResult.data?.map(r => r.path));

    if (routesResult.success && routesResult.data) {
      // 查找 '/settings' 路由及其子路由
      const settingsRoute = routesResult.data.find(route => route.path === '/settings');
      if (settingsRoute) {
        hasSettingsAccess = true;
        // 提取子路由信息（仅 path 和 title）
        if (settingsRoute.children && settingsRoute.children.length > 0) {
          settingsChildren = settingsRoute.children.map(child => ({
            path: child.path,
            title: child.title
          }));
        }
      }

      // 检查是否存在顶级路由 '/cross-checking'
      // 🔒 交叉评查访问控制：
      // - CROSS_CHECKING_ONLY_MODE=false 时，所有端口都可访问（根据后端权限）
      // - CROSS_CHECKING_ONLY_MODE=true 时，只有 51707 端口可访问
      const currentPort = getCurrentPort();
      if (!CROSS_CHECKING_ONLY_MODE || currentPort === CROSS_CHECKING_ONLY_PORT) {
        hasCrossCheckingAccess = routesResult.data.some(route => route.path === '/cross-checking');
      } else {
        hasCrossCheckingAccess = false; // CROSS_CHECKING_ONLY_MODE=true 且非51707端口不显示交叉评查入口
      }

      // 检查是否存在顶级路由 '/chat-with-llm'
      hasChatLLMAccess = routesResult.data.some(route => route.path === '/chat-with-llm');

      // console.log(`🔑 [Index Loader] 用户${hasSettingsAccess ? '有' : '没有'}系统设置权限`);
      // console.log(`🔑 [Index Loader] 系统设置子路由数量: ${settingsChildren.length}`);
      // console.log(`🔑 [Index Loader] 用户${hasCrossCheckingAccess ? '有' : '没有'}交叉评查权限`);
      // console.log(`🔑 [Index Loader] 用户${hasChatLLMAccess ? '有' : '没有'}智慧法务助手权限`);
    }
  }

  // 🔑 判断是否启用交叉评查专属模式
  // 条件：CROSS_CHECKING_ONLY_MODE=true 且 当前端口为 51707
  // 注意：currentPort 已在上面的权限检查中获取，这里复用（如果在 if 块外需要则重新获取）
  const currentPortForMode = getCurrentPort();
  const isCrossCheckingOnlyMode = CROSS_CHECKING_ONLY_MODE && currentPortForMode === CROSS_CHECKING_ONLY_PORT;

  if (isCrossCheckingOnlyMode) {
    console.log(`🔒 [Index Loader] 交叉评查专属模式已启用 (端口: ${currentPortForMode})`);
  }

  // 返回用户信息、入口模块和权限给客户端
  return Response.json({
    userRole,
    userInfo,
    entryModules,
    hasSettingsAccess,
    hasCrossCheckingAccess,
    hasChatLLMAccess,
    settingsChildren,
    isCrossCheckingOnlyMode  // 新增：交叉评查专属模式标志
  });
}

export default function Index() {
  const navigate = useNavigate();
  const loaderData = useLoaderData<typeof loader>();
  const [currentDateTime, setCurrentDateTime] = useState({
    date: '',
    time: ''
  });

  // 检查是否通过51707端口访问
  // const [isPort51707, setIsPort51707] = useState(false);

  // 用户信息：优先使用服务端返回的，否则从 localStorage 读取
  const [userInfo, setUserInfo] = useState(loaderData.userInfo);
  const [userRole, setUserRole] = useState(loaderData.userRole);

  useEffect(() => {
    if (typeof window !== 'undefined') {
      // setIsPort51707(window.location.port === '51707');

      // 如果服务端没有返回用户信息，从 localStorage 读取
      if (!loaderData.userInfo || !loaderData.userRole) {
        const storedUserInfoStr = localStorage.getItem('user_info');
        if (storedUserInfoStr) {
          try {
            const storedUserInfo = JSON.parse(storedUserInfoStr);
            console.log('📖 [Index] 从 localStorage 读取用户信息:', storedUserInfo);
            setUserInfo(storedUserInfo);
            setUserRole(storedUserInfo.user_role || '');
          } catch (error) {
            console.error('❌ [Index] 解析 localStorage 用户信息失败:', error);
          }
        }
      }
    }
  }, [loaderData.userInfo, loaderData.userRole]);

  // 打印用户角色
  useEffect(() => {
    // console.log('📋 [Index] 当前用户角色:', userRole);
    // console.log('👤 [Index] 当前用户信息:', userInfo);
  }, [userRole, userInfo]);

  // 🔑 清除系统设置模式和交叉评查模式标志（当用户返回首页时）
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const settingsMode = sessionStorage.getItem('settingsMode');
      const crossCheckingMode = sessionStorage.getItem('crossCheckingMode');

      if (settingsMode === 'true') {
        sessionStorage.removeItem('settingsMode');
        // console.log('🔄 [Index] 清除系统设置模式标志');
      }

      if (crossCheckingMode === 'true') {
        sessionStorage.removeItem('crossCheckingMode');
        // console.log('🔄 [Index] 清除交叉评查模式标志');
      }
    }
  }, []); // 只在组件挂载时执行一次

  // 更新日期时间
  useEffect(() => {
    const updateDateTime = () => {
      const now = dayjs();
      // 格式化日期: YYYY/MM/DD
      setCurrentDateTime({
        date: now.format('YYYY/MM/DD'),
        time: now.format('HH:mm:ss')
      });
    };

    // 初始化时间
    updateDateTime();

    // 每秒更新一次
    const timerID = setInterval(updateDateTime, 1000);

    return () => clearInterval(timerID);
  }, []);

  // 处理模块点击
  const handleModuleClick = (module: EntryModule) => {
    // 提取文档类型 IDs
    const typeIds = module.documentTypes.map((dt) => dt.id) || [];

    if (module.requiresDocumentTypes && typeIds.length === 0) {
      toastService.error('该入口尚未关联文档类型，无法进入');
      console.warn('⚠️ [Index] 模块未关联文档类型:', module.name);
      return;
    }

    if (typeof window !== 'undefined') {
      // 🔑 清除各页面的筛选条件缓存（切换入口模块时重置）
      sessionStorage.removeItem('rules.searchParams');

      // 🔑 存储到 sessionStorage（用于客户端请求）
      if (typeIds.length > 0) {
        sessionStorage.setItem('documentTypeIds', JSON.stringify(typeIds));

        // console.log('📝 [Index] 存储到客户端 sessionStorage:', typeIds);
      } else {
        // 清空文档类型数据
        sessionStorage.removeItem('documentTypeIds');
      }

      // 存储模块信息
      sessionStorage.setItem('selectedModuleId', String(module.id));
      sessionStorage.setItem('selectedModuleName', module.name);
      sessionStorage.setItem('selectedModulePicPath', module.iconPath || '')
    }

    const targetPath = module.targetPath || '/home';
    if (targetPath === '/chat-with-llm/chat' && typeof window !== 'undefined') {
      sessionStorage.setItem('selectedModulePicPath', module.iconPath || '/images/icon_assistant.png');
    }
    navigate(targetPath);
  };

  // 处理键盘事件
  const handleKeyDown = (module: EntryModule, e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleModuleClick(module);
    }
  };

  // 获取模块图标（根据模块 path 或 id）
  const getModuleIcon = (module: EntryModule) => {
    if (module.iconPath){
      if (module.iconPath.startsWith('/images/')) {
        return module.iconPath;
      }
      return `${DOCUMENT_URL}${module.iconPath}`;
    }
    return '/images/icon_assistant.png';
  };

  // 处理登出
  const handleLogout = () => {
    // 清除sessionStorage中的所有数据
    if (typeof window !== 'undefined') {
      sessionStorage.clear();
    }

    // 使用Form组件提交登出请求
    const form = document.getElementById('logout-form') as HTMLFormElement;
    if (form) {
      form.submit();
    } else {
      // 如果找不到表单，直接导航到登录页
      navigate('/login');
    }
  };

  // 处理进入系统设置
  const handleEnterSettings = () => {
    // 🔑 检查是否有系统设置的子路由
    if (!loaderData.settingsChildren || loaderData.settingsChildren.length === 0) {
      // 没有子路由，显示错误提示
      toastService.error('您无权限访问或页面丢失');
      console.warn('⚠️ [Index] 系统设置没有可访问的子路由');
      return;
    }

    if (typeof window !== 'undefined') {
      // 🔑 设置标志：表示用户通过系统设置入口进入
      sessionStorage.setItem('settingsMode', 'true');
      // 清除模块相关的标志（因为不是从入口模块进入）
      sessionStorage.removeItem('selectedModuleId');
      sessionStorage.removeItem('selectedModuleName');
      sessionStorage.removeItem('selectedModulePicPath');
      // 清除交叉评查模式标志
      sessionStorage.removeItem('crossCheckingMode');
    }

    // 跳转到第一个子路由
    const firstChildPath = loaderData.settingsChildren[0].path;
    console.log(`📌 [Index] 系统设置：跳转到第一个子路由 ${firstChildPath}`);
    navigate(firstChildPath);
  };

  // 处理进入交叉评查
  const handleEnterCrossChecking = () => {
    if (typeof window !== 'undefined') {
      // 🔑 设置标志：表示用户通过交叉评查入口进入
      sessionStorage.setItem('crossCheckingMode', 'true');
      sessionStorage.setItem('selectedModuleName', '交叉评查')
      sessionStorage.setItem('selectedModulePicPath', '/images/icon_cross@2x.png')
      // 清除模块相关的标志（因为不是从入口模块进入）
      sessionStorage.removeItem('selectedModuleId');
      // sessionStorage.removeItem('selectedModuleName');
      // sessionStorage.removeItem('selectedModulePicPath');
      // 清除系统设置模式标志
      sessionStorage.removeItem('settingsMode');
    }

    // 跳转到交叉评查的默认页面
    navigate('/cross-checking');
  };

  return (
    <div className="home-page">
      {/* 登出表单 - 隐藏 */}
      <Form method="post" id="logout-form" className="hidden">
        <input type="hidden" name="intent" value="logout" />
      </Form>

      {/* 头部 */}
      <header className="header">
        <div className="logo-container">
          <img src="/logo.svg" alt="中国烟草" className="logo" />
          <div className="flex flex-col">
            <span className="logo-text ">中国烟草</span>
            <span className="logo-text-en">CHINA TOBACCO</span>
          </div>
        </div>
        <div className="user-info">
          {/* 系统设置按钮 - 只在有权限且非交叉评查专属模式时显示 */}
          {loaderData.hasSettingsAccess && !loaderData.isCrossCheckingOnlyMode && (
            <button
              onClick={handleEnterSettings}
              className="settings-button"
              aria-label="系统设置"
              title="系统设置"
            >
              <i className="ri-settings-4-line"></i>
            </button>
          )}
          <span className="datetime">{currentDateTime.date} {currentDateTime.time}</span>
          <div className="user">
            {(() => {
              const displayName = (userInfo?.nick_name || (userInfo as { nickname?: string })?.nickname || (userInfo as { name?: string })?.name || '') as string;
              const lastChar = displayName ? displayName.charAt(displayName.length - 1) : '用';
              return (
                <>
                  <div className="avatar w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
                    <span>{lastChar}</span>
                  </div>
                  <span className="username ml-2">{displayName || '未知用户'}</span>
                </>
              );
            })()}
            <button
              onClick={handleLogout}
              className="logout-button"
              aria-label="登出"
            >
              <i className="ri-logout-box-line"></i>
            </button>
          </div>
        </div>
      </header>

      {/* 主要内容 */}
      <main className="index-main-content">
        <div className="index-main-content-container">
          <h1 className="welcome-text">- 欢迎来到智慧法务平台 -</h1>

          {/* 模块网格区域 */}
          <div className="modules-container">
            {/* 🔒 交叉评查专属模式：只显示交叉评查入口 */}
            {loaderData.isCrossCheckingOnlyMode ? (
              loaderData.hasCrossCheckingAccess ? (
                <div
                  className="module-card"
                  onClick={handleEnterCrossChecking}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      handleEnterCrossChecking();
                    }
                  }}
                  role="button"
                  tabIndex={0}
                  aria-label="交叉评查"
                >
                  <img
                    src="/images/icon_cross@2x.png"
                    alt="交叉评查"
                    className="w-12 h-12 mx-1"
                    onError={(e) => {
                      (e.target as HTMLImageElement).style.display = 'none';
                      const parent = (e.target as HTMLImageElement).parentElement;
                      if (parent) {
                        const icon = document.createElement('i');
                        icon.className = 'ri-shuffle-line';
                        icon.style.fontSize = '48px';
                        icon.style.color = 'var(--color-primary)';
                        parent.insertBefore(icon, parent.firstChild);
                      }
                    }}
                  />
                  <span className="module-name">交叉评查</span>
                </div>
              ) : (
                <div className="text-center text-gray-500 py-8">
                  暂无可用模块
                </div>
              )
            ) : (
              /* 正常模式：显示所有入口模块 */
              loaderData.entryModules && loaderData.entryModules.length > 0 ? (
                <>
                  {loaderData.entryModules.map((module: EntryModule) => {
                    const isLLMModule = module.targetPath === '/chat-with-llm/chat';
                    const isCrossCheckingModule = module.targetPath === '/cross-checking';

                    // 🔑 如果是智慧法务助手且用户没有访问权限，则不渲染该模块
                    if (isLLMModule && !loaderData.hasChatLLMAccess) {
                      return null;
                    }

                    // 交叉评查已在下面独立渲染，避免首页重复出现两张卡片
                    if (isCrossCheckingModule) {
                      return null;
                    }

                    return (
                      <div
                        key={module.id}
                        className="module-card"
                        onClick={() => handleModuleClick(module)}
                        onKeyDown={(e) => handleKeyDown(module, e)}
                        role="button"
                        tabIndex={0}
                        aria-label={module.name}
                      >
                        <img
                          src={isLLMModule ? '/images/icon_assistant.png' : getModuleIcon(module)}
                          alt={module.name}
                          className="w-12 h-12 mx-1"
                        />
                        <span className="module-name">{module.name}</span>
                      </div>
                    );
                  })}

                  {/* 交叉评查入口 - 独立渲染，不依赖智慧法务助手模块 */}
                  {loaderData.hasCrossCheckingAccess && (
                    <div
                      className="module-card"
                      onClick={handleEnterCrossChecking}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          handleEnterCrossChecking();
                        }
                      }}
                      role="button"
                      tabIndex={0}
                      aria-label="交叉评查"
                    >
                      <img
                        src="/images/icon_cross@2x.png"
                        alt="交叉评查"
                        className="w-12 h-12 mx-1"
                        onError={(e) => {
                          (e.target as HTMLImageElement).style.display = 'none';
                          const parent = (e.target as HTMLImageElement).parentElement;
                          if (parent) {
                            const icon = document.createElement('i');
                            icon.className = 'ri-shuffle-line';
                            icon.style.fontSize = '48px';
                            icon.style.color = 'var(--color-primary)';
                            parent.insertBefore(icon, parent.firstChild);
                          }
                        }}
                      />
                      <span className="module-name">交叉评查</span>
                    </div>
                  )}
                </>
              ) : (
                <div className="text-center text-gray-500 py-8">
                  暂无可用模块
                </div>
              )
            )}
          </div>
        </div>
      </main>
    </div>
  );
}