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

import SerpResultRow from './SerpResultRow';

const mockResult = {
  position: 1,
  domain: 'example.com',
  title: 'Example Title',
  description: 'This is a test description',
  url: 'https://example.com/page',
  word_count: 2500,
  heading_structure: { h1: 1, h2: 3, h3: 5, h4: 0, h5: 0, h6: 0 },
};

describe('SerpResultRow', () => {
  it('renders position badge', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText('1')).toBeInTheDocument();
  });

  it('displays domain and URL', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText('example.com')).toBeInTheDocument();
    expect(screen.getByText('https://example.com/page')).toBeInTheDocument();
  });

  it('displays title', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText('Example Title')).toBeInTheDocument();
  });

  it('displays description', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText('This is a test description')).toBeInTheDocument();
  });

  it('displays word count', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText('2,500')).toBeInTheDocument();
  });

  it('displays heading structure', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText(/H1:1/)).toBeInTheDocument();
    expect(screen.getByText(/H2:3/)).toBeInTheDocument();
    expect(screen.getByText(/H3:5/)).toBeInTheDocument();
  });

  it('renders external link button', () => {
    render(<SerpResultRow result={mockResult} />);
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', mockResult.url);
    expect(link).toHaveAttribute('target', '_blank');
  });

  it('calculates heading count correctly', () => {
    render(<SerpResultRow result={mockResult} />);
    expect(screen.getByText(/Headings:/)).toBeInTheDocument();
    expect(screen.getByText('9')).toBeInTheDocument();
  });
});