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

vi.mock('recharts', () => ({
  PieChart: ({ children }) => <div data-testid="pie-chart">{children}</div>,
  Pie: () => <div />,
  Cell: () => <div />,
  LineChart: ({ children }) => <div data-testid="line-chart">{children}</div>,
  Line: () => <div />,
  XAxis: () => <div />,
  YAxis: () => <div />,
  Tooltip: () => <div />,
  ResponsiveContainer: ({ children }) => <div>{children}</div>,
}))

vi.mock('../api/finance', () => ({
  financeApi: {
    getSummary: vi.fn(),
  },
}))

import { financeApi } from '../api/finance'

describe('FinanceDashboard', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it('shows loading state', () => {
    financeApi.getSummary.mockReturnValue(new Promise(() => {}))
    render(<FinanceDashboard month={3} year={2026} />)
    const skeletons = document.querySelectorAll('.animate-pulse')
    expect(skeletons.length).toBeGreaterThan(0)
  })

  it('shows empty state when no data', async () => {
    financeApi.getSummary.mockResolvedValueOnce({
      total_income: 0,
      total_expense: 0,
      balance: 0,
      carried_over: 0,
      by_category: [],
      daily: [],
    })
    render(<FinanceDashboard month={3} year={2026} />)
    await waitFor(() => {
      expect(screen.getByText('Нет данных')).toBeInTheDocument()
    })
  })

  it('shows dashboard when data available', async () => {
    financeApi.getSummary.mockResolvedValueOnce({
      total_income: 100000,
      total_expense: 50000,
      balance: 50000,
      carried_over: 0,
      by_category: [
        { category_name: 'Еда', category_emoji: '🍔', type: 'expense', amount: 10000 },
      ],
      daily: [
        { date: '2026-03-01', income: 0, expense: 500 },
      ],
    })
    render(<FinanceDashboard month={3} year={2026} />)
    await waitFor(() => {
      // Use getAllByText since "50 000" appears multiple times
      const elements = screen.getAllByText(/50\s*000/)
      expect(elements.length).toBeGreaterThan(0)
    })
  })
})
