import React, { useState } from 'react';
import { json, type MetaFunction } from '@remix-run/node';
import { useLoaderData, useParams } from '@remix-run/react';
import { Button } from '~/components/ui/Button';
import { Card } from '~/components/ui/Card';
import { Breadcrumb } from '~/components/layout/Breadcrumb';
import type { ReviewResult, RuleCheckResult } from '~/models/review';
import type { File } from '~/models/file';
import { RULE_CHECK_STATUS_LABELS, RULE_CHECK_STATUS_COLORS } from '~/models/review';

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

export const handle = {
  breadcrumb: '评查详情'
};

interface LoaderData {
  file: File;
  reviewResult: ReviewResult;
  reviewPoints: RuleCheckResult[];
  fileContent?: string; // 模拟文件内容
}

export async function loader({ params }) {
  const { reviewId } = params;
  
  // 模拟数据，实际项目中应从API获取
  const file: 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"
  };
  
  const reviewResult: ReviewResult = {
    id: reviewId,
    fileId: "1",
    fileName: "2023年度烟草专卖零售许可证.pdf",
    totalPoints: 15,
    passPoints: 6,
    warningPoints: 7,
    errorPoints: 2,
    score: 80,
    reviewStatus: "warning",
    reviewedAt: "2023-12-24 16:45",
    reviewerId: "system",
    reviewerName: "AI系统",
    createdAt: "2023-12-24 14:35",
    updatedAt: "2023-12-24 16:45"
  };
  
  const reviewPoints: RuleCheckResult[] = [
    {
      id: "1",
      reviewResultId: reviewId,
      ruleId: "1",
      ruleName: "合同主体信息完整性检查",
      status: "pass",
      location: "第1页 第3段",
      content: "甲方：XX烟草公司，地址：XX市XX区XX路XX号，法定代表人：张XX",
      suggestion: "主体信息完整，符合规范",
      manualReviewed: false,
      createdAt: "2023-12-24 14:40",
      updatedAt: "2023-12-24 14:40"
    },
    {
      id: "2",
      reviewResultId: reviewId,
      ruleId: "2",
      ruleName: "许可证编号格式检查",
      status: "warning",
      location: "第1页 第5段",
      content: "许可证编号：(2023)12345",
      suggestion: "许可证编号格式不完全符合规范，建议修改为'烟零许(2023)12345号'",
      manualReviewed: true,
      createdAt: "2023-12-24 14:40",
      updatedAt: "2023-12-24 15:20"
    },
    {
      id: "3",
      reviewResultId: reviewId,
      ruleId: "3",
      ruleName: "许可证有效期检查",
      status: "fail",
      location: "第1页 第8段",
      content: "有效期：自2023年1月1日",
      suggestion: "许可证缺少有效期截止日期，必须明确注明有效期限",
      manualReviewed: false,
      createdAt: "2023-12-24 14:40",
      updatedAt: "2023-12-24 14:40"
    },
    {
      id: "4",
      reviewResultId: reviewId,
      ruleId: "4",
      ruleName: "经营场所信息检查",
      status: "pass",
      location: "第1页 第12段",
      content: "经营场所：XX市XX区XX街XX号，面积：120平方米",
      suggestion: "经营场所信息完整",
      manualReviewed: false,
      createdAt: "2023-12-24 14:40",
      updatedAt: "2023-12-24 14:40"
    }
  ];
  
  // 模拟文件内容，实际项目中应从API获取或使用专用组件展示
  const fileContent = `烟草专卖零售许可证
发证机关：XX市烟草专卖局
发证日期：2023年1月1日

甲方：XX烟草公司，地址：XX市XX区XX路XX号，法定代表人：张XX

零售单位名称：XX便利店
许可证编号：(2023)12345
法定代表人/负责人：李XX
经营者类型：个体工商户
有效期：自2023年1月1日
联系电话：123-4567890

经营场所：XX市XX区XX街XX号，面积：120平方米
零售烟草制品品种：卷烟、雪茄烟

特别说明：本许可证不得伪造、变造、转让、涂改。
`;
  
  return json<LoaderData>({ 
    file,
    reviewResult,
    reviewPoints,
    fileContent
  });
}

export default function ReviewDetail() {
  const { file, reviewResult, reviewPoints, fileContent } = useLoaderData<typeof loader>();
  const [activeTab, setActiveTab] = useState('tab-preview');
  const [selectedPoint, setSelectedPoint] = useState<string | null>(null);
  
  const handleTabChange = (tabId: string) => {
    setActiveTab(tabId);
  };
  
  const handlePointSelect = (pointId: string) => {
    setSelectedPoint(pointId === selectedPoint ? null : pointId);
  };
  
  return (
    <div>
      <Breadcrumb 
        items={[
          { title: '评查结果', to: '/reviews' },
          { title: '评查详情', to: `/reviews/${reviewResult.id}` }
        ]} 
      />
      
      <div className="flex justify-between items-center mb-4">
        <div className="flex items-center">
          <h2 className="text-xl font-medium">{file.fileName}</h2>
          <span className={`ml-3 status-badge status-${reviewResult.reviewStatus === 'pass' ? 'success' : reviewResult.reviewStatus === 'warning' ? 'warning' : 'error'}`}>
            <i className={`ri-${reviewResult.reviewStatus === 'pass' ? 'checkbox-circle' : reviewResult.reviewStatus === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
            {reviewResult.reviewStatus === 'pass' ? '通过' : reviewResult.reviewStatus === 'warning' ? '警告' : '不通过'}
          </span>
        </div>
        <div className="space-x-2">
          <Button type="default" icon="ri-download-line">
            导出评查报告
          </Button>
          <Button type="primary" icon="ri-check-double-line">
            完成评查
          </Button>
        </div>
      </div>
      
      <div className="tab-container">
        <div className="tab-nav">
          <div 
            className={`tab-nav-item ${activeTab === 'tab-preview' ? 'active' : ''}`} 
            onClick={() => handleTabChange('tab-preview')}
          >
            <i className="ri-file-text-line"></i> 评查结果
          </div>
          <div 
            className={`tab-nav-item ${activeTab === 'tab-suggestion' ? 'active' : ''}`}
            onClick={() => handleTabChange('tab-suggestion')}
          >
            <i className="ri-lightbulb-line"></i> AI智能分析
          </div>
          <div 
            className={`tab-nav-item ${activeTab === 'tab-fileinfo' ? 'active' : ''}`}
            onClick={() => handleTabChange('tab-fileinfo')}
          >
            <i className="ri-information-line"></i> 文件信息
          </div>
        </div>
        
        <div className="tab-content">
          <div className={`tab-pane ${activeTab === 'tab-preview' ? 'active' : ''}`}>
            <div className="flex flex-col lg:flex-row lg:h-[calc(100vh-250px)]">
              {/* 文件内容预览 */}
              <div className="w-full lg:w-2/3 h-full mb-4 lg:mb-0 lg:pr-4">
                <div className="bg-white p-4 rounded-md shadow-sm h-full overflow-y-auto">
                  <pre className="whitespace-pre-wrap font-sans text-gray-800">
                    {fileContent}
                  </pre>
                </div>
              </div>
              
              {/* 评查点列表 */}
              <div className="w-full lg:w-1/3 h-full lg:pl-4">
                <div className="review-points-panel h-full flex flex-col">
                  <div className="review-panel-header py-2 px-4 flex items-center bg-primary-light">
                    <i className="ri-file-list-check-line text-primary mr-2"></i>
                    <span className="font-medium text-primary">评查结果</span>
                  </div>
                  
                  {/* 评查统计 */}
                  <div className="review-statistics bg-white border-b border-gray-100 py-3 px-4">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center">
                        <div className="w-7 h-7 bg-gray-100 rounded-md flex items-center justify-center">
                          <span className="text-sm font-semibold text-gray-600">{reviewResult.totalPoints}</span>
                        </div>
                        <span className="text-xs text-gray-500 ml-1">总计</span>
                      </div>
                      <div className="h-8 border-r border-gray-200"></div>
                      <div className="flex items-center">
                        <div className="w-7 h-7 bg-green-50 rounded-md flex items-center justify-center">
                          <span className="text-sm font-semibold text-success">{reviewResult.passPoints}</span>
                        </div>
                        <span className="text-xs text-gray-500 ml-1">通过</span>
                      </div>
                      <div className="h-8 border-r border-gray-200"></div>
                      <div className="flex items-center">
                        <div className="w-7 h-7 bg-yellow-50 rounded-md flex items-center justify-center">
                          <span className="text-sm font-semibold text-warning">{reviewResult.warningPoints}</span>
                        </div>
                        <span className="text-xs text-gray-500 ml-1">警告</span>
                      </div>
                      <div className="h-8 border-r border-gray-200"></div>
                      <div className="flex items-center">
                        <div className="w-7 h-7 bg-red-50 rounded-md flex items-center justify-center">
                          <span className="text-sm font-semibold text-error">{reviewResult.errorPoints}</span>
                        </div>
                        <span className="text-xs text-gray-500 ml-1">错误</span>
                      </div>
                    </div>
                  </div>
                  
                  {/* 评查点列表 */}
                  <div className="flex-1 overflow-y-auto">
                    {reviewPoints.map(point => (
                      <div 
                        key={point.id} 
                        className={`review-point-item ${selectedPoint === point.id ? 'bg-gray-50' : ''}`}
                        onClick={() => handlePointSelect(point.id)}
                      >
                        <div className="review-point-header">
                          <div className="review-point-title">{point.ruleName}</div>
                          <span className={`status-badge status-${RULE_CHECK_STATUS_COLORS[point.status]}`}>
                            <i className={`ri-${point.status === 'pass' ? 'checkbox-circle' : point.status === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
                            {RULE_CHECK_STATUS_LABELS[point.status]}
                          </span>
                        </div>
                        <div className="review-point-location">
                          <i className="ri-file-list-line mr-1"></i>
                          <span>{point.location}</span>
                        </div>
                        
                        {selectedPoint === point.id && (
                          <div className="mt-2 pt-2 border-t border-gray-100">
                            <div className="text-xs text-gray-600 mb-1">
                              <span className="font-medium">内容：</span>
                              <span>{point.content}</span>
                            </div>
                            <div className="text-xs text-gray-600">
                              <span className="font-medium">建议：</span>
                              <span>{point.suggestion}</span>
                            </div>
                            <div className="mt-2 flex justify-between">
                              <div className="text-xs text-gray-500">
                                {point.manualReviewed && 
                                  <span><i className="ri-user-line mr-1"></i>人工审核</span>
                                }
                              </div>
                              <div>
                                <Button type="default" size="small">
                                  <i className="ri-edit-line mr-1"></i>修改
                                </Button>
                              </div>
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div className={`tab-pane ${activeTab === 'tab-suggestion' ? 'active' : ''}`}>
            <Card>
              <div className="text-lg font-medium mb-4 text-gray-800">AI智能分析意见</div>
              
              <div className="mb-6">
                <div className="font-medium text-gray-700 mb-2">总体评价</div>
                <div className="p-3 bg-gray-50 rounded-md text-gray-600">
                  该烟草专卖零售许可证文档基本符合规范要求，但存在部分问题需要修改。主要包括许可证编号格式不标准和缺少有效期截止日期两个问题，其中缺少有效期截止日期属于严重问题，必须补充完善。
                </div>
              </div>
              
              <div className="mb-6">
                <div className="font-medium text-gray-700 mb-2">主要问题</div>
                <ul className="list-disc pl-5 space-y-2 text-gray-600">
                  <li><span className="text-warning font-medium">许可证编号格式不规范</span> - 当前格式为"(2023)12345"，应修改为"烟零许(2023)12345号"</li>
                  <li><span className="text-error font-medium">缺少许可证有效期截止日期</span> - 仅注明了起始日期"自2023年1月1日"，缺少截止日期</li>
                </ul>
              </div>
              
              <div>
                <div className="font-medium text-gray-700 mb-2">修改建议</div>
                <ul className="list-decimal pl-5 space-y-2 text-gray-600">
                  <li>规范许可证编号格式，在前面添加"烟零许"，在后面添加"号"</li>
                  <li>补充完善许可证有效期，明确注明截止日期，如"自2023年1月1日至2023年12月31日"</li>
                  <li>建议对零售烟草制品品种部分进行细化描述，列明具体品牌类别</li>
                </ul>
              </div>
            </Card>
          </div>
          
          <div className={`tab-pane ${activeTab === 'tab-fileinfo' ? 'active' : ''}`}>
            <Card>
              <div className="text-lg font-medium mb-4 text-gray-800">文件基本信息</div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <table className="w-full">
                    <tbody>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500 w-1/3">文件名称</td>
                        <td className="py-2 text-gray-800">{file.fileName}</td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">文件类型</td>
                        <td className="py-2 text-gray-800">{file.documentTypeName}</td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">文件大小</td>
                        <td className="py-2 text-gray-800">{(file.fileSize / (1024 * 1024)).toFixed(2)} MB</td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">上传人</td>
                        <td className="py-2 text-gray-800">{file.uploaderName}</td>
                      </tr>
                      <tr>
                        <td className="py-2 text-gray-500">上传时间</td>
                        <td className="py-2 text-gray-800">{file.createdAt}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div>
                  <table className="w-full">
                    <tbody>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500 w-1/3">评查状态</td>
                        <td className="py-2 text-gray-800">
                          <span className={`status-badge status-${reviewResult.reviewStatus === 'pass' ? 'success' : reviewResult.reviewStatus === 'warning' ? 'warning' : 'error'}`}>
                            <i className={`ri-${reviewResult.reviewStatus === 'pass' ? 'checkbox-circle' : reviewResult.reviewStatus === 'warning' ? 'error-warning' : 'close-circle'}-line mr-1`}></i>
                            {reviewResult.reviewStatus === 'pass' ? '通过' : reviewResult.reviewStatus === 'warning' ? '警告' : '不通过'}
                          </span>
                        </td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">评查得分</td>
                        <td className="py-2 text-gray-800">{reviewResult.score} 分</td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">评查完成时间</td>
                        <td className="py-2 text-gray-800">{reviewResult.reviewedAt}</td>
                      </tr>
                      <tr className="border-b border-gray-100">
                        <td className="py-2 text-gray-500">评查人</td>
                        <td className="py-2 text-gray-800">{reviewResult.reviewerName}</td>
                      </tr>
                      <tr>
                        <td className="py-2 text-gray-500">评查总点数</td>
                        <td className="py-2 text-gray-800">{reviewResult.totalPoints} 项</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
}