import React from 'react'
import { FileText, Search, Brain, Trash2, CheckCircle, Clock, AlertCircle } from 'lucide-react'

function ReportList({ reports, selectedReports, onToggleSelect, onView, onOCR, onAnalyze, onDelete, loading }) {
  const getStatusIcon = (report) => {
    if (report.has_analysis) return <CheckCircle className="w-4 h-4 text-green-500" />
    if (report.has_ocr) return <Clock className="w-4 h-4 text-blue-500" />
    return <AlertCircle className="w-4 h-4 text-gray-400" />
  }

  const getStatusText = (report) => {
    if (report.has_analysis) return '已分析'
    if (report.has_ocr) return '已识别'
    return '已上传'
  }

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-lg font-semibold text-gray-800 mb-4">
        报告列表 ({reports.length})
      </h2>

      {reports.length === 0 ? (
        <div className="text-center py-8 text-gray-500">
          <FileText className="w-12 h-12 mx-auto mb-2 text-gray-300" />
          <p>暂无报告</p>
        </div>
      ) : (
        <div className="space-y-3 max-h-[500px] overflow-y-auto">
          {reports.map((report) => (
            <div
              key={report.id}
              className={`border rounded-lg p-4 transition-all ${
                selectedReports.includes(report.id)
                  ? 'border-indigo-500 bg-indigo-50'
                  : 'border-gray-200 hover:border-gray-300'
              }`}
            >
              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  checked={selectedReports.includes(report.id)}
                  onChange={() => onToggleSelect(report.id)}
                  className="mt-1 w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500"
                  disabled={!report.has_analysis}
                />

                <div className="flex-1 min-w-0">
                  <div className="flex items-center space-x-2 mb-1">
                    <FileText className="w-4 h-4 text-gray-600 flex-shrink-0" />
                    <p className="text-sm font-medium text-gray-900 truncate">
                      {report.filename}
                    </p>
                  </div>

                  <div className="flex items-center space-x-2 text-xs text-gray-500 mb-2">
                    {getStatusIcon(report)}
                    <span>{getStatusText(report)}</span>
                  </div>

                  <div className="flex flex-wrap gap-2">
                    {!report.has_ocr && (
                      <button
                        onClick={() => onOCR(report.id)}
                        disabled={loading}
                        className="text-xs px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:bg-gray-300 flex items-center space-x-1"
                      >
                        <Search className="w-3 h-3" />
                        <span>识别</span>
                      </button>
                    )}

                    {report.has_ocr && !report.has_analysis && (
                      <button
                        onClick={() => onAnalyze(report.id)}
                        disabled={loading}
                        className="text-xs px-2 py-1 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:bg-gray-300 flex items-center space-x-1"
                      >
                        <Brain className="w-3 h-3" />
                        <span>分析</span>
                      </button>
                    )}

                    {report.has_analysis && (
                      <button
                        onClick={() => onView(report.id)}
                        className="text-xs px-2 py-1 bg-green-500 text-white rounded hover:bg-green-600 flex items-center space-x-1"
                      >
                        <FileText className="w-3 h-3" />
                        <span>查看</span>
                      </button>
                    )}

                    <button
                      onClick={() => onDelete(report.id)}
                      disabled={loading}
                      className="text-xs px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 disabled:bg-gray-300 flex items-center space-x-1"
                    >
                      <Trash2 className="w-3 h-3" />
                      <span>删除</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default ReportList
