import { describe, it, expect, beforeEach } from 'vitest'
import { screen, waitFor } from '@testing-library/react'
import { renderWithProviders } from '@/test/utils'
import { AccountPage } from '@/pages/AccountPage'

describe('AccountPage', () => {
  beforeEach(() => {
    localStorage.setItem('access_token', 'test-token')
  })

  it('renders the page title and description', async () => {
    renderWithProviders(<AccountPage />, { initialRoute: '/account' })

    await waitFor(() => {
      expect(screen.getByText('Kontoverwaltung')).toBeInTheDocument()
    })

    expect(
      screen.getByText(/Verwalten Sie Ihr Profil, Ihre Sicherheitseinstellungen/),
    ).toBeInTheDocument()
  })

  it('shows profile, security, and MFA tabs', async () => {
    renderWithProviders(<AccountPage />, { initialRoute: '/account' })

    await waitFor(() => {
      expect(screen.getByText('Profil')).toBeInTheDocument()
    })

    expect(screen.getByText('Sicherheit')).toBeInTheDocument()
    expect(screen.getByText('Zwei-Faktor')).toBeInTheDocument()
  })

  it('shows profile form fields in the profile tab', async () => {
    renderWithProviders(<AccountPage />, { initialRoute: '/account' })

    // Wait for auth to resolve and render the profile tab (default)
    await waitFor(() => {
      expect(screen.getByLabelText('Vorname')).toBeInTheDocument()
    })

    expect(screen.getByLabelText('Nachname')).toBeInTheDocument()
    expect(screen.getByLabelText('Anzeigename')).toBeInTheDocument()
    expect(screen.getByLabelText('Benutzername')).toBeInTheDocument()
    expect(screen.getByLabelText('E-Mail')).toBeInTheDocument()

    // The "Speichern" button should be visible
    expect(screen.getByRole('button', { name: /Speichern/ })).toBeInTheDocument()

    // The avatar upload button should be visible
    expect(screen.getByText('Bild hochladen')).toBeInTheDocument()
  })
})
