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

import HealthScoreBadge from './HealthScoreBadge';

describe('HealthScoreBadge', () => {
  describe('rendering', () => {
    it('shows "Healthy" for score >= 80', () => {
      render(<HealthScoreBadge score={85} />);
      expect(screen.getByText('Healthy')).toBeInTheDocument();
    });

    it('shows "Needs Attention" for score 60–79', () => {
      render(<HealthScoreBadge score={65} />);
      expect(screen.getByText('Needs Attention')).toBeInTheDocument();
    });

    it('shows "At Risk" for score 40–59', () => {
      render(<HealthScoreBadge score={50} />);
      expect(screen.getByText('At Risk')).toBeInTheDocument();
    });

    it('shows "Critical" for score < 40', () => {
      render(<HealthScoreBadge score={20} />);
      expect(screen.getByText('Critical')).toBeInTheDocument();
    });

    it('shows "N/A" for null score', () => {
      render(<HealthScoreBadge score={null} />);
      expect(screen.getByText('N/A')).toBeInTheDocument();
    });
  });

  describe('accessibility', () => {
    it('has an aria-label that includes the health status text', () => {
      const { container } = render(<HealthScoreBadge score={85} />);
      const badge = container.querySelector('[aria-label]');
      expect(badge).toBeTruthy();
      expect(badge?.getAttribute('aria-label')).toContain('Healthy');
    });

    it('aria-label prefix is "Health status:" so screen readers get context', () => {
      const { container } = render(<HealthScoreBadge score={50} />);
      const badge = container.querySelector('[aria-label]');
      expect(badge?.getAttribute('aria-label')).toBe('Health status: At Risk');
    });

    it('aria-label correctly describes null score as N/A', () => {
      const { container } = render(<HealthScoreBadge score={null} />);
      const badge = container.querySelector('[aria-label]');
      expect(badge?.getAttribute('aria-label')).toBe('Health status: N/A');
    });

    it('status conveyed by text, not color alone (critical path)', () => {
      // "Critical" text is present independent of color class
      render(<HealthScoreBadge score={15} />);
      expect(screen.getByText('Critical')).toBeInTheDocument();
    });

    it('status conveyed by text, not color alone (needs-attention path)', () => {
      render(<HealthScoreBadge score={70} />);
      expect(screen.getByText('Needs Attention')).toBeInTheDocument();
    });
  });

  describe('boundary values', () => {
    it('score exactly 80 is Healthy', () => {
      render(<HealthScoreBadge score={80} />);
      expect(screen.getByText('Healthy')).toBeInTheDocument();
    });

    it('score exactly 60 is Needs Attention', () => {
      render(<HealthScoreBadge score={60} />);
      expect(screen.getByText('Needs Attention')).toBeInTheDocument();
    });

    it('score exactly 40 is At Risk', () => {
      render(<HealthScoreBadge score={40} />);
      expect(screen.getByText('At Risk')).toBeInTheDocument();
    });

    it('score 0 is Critical', () => {
      render(<HealthScoreBadge score={0} />);
      expect(screen.getByText('Critical')).toBeInTheDocument();
    });
  });
});