import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import OutputInfoBar from '../OutputInfoBar';
import type { TraceMetadata } from '../../types/engine';

function makeMetadata(overrides: Partial<TraceMetadata> = {}): TraceMetadata {
  return {
    format: 'svg',
    path_count: 42,
    node_count_total: 1200,
    open_paths: 0,
    island_count: 3,
    warnings: [],
    processing_ms: 150,
    ...overrides,
  };
}

describe('OutputInfoBar', () => {
  it('shows placeholder when metadata is null', () => {
    const { container } = render(<OutputInfoBar metadata={null} />);
    expect(container.querySelector('.output-info-bar--empty')).toBeTruthy();
    expect(screen.getByText(/trace an image/i)).toBeInTheDocument();
  });

  it('renders stats with green indicators for normal metadata', () => {
    const meta = makeMetadata();
    render(<OutputInfoBar metadata={meta} />);

    const pathsStat = screen.getByTestId('stat-paths');
    expect(pathsStat).toHaveClass('output-stat--green');
    expect(pathsStat).toHaveTextContent('42');

    const nodesStat = screen.getByTestId('stat-nodes');
    expect(nodesStat).toHaveClass('output-stat--green');
    expect(nodesStat).toHaveTextContent('1,200');

    const openStat = screen.getByTestId('stat-open-paths');
    expect(openStat).toHaveClass('output-stat--green');
    expect(openStat).toHaveTextContent('0');

    const timeStat = screen.getByTestId('stat-time');
    expect(timeStat).toHaveClass('output-stat--green');
    expect(timeStat).toHaveTextContent('150ms');
  });

  it('shows yellow indicator when node_count_total > 5000', () => {
    const meta = makeMetadata({ node_count_total: 8500 });
    render(<OutputInfoBar metadata={meta} />);

    const nodesStat = screen.getByTestId('stat-nodes');
    expect(nodesStat).toHaveClass('output-stat--yellow');
    expect(nodesStat).toHaveTextContent('8,500');
  });

  it('shows red indicator when open_paths > 0', () => {
    const meta = makeMetadata({ open_paths: 3 });
    render(<OutputInfoBar metadata={meta} />);

    const openStat = screen.getByTestId('stat-open-paths');
    expect(openStat).toHaveClass('output-stat--red');
    expect(openStat).toHaveTextContent('3');
  });

  it('shows both yellow and red indicators simultaneously', () => {
    const meta = makeMetadata({ node_count_total: 6000, open_paths: 5 });
    render(<OutputInfoBar metadata={meta} />);

    expect(screen.getByTestId('stat-nodes')).toHaveClass('output-stat--yellow');
    expect(screen.getByTestId('stat-open-paths')).toHaveClass('output-stat--red');
  });

  it('displays warnings when present', () => {
    const meta = makeMetadata({ warnings: ['Too many paths', 'Complex geometry'] });
    render(<OutputInfoBar metadata={meta} />);

    const warnings = screen.getByTestId('warnings');
    expect(warnings).toHaveTextContent('Too many paths');
    expect(warnings).toHaveTextContent('Complex geometry');
  });

  it('does not render warnings container when no warnings', () => {
    const meta = makeMetadata({ warnings: [] });
    render(<OutputInfoBar metadata={meta} />);

    expect(screen.queryByTestId('warnings')).not.toBeInTheDocument();
  });
});