// @vitest-environment jsdom
import { act, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { expect, it, vi } from 'vitest';
import { DatahubHistoryOverview, type DatahubTimeslotSelection } from '../../src/features/project-import/DatahubHistoryOverview';
import type { DatahubTimeslotResultMetrics } from '../../src/features/project-import/datahub-scan-analysis';
import { donutArcPath } from '../../src/components/DonutMetricCard/donut-arc';

it('shows loading instead of zero after selecting Dummy, then the loaded status counts', () => {
  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
  const project = {
    id: 'dummy', name: 'Dummy', description: '', attributes: {},
    createdAt: '2026-07-22T00:00:00Z', updatedAt: '2026-07-22T00:00:00Z'
  };
  let complete!: () => void;
  function Harness() {
    const [selection, setSelection] = useState<DatahubTimeslotSelection | null>(null);
    const [busy, setBusy] = useState(false);
    const [metrics, setMetrics] = useState<DatahubTimeslotResultMetrics | null>(null);
    complete = () => {
      setMetrics({ all: 1833, deviation: 477, passed: 282, notApplicable: 4, notRun: 171, error: 2 });
      setBusy(false);
    };
    return <DatahubHistoryOverview
      projects={[project]} projectData={{}} projectHistory={{}} projectGpoData={{}}
      selection={selection} timeslotMetrics={metrics} loading={false} comparisonBusy={busy} comparisonError={null}
      onCreate={() => undefined} onShow={() => undefined} onOpen={() => undefined}
      onSelectProject={projectId => {
        setMetrics(null);
        setBusy(true);
        setSelection({ projectId, slots: [{ id: 'slot', runIds: ['run'], assessmentIds: ['assessment'], effectiveAt: '2026-07-22T00:00:00Z' }] });
      }}
    />;
  }
  const container = document.createElement('div');
  const root = createRoot(container);
  try {
    act(() => root.render(<Harness/>));
    expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(0);
    expect(container.querySelector('.donut-metric-card[aria-label="Results All: Select client"]')).not.toBeNull();

    act(() => container.querySelector<HTMLButtonElement>('[aria-label="Mandant Dummy auswählen"]')!.click());
    expect(container.querySelector('[aria-label="Selected client result status"]')?.getAttribute('aria-busy')).toBe('true');
    expect(container.querySelectorAll('.donut-metric-card[aria-label$="Loading…"]')).toHaveLength(6);
    expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(0);
    expect(container.querySelector('.donut-metric-rack')?.textContent).not.toContain('0%');

    act(() => complete());
    expect(container.querySelector('[aria-label="Selected client result status"]')?.getAttribute('aria-busy')).toBe('false');
    expect(container.querySelector('.donut-metric-card[aria-label="Results All: 1,833, 100%, Of all records"]')).not.toBeNull();
    expect(container.querySelector('.donut-metric-card[aria-label="Deviation: 477, 63%, Of assessed checks"]')).not.toBeNull();
    const smallResult = container.querySelector('.donut-metric-card[aria-label="Not Applicable: 4, <1%, Of all records"]');
    expect(smallResult).not.toBeNull();
    expect(smallResult?.querySelector('.donut-small-arc-marker')).not.toBeNull();
    expect(smallResult?.querySelector('.donut-metric-card__progress')?.getAttribute('d')).toBe(donutArcPath(4 / 1833 * 100));
    expect(container.querySelectorAll('.donut-metric-card__progress')).toHaveLength(6);
  } finally {
    act(() => root.unmount());
    vi.unstubAllGlobals();
  }
});