import { cleanup, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, expect, it, vi } from 'vitest';

import { OperationalSignalPath, type OperationalSignalStage } from '../../src/OperationalSignalPath';

afterEach(cleanup);

const stages: OperationalSignalStage[] = [
  {
    id: 'host', label: 'Host', icon: '▣', tone: 'healthy', statusLabel: 'Gezond',
    primaryLabel: 'CPU-belasting', primaryValue: '42%', secondaryLabel: 'Geheugen', secondaryValue: '61%',
    detail: 'Actuele hostmeting.', route: '/host',
  },
  {
    id: 'storage', label: 'Opslag', icon: '▤', tone: 'critical', statusLabel: 'Kritiek',
    primaryLabel: 'Poolgebruik', primaryValue: '98%', secondaryLabel: 'Pools', secondaryValue: '2',
    detail: 'De capaciteitsgrens is overschreden.', route: '/storage',
  },
];

describe('OperationalSignalPath', () => {
  it('selects the most urgent stage and supports explicit drill-down', async () => {
    const onNavigate = vi.fn();
    const user = userEvent.setup();
    render(<OperationalSignalPath stages={stages} onNavigate={onNavigate} />);

    const storage = screen.getByRole('button', { name: /Opslag: Kritiek/ });
    expect(storage).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByRole('region', { name: 'Opslag' })).toHaveTextContent('98%');

    const host = screen.getByRole('button', { name: /Host: Gezond/ });
    await user.click(host);
    expect(host).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByRole('region', { name: 'Host' })).toHaveTextContent('Actuele hostmeting.');

    await user.click(screen.getByRole('button', { name: 'Open host' }));
    expect(onNavigate).toHaveBeenCalledWith('/host');
  });

  it('preserves an explicit keyboard selection across urgency updates', async () => {
    const user = userEvent.setup();
    const { rerender } = render(<OperationalSignalPath stages={stages} onNavigate={vi.fn()} />);
    const host = screen.getByRole('button', { name: /Host: Gezond/ });
    host.focus();
    await user.keyboard('{Enter}');
    expect(host).toHaveAttribute('aria-pressed', 'true');

    const updated = stages.map((stage) => stage.id === 'storage' ? { ...stage, tone: 'attention' as const, statusLabel: 'Aandacht' } : stage);
    rerender(<OperationalSignalPath stages={updated} onNavigate={vi.fn()} />);
    expect(screen.getByRole('button', { name: /Host: Gezond/ })).toHaveAttribute('aria-pressed', 'true');

    rerender(<OperationalSignalPath stages={updated.filter((stage) => stage.id !== 'host')} onNavigate={vi.fn()} />);
    expect(screen.getByRole('button', { name: /Opslag: Aandacht/ })).toHaveAttribute('aria-pressed', 'true');
  });
});