import React from 'react';
import { json, type MetaFunction } from '@remix-run/node';
import { useLoaderData, useSearchParams, Form } from '@remix-run/react';
import { Button } from '~/components/ui/Button';
import { Card } from '~/components/ui/Card';
import { Table } from '~/components/ui/Table';
import { Breadcrumb } from '~/components/layout/Breadcrumb';
import type { File } from '~/models/file';
import { REVIEW_STATUS_LABELS, REVIEW_STATUS_COLORS } from '~/models/file';

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

export const handle = {
  breadcrumb: '文件列表'
};

interface LoaderData {
  files: File[];
  documentTypes: {
    id: string;
    name: string;
  }[];
  totalCount: number;
}

export async function loader({ request }) {
  const url = new URL(request.url);
  const documentTypeId = url.searchParams.get("documentTypeId") || "";
  const reviewStatus = url.searchParams.get("reviewStatus") || "";
  const keyword = url.searchParams.get("keyword") || "";
  
  // 模拟数据，实际项目中应从API获取
  const files: File[] = [
    {
      id: "1",
      fileName: "2023年度烟草专卖零售许可证.pdf",
      fileType: "application/pdf",
      documentTypeId: "2",
      documentTypeName: "专卖许可证",
      fileSize: 1024 * 1024 * 2.5, // 2.5MB
      uploaderId: "1",
      uploaderName: "张三",
      status: "completed",
      reviewStatus: "pass",
      createdAt: "2023-12-24 14:30",
      updatedAt: "2023-12-24 16:45"
    },
    {
      id: "2",
      fileName: "烟草制品购销合同(2023-12).docx",
      fileType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      documentTypeId: "1",
      documentTypeName: "合同文档",
      fileSize: 1024 * 1024 * 1.2, // 1.2MB
      uploaderId: "1",
      uploaderName: "张三",
      status: "completed",
      reviewStatus: "warning",
      createdAt: "2023-12-23 09:15",
      updatedAt: "2023-12-23 10:30"
    },
    {
      id: "3",
      fileName: "专卖管理处罚决定书(2023-145).pdf",
      fileType: "application/pdf",
      documentTypeId: "3",
      documentTypeName: "行政处罚决定书",
      fileSize: 1024 * 1024 * 3.1, // 3.1MB
      uploaderId: "2",
      uploaderName: "李四",
      status: "completed",
      reviewStatus: "fail",
      createdAt: "2023-12-22 16:45",
      updatedAt: "2023-12-22 18:20"
    },
    {
      id: "4",
      fileName: "2023年第四季度采购合同.docx",
      fileType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      documentTypeId: "1",
      documentTypeName: "合同文档",
      fileSize: 1024 * 1024 * 1.8, // 1.8MB
      uploaderId: "3",
      uploaderName: "王五",
      status: "completed",
      reviewStatus: "pass",
      createdAt: "2023-12-20 11:20",
      updatedAt: "2023-12-20 14:35"
    },
    {
      id: "5",
      fileName: "广告宣传协议书.pdf",
      fileType: "application/pdf",
      documentTypeId: "1",
      documentTypeName: "合同文档",
      fileSize: 1024 * 1024 * 0.9, // 0.9MB
      uploaderId: "2",
      uploaderName: "李四",
      status: "pending",
      reviewStatus: "pending",
      createdAt: "2023-12-18 15:30",
      updatedAt: "2023-12-18 15:30"
    }
  ];
  
  const documentTypes = [
    { id: "1", name: "合同文档" },
    { id: "2", name: "专卖许可证" },
    { id: "3", name: "行政处罚决定书" },
    { id: "4", name: "其他文档" }
  ];
  
  // 过滤数据
  let filteredFiles = [...files];
  
  if (documentTypeId) {
    filteredFiles = filteredFiles.filter(file => file.documentTypeId === documentTypeId);
  }
  
  if (reviewStatus) {
    filteredFiles = filteredFiles.filter(file => file.reviewStatus === reviewStatus);
  }
  
  if (keyword) {
    const lowerKeyword = keyword.toLowerCase();
    filteredFiles = filteredFiles.filter(file => 
      file.fileName.toLowerCase().includes(lowerKeyword)
    );
  }
  
  return json<LoaderData>({ 
    files: filteredFiles,
    documentTypes,
    totalCount: files.length
  });
}

export default function FilesList() {
  const { files, documentTypes } = useLoaderData<typeof loader>();
  const [searchParams] = useSearchParams();
  
  // 文件大小格式化
  const formatFileSize = (bytes: number): string => {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };
  
  // 获取文件图标
  const getFileIcon = (fileType: string): string => {
    if (fileType.includes('pdf')) return 'ri-file-pdf-line';
    if (fileType.includes('word')) return 'ri-file-word-line';
    if (fileType.includes('excel') || fileType.includes('spreadsheet')) return 'ri-file-excel-line';
    if (fileType.includes('image')) return 'ri-file-image-line';
    return 'ri-file-text-line';
  };
  
  return (
    <div>
      <Breadcrumb 
        items={[
          { title: '文件管理', to: '/files' },
          { title: '文件列表', to: '/files' }
        ]} 
      />
      
      <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">{files.length}</span>
          </div>
        </div>
        <Button type="primary" icon="ri-file-upload-line" to="/files/new">
          上传新文件
        </Button>
      </div>
      
      <Card className="mb-5">
        <Form method="get" className="flex flex-wrap items-end gap-3">
          <div className="w-48">
            <label className="form-label">文件类型</label>
            <select 
              name="documentTypeId" 
              className="form-select w-full"
              defaultValue={searchParams.get('documentTypeId') || ''}
            >
              <option value="">全部</option>
              {documentTypes.map(type => (
                <option key={type.id} value={type.id}>{type.name}</option>
              ))}
            </select>
          </div>
          
          <div className="w-48">
            <label className="form-label">评查状态</label>
            <select 
              name="reviewStatus" 
              className="form-select w-full"
              defaultValue={searchParams.get('reviewStatus') || ''}
            >
              <option value="">全部</option>
              {Object.entries(REVIEW_STATUS_LABELS).map(([value, label]) => (
                <option key={value} value={value}>{label}</option>
              ))}
            </select>
          </div>
          
          <div className="w-64">
            <label className="form-label">文件名称</label>
            <div className="search-box">
              <input 
                type="text" 
                name="keyword" 
                className="form-input" 
                placeholder="搜索文件名称"
                defaultValue={searchParams.get('keyword') || ''}
              />
              <button type="submit" className="ant-btn ant-btn-primary">
                <i className="ri-search-line"></i>
              </button>
            </div>
          </div>
          
          <Button type="default" className="ml-2">重置</Button>
        </Form>
      </Card>
      
      <Table 
        columns={[
          {
            title: "文件名称",
            render: (_, record: File) => (
              <div className="flex items-center">
                <i className={`${getFileIcon(record.fileType)} text-lg text-gray-500 mr-2`}></i>
                <div>
                  <div className="font-medium">{record.fileName}</div>
                  <div className="text-xs text-gray-500">{formatFileSize(record.fileSize)}</div>
                </div>
              </div>
            )
          },
          { title: "文档类型", dataIndex: "documentTypeName" },
          {
            title: "评查状态",
            dataIndex: "reviewStatus",
            render: (value) => (
              <span className={`status-badge status-${REVIEW_STATUS_COLORS[value]}`}>
                <i className={`ri-${value === 'pass' ? 'checkbox-circle' : value === 'warning' ? 'error-warning' : value === 'fail' ? 'close-circle' : 'time'}-line mr-1`}></i>
                {REVIEW_STATUS_LABELS[value]}
              </span>
            )
          },
          { 
            title: "上传人", 
            dataIndex: "uploaderName" 
          },
          { 
            title: "上传时间", 
            dataIndex: "createdAt" 
          },
          {
            title: "操作",
            render: (_, record: File) => (
              <div className="space-x-2">
                <Button 
                  type="default" 
                  size="small" 
                  icon="ri-file-search-line"
                  to={`/reviews/${record.id}`}
                >
                  查看
                </Button>
                {record.status === 'pending' && (
                  <Button 
                    type="primary" 
                    size="small" 
                    icon="ri-play-circle-line"
                  >
                    开始评查
                  </Button>
                )}
                <Button 
                  type="danger" 
                  size="small" 
                  icon="ri-delete-bin-line"
                >
                  删除
                </Button>
              </div>
            )
          }
        ]} 
        dataSource={files} 
        rowKey="id"
      />
    </div>
  );
}