import React from 'react'
import { describe, expect, it } from 'vitest'

import { renderWithProviders, screen } from '../../test/utils'

import AttachmentCard from './index'

const thumbnail = <div data-testid="thumbnail">thumbnail</div>

describe('AttachmentCard', () => {
  it('applies the dark and light root surfaces and type icon colors', () => {
    const dark = renderWithProviders(
      <AttachmentCard
        variant="dark"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="Dark file"
      />
    )
    expect(screen.getByText('Dark file')).toBeInTheDocument()
    expect(dark.container.firstElementChild).toHaveClass('bg-[#1e2330]')
    expect(dark.container.querySelector('svg')).toHaveClass('text-white/55')
    dark.unmount()

    const light = renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="Light file"
      />
    )
    expect(light.container.firstElementChild).toHaveClass('bg-white')
    expect(light.container.querySelector('svg')).toHaveClass('text-black/55')
  })

  it('uses the dark placeholder title and dims it when title is absent', () => {
    renderWithProviders(
      <AttachmentCard
        variant="dark"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        placeholderTitle="Waiting for title"
      />
    )
    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
  })

  it('does not render a light title for missing or whitespace-only values', () => {
    const { rerender } = renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
      />
    )
    expect(screen.queryByText('Attachment title')).toBeNull()

    rerender(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="   "
      />
    )
    expect(screen.queryByText('   ')).toBeNull()
  })

  it('uses an undimmed title class when a dark title is provided', () => {
    renderWithProviders(
      <AttachmentCard
        variant="dark"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="Named file"
      />
    )
    expect(screen.getByText('Named file')).toHaveClass('text-white')
    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
  })

  it('renders detail only for non-empty values', () => {
    const { rerender } = renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="File"
        detail="2 MB"
      />
    )
    expect(screen.getByText('2 MB')).toBeInTheDocument()

    rerender(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        title="File"
        detail=""
      />
    )
    expect(screen.queryByText('2 MB')).toBeNull()
  })

  it('renders optional slots only when supplied', () => {
    const { container } = renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        statusBadge={<span>Ready</span>}
        action={<button type="button">Open</button>}
        topLeft={<span>Left</span>}
        topRight={<span>Right</span>}
      />
    )
    expect(screen.getByText('Ready')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument()
    expect(screen.getByText('Left').parentElement).toHaveClass(
      'pointer-events-auto',
      'absolute',
      'left-3',
      'top-3'
    )
    expect(screen.getByText('Right').parentElement).toHaveClass(
      'pointer-events-auto',
      'absolute',
      'right-3',
      'top-3'
    )
    expect(container.querySelectorAll('.pointer-events-auto')).toHaveLength(2)

    const withoutSlots = renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
      />
    )
    expect(
      withoutSlots.container.querySelectorAll('.pointer-events-auto')
    ).toHaveLength(0)
  })

  it('forwards rootRef and data-testid to the root', () => {
    const rootRef = React.createRef<HTMLDivElement>()
    renderWithProviders(
      <AttachmentCard
        variant="light"
        thumbnail={thumbnail}
        mimeType="application/pdf"
        rootRef={rootRef}
        data-testid="attachment-card"
      />
    )
    expect(screen.getByTestId('attachment-card')).toBe(rootRef.current)
  })
})