'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { FileText, Clock, MapPin, Download, X } from 'lucide-react';
import { ComparisonReport } from './reportComparisonReducer';

interface ReportListProps {
  savedReports: ComparisonReport[];
  onDownloadPDF: (report: ComparisonReport) => void;
  onDownloadWord: (report: ComparisonReport) => void;
  onDeleteReport: (reportId: string) => void;
}

export function ReportList({
  savedReports,
  onDownloadPDF,
  onDownloadWord,
  onDeleteReport
}: ReportListProps) {
  return (
    <Card className="p-6">
      <h3 className="mb-4 flex items-center gap-2">
        <FileText className="w-5 h-5 text-green-600" />
        历史报告列表
      </h3>

      {savedReports.length === 0 ? (
        <div className="text-center py-8 text-muted-foreground">
          <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
          <p>暂无保存的报告</p>
          <p className="text-sm mt-1">选择地块后点击"生成报告"创建新报告</p>
        </div>
      ) : (
        <div className="space-y-3">
          {savedReports.map((report) => (
            <div
              key={report.id}
              className="p-4 border rounded-lg hover:bg-muted transition-colors"
            >
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <h4 className="mb-2 flex items-center gap-2">
                    <FileText className="w-4 h-4 text-green-600" />
                    {report.name}
                  </h4>
                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      生成时间: {report.generatedTime}
                    </span>
                    <span className="flex items-center gap-1">
                      <MapPin className="w-3 h-3" />
                      对比地块: {report.comparedFields.join('、')}
                    </span>
                  </div>
                </div>
                <div className="flex items-center gap-2 ml-4">
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    onClick={() => onDownloadPDF(report)}
                  >
                    <Download className="w-4 h-4 mr-1" />
                    下载PDF
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                    onClick={() => onDownloadWord(report)}
                  >
                    <Download className="w-4 h-4 mr-1" />
                    下载Word
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
                    onClick={() => onDeleteReport(report.id)}
                  >
                    <X className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
}