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

import { RecommendationsPreviewSkeleton } from './RecommendationsPreviewSkeleton';

describe('RecommendationsPreviewSkeleton', () => {
  it('renders the honest "what your results will look like" copy with the domain interpolated', () => {
    render(<RecommendationsPreviewSkeleton domain="example.com" />);

    // The single honest line of copy, with the real domain spliced in.
    expect(screen.getByText(/what your results will look like/i)).toBeInTheDocument();
    expect(screen.getByText('example.com')).toBeInTheDocument();
    expect(screen.getByText(/prioritized list of the pages worth fixing first/i)).toBeInTheDocument();
  });

  it('interpolates whatever domain it is given', () => {
    render(<RecommendationsPreviewSkeleton domain="my-tech-blog.dev" />);

    expect(screen.getByText('my-tech-blog.dev')).toBeInTheDocument();
  });

  it('renders ONLY placeholder/skeleton elements — no fabricated recommendation text', () => {
    const { container } = render(<RecommendationsPreviewSkeleton domain="example.com" />);

    // Placeholder bars exist (the ghost of the prioritized list).
    const placeholders = container.querySelectorAll('.bg-muted, .bg-muted\\/70');
    expect(placeholders.length).toBeGreaterThan(0);

    // The visible textual content is ONLY the eyebrow + the honest preview
    // line — nothing that reads like an actual recommendation. We assert the
    // component does not invent recommendation-shaped strings.
    const text = container.textContent ?? '';
    expect(text).not.toMatch(/rewrite|noindex|meta description|internal link|thin content/i);
  });

  it('marks the skeleton as decorative (aria-hidden) so screen readers skip the ghost', () => {
    render(<RecommendationsPreviewSkeleton domain="example.com" />);

    const root = screen.getByTestId('recs-preview-skeleton');
    expect(root).toHaveAttribute('aria-hidden', 'true');
  });

  it('gates the pulse animation behind motion-reduce so reduced-motion users get a static skeleton', () => {
    const { container } = render(<RecommendationsPreviewSkeleton domain="example.com" />);

    // Animation is purely CSS-gated: motion-safe enables the pulse,
    // motion-reduce disables it. We assert both classes are present together
    // on the placeholders so prefers-reduced-motion is respected by the CSS
    // layer (no JS media-query branch to drift out of sync).
    const animated = container.querySelectorAll('.motion-safe\\:animate-pulse');
    expect(animated.length).toBeGreaterThan(0);
    animated.forEach((el) => {
      expect(el.className).toContain('motion-reduce:animate-none');
    });
  });
});