import { CheckCircle, XCircle, AlertTriangle, Clock } from 'lucide-react'
import { Progress } from '../common'

interface CheckProgressProps {
  total: number
  checked: number
  results: {
    active: number
    banned: number
    token_expired: number
    error: number
  }
  checking: boolean
}

export default function CheckProgress({ total, checked, results, checking }: CheckProgressProps) {
  return (
    <div className="space-y-4">
      {/* Progress bar */}
      <div>
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
            {checking ? '检查中...' : checked === total && total > 0 ? '检查完成' : '待检查'}
          </span>
          <span className="text-sm text-slate-500 dark:text-slate-400">
            {checked} / {total}
          </span>
        </div>
        <Progress value={checked} max={total} color={checking ? 'blue' : 'green'} size="md" />
      </div>

      {/* Results summary */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div className="flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
          <CheckCircle className="h-5 w-5 text-green-600 dark:text-green-400" />
          <div>
            <p className="text-xs text-green-600 dark:text-green-400">正常</p>
            <p className="text-lg font-bold text-green-700 dark:text-green-300">{results.active}</p>
          </div>
        </div>

        <div className="flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
          <XCircle className="h-5 w-5 text-red-600 dark:text-red-400" />
          <div>
            <p className="text-xs text-red-600 dark:text-red-400">封禁</p>
            <p className="text-lg font-bold text-red-700 dark:text-red-300">{results.banned}</p>
          </div>
        </div>

        <div className="flex items-center gap-2 p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg">
          <Clock className="h-5 w-5 text-orange-600 dark:text-orange-400" />
          <div>
            <p className="text-xs text-orange-600 dark:text-orange-400">过期</p>
            <p className="text-lg font-bold text-orange-700 dark:text-orange-300">
              {results.token_expired}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
          <AlertTriangle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
          <div>
            <p className="text-xs text-yellow-600 dark:text-yellow-400">错误</p>
            <p className="text-lg font-bold text-yellow-700 dark:text-yellow-300">
              {results.error}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}
