import { TrendingUp, Calendar, CheckCircle, XCircle } from 'lucide-react'
import { Card } from '../common'

interface RecordStatsProps {
  stats: {
    totalRecords: number
    totalAdded: number
    totalSuccess: number
    totalFailed: number
    todayAdded: number
    weekAdded: number
  }
}

export default function RecordStats({ stats }: RecordStatsProps) {
  const successRate =
    stats.totalAdded > 0 ? ((stats.totalSuccess / stats.totalAdded) * 100).toFixed(1) : '0'

  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
      <Card padding="sm">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
            <TrendingUp className="h-5 w-5 text-blue-600 dark:text-blue-400" />
          </div>
          <div>
            <p className="text-xs text-slate-500 dark:text-slate-400">总入库</p>
            <p className="text-xl font-bold text-slate-900 dark:text-slate-100">
              {stats.totalSuccess}
            </p>
          </div>
        </div>
      </Card>

      <Card padding="sm">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg">
            <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
          </div>
          <div>
            <p className="text-xs text-slate-500 dark:text-slate-400">成功率</p>
            <p className="text-xl font-bold text-slate-900 dark:text-slate-100">{successRate}%</p>
          </div>
        </div>
      </Card>

      <Card padding="sm">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
            <Calendar className="h-5 w-5 text-purple-600 dark:text-purple-400" />
          </div>
          <div>
            <p className="text-xs text-slate-500 dark:text-slate-400">今日入库</p>
            <p className="text-xl font-bold text-slate-900 dark:text-slate-100">
              {stats.todayAdded}
            </p>
          </div>
        </div>
      </Card>

      <Card padding="sm">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
            <XCircle className="h-5 w-5 text-orange-600 dark:text-orange-400" />
          </div>
          <div>
            <p className="text-xs text-slate-500 dark:text-slate-400">本周入库</p>
            <p className="text-xl font-bold text-slate-900 dark:text-slate-100">
              {stats.weekAdded}
            </p>
          </div>
        </div>
      </Card>
    </div>
  )
}
