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

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
  }),
}));

// Mock mock data
vi.mock('../../../mockData', () => ({
  PLATFORM_METRICS: [
    { label: 'Monthly Revenue', value: '$42,590', change: '+12.5%', trend: 'up', color: 'blue' },
    { label: 'Active Users', value: '1,234', change: '+5.2%', trend: 'up', color: 'green' },
    { label: 'New Signups', value: '89', change: '+8.1%', trend: 'up', color: 'purple' },
    { label: 'Churn Rate', value: '2.1%', change: '-0.3%', trend: 'down', color: 'orange' },
  ],
}));

// Mock recharts - minimal implementation
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  AreaChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="area-chart">{children}</div>
  ),
  Area: () => <div data-testid="area" />,
  XAxis: () => <div data-testid="x-axis" />,
  YAxis: () => <div data-testid="y-axis" />,
  CartesianGrid: () => <div data-testid="cartesian-grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
}));

describe('PlatformDashboard', () => {
  it('renders the overview heading', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('platform.overview')).toBeInTheDocument();
  });

  it('renders the overview description', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('platform.overviewDescription')).toBeInTheDocument();
  });

  it('renders all metric cards', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('Monthly Revenue')).toBeInTheDocument();
    expect(screen.getByText('Active Users')).toBeInTheDocument();
    expect(screen.getByText('New Signups')).toBeInTheDocument();
    expect(screen.getByText('Churn Rate')).toBeInTheDocument();
  });

  it('renders metric values', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('$42,590')).toBeInTheDocument();
    expect(screen.getByText('1,234')).toBeInTheDocument();
    expect(screen.getByText('89')).toBeInTheDocument();
    expect(screen.getByText('2.1%')).toBeInTheDocument();
  });

  it('renders metric changes', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('+12.5%')).toBeInTheDocument();
    expect(screen.getByText('+5.2%')).toBeInTheDocument();
    expect(screen.getByText('+8.1%')).toBeInTheDocument();
    expect(screen.getByText('-0.3%')).toBeInTheDocument();
  });

  it('renders MRR growth heading', () => {
    render(<PlatformDashboard />);
    expect(screen.getByText('platform.mrrGrowth')).toBeInTheDocument();
  });

  it('renders the chart container', () => {
    render(<PlatformDashboard />);
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
  });

  it('renders the area chart', () => {
    render(<PlatformDashboard />);
    expect(screen.getByTestId('area-chart')).toBeInTheDocument();
  });
});
