import { Descriptions, Drawer, Tag } from 'antd'
import dayjs from 'dayjs'
import type { LoginLog } from '@/types/login-log'
import { LoginStatusColor, LoginStatusText, LoginTypeText } from '@/types/login-log'

interface LoginLogDetailDrawerProps {
  open: boolean
  log: LoginLog | null
  onClose: () => void
}

export function LoginLogDetailDrawer({ open, log, onClose }: LoginLogDetailDrawerProps) {
  if (!log) {
    return null
  }

  return (
    <Drawer title="登录日志详情" placement="right" width={640} open={open} onClose={onClose}>
      <Descriptions column={1} bordered size="small">
        <Descriptions.Item label="日志 ID">{log.id}</Descriptions.Item>
        <Descriptions.Item label="用户 ID">{log.user_id ?? '-'}</Descriptions.Item>
        <Descriptions.Item label="登录类型">
          {LoginTypeText[log.login_type] || log.login_type}
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          <Tag color={LoginStatusColor[log.status]}>{LoginStatusText[log.status]}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="设备 ID">{log.device_id || '-'}</Descriptions.Item>
        <Descriptions.Item label="登录 IP">{log.ip}</Descriptions.Item>
        <Descriptions.Item label="地理位置">{log.location || '-'}</Descriptions.Item>
        <Descriptions.Item label="失败原因">{log.fail_reason || '-'}</Descriptions.Item>
        <Descriptions.Item label="登录时间">
          {dayjs(log.created_at).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
      </Descriptions>
    </Drawer>
  )
}
