import { render, screen } from '@testing-library/svelte';
import { describe, expect, it } from 'vitest';
import UtilizationBadge from '$lib/components/common/UtilizationBadge.svelte';
import type { UtilizationIndicator } from '$lib/services/utilizationService';

describe('UtilizationBadge component', () => {
  it('7.1.16: UtilizationBadge shows percentage', () => {
    render(UtilizationBadge, {
      props: {
        utilization: 87.5,
        indicator: 'green' as UtilizationIndicator
      }
    });

    expect(screen.getByText('87.5%')).toBeTruthy();
  });

  it('7.1.17a: Color coding applies correctly - gray for under-utilized', () => {
    const { container } = render(UtilizationBadge, {
      props: {
        utilization: 50,
        indicator: 'gray' as UtilizationIndicator
      }
    });

    const badge = container.querySelector('.badge');
    expect(badge?.classList.contains('badge-neutral')).toBe(true);
  });

  it('7.1.17b: Color coding applies correctly - blue for low utilization', () => {
    const { container } = render(UtilizationBadge, {
      props: {
        utilization: 75,
        indicator: 'blue' as UtilizationIndicator
      }
    });

    const badge = container.querySelector('.badge');
    expect(badge?.classList.contains('badge-info')).toBe(true);
  });

  it('7.1.17c: Color coding applies correctly - green for optimal', () => {
    const { container } = render(UtilizationBadge, {
      props: {
        utilization: 90,
        indicator: 'green' as UtilizationIndicator
      }
    });

    const badge = container.querySelector('.badge');
    expect(badge?.classList.contains('badge-success')).toBe(true);
  });

  it('7.1.17d: Color coding applies correctly - yellow for high', () => {
    const { container } = render(UtilizationBadge, {
      props: {
        utilization: 105,
        indicator: 'yellow' as UtilizationIndicator
      }
    });

    const badge = container.querySelector('.badge');
    expect(badge?.classList.contains('badge-warning')).toBe(true);
  });

  it('7.1.17e: Color coding applies correctly - red for over-allocated', () => {
    const { container } = render(UtilizationBadge, {
      props: {
        utilization: 120,
        indicator: 'red' as UtilizationIndicator
      }
    });

    const badge = container.querySelector('.badge');
    expect(badge?.classList.contains('badge-error')).toBe(true);
  });

  it('7.1.17f: Shows status text when showStatus is true', () => {
    render(UtilizationBadge, {
      props: {
        utilization: 90,
        indicator: 'green' as UtilizationIndicator,
        showStatus: true
      }
    });

    expect(screen.getByText('Optimal')).toBeTruthy();
  });

  it('7.1.17g: Shows YTD label when showYtd is true', () => {
    render(UtilizationBadge, {
      props: {
        utilization: 85,
        indicator: 'green' as UtilizationIndicator,
        showYtd: true
      }
    });

    expect(screen.getByText('YTD')).toBeTruthy();
  });

  it('7.1.17h: Supports different sizes', () => {
    const sizes = ['sm', 'md', 'lg'] as const;

    sizes.forEach((size) => {
      const { container, unmount } = render(UtilizationBadge, {
        props: {
          utilization: 85,
          indicator: 'green' as UtilizationIndicator,
          size
        }
      });

      const badge = container.querySelector('.badge');
      expect(badge?.classList.contains(`badge-${size}`)).toBe(true);
      unmount();
    });
  });
});