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

import ContentScoreGauge from './ContentScoreGauge';

describe('ContentScoreGauge', () => {
  it('renders the score text', () => {
    render(<ContentScoreGauge score={75} />);
    expect(screen.getByText('75')).toBeInTheDocument();
  });

  it('renders SVG with two circles', () => {
    const { container } = render(<ContentScoreGauge score={50} />);
    const circles = container.querySelectorAll('circle');
    expect(circles).toHaveLength(2);
  });

  it('applies red color for low scores (0-40)', () => {
    render(<ContentScoreGauge score={25} />);
    const scoreText = screen.getByText('25');
    expect(scoreText.className).toContain('text-destructive');
  });

  it('applies amber color for medium-low scores (41-60)', () => {
    render(<ContentScoreGauge score={50} />);
    const scoreText = screen.getByText('50');
    expect(scoreText.className).toContain('text-warning');
  });

  it('applies green color for medium-high scores (61-80)', () => {
    render(<ContentScoreGauge score={70} />);
    const scoreText = screen.getByText('70');
    expect(scoreText.className).toContain('text-accent-foreground');
  });

  it('applies emerald color for high scores (81-100)', () => {
    render(<ContentScoreGauge score={90} />);
    const scoreText = screen.getByText('90');
    expect(scoreText.className).toContain('text-success');
  });

  it('uses default size of 80', () => {
    const { container } = render(<ContentScoreGauge score={50} />);
    const svg = container.querySelector('svg');
    expect(svg?.getAttribute('width')).toBe('80');
    expect(svg?.getAttribute('height')).toBe('80');
  });

  it('respects custom size prop', () => {
    const { container } = render(<ContentScoreGauge score={50} size={64} />);
    const svg = container.querySelector('svg');
    expect(svg?.getAttribute('width')).toBe('64');
    expect(svg?.getAttribute('height')).toBe('64');
  });

  it('clamps score to 0-100 for progress calculation', () => {
    const { container } = render(<ContentScoreGauge score={150} />);
    // Should not error, still renders
    expect(screen.getByText('150')).toBeInTheDocument();
    const progressCircle = container.querySelectorAll('circle')[1];
    // strokeDashoffset should be 0 (full circle) since progress is clamped to 100
    const offset = parseFloat(progressCircle?.getAttribute('stroke-dashoffset') ?? '999');
    expect(offset).toBeCloseTo(0, 0);
  });

  it('renders progress circle using currentColor (theme-aware) instead of hardcoded hex', () => {
    const { container } = render(<ContentScoreGauge score={85} />);
    const progressCircle = container.querySelectorAll('circle')[1];
    // DS-001: stroke should use currentColor (driven by Tailwind class) not hardcoded hex
    expect(progressCircle?.getAttribute('stroke')).toBe('currentColor');
    expect(progressCircle?.getAttribute('class')).toContain('text-success');
  });

  it('renders progress proportional to score', () => {
    const { container } = render(<ContentScoreGauge score={0} />);
    const progressCircle = container.querySelectorAll('circle')[1];
    const circumference = 2 * Math.PI * ((80 - 8) / 2); // default size=80, radius=(80-8)/2
    const offset = parseFloat(progressCircle?.getAttribute('stroke-dashoffset') ?? '0');
    // At score 0, offset should equal circumference (no progress)
    expect(offset).toBeCloseTo(circumference, 0);
  });
});