import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import type { ValuationHistoryItem } from '@/lib/valuation-api';
import { ValuationHistory } from '../valuation-history';

const mockItems: ValuationHistoryItem[] = [
  {
    id: 'val-1',
    propertyType: 'APARTMENT',
    district: 'Quận 1',
    city: 'Ho Chi Minh',
    area: 80,
    estimatedPriceVND: 5_000_000_000,
    confidence: 0.85,
    createdAt: '2026-01-15T10:00:00Z',
  },
  {
    id: 'val-2',
    propertyType: 'HOUSE',
    district: 'Quận 7',
    city: 'Ho Chi Minh',
    area: 120,
    estimatedPriceVND: 8_500_000_000,
    confidence: 0.9,
    createdAt: '2026-01-10T10:00:00Z',
  },
];

describe('ValuationHistory', () => {
  it('renders history title', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('Lịch sử định giá')).toBeInTheDocument();
  });

  it('renders total count description', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('2 lần định giá trước đó')).toBeInTheDocument();
  });

  it('renders property type labels', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('Căn hộ')).toBeInTheDocument();
    expect(screen.getByText('Nhà riêng')).toBeInTheDocument();
  });

  it('renders district and area for each item', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText(/Quận 1.*80 m²/)).toBeInTheDocument();
    expect(screen.getByText(/Quận 7.*120 m²/)).toBeInTheDocument();
  });

  it('renders formatted prices', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('5 tỷ')).toBeInTheDocument();
    expect(screen.getByText('8.5 tỷ')).toBeInTheDocument();
  });

  it('calls onSelect when an item is clicked', async () => {
    const onSelect = vi.fn();
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={onSelect}
        onSelect={onSelect}
      />,
    );
    await userEvent.click(screen.getByText('Căn hộ'));
    expect(onSelect).toHaveBeenCalledWith('val-1');
  });

  it('shows empty state when no items', () => {
    render(
      <ValuationHistory
        items={[]}
        total={0}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('Chưa có lịch sử định giá')).toBeInTheDocument();
  });

  it('shows loading state', () => {
    render(
      <ValuationHistory
        items={[]}
        total={0}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
        isLoading
      />,
    );
    expect(screen.getByText('Đang tải...')).toBeInTheDocument();
  });

  it('shows pagination when multiple pages', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={25}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByText('Trang 1/3')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Trước' })).toBeDisabled();
    expect(screen.getByRole('button', { name: 'Tiếp' })).not.toBeDisabled();
  });

  it('calls onPageChange with next page', async () => {
    const onPageChange = vi.fn();
    render(
      <ValuationHistory
        items={mockItems}
        total={25}
        page={1}
        onPageChange={onPageChange}
        onSelect={vi.fn()}
      />,
    );
    await userEvent.click(screen.getByRole('button', { name: 'Tiếp' }));
    expect(onPageChange).toHaveBeenCalledWith(2);
  });

  it('disables next button on last page', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={25}
        page={3}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.getByRole('button', { name: 'Tiếp' })).toBeDisabled();
    expect(screen.getByRole('button', { name: 'Trước' })).not.toBeDisabled();
  });

  it('hides pagination when single page', () => {
    render(
      <ValuationHistory
        items={mockItems}
        total={2}
        page={1}
        onPageChange={vi.fn()}
        onSelect={vi.fn()}
      />,
    );
    expect(screen.queryByText(/Trang/)).not.toBeInTheDocument();
  });
});
