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

vi.mock('@/Components/marketing/MarketingNav', () => ({
  MarketingNav: ({ canLogin }: { canLogin: boolean; canRegister: boolean }) => (
    <nav data-testid="marketing-nav" data-can-login={String(canLogin)} />
  ),
}));

vi.mock('@/Components/marketing/MarketingFooter', () => ({
  MarketingFooter: () => <footer data-testid="marketing-footer" />,
}));

import CaseStudiesIndex from '@/Pages/Marketing/CaseStudies/Index';

const mockCaseStudies = [
  {
    company_type: 'B2B SaaS Blog',
    result: '+47% organic traffic in 90 days',
    challenge: 'Traffic stagnated despite consistent publishing.',
    approach: 'Connected GSC and ran RankWiz analysis.',
    outcome: '9 of 12 pages moved to page 1 within 90 days.',
  },
  {
    company_type: 'WordPress E-commerce Store',
    result: '-63% traffic loss recovered in 6 weeks',
    challenge: 'A Google algorithm update hit the store hard.',
    approach: 'RankWiz anomaly detection flagged the drop.',
    outcome: 'Traffic recovered to pre-update levels within 6 weeks.',
  },
  {
    company_type: 'SEO Agency',
    result: '3× faster reporting',
    challenge: 'Managing SEO for 10 client sites took too long.',
    approach: 'Used RankWiz across all client sites.',
    outcome: 'Reporting time cut from 3 days to under 1 day.',
  },
];

const defaultProps = {
  can_login: true,
  can_register: true,
  case_studies: mockCaseStudies,
};

describe('CaseStudies/Index', () => {
  it('renders the hero heading', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByRole('heading', { name: /see.*in action/i, level: 1 })).toBeInTheDocument();
  });

  it('renders all 3 case study cards', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByText('B2B SaaS Blog')).toBeInTheDocument();
    expect(screen.getByText('WordPress E-commerce Store')).toBeInTheDocument();
    expect(screen.getByText('SEO Agency')).toBeInTheDocument();
  });

  it('renders case study result badges', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByText('+47% organic traffic in 90 days')).toBeInTheDocument();
    expect(screen.getByText('-63% traffic loss recovered in 6 weeks')).toBeInTheDocument();
    expect(screen.getByText('3× faster reporting')).toBeInTheDocument();
  });

  it('renders pricing CTA link', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByRole('link', { name: /view pricing/i })).toBeInTheDocument();
  });

  it('renders MarketingNav', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByTestId('marketing-nav')).toBeInTheDocument();
  });

  it('renders MarketingFooter', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByTestId('marketing-footer')).toBeInTheDocument();
  });

  it('emits JSON-LD structured data only when real case studies are present', () => {
    const { container } = render(<CaseStudiesIndex {...defaultProps} />);

    const scripts = container.querySelectorAll('script[type="application/ld+json"]');
    expect(scripts.length).toBeGreaterThan(0);
    const ld = JSON.parse(scripts[0].textContent ?? '{}');
    expect(ld['@type']).toBe('ItemList');
    expect(ld.itemListElement).toHaveLength(mockCaseStudies.length);
  });

  it('omits JSON-LD ItemList block when no case studies are provided', () => {
    const { container } = render(
      <CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />,
    );

    const scripts = container.querySelectorAll('script[type="application/ld+json"]');
    const hasItemList = Array.from(scripts).some((s) => {
      try {
        return JSON.parse(s.textContent ?? '{}')['@type'] === 'ItemList';
      } catch {
        return false;
      }
    });
    expect(hasItemList).toBe(false);
  });

  it('renders placeholder case studies (social proof) when no real case studies are provided', () => {
    render(<CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />);

    // Should show real-looking social proof, not a product overview
    expect(screen.getByText('B2B SaaS Blog')).toBeInTheDocument();
    expect(screen.getByText('+47% organic traffic in 90 days')).toBeInTheDocument();
    expect(screen.getByText('WordPress E-commerce Store')).toBeInTheDocument();
    expect(screen.getByText('SEO Agency (10 Client Sites)')).toBeInTheDocument();
  });

  it('does not render the product capabilities overview when no real case studies are provided', () => {
    render(<CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />);

    // The empty-state product overview headings should not appear
    expect(screen.queryByText(/Here Is What.*Does for Your Team/i)).not.toBeInTheDocument();
    expect(screen.queryByText(/Who Uses/i)).not.toBeInTheDocument();
  });

  it('does not show "Real results" subtitle when only placeholder case studies are displayed', () => {
    render(<CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />);

    // Placeholder subtitle must not claim 'Real results' — that would be deceptive marketing
    const subtitleEl = screen.getByText(/illustrative examples/i);
    expect(subtitleEl).toBeInTheDocument();
    expect(subtitleEl.textContent).not.toMatch(/^Real results/i);
  });

  it('shows "Real results" subtitle only when actual case studies are provided', () => {
    render(<CaseStudiesIndex {...defaultProps} />);

    expect(screen.getByText(/real results from teams/i)).toBeInTheDocument();
  });

  it('renders the CTA with consistent text regardless of whether case studies exist', () => {
    const { rerender } = render(
      <CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />,
    );
    expect(screen.getByRole('heading', { name: /ready to see results like these/i })).toBeInTheDocument();

    rerender(<CaseStudiesIndex {...defaultProps} />);
    expect(screen.getByRole('heading', { name: /ready to see results like these/i })).toBeInTheDocument();
  });

  it('renders case study challenge, approach, and outcome sections for placeholder data', () => {
    render(<CaseStudiesIndex can_login={true} can_register={true} case_studies={[]} />);

    expect(screen.getAllByText('The Challenge').length).toBeGreaterThan(0);
    expect(screen.getAllByText('The Approach').length).toBeGreaterThan(0);
    expect(screen.getAllByText('The Outcome').length).toBeGreaterThan(0);
  });
});