// import React from 'react';
import { type MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
// import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
import { Tag } from "~/components/ui/Tag";
import homeStyles from "~/styles/pages/sys_overview.css?url";
import { getDocuments, type DocumentUI } from "~/api/files/documents";
import { useState, useEffect } from "react";
import { getHomeData } from "~/api/home/home";
import dayjs from 'dayjs';
// import { getUserSession } from "~/root";

// 文件处理状态选项
const fileProcessingStatusOptions = [
  { value: "Waiting", label: "上传中", icon: "ri-loader-line", color: "blue" },
  { value: "Cutting", label: "切分中", icon: "ri-loader-line", color: "purple" },
  { value: "Extractioning", label: "抽取中", icon: "ri-loader-line", color: "cyan" },
  { value: "Evaluationing", label: "评查中", icon: "ri-loader-line", color: "teal" },
  { value: "Processed", label: "已完成", icon: "ri-check-line", color: "green" },
];

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

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

// API 响应的类型定义
// interface StatsData {
//   totalFiles: number;
//   reviewedFiles: number;
//   pendingFiles: number;
//   passRate: number;
// }

// 添加认证检查
export async function loader() {
  // 检查用户登录状态
  // const { isAuthenticated } = await getUserSession(request);
  
  // if (!isAuthenticated) {
  //   return redirect("/login");
  // }
  
  try {
    const documentSearchParams = {
      page: 1,
      pageSize: 10,
      order: 'updated_at.desc'
    };
   
    // 获取最近文档数据
    const responseDocuments = await getDocuments(documentSearchParams);
    if (responseDocuments.error) {
      console.error('获取最近文档数据失败', responseDocuments.error);
      return Response.json({ error: responseDocuments.error }, { status: responseDocuments.status || 500 });
    }
    const recentFiles = responseDocuments.data?.documents || [];
    // console.log("recentFiles-------",recentFiles);


    const homeData = await getHomeData();
    // console.log("homeData-------",homeData);


    return Response.json({ homeData, recentFiles });
  } catch (error) {
    // 错误处理
    console.error('Failed to fetch dashboard data:', error);
    return Response.json(
      { error: '获取数据失败，请稍后重试' },
      { status: 500 }
    );
  }
}

export default function Home() {
  const { homeData, recentFiles: initialRecentFiles } = useLoaderData<typeof loader>();
  // 使用useState存储最近文档数据，初始值为loader加载的数据
  const [recentFiles, setRecentFiles] = useState<DocumentUI[]>(initialRecentFiles || []);
  const [currentDateTime, setCurrentDateTime] = useState({
    date: '',
    time: ''
  });
  
  // 更新当前时间
  useEffect(() => {
    // 使用dayjs格式化日期和时间
    const updateDateTime = () => {
      const now = dayjs();
      setCurrentDateTime({
        date: now.format('YYYY年MM月DD日'),
        time: now.format('HH:mm:ss')
      });
    };
    
    // 立即更新一次
    updateDateTime();
    
    // 设置计时器，每秒更新一次
    const timerID = setInterval(updateDateTime, 1000);
    
    // 清理函数，组件卸载时清除计时器
    return () => clearInterval(timerID);
  }, []);

  // 修改useEffect定时器，每10秒自动获取最近文档数据
  // 按照定时器更新最近文档
  useEffect(() => {
    // 定义一个函数用于获取最新的文档数据
    const fetchLatestDocuments = async () => {
      try {
        const documentSearchParams = {
          page: 1,
          pageSize: 10,
          order: 'updated_at.desc'
        };
        
        // console.log('定时获取最新文档数据...');
        const responseDocuments = await getDocuments(documentSearchParams);
        
        if (responseDocuments.error) {
          console.error('获取最近文档数据失败', responseDocuments.error);
          return;
        }
        
        // 获取新的文档数据
        const newRecentFiles = responseDocuments.data?.documents || [];
        
        // 检查数据是否有变化
        if (JSON.stringify(newRecentFiles) !== JSON.stringify(recentFiles)) {
          // console.log('文档数据已更新，直接更新状态');
          // 直接更新状态，不需要刷新页面
          setRecentFiles(newRecentFiles);
        }
      } catch (error) {
        console.error('自动获取文档数据失败:', error);
      }
    };
    
    // 设置10秒的定时器
    const timerID = setInterval(fetchLatestDocuments, 10000);
    
    // 组件卸载时清除定时器
    return () => {
      // console.log('清除文档数据自动更新定时器');
      clearInterval(timerID);
    };
  }, []); // 不再依赖recentFiles，避免循环依赖

  return (
    <div className="dashboard-container">
      {/* 页面头部 */}
      <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-medium">系统概览</h2>
          <div className="text-sm text-gray-500 flex flex-row items-center justify-between">
            <div className="flex items-center">
              <span id="current-date">{currentDateTime.date}</span>
              <span className="mx-2">|</span>
              <span id="current-time">{currentDateTime.time}</span>
            </div>
            <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>
      </div>

      {/* 统计卡片区域 */}
      <Card title="统计信息" icon="ri-bar-chart-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
        <div className="stat-grid ">
          <StatCard 
            title="今日待审文件" 
            value={homeData.todayPendingFiles}
            icon="ri-inbox-line"
          />
        <StatCard 
          title="本月已审核文件" 
          value={homeData.monthlyReviewedFiles}
          icon="ri-file-search-line"
          trend={{ value: homeData.monthlyReviewGrowth.value, isUp: homeData.monthlyReviewGrowth.isUp }}
        />
        <StatCard 
          title="本月审核通过率" 
          value={homeData.monthlyPassRate}
          icon="ri-percent-line"
          trend={{ value: homeData.passRateGrowth.value, isUp: homeData.passRateGrowth.isUp }}
        />
        <StatCard 
          title="本月问题检出数" 
          value={homeData.issuesDetected}
          icon="ri-error-warning-line"
          trend={{ value: homeData.issuesGrowth.value, isUp: homeData.issuesGrowth.isUp }}
        />
        </div>
      </Card>
      
      {/* 快捷访问区域 */}
      <Card title="快捷访问" icon="ri-speed-line" className="mt-6 transition-all duration-200 hover:shadow-[0_4px_15px_rgba(0,0,0,0.1)]">
        <div className="shortcut-grid">
          <ShortcutItem icon="ri-upload-cloud-line" label="上传文件" to="/files/upload" />
          <ShortcutItem icon="ri-file-list-3-line" label="文档列表" to="/documents" />
          <ShortcutItem icon="ri-list-check-3" label="评查点列表" to="/rules" />
          <ShortcutItem icon="ri-folder-open-line" label="评查点分组" to="/rule-groups" />
          {/* <ShortcutItem icon="ri-file-chart-line" label="评查详情" to="/reviews" /> */}
          <ShortcutItem icon="ri-file-list-line" label="文档类型" to="/document-types" />
          {/* <ShortcutItem icon="ri-settings-3-line" label="系统设置" to="/settings" /> */}
          <ShortcutItem icon="ri-chat-1-line" label="提示词管理" to="/prompts" />
        </div>
      </Card>
      
      {/* 最近文档区域 */}
      <Card 
        title="最近文档" 
        icon="ri-file-list-3-line" 
        extra={<Button to="/documents" size="small">查看全部</Button>}
        className="mt-6"
      >
        <div className="doc-list">
          {recentFiles.map((file: DocumentUI) => (
            <div key={file.id} className="doc-item">
              <div className="doc-info">
                <FileTag 
                  extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'} 
                  showIcon={true}
                  showText={false}
                  showBackground={false}
                  size="lg"
                  className="mr-2"
                />
                <div>
                  <div className="doc-name">{file.name}</div>
                  <div className="doc-meta">
                    <Tag size="sm" className="mr-2">
                      {file.typeName}
                    </Tag>
                    <span className="text-gray-500">·</span>
                    <span className="ml-2 text-gray-500">{file.updatedAt}</span>
                  </div>
                </div>
              </div>
              <div className="doc-status">
                {(() => {
                  const fileStatus = file.fileStatus || "-";
                  const status = fileProcessingStatusOptions.find(s => s.value === fileStatus) || 
                                 fileProcessingStatusOptions[0];
                  const isSpinning = fileStatus !== "Processed";
                  return (
                    <div className={`inline-flex items-center px-2 py-1 rounded-full text-xs bg-${status.color}-100 text-${status.color}-800`}>
                      <i className={`${status.icon} ${isSpinning ? "animate-spin" : ""} mr-1`}></i>
                      <span>{status.label}</span>
                    </div>
                  );
                })()}
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// 统计卡片组件
interface StatCardProps {
  title: string;
  value: number | string;
  icon: string;
  trend?: {
    value: number;
    isUp: boolean;
  };
}

function StatCard({ title, value, icon, trend }: StatCardProps) {
  return (
    <div className="stat-card">
      <div className="stat-title">{title}</div>
      <div className="stat-value">{value}</div>
      {trend && (
        <div className={`stat-trend ${trend.isUp ? 'trend-up' : 'trend-down'}`}>
          <i className={`mr-1 ${trend.isUp ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'}`}></i>
          <span>{trend.value}%</span>
          <span className="ml-1 text-gray-500">较上月</span>
        </div>
      )}
      <i className={`${icon} stat-icon`}></i>
    </div>
  );
}

// 快捷方式组件
interface ShortcutItemProps {
  icon: string;
  label: string;
  to: string;
}

function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
  return (
    <Button 
      to={to} 
      type="default" 
      className="shortcut-item"
    >
      <i className={`${icon} shortcut-icon text-2xl`}></i>
      <span className="shortcut-label">{label}</span>
    </Button>
  );
}