import { describe, it, expect } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { HttpResponse, http } from 'msw';
import { renderRoute } from './render';
import { server } from './mocks/server';

describe('Global Events page', () => {
  // -------------------------------------------------------------------------
  // 1. Renders event list with summary
  // -------------------------------------------------------------------------
  it('renders event list with summary', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText(/US tariffs on Chinese semiconductors/)).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 2. Shows severity badge
  // -------------------------------------------------------------------------
  it('shows severity badge', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText(/US tariffs/)).toBeInTheDocument();
    });
    const row = screen.getByText(/US tariffs/).closest('tr')!;
    expect(row).toHaveTextContent('high');
  });

  // -------------------------------------------------------------------------
  // 3. Shows event type tags
  // -------------------------------------------------------------------------
  it('shows event type tags', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      // event_types: ['trade_barrier', 'cost_increase'] — underscores replaced with spaces
      expect(screen.getByText('trade barrier')).toBeInTheDocument();
    });
    expect(screen.getByText('cost increase')).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 4. Shows affected regions
  // -------------------------------------------------------------------------
  it('shows affected regions', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText('US')).toBeInTheDocument();
    });
    expect(screen.getByText('CN')).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 5. Shows affected sectors
  // -------------------------------------------------------------------------
  it('shows affected sectors', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText('Technology')).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 6. Severity filter buttons render
  // -------------------------------------------------------------------------
  it('renders severity filter buttons', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByRole('group', { name: 'Severity filter' })).toBeInTheDocument();
    });
    const group = screen.getByRole('group', { name: 'Severity filter' });
    expect(group).toHaveTextContent('All');
    expect(group).toHaveTextContent('low');
    expect(group).toHaveTextContent('moderate');
    expect(group).toHaveTextContent('high');
    expect(group).toHaveTextContent('critical');
  });

  // -------------------------------------------------------------------------
  // 7. Empty state
  // -------------------------------------------------------------------------
  it('shows empty state when no events', async () => {
    server.use(
      http.get('/api/macro/events', () => HttpResponse.json([])),
    );
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText('No data')).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 8. Page title renders
  // -------------------------------------------------------------------------
  it('renders page title', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByRole('heading', { name: 'Global Events' })).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 9. Severity filter is clickable
  // -------------------------------------------------------------------------
  it('severity filter buttons are clickable', async () => {
    const user = userEvent.setup();
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByRole('group', { name: 'Severity filter' })).toBeInTheDocument();
    });
    // Click "critical" filter — should not crash
    await user.click(screen.getByRole('button', { name: 'critical' }));
    // Page should still be rendered
    expect(screen.getByRole('heading', { name: 'Global Events' })).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 10. Multiple events render
  // -------------------------------------------------------------------------
  it('renders multiple events', async () => {
    server.use(
      http.get('/api/macro/events', () => HttpResponse.json([
        { id: 'me1', event_types: ['trade_barrier'], severity: 'high', affected_regions: ['US'], affected_sectors: ['Technology'], affected_commodities: [], summary: 'Tariff event', key_facts: [], estimated_duration: 'short_term', confidence: 0.85, source_document_id: 'd1', created_at: '2026-05-15T14:00:00Z' },
        { id: 'me2', event_types: ['monetary_policy'], severity: 'moderate', affected_regions: ['EU'], affected_sectors: ['Financial Services'], affected_commodities: [], summary: 'ECB rate decision', key_facts: [], estimated_duration: 'medium_term', confidence: 0.70, source_document_id: 'd2', created_at: '2026-05-16T10:00:00Z' },
      ])),
    );
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText('Tariff event')).toBeInTheDocument();
    });
    expect(screen.getByText('ECB rate decision')).toBeInTheDocument();
    expect(screen.getByText('EU')).toBeInTheDocument();
  });
});
