import { Clock, CheckCircle, XCircle } from 'lucide-react'
import { Link } from 'react-router-dom'
import type { AddRecord } from '../../types'
import { formatRelativeTime } from '../../utils/format'
import { Card, CardHeader, CardTitle, Button } from '../common'

interface RecentRecordsProps {
  records: AddRecord[]
  loading?: boolean
}

export default function RecentRecords({ records, loading = false }: RecentRecordsProps) {
  const recentRecords = records.slice(0, 5)

  return (
    <Card hoverable>
      <CardHeader>
        <CardTitle>最近加号记录</CardTitle>
        <Link to="/records">
          <Button variant="ghost" size="sm">
            查看全部
          </Button>
        </Link>
      </CardHeader>

      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-16 bg-slate-100 dark:bg-slate-700 rounded-lg animate-pulse" />
          ))}
        </div>
      ) : recentRecords.length === 0 ? (
        <div className="text-center py-8">
          <Clock className="h-12 w-12 mx-auto text-slate-300 dark:text-slate-600" />
          <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">暂无加号记录</p>
          <Link to="/upload" className="mt-4 inline-block">
            <Button size="sm">开始上传</Button>
          </Link>
        </div>
      ) : (
        <div className="space-y-3">
          {recentRecords.map((record) => (
            <div
              key={record.id}
              className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg transition-colors duration-200 hover:bg-slate-100 dark:hover:bg-slate-700"
            >
              <div className="flex items-center gap-3">
                <div
                  className={`p-2 rounded-lg ${
                    record.failed === 0
                      ? 'bg-green-100 dark:bg-green-900/30'
                      : 'bg-yellow-100 dark:bg-yellow-900/30'
                  }`}
                >
                  {record.failed === 0 ? (
                    <CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
                  ) : (
                    <XCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />
                  )}
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                    {record.source === 'manual' ? '手动上传' : '自动补号'}
                  </p>
                  <p className="text-xs text-slate-500 dark:text-slate-400">
                    {formatRelativeTime(record.timestamp)}
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
                  +{record.success}
                </p>
                {record.failed > 0 && <p className="text-xs text-red-500">失败 {record.failed}</p>}
              </div>
            </div>
          ))}
        </div>
      )}
    </Card>
  )
}
