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

describe('KpiCards Component', () => {
  const mockData = {
    level: 723.10,
    inflow: 5.5,
    outflow: 2.5,
    volume: 150,
    fullness: 80,
    storageDiff: -1.81
  };

  it('renders correctly with negative storageDiff (red)', () => {
    render(<KpiCards data={mockData} language="cs" />);
    // STORAGE SPACE card should show -1.81 m
    expect(screen.getByText('-1.81 m')).toBeInTheDocument();
    
    // Because it is negative, it should have the red color style applied
    const diffElement = screen.getByText('-1.81 m');
    expect(diffElement.parentElement?.outerHTML).toContain('var(--color-red)');
  });

  it('renders correctly with positive storageDiff (cyan)', () => {
    const positiveData = { ...mockData, storageDiff: 0.5 };
    render(<KpiCards data={positiveData} language="cs" />);
    
    expect(screen.getByText('+0.50 m')).toBeInTheDocument();
    const diffElement = screen.getByText('+0.50 m');
    expect(diffElement.parentElement?.outerHTML).toContain('var(--color-cyan)');
  });

  it('falls back to percentage fullness if storageDiff is zero/undefined', () => {
    const noDiffData = { ...mockData, storageDiff: 0, fullness: 85.5 };
    render(<KpiCards data={noDiffData} language="cs" />);
    
    const elements = screen.getAllByText('85.5%');
    expect(elements.length).toBeGreaterThan(0);
    expect(elements[0]).toBeInTheDocument();
  });
});
