import { json, type MetaFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
import { Button } from "~/components/ui/Button";
import { Card } from "~/components/ui/Card";
import { Table } from "~/components/ui/Table";
import { SearchBox } from "~/components/ui/SearchBox";
import rulesFilesStyles from "~/styles/pages/rules_files.css?url";

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

export const handle = {
  breadcrumb: "评查文件列表"
};

export const meta: MetaFunction = () => {
  return [
    { title: "评查文件列表 - 中国烟草AI合同及卷宗审核系统" },
    { name: "description", content: "管理系统中所有上传的评查文件，支持按文件类型、评查状态进行筛选" },
    { name: "keywords", content: "评查文件,合同审核,中国烟草,文件管理" }
  ];
};

// 评查文件类型枚举
export enum FileType {
  CONTRACT = 'contract',
  LICENSE = 'license',
  PUNISHMENT = 'punishment',
  REPORT = 'report',
  OTHER = 'other'
}

// 评查状态枚举
export enum ReviewStatus {
  PASS = 'pass',
  WARNING = 'warning',
  FAIL = 'fail',
  PENDING = 'pending'
}

// 日期范围枚举
export enum DateRange {
  ALL = 'all',
  TODAY = 'today',
  WEEK = 'week',
  MONTH = 'month',
  CUSTOM = 'custom'
}

// 文件类型标签映射
export const FILE_TYPE_LABELS: Record<FileType, string> = {
  [FileType.CONTRACT]: '合同文档',
  [FileType.LICENSE]: '专卖许可证',
  [FileType.PUNISHMENT]: '行政处罚',
  [FileType.REPORT]: '报表文档',
  [FileType.OTHER]: '其他文档'
};

// 评查状态标签映射
export const REVIEW_STATUS_LABELS: Record<ReviewStatus, string> = {
  [ReviewStatus.PASS]: '通过',
  [ReviewStatus.WARNING]: '警告',
  [ReviewStatus.FAIL]: '不通过',
  [ReviewStatus.PENDING]: '待人工确认'
};

// 评查文件模型
interface ReviewFile {
  id: string;
  fileName: string;
  fileCode: string; // 文件编号
  fileType: FileType;
  fileSize: number;
  uploadTime: string;
  reviewStatus: ReviewStatus;
  issueCount: number;
  issues: Array<{
    severity: 'info' | 'warning' | 'error' | 'critical';
    message: string;
  }>;
  createdBy: string;
}

interface LoaderData {
  files: ReviewFile[];
  totalCount: number;
  currentPage: number;
  pageSize: number;
  totalPages: number;
}

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const fileType = url.searchParams.get("fileType") || "";
  const reviewStatus = url.searchParams.get("reviewStatus") || "";
  const dateRange = url.searchParams.get("dateRange") || "";
  const keyword = url.searchParams.get("keyword") || "";
  const sortOrder = url.searchParams.get("sortOrder") || "upload_time_desc";
  const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
  const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
  
  try {
    // 模拟数据，实际项目中应从API获取
    const mockFiles: ReviewFile[] = [
      {
        id: "1",
        fileName: "烟草产品销售合同（2023版）.pdf",
        fileCode: "XS-2023-1025-001",
        fileType: FileType.CONTRACT,
        fileSize: 1024 * 1024 * 2.5, // 2.5MB
        uploadTime: "2023-10-25 14:30:45",
        reviewStatus: ReviewStatus.WARNING,
        issueCount: 3,
        issues: [
          { severity: "warning", message: "付款条件描述不明确" },
          { severity: "warning", message: "违约责任条款缺失" },
          { severity: "warning", message: "签章不完整" }
        ],
        createdBy: "张三"
      },
      {
        id: "2",
        fileName: "2023年度烟草专卖零售许可证.pdf",
        fileCode: "LS-2023-0058",
        fileType: FileType.LICENSE,
        fileSize: 1024 * 1024 * 1.2, // 1.2MB
        uploadTime: "2023-10-24 10:15:22",
        reviewStatus: ReviewStatus.PASS,
        issueCount: 0,
        issues: [],
        createdBy: "李四"
      },
      {
        id: "3",
        fileName: "XX公司违规处罚决定书.pdf",
        fileCode: "处罚[2023]42号",
        fileType: FileType.PUNISHMENT,
        fileSize: 1024 * 1024 * 3.1, // 3.1MB
        uploadTime: "2023-10-23 16:45:30",
        reviewStatus: ReviewStatus.FAIL,
        issueCount: 2,
        issues: [
          { severity: "error", message: "处罚依据条款引用错误" },
          { severity: "error", message: "处罚金额超出规定范围" }
        ],
        createdBy: "王五"
      },
      {
        id: "4",
        fileName: "烟草设备采购协议.docx",
        fileCode: "CG-2023-0089",
        fileType: FileType.CONTRACT,
        fileSize: 1024 * 1024 * 0.8, // 0.8MB
        uploadTime: "2023-10-22 09:22:15",
        reviewStatus: ReviewStatus.PENDING,
        issueCount: 1,
        issues: [
          { severity: "warning", message: "交付日期条款存在歧义，需人工确认" }
        ],
        createdBy: "赵六"
      },
      {
        id: "5",
        fileName: "2023年度销售额报表.xlsx",
        fileCode: "BB-2023-Q3",
        fileType: FileType.REPORT,
        fileSize: 1024 * 1024 * 0.5, // 0.5MB
        uploadTime: "2023-10-20 14:05:38",
        reviewStatus: ReviewStatus.PASS,
        issueCount: 0,
        issues: [],
        createdBy: "钱七"
      }
    ];
    
    // 过滤数据
    let filteredFiles = [...mockFiles];
    
    if (fileType) {
      filteredFiles = filteredFiles.filter(file => file.fileType === fileType);
    }
    
    if (reviewStatus) {
      filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
    }
    
    if (dateRange) {
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      
      switch (dateRange) {
        case DateRange.TODAY:
          filteredFiles = filteredFiles.filter(file => {
            const fileDate = new Date(file.uploadTime.split(' ')[0]);
            return fileDate >= today;
          });
          break;
        case DateRange.WEEK:
          const weekStart = new Date(today);
          weekStart.setDate(today.getDate() - today.getDay());
          filteredFiles = filteredFiles.filter(file => {
            const fileDate = new Date(file.uploadTime.split(' ')[0]);
            return fileDate >= weekStart;
          });
          break;
        case DateRange.MONTH:
          const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
          filteredFiles = filteredFiles.filter(file => {
            const fileDate = new Date(file.uploadTime.split(' ')[0]);
            return fileDate >= monthStart;
          });
          break;
      }
    }
    
    if (keyword) {
      const lowerKeyword = keyword.toLowerCase();
      filteredFiles = filteredFiles.filter(file => 
        file.fileName.toLowerCase().includes(lowerKeyword) || 
        file.fileCode.toLowerCase().includes(lowerKeyword)
      );
    }
    
    // 排序
    switch (sortOrder) {
      case "upload_time_desc":
        filteredFiles.sort((a, b) => new Date(b.uploadTime).getTime() - new Date(a.uploadTime).getTime());
        break;
      case "upload_time_asc":
        filteredFiles.sort((a, b) => new Date(a.uploadTime).getTime() - new Date(b.uploadTime).getTime());
        break;
      case "issue_count_desc":
        filteredFiles.sort((a, b) => b.issueCount - a.issueCount);
        break;
      case "issue_count_asc":
        filteredFiles.sort((a, b) => a.issueCount - b.issueCount);
        break;
    }
    
    // 计算分页信息
    const totalCount = filteredFiles.length;
    const totalPages = Math.ceil(totalCount / pageSize);
    
    // 分页截取
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const paginatedFiles = filteredFiles.slice(startIndex, endIndex);
    
    return json<LoaderData>({
      files: paginatedFiles,
      totalCount,
      currentPage,
      pageSize,
      totalPages
    }, {
      headers: {
        "Cache-Control": "max-age=60, s-maxage=180"
      }
    });
  } catch (error) {
    console.error('加载评查文件列表失败:', error);
    throw new Response('加载评查文件列表失败', { status: 500 });
  }
}

export function ErrorBoundary() {
  return (
    <div className="error-container p-6">
      <h1 className="text-xl font-bold text-red-500 mb-4">出错了</h1>
      <p className="mb-4">加载评查文件列表时发生错误。请稍后再试，或联系管理员。</p>
      <Button type="primary" to="/">返回首页</Button>
    </div>
  );
}

export default function ReviewFilesList() {
  const { files, totalCount, currentPage, pageSize, totalPages } = useLoaderData<typeof loader>();
  const [searchParams, setSearchParams] = useSearchParams();
  
  const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
    const { name, value } = e.target;
    const newParams = new URLSearchParams(searchParams);
    
    if (value) {
      newParams.set(name, value);
    } else {
      newParams.delete(name);
    }
    
    // 切换筛选条件时，重置到第一页
    newParams.set('page', '1');
    
    setSearchParams(newParams);
  };
  
  const handleSearch = (keyword: string) => {
    const newParams = new URLSearchParams(searchParams);
    if (keyword) {
      newParams.set('keyword', keyword);
    } else {
      newParams.delete('keyword');
    }
    
    // 搜索时，重置到第一页
    newParams.set('page', '1');
    
    setSearchParams(newParams);
  };

  const handlePageChange = (page: number) => {
    const newParams = new URLSearchParams(searchParams);
    newParams.set('page', page.toString());
    setSearchParams(newParams);
  };
  
  // 渲染问题摘要
  const renderIssues = (issues: ReviewFile['issues']) => {
    if (issues.length === 0) {
      return (
        <div className="text-sm text-success">
          <i className="ri-check-double-line mr-1"></i>所有评查点均通过
        </div>
      );
    }
    
    return (
      <div className="text-sm">
        {issues.slice(0, 3).map((issue, index) => (
          <div key={index} className="mb-1 last:mb-0">
            <span className={`severity-indicator severity-${issue.severity}`}></span>
            {issue.message}
          </div>
        ))}
      </div>
    );
  };
  
  // 渲染文件图标
  const renderFileIcon = (fileName: string) => {
    if (fileName.endsWith('.pdf')) {
      return <i className="ri-file-pdf-line text-red-500 mr-2 text-lg"></i>;
    } else if (fileName.endsWith('.docx') || fileName.endsWith('.doc')) {
      return <i className="ri-file-word-2-line text-blue-500 mr-2 text-lg"></i>;
    } else if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls')) {
      return <i className="ri-file-excel-2-line text-green-500 mr-2 text-lg"></i>;
    } else {
      return <i className="ri-file-line text-gray-500 mr-2 text-lg"></i>;
    }
  };
  
  return (
    <div className="p-6 review-files-page">
      {/* 页面头部 */}
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center">
          <h2 className="text-xl font-medium">评查文件列表</h2>
          <div className="flex items-center ml-4 bg-white px-3 py-1 rounded-md">
            <i className="ri-file-list-3-line text-primary text-lg mr-1"></i>
            <span className="text-sm text-secondary">总文件数：</span>
            <span className="text-base font-bold text-primary ml-1">{totalCount}</span>
          </div>
        </div>
        <Button type="primary" icon="ri-file-upload-line" to="/files/new">
          上传新文件
        </Button>
      </div>
      
      {/* 筛选区域 */}
      <Card className="card-container">
        <div className="flex flex-wrap items-end gap-3">
          <div className="w-48">
            <div className="mb-1 text-sm font-medium">文件类型</div>
            <select 
              className="form-select w-full"
              name="fileType"
              value={searchParams.get('fileType') || ''}
              onChange={handleFilterChange}
            >
              <option value="">全部</option>
              <option value={FileType.CONTRACT}>合同文档</option>
              <option value={FileType.LICENSE}>专卖许可证</option>
              <option value={FileType.PUNISHMENT}>行政处罚决定书</option>
              <option value={FileType.REPORT}>报表文档</option>
              <option value={FileType.OTHER}>其他文档</option>
            </select>
          </div>
          
          <div className="w-48">
            <div className="mb-1 text-sm font-medium">评查状态</div>
            <select 
              className="form-select w-full"
              name="reviewStatus"
              value={searchParams.get('reviewStatus') || ''}
              onChange={handleFilterChange}
            >
              <option value="">全部</option>
              <option value={ReviewStatus.PASS}>通过</option>
              <option value={ReviewStatus.WARNING}>警告</option>
              <option value={ReviewStatus.FAIL}>不通过</option>
              <option value={ReviewStatus.PENDING}>待人工确认</option>
            </select>
          </div>
          
          <div className="w-48">
            <div className="mb-1 text-sm font-medium">时间范围</div>
            <select 
              className="form-select w-full"
              name="dateRange"
              value={searchParams.get('dateRange') || ''}
              onChange={handleFilterChange}
            >
              <option value="">全部</option>
              <option value={DateRange.TODAY}>今天</option>
              <option value={DateRange.WEEK}>本周</option>
              <option value={DateRange.MONTH}>本月</option>
              <option value={DateRange.CUSTOM}>自定义时间段</option>
            </select>
          </div>
          
          <div className="w-72">
            <div className="mb-1 text-sm font-medium">搜索</div>
            <div className="flex border border-gray-300 rounded overflow-hidden">
              <SearchBox
                placeholder="搜索文件名、合同编号或关键词"
                defaultValue={searchParams.get('keyword') || ''}
                onSearch={handleSearch}
                className="search-input"
                buttonText="搜索"
              />
            </div>
          </div>

          <div className="ml-auto">
            <select
              className="form-select w-auto"
              name="sortOrder"
              value={searchParams.get('sortOrder') || 'upload_time_desc'}
              onChange={handleFilterChange}
            >
              <option value="upload_time_desc">上传时间 ↓</option>
              <option value="upload_time_asc">上传时间 ↑</option>
              <option value="issue_count_desc">问题数量 ↓</option>
              <option value="issue_count_asc">问题数量 ↑</option>
            </select>
          </div>
        </div>
      </Card>
      
      {/* 文件列表 */}
      <Card className="content-card">
        <table className="ant-table">
          <thead>
            <tr>
              <th style={{ width: "30%" }}>文件名称</th>
              <th style={{ width: "12%" }}>文件类型</th>
              <th style={{ width: "12%" }}>上传时间</th>
              <th style={{ width: "12%" }}>评查状态</th>
              <th style={{ width: "20%" }}>问题摘要</th>
              <th style={{ width: "14%" }}>操作</th>
            </tr>
          </thead>
          <tbody>
            {files.length > 0 ? (
              files.map((file) => (
                <tr key={file.id}>
                  <td>
                    <div className="flex items-center">
                      {renderFileIcon(file.fileName)}
                      <div>
                        <div className="font-medium">{file.fileName}</div>
                        <div className="text-xs text-secondary mt-1">
                          {file.fileType === FileType.CONTRACT && "合同编号："}
                          {file.fileType === FileType.LICENSE && "许可证号："}
                          {file.fileType === FileType.PUNISHMENT && "文号："}
                          {file.fileType === FileType.REPORT && "报表编号："}
                          {file.fileCode}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <span className={`file-type-badge file-type-${file.fileType}`}>
                      {file.fileType === FileType.CONTRACT && <i className="ri-file-list-3-line"></i>}
                      {file.fileType === FileType.LICENSE && <i className="ri-vip-crown-line"></i>}
                      {file.fileType === FileType.PUNISHMENT && <i className="ri-scales-line"></i>}
                      {file.fileType === FileType.REPORT && <i className="ri-file-chart-line"></i>}
                      {file.fileType === FileType.OTHER && <i className="ri-file-line"></i>}
                      {FILE_TYPE_LABELS[file.fileType]}
                    </span>
                  </td>
                  <td>
                    {file.uploadTime.split(' ')[0]}
                    <br />
                    <span className="text-xs text-secondary">{file.uploadTime.split(' ')[1]}</span>
                  </td>
                  <td>
                    <span className={`status-badge status-${file.reviewStatus}`}>
                      {file.reviewStatus === ReviewStatus.PASS && <i className="ri-checkbox-circle-line mr-1"></i>}
                      {file.reviewStatus === ReviewStatus.WARNING && <i className="ri-alert-line mr-1"></i>}
                      {file.reviewStatus === ReviewStatus.FAIL && <i className="ri-close-circle-line mr-1"></i>}
                      {file.reviewStatus === ReviewStatus.PENDING && <i className="ri-time-line mr-1"></i>}
                      {REVIEW_STATUS_LABELS[file.reviewStatus]}
                      {file.issueCount > 0 && ` (${file.issueCount})`}
                    </span>
                  </td>
                  <td>
                    {renderIssues(file.issues)}
                  </td>
                  <td>
                    {file.reviewStatus === ReviewStatus.PENDING ? (
                      <Button type="primary" size="small" icon="ri-check-double-line" className="mr-2">
                        确认
                      </Button>
                    ) : (
                      <Button type="default" size="small" icon="ri-eye-line" to={`/files/${file.id}`} className="mr-2">
                        查看
                      </Button>
                    )}
                    <Button type="default" size="small" icon="ri-download-2-line">
                    </Button>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={6} className="text-center py-8 text-gray-500">
                  暂无文件数据
                </td>
              </tr>
            )}
          </tbody>
        </table>
        
        {/* 分页 */}
        {totalCount > 0 && (
          <div className="pagination">
            <button 
              className={`pagination-item ${currentPage <= 1 ? 'disabled' : ''}`}
              onClick={() => currentPage > 1 && handlePageChange(currentPage - 1)}
              disabled={currentPage <= 1}
            >
              <i className="ri-arrow-left-s-line"></i>
            </button>
            
            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
              // 显示当前页附近的页码，最多显示5个
              let pageNum;
              if (totalPages <= 5) {
                // 总页数少于5，直接显示所有页码
                pageNum = i + 1;
              } else if (currentPage <= 3) {
                // 当前页靠近开始
                pageNum = i + 1;
              } else if (currentPage >= totalPages - 2) {
                // 当前页靠近结尾
                pageNum = totalPages - 4 + i;
              } else {
                // 当前页在中间
                pageNum = currentPage - 2 + i;
              }
              
              return (
                <button
                  key={pageNum}
                  className={`pagination-item ${pageNum === currentPage ? 'active' : ''}`}
                  onClick={() => handlePageChange(pageNum)}
                >
                  {pageNum}
                </button>
              );
            })}
            
            <button 
              className={`pagination-item ${currentPage >= totalPages ? 'disabled' : ''}`}
              onClick={() => currentPage < totalPages && handlePageChange(currentPage + 1)}
              disabled={currentPage >= totalPages}
            >
              <i className="ri-arrow-right-s-line"></i>
            </button>
          </div>
        )}
      </Card>
    </div>
  );
}