'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Eye } from 'lucide-react';
import { AuditRecord, AuditStatus } from '../types';

interface AuditHistoryListProps {
  records: AuditRecord[];
  onViewDetail: (record: AuditRecord) => void;
}

export function AuditHistoryList({ records, onViewDetail }: AuditHistoryListProps) {
  const getResultBadge = (result: AuditStatus) => {
    switch (result) {
      case 'pending':
        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>;
      case 'approved':
        return <Badge className="bg-green-100 text-green-700">已通过</Badge>;
      case 'rejected':
        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>;
      default:
        return <Badge>{result}</Badge>;
    }
  };

  const getTypeBadge = (type: string) => {
    switch (type) {
      case 'register':
        return <Badge className="bg-blue-100 text-blue-700">注册审核</Badge>;
      case 'update':
        return <Badge className="bg-purple-100 text-purple-700">变更审核</Badge>;
      default:
        return <Badge>{type}</Badge>;
    }
  };

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>企业名称</TableHead>
            <TableHead>审核类型</TableHead>
            <TableHead>提交时间</TableHead>
            <TableHead>审核时间</TableHead>
            <TableHead>审核人</TableHead>
            <TableHead>审核结果</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {records.length === 0 ? (
            <TableRow>
              <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
                暂无审核记录
              </TableCell>
            </TableRow>
          ) : (
            records.map((record) => (
              <TableRow key={record.id}>
                <TableCell className="font-medium">{record.enterpriseName}</TableCell>
                <TableCell>{getTypeBadge(record.auditType)}</TableCell>
                <TableCell className="text-muted-foreground">
                  {new Date(record.submitTime).toLocaleString('zh-CN')}
                </TableCell>
                <TableCell className="text-muted-foreground">
                  {record.auditTime
                    ? new Date(record.auditTime).toLocaleString('zh-CN')
                    : '-'}
                </TableCell>
                <TableCell className="text-muted-foreground">{record.auditor || '-'}</TableCell>
                <TableCell>{getResultBadge(record.result)}</TableCell>
                <TableCell>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onViewDetail(record)}
                  >
                    <Eye className="w-4 h-4" />
                  </Button>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  );
}