import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it } from 'vitest';

import SerpCompetitorPanel from './SerpCompetitorPanel';

const mockSerpSnapshot = {
  results: [
    {
      position: 1,
      domain: 'example.com',
      title: 'Example Title',
      description: 'Example description',
      url: 'https://example.com',
      word_count: 2500,
      heading_structure: { h1: 1, h2: 3, h3: 5, h4: 0, h5: 0, h6: 0 },
    },
    {
      position: 2,
      domain: 'example2.com',
      title: 'Another Title',
      description: 'Another description',
      url: 'https://example2.com',
      word_count: 2000,
      heading_structure: { h1: 1, h2: 2, h3: 4, h4: 0, h5: 0, h6: 0 },
    },
  ],
  analysis: {
    avg_word_count: 2250,
    word_count_range: { min: 2000, max: 2500 },
    common_h2_terms: ['introduction', 'benefits', 'features'],
    top_terms: [
      { term: 'SEO', frequency: 0.9 },
      { term: 'ranking', frequency: 0.8 },
    ],
  },
};

describe('SerpCompetitorPanel', () => {
  it('renders empty state when no snapshot provided', () => {
    render(<SerpCompetitorPanel serpSnapshot={null} />);
    expect(screen.getByText(/No SERP data available yet/i)).toBeInTheDocument();
  });

  it('renders panel title when snapshot exists', () => {
    render(<SerpCompetitorPanel serpSnapshot={mockSerpSnapshot} keyword="test keyword" />);
    expect(screen.getByText(/What's Ranking Now/i)).toBeInTheDocument();
    expect(screen.getByText('test keyword')).toBeInTheDocument();
  });

  it('displays results count after opening', async () => {
    const user = userEvent.setup();
    render(<SerpCompetitorPanel serpSnapshot={mockSerpSnapshot} />);
    const trigger = screen.getByRole('button', { name: /Open SERP competitor analysis panel/i });
    await user.click(trigger);
    await waitFor(() => {
      expect(screen.getByText(/Top 2 Results/i)).toBeInTheDocument();
    });
  });

  it('renders competition overview section after opening', async () => {
    const user = userEvent.setup();
    render(<SerpCompetitorPanel serpSnapshot={mockSerpSnapshot} />);
    const trigger = screen.getByRole('button', { name: /Open SERP competitor analysis panel/i });
    await user.click(trigger);
    await waitFor(() => {
      expect(screen.getByText(/Competition Overview/i)).toBeInTheDocument();
    });
  });

  it('displays average word count after opening', async () => {
    const user = userEvent.setup();
    render(<SerpCompetitorPanel serpSnapshot={mockSerpSnapshot} />);
    const trigger = screen.getByRole('button', { name: /Open SERP competitor analysis panel/i });
    await user.click(trigger);
    await waitFor(() => {
      expect(screen.getByText('2,250')).toBeInTheDocument();
    });
  });

  it('displays target URL when provided after opening', async () => {
    const user = userEvent.setup();
    render(
      <SerpCompetitorPanel serpSnapshot={mockSerpSnapshot} targetUrl="https://mysite.com/page" />,
    );
    const trigger = screen.getByRole('button', { name: /Open SERP competitor analysis panel/i });
    await user.click(trigger);
    await waitFor(() => {
      expect(screen.getByText(/mysite.com/)).toBeInTheDocument();
    });
  });
});