import { readFileSync } from 'node:fs';
import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { DonutMetricCard } from '../../src/components/DonutMetricCard/DonutMetricCard';

const styles = readFileSync(new URL('../../src/styles/components.css', import.meta.url), 'utf8');
const tokens = readFileSync(new URL('../../src/styles/ui-tokens.css', import.meta.url), 'utf8');

describe('DonutMetricCard binding design contract', () => {
  it('renders the reference card structure, 270-degree progress and visible values', () => {
    const html = renderToStaticMarkup(
      <DonutMetricCard label="Deviation" value={453} percentage={51} tone="deviation" />
    );

    expect(html).toContain('class="donut-metric-card donut-metric-card--deviation"');
    expect(html).toContain('class="donut-metric-card__title">Deviation</h3>');
    expect(html).toContain('stroke-dasharray="75 25"');
    expect(html).toContain('stroke-dasharray="38.25 61.75"');
    expect(html).toContain('<strong>453</strong>');
    expect(html).toContain('<span>51%</span>');
    expect(html).toContain('--donut-progress-dash:38.25 61.75');
    expect(styles).toContain('@keyframes donut-progress-build');
    expect(styles).toContain('@keyframes donut-accent-build');
    expect(styles).toContain('animation: donut-progress-build var(--dur-data-build) var(--ease-data-build) both;');
    expect(tokens).toContain('--dur-data-build: 700ms;');
  });

  it('renders an empty progress arc at zero and clamps percentages', () => {
    const zero = renderToStaticMarkup(
      <DonutMetricCard label="Error" value={2} percentage={0} tone="error" />
    );
    const clamped = renderToStaticMarkup(
      <DonutMetricCard label="Results All" value={885} percentage={120} tone="all" />
    );

    expect(zero).toContain('stroke-dasharray="0 100"');
    expect(zero).toContain('<span>0%</span>');
    expect(clamped).toContain('stroke-dasharray="75 25"');
    expect(clamped).toContain('<span>100%</span>');
    expect(zero).not.toContain('<animate');
  });

  it('supports a single suffixed score without a duplicate percentage label', () => {
    const html = renderToStaticMarkup(
      <DonutMetricCard label="Compliance Score" value={36} valueSuffix="%" showPercentage={false} percentage={36} tone="all" />
    );

    expect(html).toContain('<strong>36%</strong>');
    expect(html).not.toContain('<span>36%</span>');
  });

  it('becomes an accessible active filter control when clickable', () => {
    const html = renderToStaticMarkup(
      <DonutMetricCard
        label="High"
        value={12}
        percentage={24}
        tone="high"
        active
        onClick={() => undefined}
        className="sidebar-severity-card"
      />
    );

    expect(html).toContain('type="button"');
    expect(html).toContain('aria-pressed="true"');
    expect(html).toContain('donut-metric-card--high sidebar-severity-card');
  });
});