import { CheckCircle, Trash2 } from 'lucide-react'
import type { AddRecord } from '../../types'
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Button } from '../common'
import { formatDateTime } from '../../utils/format'

interface RecordListProps {
  records: AddRecord[]
  onDelete?: (id: string) => void
  loading?: boolean
}

export default function RecordList({ records, onDelete, loading = false }: RecordListProps) {
  if (loading) {
    return (
      <div className="space-y-3">
        {[1, 2, 3, 4, 5].map((i) => (
          <div key={i} className="h-16 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse" />
        ))}
      </div>
    )
  }

  if (records.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-700 mb-4">
          <CheckCircle className="h-8 w-8 text-slate-400 dark:text-slate-500" />
        </div>
        <p className="text-slate-500 dark:text-slate-400">暂无加号记录</p>
      </div>
    )
  }

  return (
    <div className="border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
      <Table>
        <TableHeader>
          <TableRow hoverable={false}>
            <TableHead>时间</TableHead>
            <TableHead>来源</TableHead>
            <TableHead className="text-right">总数</TableHead>
            <TableHead className="text-right">成功</TableHead>
            <TableHead className="text-right">失败</TableHead>
            <TableHead>详情</TableHead>
            {onDelete && <TableHead className="w-16"></TableHead>}
          </TableRow>
        </TableHeader>
        <TableBody>
          {records.map((record) => (
            <TableRow key={record.id}>
              <TableCell>
                <span className="text-sm">{formatDateTime(record.timestamp)}</span>
              </TableCell>
              <TableCell>
                <span
                  className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
                    record.source === 'manual'
                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
                      : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
                  }`}
                >
                  {record.source === 'manual' ? '手动上传' : '自动补号'}
                </span>
              </TableCell>
              <TableCell className="text-right font-medium">{record.total}</TableCell>
              <TableCell className="text-right">
                <span className="text-green-600 dark:text-green-400 font-medium">
                  {record.success}
                </span>
              </TableCell>
              <TableCell className="text-right">
                {record.failed > 0 ? (
                  <span className="text-red-600 dark:text-red-400 font-medium">
                    {record.failed}
                  </span>
                ) : (
                  <span className="text-slate-400">0</span>
                )}
              </TableCell>
              <TableCell>
                <span className="text-sm text-slate-500 dark:text-slate-400 truncate max-w-[200px] block">
                  {record.details || '-'}
                </span>
              </TableCell>
              {onDelete && (
                <TableCell>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onDelete(record.id)}
                    className="text-slate-400 hover:text-red-500"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </TableCell>
              )}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
