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

// Mock Recharts components
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" />,
}));

import KpiCard from '@/components/dashboard/KpiCard';

describe('KpiCard', () => {
  it('renders title, value, and trend with sparkline data', () => {
    render(
      <KpiCard
        title="Total Revenue"
        value="$12,345"
        trend={{ value: 5.2, direction: 'up' }}
        sparklineData={[10, 20, 15, 25, 30, 28, 35]}
      />
    );

    expect(screen.getByText('Total Revenue')).toBeInTheDocument();
    expect(screen.getByText('$12,345')).toBeInTheDocument();
    expect(screen.getByText(/5.2%/)).toBeInTheDocument();
    // Sparkline should render (via mocked Recharts)
    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
  });

  it('has hover effect class (hover:shadow-lg)', () => {
    const { container } = render(
      <KpiCard title="Revenue" value="$100" />
    );
    const card = container.firstElementChild;
    expect(card?.className).toContain('hover:shadow-lg');
  });

  it('renders without sparkline when sparklineData is undefined', () => {
    render(
      <KpiCard
        title="Total Costs"
        value="$5,000"
        trend={{ value: 2.1, direction: 'down' }}
      />
    );

    expect(screen.getByText('Total Costs')).toBeInTheDocument();
    expect(screen.getByText('$5,000')).toBeInTheDocument();
    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument();
  });

  it('renders trend in green for "up" direction', () => {
    render(
      <KpiCard
        title="Income"
        value="$8,000"
        trend={{ value: 3.5, direction: 'up' }}
      />
    );

    const trendEl = screen.getByText(/3.5%/);
    expect(trendEl.className).toContain('text-green-500');
  });

  it('renders trend in red for "down" direction', () => {
    render(
      <KpiCard
        title="Expenses"
        value="$4,000"
        trend={{ value: 1.8, direction: 'down' }}
      />
    );

    const trendEl = screen.getByText(/1.8%/);
    expect(trendEl.className).toContain('text-red-500');
  });

  it('renders up arrow for "up" trend', () => {
    render(
      <KpiCard
        title="Growth"
        value="15%"
        trend={{ value: 7, direction: 'up' }}
      />
    );

    expect(screen.getByText(/↑/)).toBeInTheDocument();
  });

  it('renders down arrow for "down" trend', () => {
    render(
      <KpiCard
        title="Decline"
        value="3%"
        trend={{ value: 2, direction: 'down' }}
      />
    );

    expect(screen.getByText(/↓/)).toBeInTheDocument();
  });
});