import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import { AgentPerformance } from '../agent-performance';

// Mock recharts
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  BarChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="bar-chart">{children}</div>
  ),
  Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`bar-${dataKey}`} />,
  XAxis: () => <div data-testid="xaxis" />,
  YAxis: () => <div data-testid="yaxis" />,
  CartesianGrid: () => <div data-testid="grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
  Legend: () => <div data-testid="legend" />,
  PieChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="pie-chart">{children}</div>
  ),
  Pie: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="pie">{children}</div>
  ),
  Cell: () => <div data-testid="cell" />,
}));

describe('AgentPerformance', () => {
  it('renders KPI cards', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
    expect(screen.getByText('Doanh thu')).toBeInTheDocument();
    expect(screen.getByText('Thời gian phản hồi TB')).toBeInTheDocument();
    expect(screen.getByText('Tỷ lệ chuyển đổi')).toBeInTheDocument();
  });

  it('renders KPI values', () => {
    render(<AgentPerformance />);
    // "8" appears in "Giao dịch thành công" and in funnel "Chốt deal 8"
    expect(screen.getByText('13.0 tỷ')).toBeInTheDocument();
    expect(screen.getByText('1.2 giờ')).toBeInTheDocument();
    expect(screen.getByText('6.7%')).toBeInTheDocument();
    // Check for deal count in KPI section
    expect(screen.getByText('Giao dịch thành công')).toBeInTheDocument();
  });

  it('renders monthly deals chart card', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('Giao dịch & Doanh thu theo tháng')).toBeInTheDocument();
    expect(screen.getByText('6 tháng gần nhất')).toBeInTheDocument();
  });

  it('renders funnel chart card', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('Phễu chuyển đổi khách hàng')).toBeInTheDocument();
    expect(screen.getByText('Từ liên hệ đến chốt deal')).toBeInTheDocument();
  });

  it('renders funnel stages', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('Liên hệ mới')).toBeInTheDocument();
    expect(screen.getByText('Đang trao đổi')).toBeInTheDocument();
    expect(screen.getByText('Xem nhà')).toBeInTheDocument();
    expect(screen.getByText('Đàm phán')).toBeInTheDocument();
    expect(screen.getByText('Chốt deal')).toBeInTheDocument();
  });

  it('renders funnel count values', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('120')).toBeInTheDocument();
    expect(screen.getByText('85')).toBeInTheDocument();
    expect(screen.getByText('42')).toBeInTheDocument();
  });

  it('renders disclaimer about mock data', () => {
    render(<AgentPerformance />);
    expect(screen.getByText(/Dữ liệu mẫu/)).toBeInTheDocument();
  });

  it('renders sub-period info', () => {
    render(<AgentPerformance />);
    expect(screen.getByText('Quý hiện tại')).toBeInTheDocument();
    expect(screen.getByText('+22% so với quý trước')).toBeInTheDocument();
  });
});
