import { render, screen, fireEvent } from '@testing-library/react'
import { SettingsLayout } from '../SettingsLayout'
import { SettingsNav } from '../SettingsNav'
import { SettingsCard } from '../SettingsCard'

const TestIcon = () => <svg data-testid="settings-icon" />

// ---------------------------------------------------------------------------
// SettingsLayout
// ---------------------------------------------------------------------------

describe('SettingsLayout', () => {
  it('renders children', () => {
    render(
      <SettingsLayout>
        <div>Child content</div>
      </SettingsLayout>
    )
    expect(screen.getByText('Child content')).toBeInTheDocument()
  })

  it('renders title when provided', () => {
    render(
      <SettingsLayout title="Settings">
        <div />
      </SettingsLayout>
    )
    expect(screen.getByText('Settings')).toBeInTheDocument()
  })

  it('does not render title element when title is not provided', () => {
    render(
      <SettingsLayout>
        <div />
      </SettingsLayout>
    )
    expect(screen.queryByRole('heading')).not.toBeInTheDocument()
  })

  it('renders description when both title and description are provided', () => {
    render(
      <SettingsLayout title="Settings" description="Manage your preferences">
        <div />
      </SettingsLayout>
    )
    expect(screen.getByText('Manage your preferences')).toBeInTheDocument()
  })

  it('does not render description when description is not provided', () => {
    render(
      <SettingsLayout title="Settings">
        <div />
      </SettingsLayout>
    )
    expect(screen.queryByText(/manage/i)).not.toBeInTheDocument()
  })
})

// ---------------------------------------------------------------------------
// SettingsNav
// ---------------------------------------------------------------------------

const navItems = [
  { id: 'account', label: 'Account', href: '/settings/account' },
  { id: 'billing', label: 'Billing', href: '/settings/billing', icon: TestIcon },
  { id: 'integrations', label: 'Integrations', href: '/settings/integrations' },
]

describe('SettingsNav', () => {
  it('renders all nav items', () => {
    render(
      <SettingsNav items={navItems} onNavigate={jest.fn()} />
    )
    expect(screen.getByText('Account')).toBeInTheDocument()
    expect(screen.getByText('Billing')).toBeInTheDocument()
    expect(screen.getByText('Integrations')).toBeInTheDocument()
  })

  it('renders icons for items that have icons', () => {
    render(
      <SettingsNav items={navItems} onNavigate={jest.fn()} />
    )
    expect(screen.getByTestId('settings-icon')).toBeInTheDocument()
  })

  it('marks active item with active styles', () => {
    render(
      <SettingsNav items={navItems} activeId="account" onNavigate={jest.fn()} />
    )
    const accountBtn = screen.getByRole('button', { name: 'Account' })
    expect(accountBtn).toHaveClass('bg-gray-100', 'text-gray-900')
  })

  it('inactive items do not have active styles', () => {
    render(
      <SettingsNav items={navItems} activeId="account" onNavigate={jest.fn()} />
    )
    const billingBtn = screen.getByRole('button', { name: 'Billing' })
    expect(billingBtn).not.toHaveClass('bg-gray-100')
    expect(billingBtn).toHaveClass('text-gray-600')
  })

  it('calls onNavigate with the correct href on click', () => {
    const onNavigate = jest.fn()
    render(
      <SettingsNav items={navItems} onNavigate={onNavigate} />
    )
    fireEvent.click(screen.getByRole('button', { name: 'Billing' }))
    expect(onNavigate).toHaveBeenCalledWith('/settings/billing')
  })

  it('renders all items as buttons', () => {
    render(
      <SettingsNav items={navItems} onNavigate={jest.fn()} />
    )
    expect(screen.getAllByRole('button')).toHaveLength(navItems.length)
  })

  it('renders inside a nav element', () => {
    render(
      <SettingsNav items={navItems} onNavigate={jest.fn()} />
    )
    expect(screen.getByRole('navigation')).toBeInTheDocument()
  })
})

// ---------------------------------------------------------------------------
// SettingsCard
// ---------------------------------------------------------------------------

describe('SettingsCard', () => {
  it('renders the title', () => {
    render(<SettingsCard title="API Keys" />)
    expect(screen.getByText('API Keys')).toBeInTheDocument()
  })

  it('renders description when provided', () => {
    render(<SettingsCard title="API Keys" description="Manage your API tokens." />)
    expect(screen.getByText('Manage your API tokens.')).toBeInTheDocument()
  })

  it('does not render description when not provided', () => {
    render(<SettingsCard title="API Keys" />)
    expect(screen.queryByText(/manage/i)).not.toBeInTheDocument()
  })

  it('renders icon when provided', () => {
    render(<SettingsCard title="API Keys" icon={TestIcon} />)
    expect(screen.getByTestId('settings-icon')).toBeInTheDocument()
  })

  it('does not render icon when not provided', () => {
    render(<SettingsCard title="API Keys" />)
    expect(screen.queryByTestId('settings-icon')).not.toBeInTheDocument()
  })

  it('renders action node when provided', () => {
    render(
      <SettingsCard
        title="API Keys"
        action={<button>Add Key</button>}
      />
    )
    expect(screen.getByRole('button', { name: 'Add Key' })).toBeInTheDocument()
  })

  it('renders children content', () => {
    render(
      <SettingsCard title="API Keys">
        <p>Card body content</p>
      </SettingsCard>
    )
    expect(screen.getByText('Card body content')).toBeInTheDocument()
  })

  it('does not render children section when children is not provided', () => {
    const { container } = render(<SettingsCard title="API Keys" />)
    // The children container (px-6 pb-6 pt-0) should not be present
    expect(container.querySelector('.px-6.pb-6.pt-0')).not.toBeInTheDocument()
  })
})