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

interface OperationLogTableProps {
  logs: OperationLog[]
  isLoading?: boolean
  onViewDetail: (log: OperationLog) => void
}

export function OperationLogTable({ logs, isLoading = false, onViewDetail }: OperationLogTableProps) {
  const getModuleLabel = (module: string) => {
    const labels: Record<string, string> = {
      user: '用户管理',
      role: '角色管理',
      permission: '权限管理',
      machinery: '农机管理',
      driver: '驾驶员管理',
      task: '任务管理',
      system: '系统配置',
      other: '其他',
    }
    return labels[module] || module
  }

  const getActionLabel = (action: string) => {
    const labels: Record<string, string> = {
      create: '新增',
      update: '修改',
      delete: '删除',
      view: '查看',
      export: '导出',
      import: '导入',
      login: '登录',
      logout: '登出',
    }
    return labels[action] || action
  }

  const getActionBadge = (action: string) => {
    const colors: Record<string, string> = {
      create: 'bg-green-100 text-green-700',
      update: 'bg-blue-100 text-blue-700',
      delete: 'bg-red-100 text-red-700',
      view: 'bg-gray-100 text-gray-700',
      export: 'bg-purple-100 text-purple-700',
      import: 'bg-yellow-100 text-yellow-700',
    }
    return colors[action] || 'bg-gray-100 text-gray-700'
  }

  if (isLoading) {
    return (
      <Card>
        <div className="p-8 space-y-4">
          {Array.from({ length: 5 }).map((_, index) => (
            <div key={index} className="animate-pulse">
              <div className="flex space-x-4">
                <div className="bg-gray-200 h-4 w-20 rounded"></div>
                <div className="bg-gray-200 h-4 w-32 rounded"></div>
                <div className="bg-gray-200 h-4 w-16 rounded"></div>
                <div className="bg-gray-200 h-4 w-24 rounded"></div>
                <div className="bg-gray-200 h-4 w-40 rounded"></div>
                <div className="bg-gray-200 h-4 w-16 rounded"></div>
                <div className="bg-gray-200 h-4 w-16 rounded"></div>
                <div className="bg-gray-200 h-8 w-8 rounded"></div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    )
  }

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>操作人</TableHead>
            <TableHead>操作时间</TableHead>
            <TableHead>模块</TableHead>
            <TableHead>操作</TableHead>
            <TableHead>描述</TableHead>
            <TableHead>耗时</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {logs.length === 0 ? (
            <TableRow>
              <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
                暂无操作日志
              </TableCell>
            </TableRow>
          ) : (
            logs.map((log) => (
              <TableRow key={log.id}>
                <TableCell>{log.username}</TableCell>
                <TableCell className="text-muted-foreground text-sm">
                  {new Date(log.operationTime).toLocaleString('zh-CN')}
                </TableCell>
                <TableCell>
                  <Badge variant="outline">{getModuleLabel(log.module)}</Badge>
                </TableCell>
                <TableCell>
                  <Badge className={getActionBadge(log.action)}>
                    {getActionLabel(log.action)}
                  </Badge>
                </TableCell>
                <TableCell className="max-w-xs truncate" title={log.description}>
                  {log.description}
                </TableCell>
                <TableCell className="text-sm">
                  {log.duration ? `${log.duration}ms` : '-'}
                </TableCell>
                <TableCell>
                  {log.status === 'success' ? (
                    <Badge className="bg-green-100 text-green-700">成功</Badge>
                  ) : (
                    <Badge className="bg-red-100 text-red-700">失败</Badge>
                  )}
                </TableCell>
                <TableCell>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onViewDetail(log)}
                  >
                    <Eye className="w-4 h-4" />
                  </Button>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  )
}