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 { NetworkLog } from '@/types/monitor'
import { Eye, Clock } from 'lucide-react'

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

export function NetworkLogTable({ logs, isLoading = false, onViewDetail }: NetworkLogTableProps) {
  const getMethodBadge = (method: string) => {
    const colors: Record<string, string> = {
      GET: 'bg-blue-100 text-blue-700',
      POST: 'bg-green-100 text-green-700',
      PUT: 'bg-yellow-100 text-yellow-700',
      DELETE: 'bg-red-100 text-red-700',
      PATCH: 'bg-purple-100 text-purple-700',
    }
    return colors[method] || 'bg-gray-100 text-gray-700'
  }

  const getStatusBadge = (status: number) => {
    if (status >= 200 && status < 300) {
      return 'bg-green-100 text-green-700'
    } else if (status >= 400 && status < 500) {
      return 'bg-yellow-100 text-yellow-700'
    } else if (status >= 500) {
      return 'bg-red-100 text-red-700'
    }
    return 'bg-gray-100 text-gray-700'
  }

  const formatBytes = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
  }

  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-16 rounded"></div>
                <div className="bg-gray-200 h-4 w-32 rounded"></div>
                <div className="bg-gray-200 h-4 w-20 rounded"></div>
                <div className="bg-gray-200 h-4 w-16 rounded"></div>
                <div className="bg-gray-200 h-4 w-20 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>URL</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 className="text-sm text-muted-foreground">
                  {new Date(log.timestamp).toLocaleTimeString('zh-CN')}
                </TableCell>
                <TableCell>
                  <Badge className={getMethodBadge(log.method)}>
                    {log.method}
                  </Badge>
                </TableCell>
                <TableCell className="max-w-xs truncate text-sm" title={log.url}>
                  {log.url}
                </TableCell>
                <TableCell className="text-sm">{log.username || '-'}</TableCell>
                <TableCell>
                  <Badge className={getStatusBadge(log.responseStatus)}>
                    {log.responseStatus}
                  </Badge>
                </TableCell>
                <TableCell className="text-sm">
                  <div className="flex items-center gap-1">
                    <Clock className="w-3 h-3 text-gray-400" />
                    {log.responseTime}ms
                  </div>
                </TableCell>
                <TableCell className="text-sm">
                  {log.responseSize ? formatBytes(log.responseSize) : '-'}
                </TableCell>
                <TableCell>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => onViewDetail(log)}
                  >
                    <Eye className="w-4 h-4" />
                  </Button>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  )
}