// @vitest-environment jsdom
import '../../test/dom-setup';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ContextUsageGauge, pickColorClass } from './ContextUsageGauge';

describe('pickColorClass', () => {
  it('しきい値 70/85/95% で色が変わる', () => {
    expect(pickColorClass(0.5)).toBe('bg-emerald-500');
    expect(pickColorClass(0.7)).toBe('bg-amber-500');
    expect(pickColorClass(0.85)).toBe('bg-orange-500');
    expect(pickColorClass(0.95)).toBe('bg-red-500');
  });
});

describe('ContextUsageGauge inline', () => {
  it('limitTokens が無ければ何も描画しない', () => {
    const { container } = render(<ContextUsageGauge inline promptTokens={100} limitTokens={0} />);
    expect(container.firstChild).toBeNull();
  });

  it('70%未満はバーのみ（%テキストなし）', () => {
    render(<ContextUsageGauge inline promptTokens={30_000} limitTokens={100_000} />);
    const el = screen.getByTestId('context-gauge-inline');
    expect(el).toBeInTheDocument();
    expect(el.textContent).not.toContain('%');
  });

  it('70%以上は%テキストを常時表示する（警告の役割）', () => {
    render(<ContextUsageGauge inline promptTokens={80_000} limitTokens={100_000} />);
    expect(screen.getByTestId('context-gauge-inline').textContent).toContain('80%');
  });

  it('タッチ/SR 向けに aria-label と title でフル数値を提供する', () => {
    render(<ContextUsageGauge inline promptTokens={80_000} limitTokens={100_000} />);
    const el = screen.getByTestId('context-gauge-inline');
    expect(el.getAttribute('title')).toContain('80,000');
    expect(el.getAttribute('title')).toContain('100,000');
    expect(el.getAttribute('aria-label')).toBeTruthy();
  });
});
