/**
 * 右栏 · 文件信息选项卡
 * 以简洁的 key-value 网格展示文件基本属性和评查信息
 */

interface FileInfoData {
  fileName: string;
  contractNumber: string;
  fileSize: string;
  fileFormat: string;
  pageCount: number;
  uploadTime: string;
  uploadUser: string;
  fileType: string;
}

interface ReviewInfoData {
  reviewTime: string;
  reviewModel: string;
  ruleGroup: string;
  result: string;
  issueCount: number;
}

interface FileInfoPanelProps {
  fileInfo: FileInfoData;
  reviewInfo: ReviewInfoData;
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="grid grid-cols-[80px,1fr] gap-2 text-[12.5px] py-1.5 border-b border-slate-100 last:border-b-0">
      <span className="text-slate-400">{label}</span>
      <span className="text-slate-700 break-all">{value || '—'}</span>
    </div>
  );
}

export function FileInfoPanel({ fileInfo, reviewInfo }: FileInfoPanelProps) {
  return (
    <div className="p-4 space-y-4">
      {/* 文件基本信息 */}
      <section>
        <div className="text-[11px] font-medium text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
          <i className="ri-file-info-line text-blue-500 text-[12px]" /> 文件基本信息
        </div>
        <div className="bg-slate-50/60 border border-slate-200 rounded-md p-3">
          <Row label="文件名称" value={fileInfo.fileName} />
          <Row label={fileInfo.fileType !== '1' ? '卷宗编号' : '合同编号'} value={fileInfo.contractNumber} />
          <Row label="文件大小" value={fileInfo.fileSize} />
          <Row label="文件格式" value={fileInfo.fileFormat} />
          <Row label="页数" value={`${fileInfo.pageCount} 页`} />
          <Row label="上传时间" value={fileInfo.uploadTime} />
        </div>
      </section>

      {/* 评查信息 */}
      <section>
        <div className="text-[11px] font-medium text-slate-400 uppercase tracking-wider mb-2 flex items-center gap-1">
          <i className="ri-search-eye-line text-purple-500 text-[12px]" /> 评查信息
        </div>
        <div className="bg-slate-50/60 border border-slate-200 rounded-md p-3">
          <Row label="评查时间" value={reviewInfo.reviewTime} />
          <Row label="评查模型" value={reviewInfo.reviewModel} />
          <Row label="规则组" value={reviewInfo.ruleGroup} />
          <Row label="问题数量" value={`${reviewInfo.issueCount} 个`} />
        </div>
      </section>
    </div>
  );
}