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

import BiggestOpportunityHero, { type DecliningPage } from './BiggestOpportunityHero';

const pages: DecliningPage[] = [
  { id: '1', page_url: 'https://example.com/blog/seo-guide', delta_percent: -52.4, delta_absolute: -210 },
  { id: '2', page_url: 'https://example.com/blog/keyword-research', delta_percent: -33.1, delta_absolute: -90 },
  { id: '3', page_url: 'https://example.com/blog/backlinks', delta_percent: -28.0, delta_absolute: -60 },
  { id: '4', page_url: 'https://example.com/blog/sitemaps', delta_percent: -21.5, delta_absolute: -40 },
];

describe('BiggestOpportunityHero', () => {
  it('surfaces the top declining page and a one-click rewrite CTA (P2-10)', () => {
    render(
      <BiggestOpportunityHero siteId="site-pub-id" decliningPages={pages} hasGeneratedDraft={false} />,
    );

    // The biggest opportunity (first/highest-impact page) is named. truncateUrl
    // renders the path; the full URL is preserved in the title attribute.
    expect(screen.getByTitle('https://example.com/blog/seo-guide')).toHaveTextContent(
      '/blog/seo-guide',
    );
    // The loss magnitude is shown (number + % render as adjacent nodes).
    expect(screen.getByText(/52\.4/)).toBeInTheDocument();

    // One-click rewrite CTA deep-links into the draftable Action Queue.
    const cta = screen.getByRole('link', { name: /generate the rewrite/i });
    expect(cta).toHaveAttribute(
      'href',
      '/sites/site-pub-id/opportunity-map?type=recommendation&draftable=1',
    );
  });

  it('does NOT show the bulk CTA before the user has generated a draft (P2-11)', () => {
    render(
      <BiggestOpportunityHero siteId="s" decliningPages={pages} hasGeneratedDraft={false} />,
    );

    expect(screen.queryByText(/rewrite your top \d+ declining pages/i)).not.toBeInTheDocument();
  });

  it('shows the bulk "rewrite your top N" CTA once ≥1 draft exists and ≥N decayed pages (P2-11)', () => {
    render(
      <BiggestOpportunityHero siteId="s" decliningPages={pages} hasGeneratedDraft />,
    );

    // 4 declining pages → "Rewrite your top 4 declining pages".
    expect(
      screen.getByRole('link', { name: /rewrite your top 4 declining pages/i }),
    ).toBeInTheDocument();
  });

  it('does NOT show the bulk CTA below the page threshold even with a draft (P2-11)', () => {
    render(
      <BiggestOpportunityHero
        siteId="s"
        decliningPages={pages.slice(0, 2)}
        hasGeneratedDraft
      />,
    );

    // Only 2 declining pages (< default threshold of 3) → no bulk CTA.
    expect(screen.queryByText(/rewrite your top \d+ declining pages/i)).not.toBeInTheDocument();
    // But the single-page rewrite CTA is still present.
    expect(screen.getByRole('link', { name: /generate the rewrite/i })).toBeInTheDocument();
  });

  it('renders nothing when there are no declining pages', () => {
    const { container } = render(
      <BiggestOpportunityHero siteId="s" decliningPages={[]} hasGeneratedDraft={false} />,
    );

    expect(container).toBeEmptyDOMElement();
  });

  it('does not render "NaN%" when the top page has a non-finite delta', () => {
    const nonFinite: DecliningPage[] = [
      { id: '1', page_url: 'https://example.com/new-page', delta_percent: NaN, delta_absolute: -10 },
    ];
    render(
      <BiggestOpportunityHero siteId="s" decliningPages={nonFinite} hasGeneratedDraft={false} />,
    );

    const heading = screen.getByRole('heading', { level: 2 });
    expect(heading.textContent).not.toMatch(/nan/i);
    // Falls back to the number-free phrasing rather than "lost NaN% of its clicks".
    expect(heading).toHaveTextContent(/losing clicks/i);
  });
});