import { Card } from '../../ui/card';
import { Badge } from '../../ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../ui/table';
import { CertificateReminder } from '../../../types/driver';
import { DriverRecord } from '../../../types/driver';
import { AlertCircle, CheckCircle } from 'lucide-react';

interface CertificateRemindersProps {
  reminders: CertificateReminder[];
  drivers: DriverRecord[];
}

export function CertificateReminders({ reminders }: CertificateRemindersProps) {
  const getSeverityColor = (days: number) => {
    if (days < 0) return { bg: 'bg-error-muted', text: 'text-error', icon: AlertCircle };
    if (days <= 7) return { bg: 'bg-warning-muted', text: 'text-warning', icon: AlertCircle };
    if (days <= 30) return { bg: 'bg-warning-muted', text: 'text-warning', icon: AlertCircle };
    return { bg: 'bg-success-muted', text: 'text-success', icon: CheckCircle };
  };

  return (
    <Card>
      {reminders.length === 0 ? (
        <div className="p-6 text-center text-muted-foreground">
          <CheckCircle className="w-12 h-12 mx-auto mb-3 text-success" />
          <p>所有证件均在有效期内</p>
        </div>
      ) : (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>驾驶员</TableHead>
              <TableHead>证件类型</TableHead>
              <TableHead>到期日期</TableHead>
              <TableHead>剩余天数</TableHead>
              <TableHead>状态</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {reminders.map((reminder, index) => {
              const severity = getSeverityColor(reminder.daysUntilExpiry);
              const Icon = severity.icon;
              
              return (
                <TableRow key={index}>
                  <TableCell>{reminder.driverName}</TableCell>
                  <TableCell>{reminder.certificateType}</TableCell>
                  <TableCell>{new Date(reminder.expiryDate).toLocaleDateString('zh-CN')}</TableCell>
                  <TableCell>
                    <span className={severity.text}>
                      {reminder.daysUntilExpiry < 0 
                        ? `已过期 ${Math.abs(reminder.daysUntilExpiry)} 天`
                        : `${reminder.daysUntilExpiry} 天`
                      }
                    </span>
                  </TableCell>
                  <TableCell>
                    <Badge variant="secondary" className={severity.bg + ' ' + severity.text}>
                      <Icon className="w-3 h-3 mr-1" />
                      {reminder.daysUntilExpiry < 0 ? '已过期' : 
                       reminder.daysUntilExpiry <= 7 ? '紧急' :
                       reminder.daysUntilExpiry <= 30 ? '即将到期' : '正常'}
                    </Badge>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      )}
    </Card>
  );
}
