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('Trends page', () => {
  // -------------------------------------------------------------------------
  // 1. Renders trend cards with entity ID
  // -------------------------------------------------------------------------
  it('renders trend card with ticker', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 2. Shows trend direction arrow
  // -------------------------------------------------------------------------
  it('shows trend direction arrow', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
    // TrendArrow renders an aria-label
    expect(screen.getByLabelText('Bullish')).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 3. Shows window badge
  // -------------------------------------------------------------------------
  it('shows window badge on trend card', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
    // The card has a window badge; the filter also has a 7d button
    // Verify at least two 7d elements exist (badge + filter button)
    const elements = screen.getAllByText('7d');
    expect(elements.length).toBeGreaterThanOrEqual(2);
  });

  // -------------------------------------------------------------------------
  // 4. Shows strength and confidence labels
  // -------------------------------------------------------------------------
  it('shows strength and confidence labels', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('Strength')).toBeInTheDocument();
    });
    expect(screen.getByText('Confidence')).toBeInTheDocument();
    expect(screen.getByText('Contradiction')).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 5. Shows contradiction score
  // -------------------------------------------------------------------------
  it('displays contradiction score as percentage', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
    // contradiction_score = 0.1 → "10%"
    expect(screen.getByText('10%')).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 6. Shows catalyst tags
  // -------------------------------------------------------------------------
  it('shows dominant catalyst tags', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('earnings')).toBeInTheDocument();
    });
  });

  // -------------------------------------------------------------------------
  // 7. Evidence expand/collapse
  // -------------------------------------------------------------------------
  it('expands and collapses evidence on click', async () => {
    const user = userEvent.setup();
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
    // Mock has 1 supporting evidence item
    const showBtn = screen.getByText(/Show evidence/);
    expect(showBtn).toBeInTheDocument();
    await user.click(showBtn);
    // After expanding, should show "Hide evidence"
    expect(screen.getByText(/Hide evidence/)).toBeInTheDocument();
    // Click again to collapse
    await user.click(screen.getByText(/Hide evidence/));
    expect(screen.getByText(/Show evidence/)).toBeInTheDocument();
  });

  // -------------------------------------------------------------------------
  // 8. Window filter buttons render
  // -------------------------------------------------------------------------
  it('renders window filter buttons', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('All')).toBeInTheDocument();
    });
    expect(screen.getByText('intraday')).toBeInTheDocument();
    expect(screen.getByText('1d')).toBeInTheDocument();
    expect(screen.getByText('30d')).toBeInTheDocument();
    expect(screen.getByText('90d')).toBeInTheDocument();
  });

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

  // -------------------------------------------------------------------------
  // 10. Page title renders
  // -------------------------------------------------------------------------
  it('renders page title', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByRole('heading', { name: 'Trends' })).toBeInTheDocument();
    });
  });
});
