import type { ReactNode } from 'react'
import { render, screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'

import { LoginLogDetailDrawer } from './LoginLogDetailDrawer'
import type { LoginLog } from '@/types/login-log'

vi.mock('antd', () => {
  const Descriptions = ({
    children,
  }: {
    children?: ReactNode
  }) => <div>{children}</div>

  return {
    Drawer: ({
      children,
      title,
      open,
      onClose,
    }: {
      children?: ReactNode
      title?: string
      open?: boolean
      onClose?: () => void
    }) => (
      <div data-testid="drawer" data-open={open}>
        <div data-testid="drawer-title">{title}</div>
        <button onClick={onClose}>close</button>
        {children}
      </div>
    ),
    Descriptions: Object.assign(Descriptions, {
      Item: ({
        label,
        children,
      }: {
        label?: ReactNode
        children?: ReactNode
      }) => (
        <div>
          <span>{label}</span>
          <span>{children}</span>
        </div>
      ),
    }),
    Tag: ({ children, color }: { children?: ReactNode; color?: string }) => (
      <span data-testid="tag" data-color={color}>
        {children}
      </span>
    ),
  }
})

vi.mock('dayjs', () => ({
  default: () => ({
    format: () => '2024-01-15 10:30:00',
  }),
}))

describe('LoginLogDetailDrawer', () => {
  it('renders nothing when log is null', () => {
    render(<LoginLogDetailDrawer open={true} log={null} onClose={vi.fn()} />)

    expect(screen.queryByTestId('drawer')).not.toBeInTheDocument()
  })

  it('renders drawer when log is provided and open is true', () => {
    const mockLog: LoginLog = {
      id: 1,
      user_id: 10,
      login_type: 1,
      status: 1,
      ip: '192.168.1.1',
      device_id: 'device-123',
      location: 'Beijing, China',
      created_at: '2024-01-15T10:30:00Z',
    }

    render(<LoginLogDetailDrawer open={true} log={mockLog} onClose={vi.fn()} />)

    expect(screen.getByTestId('drawer')).toHaveAttribute('data-open', 'true')
    expect(screen.getByTestId('drawer-title')).toHaveTextContent('登录日志详情')
  })

  it('renders log details correctly', () => {
    const mockLog: LoginLog = {
      id: 42,
      user_id: 15,
      login_type: 2,
      status: 0,
      ip: '10.0.0.1',
      device_id: 'device-456',
      location: 'Shanghai, China',
      fail_reason: 'Invalid password',
      created_at: '2024-01-15T10:30:00Z',
    }

    render(<LoginLogDetailDrawer open={true} log={mockLog} onClose={vi.fn()} />)

    expect(screen.getByText('42')).toBeInTheDocument()
    expect(screen.getByText('15')).toBeInTheDocument()
    expect(screen.getByText('10.0.0.1')).toBeInTheDocument()
    expect(screen.getByText('device-456')).toBeInTheDocument()
    expect(screen.getByText('Shanghai, China')).toBeInTheDocument()
    expect(screen.getByText('Invalid password')).toBeInTheDocument()
  })

  it('handles null user_id gracefully', () => {
    const mockLog: LoginLog = {
      id: 1,
      user_id: null,
      login_type: 1,
      status: 1,
      ip: '192.168.1.1',
      created_at: '2024-01-15T10:30:00Z',
    }

    render(<LoginLogDetailDrawer open={true} log={mockLog} onClose={vi.fn()} />)

    expect(screen.getByTestId('drawer')).toHaveAttribute('data-open', 'true')
  })
})
