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

import type { TermStatus } from '@/hooks/useContentScore';

import TermChecklistItem from './TermChecklistItem';

const makeTerm = (overrides: Partial<TermStatus> = {}): TermStatus => ({
  term: 'seo optimization',
  importance_rank: 1,
  tf_idf_score: 0.8,
  present: true,
  frequency: 3,
  competitor_avg_frequency: 0.002,
  in_title: false,
  in_headings: false,
  status: 'covered',
  ...overrides,
});

describe('TermChecklistItem', () => {
  it('renders term text', () => {
    render(<TermChecklistItem term={makeTerm()} />);
    expect(screen.getByText('seo optimization')).toBeInTheDocument();
  });

  it('shows frequency count when term is present', () => {
    render(<TermChecklistItem term={makeTerm({ frequency: 5 })} />);
    expect(screen.getByText('5x')).toBeInTheDocument();
  });

  it('does not show frequency count when term is not present', () => {
    render(
      <TermChecklistItem term={makeTerm({ present: false, frequency: 0, status: 'missing' })} />,
    );
    expect(screen.queryByText('0x')).not.toBeInTheDocument();
  });

  it('shows T badge when term is in title', () => {
    render(<TermChecklistItem term={makeTerm({ in_title: true })} />);
    expect(screen.getByText('T')).toBeInTheDocument();
  });

  it('shows H badge when term is in headings', () => {
    render(<TermChecklistItem term={makeTerm({ in_headings: true })} />);
    expect(screen.getByText('H')).toBeInTheDocument();
  });

  it('shows both T and H badges when term is in both', () => {
    render(<TermChecklistItem term={makeTerm({ in_title: true, in_headings: true })} />);
    expect(screen.getByText('T')).toBeInTheDocument();
    expect(screen.getByText('H')).toBeInTheDocument();
  });

  it('does not show T or H badges when not in title or headings', () => {
    render(<TermChecklistItem term={makeTerm({ in_title: false, in_headings: false })} />);
    expect(screen.queryByText('T')).not.toBeInTheDocument();
    expect(screen.queryByText('H')).not.toBeInTheDocument();
  });

  it('renders green check icon for covered status', () => {
    const { container } = render(<TermChecklistItem term={makeTerm({ status: 'covered' })} />);
    const icon = container.querySelector('.text-success');
    expect(icon).toBeInTheDocument();
  });

  it('renders amber warning icon for underused status', () => {
    const { container } = render(<TermChecklistItem term={makeTerm({ status: 'underused' })} />);
    const icon = container.querySelector('.text-warning');
    expect(icon).toBeInTheDocument();
  });

  it('renders red X icon for missing status', () => {
    const { container } = render(
      <TermChecklistItem term={makeTerm({ status: 'missing', present: false, frequency: 0 })} />,
    );
    const icon = container.querySelector('.text-destructive');
    expect(icon).toBeInTheDocument();
  });

  it('truncates long term text with title attribute', () => {
    const longTerm = 'very long keyword optimization strategy for search engines';
    render(<TermChecklistItem term={makeTerm({ term: longTerm })} />);
    const termElement = screen.getByText(longTerm);
    expect(termElement).toHaveAttribute('title', longTerm);
    expect(termElement.className).toContain('truncate');
  });
});