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

import type { CompetitiveGap } from '@/hooks/useContentScore';

import CompetitiveGapPanel from './CompetitiveGapPanel';

describe('CompetitiveGapPanel', () => {
  it('renders a prompt to run SERP analysis when gap is null', () => {
    render(<CompetitiveGapPanel gap={null} />);
    expect(screen.getByText(/run a serp analysis/i)).toBeInTheDocument();
  });

  it('renders "no coverage gaps" message when gap has empty lists', () => {
    const gap: CompetitiveGap = { missing_headings: [], missing_entities: [], coverage_pct: 100 };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText(/no coverage gaps detected/i)).toBeInTheDocument();
  });

  it('renders missing headings when present', () => {
    const gap: CompetitiveGap = {
      missing_headings: ['How to install', 'Best practices'],
      missing_entities: [],
      coverage_pct: 60,
    };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText('How to install')).toBeInTheDocument();
    expect(screen.getByText('Best practices')).toBeInTheDocument();
    expect(screen.getByText(/missing sections/i)).toBeInTheDocument();
  });

  it('renders missing entities as badges when present', () => {
    const gap: CompetitiveGap = {
      missing_headings: [],
      missing_entities: ['technical seo', 'page speed'],
      coverage_pct: 40,
    };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText('technical seo')).toBeInTheDocument();
    expect(screen.getByText('page speed')).toBeInTheDocument();
    expect(screen.getByText(/missing entities/i)).toBeInTheDocument();
  });

  it('shows coverage percentage in the summary row', () => {
    const gap: CompetitiveGap = {
      missing_headings: ['Some heading'],
      missing_entities: ['some entity'],
      coverage_pct: 42,
    };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText(/42%/)).toBeInTheDocument();
  });

  it('renders loading skeleton when isLoading is true', () => {
    const { container } = render(<CompetitiveGapPanel gap={null} isLoading />);
    // Loading skeleton uses animate-pulse class
    expect(container.querySelector('.animate-pulse')).not.toBeNull();
  });

  it('labels coverage as "Good coverage" at 80%+', () => {
    const gap: CompetitiveGap = { missing_headings: [], missing_entities: [], coverage_pct: 85 };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText(/good coverage/i)).toBeInTheDocument();
  });

  it('labels coverage as "Low coverage" below 50%', () => {
    const gap: CompetitiveGap = {
      missing_headings: ['Section A'],
      missing_entities: [],
      coverage_pct: 30,
    };
    render(<CompetitiveGapPanel gap={gap} />);
    expect(screen.getByText(/low coverage/i)).toBeInTheDocument();
  });
});