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

import {
  PositionDeltaStrip,
  type PositionDeltaQuery,
} from './PositionDeltaStrip';

const queries: PositionDeltaQuery[] = [
  { query: 'best seo tools', position: 4.2, delta: -1.3 },
  { query: 'rankwiz review', position: 12.0, delta: 2.5 },
  { query: 'content optimizer', position: 7.1, delta: 0 },
];

describe('PositionDeltaStrip', () => {
  it('renders nothing when queries is empty', () => {
    const { container } = render(
      <PositionDeltaStrip queries={[]} href="/opportunity-map" />,
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders all query rows', () => {
    render(<PositionDeltaStrip queries={queries} href="/opportunity-map" />);
    expect(screen.getByText('best seo tools')).toBeInTheDocument();
    expect(screen.getByText('rankwiz review')).toBeInTheDocument();
    expect(screen.getByText('content optimizer')).toBeInTheDocument();
  });

  it('shows the "View all" link with the provided href', () => {
    render(<PositionDeltaStrip queries={queries} href="/opportunity-map" />);
    expect(screen.getByRole('link', { name: /view all/i })).toHaveAttribute(
      'href',
      '/opportunity-map',
    );
  });

  it('renders improved delta with positive delta badge for negative delta value', () => {
    render(
      <PositionDeltaStrip
        queries={[{ query: 'rising page', position: 3.0, delta: -2.0 }]}
        href="/opportunity-map"
      />,
    );
    // Negative delta = improved position; badge shows the absolute value
    expect(screen.getByText('2.0')).toBeInTheDocument();
  });

  it('renders declined delta with + prefix for positive delta value', () => {
    render(
      <PositionDeltaStrip
        queries={[{ query: 'losing page', position: 15.0, delta: 3.5 }]}
        href="/opportunity-map"
      />,
    );
    expect(screen.getByText('+3.5')).toBeInTheDocument();
  });

  it('renders a neutral dash for zero delta', () => {
    render(
      <PositionDeltaStrip
        queries={[{ query: 'stable page', position: 5.0, delta: 0 }]}
        href="/opportunity-map"
      />,
    );
    expect(screen.getByText('—')).toBeInTheDocument();
  });
});