import { render, screen, waitFor } from '@testing-library/react'
import { describe, expect, it, vi, beforeEach } from 'vitest'
import App from '../App'

vi.mock('../pages/public/LandingPage', () => ({
  LandingPage: () => <div>landing-page</div>,
}))

vi.mock('../pages/public/LoginPage', () => ({
  LoginPage: () => <div>login-page</div>,
}))

vi.mock('../pages/dashboard/DashboardPage', () => ({
  DashboardPage: () => <div>dashboard-page</div>,
}))

vi.mock('../pages/dashboard/customers/CustomerListPage', () => ({
  CustomerListPage: () => <div>customer-list-page</div>,
}))

vi.mock('../pages/dashboard/customers/CustomerFormPage', () => ({
  CustomerFormPage: () => <div>customer-form-new</div>,
}))

vi.mock('../pages/dashboard/customers/CustomerDetailPage', () => ({
  CustomerDetailPage: () => <div>customer-detail-page</div>,
}))

vi.mock('../pages/dashboard/templates/TemplateListPage', () => ({
  TemplateListPage: () => <div>template-list-page</div>,
}))

vi.mock('../pages/dashboard/templates/TemplateFormPage', () => ({
  TemplateFormPage: () => <div>template-form-page</div>,
}))

vi.mock('../pages/dashboard/templates/TemplateDetailPage', () => ({
  TemplateDetailPage: () => <div>template-detail-page</div>,
}))

vi.mock('../pages/dashboard/templates/TemplateMakeTaskPage', () => ({
  TemplateMakeTaskPage: () => <div>template-make-task-page</div>,
}))

vi.mock('../pages/dashboard/templates/TemplateEditPage', () => ({
  TemplateEditPage: () => <div>template-edit-page</div>,
}))

vi.mock('../pages/dashboard/simulation/StylistSimulationPage', () => ({
  StylistSimulationPage: () => <div>simulation-page</div>,
}))

vi.mock('../pages/dashboard/simulation/SimulationResultPage', () => ({
  SimulationResultPage: () => <div>simulation-result-page</div>,
}))

vi.mock('../pages/dashboard/simulation/SimulationEditPage', () => ({
  SimulationEditPage: () => <div>simulation-edit-page</div>,
}))

vi.mock('../pages/dashboard/simulation/AftercareResultPage', () => ({
  AftercareResultPage: () => <div>aftercare-result-page</div>,
}))

vi.mock('../pages/customer/StylistProfilePage', () => ({
  StylistProfilePage: () => <div>stylist-profile-page</div>,
}))

vi.mock('../pages/customer/CustomerSimulationPage', () => ({
  CustomerSimulationPage: () => <div>customer-simulation-page</div>,
}))

vi.mock('../shared/RequireAuth', () => ({
  RequireAuth: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}))

describe('App customer routes', () => {
  beforeEach(() => {
    window.history.replaceState({}, '', '/zh')
  })

  it('renders customer detail route', async () => {
    window.history.replaceState({}, '', '/zh/customers/123')

    render(<App />)

    await waitFor(() => {
      expect(screen.getByText('customer-detail-page')).toBeInTheDocument()
    })
  })

  it('renders customer edit route with the shared form page', async () => {
    window.history.replaceState({}, '', '/zh/customers/123/edit')

    render(<App />)

    await waitFor(() => {
      expect(screen.getByText('customer-form-new')).toBeInTheDocument()
    })
  })

  it('renders simulation result detail route with simulationId param', async () => {
    window.history.replaceState({}, '', '/zh/simulation/result/91')

    render(<App />)

    await waitFor(() => {
      expect(screen.getByText('simulation-result-page')).toBeInTheDocument()
    })
  })

  it('renders template make task route', async () => {
    window.history.replaceState({}, '', '/zh/templates/tasks/88')

    render(<App />)

    await waitFor(() => {
      expect(screen.getByText('template-make-task-page')).toBeInTheDocument()
    })
  })

  it('renders template edit route', async () => {
    window.history.replaceState({}, '', '/zh/templates/101/edit')

    render(<App />)

    await waitFor(() => {
      expect(screen.getByText('template-edit-page')).toBeInTheDocument()
    })
  })
})