import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import Finance from '../pages/Finance'

vi.mock('../components/Navigation', () => ({
  default: () => <nav data-testid="navigation">Nav</nav>,
}))

vi.mock('../components/finance/FinanceDashboard', () => ({
  default: ({ month, year }) => <div data-testid="finance-dashboard">Dashboard {month}/{year}</div>,
}))

vi.mock('../components/finance/TransactionList', () => ({
  default: ({ onAdd }) => (
    <div data-testid="transaction-list">
      <button onClick={onAdd}>Add</button>
    </div>
  ),
}))

vi.mock('../components/finance/FinanceAnalytics', () => ({
  default: () => <div data-testid="finance-analytics">Analytics</div>,
}))

vi.mock('../components/finance/CategoriesManager', () => ({
  default: () => <div data-testid="categories-manager">Categories</div>,
}))

vi.mock('../components/finance/AddTransactionModal', () => ({
  default: ({ onClose, onSaved }) => (
    <div data-testid="add-transaction-modal">
      <button onClick={onClose}>Close</button>
      <button onClick={onSaved}>Save</button>
    </div>
  ),
}))

describe('Finance page', () => {
  it('renders finance page header', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    expect(screen.getByText('💰 Финансы')).toBeInTheDocument()
  })

  it('renders tab navigation', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    // Buttons contain emoji + text, use regex
    expect(screen.getByText(/Обзор/)).toBeInTheDocument()
    expect(screen.getByText(/Транзакции/)).toBeInTheDocument()
    expect(screen.getByText(/Аналитика/)).toBeInTheDocument()
    expect(screen.getByText(/Категории/)).toBeInTheDocument()
  })

  it('shows dashboard tab by default', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    expect(screen.getByTestId('finance-dashboard')).toBeInTheDocument()
  })

  it('switches to transactions tab', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    fireEvent.click(screen.getByText(/Транзакции/))
    expect(screen.getByTestId('transaction-list')).toBeInTheDocument()
  })

  it('switches to analytics tab', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    fireEvent.click(screen.getByText(/Аналитика/))
    expect(screen.getByTestId('finance-analytics')).toBeInTheDocument()
  })

  it('switches to categories tab', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    fireEvent.click(screen.getByText(/Категории/))
    expect(screen.getByTestId('categories-manager')).toBeInTheDocument()
  })

  it('renders navigation', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    expect(screen.getByTestId('navigation')).toBeInTheDocument()
  })

  it('can navigate months', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    expect(screen.getByTestId('finance-dashboard')).toBeInTheDocument()
  })

  it('opens add transaction modal from transactions tab', () => {
    render(<MemoryRouter><Finance /></MemoryRouter>)
    fireEvent.click(screen.getByText(/Транзакции/))
    fireEvent.click(screen.getByText('Add'))
    expect(screen.getByTestId('add-transaction-modal')).toBeInTheDocument()
  })
})
