import { Badge } from '@/components/ui/badge'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Card } from '@/components/ui/card'
import { LoginLog } from '@/types/monitor'
import { Shield, Monitor, MapPin } from 'lucide-react'

interface LoginLogTableProps {
  logs: LoginLog[]
}

export function LoginLogTable({ logs }: LoginLogTableProps) {
  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>用户名</TableHead>
            <TableHead>登录时间</TableHead>
            <TableHead>IP地址</TableHead>
            <TableHead>设备/浏览器</TableHead>
            <TableHead>位置</TableHead>
            <TableHead>状态</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {logs.length === 0 ? (
            <TableRow>
              <TableCell colSpan={6} className="text-center text-muted-foreground py-8">
                暂无登录日志
              </TableCell>
            </TableRow>
          ) : (
            logs.map((log) => (
              <TableRow key={log.id}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-gray-400" />
                    {log.username}
                  </div>
                </TableCell>
                <TableCell className="text-muted-foreground">
                  {new Date(log.loginTime).toLocaleString('zh-CN')}
                </TableCell>
                <TableCell>
                  <code className="text-xs px-2 py-1 rounded">
                    {log.ipAddress}
                  </code>
                </TableCell>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Monitor className="w-4 h-4 text-gray-400" />
                    <div className="text-sm">
                      <div>{log.device}</div>
                      {log.browser && (
                        <div className="text-xs text-muted-foreground">{log.browser}</div>
                      )}
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  {log.location && (
                    <div className="flex items-center gap-1 text-sm">
                      <MapPin className="w-3 h-3 text-gray-400" />
                      {log.location}
                    </div>
                  )}
                </TableCell>
                <TableCell>
                  {log.status === 'success' ? (
                    <Badge className="bg-green-100 text-green-700">成功</Badge>
                  ) : (
                    <div>
                      <Badge className="bg-red-100 text-red-700">失败</Badge>
                      {log.failReason && (
                        <p className="text-xs text-red-600 mt-1">{log.failReason}</p>
                      )}
                    </div>
                  )}
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  )
}