// @vitest-environment jsdom

import { act, createElement } from 'react';
import { createRoot } from 'react-dom/client';
import { describe, expect, it } from 'vitest';
import { DashboardDonutCard, DashboardLargeCard, DashboardMetricBars } from '../../src/features/dashboard/DashboardPanel';

describe('dashboard progressive disclosure', () => {
  it('shows complete metric content initially and minimizes it to the header', () => {
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
    const container = document.createElement('div');
    const root = createRoot(container);

    act(() => root.render(createElement(DashboardLargeCard, {
      title: 'Synthetic coverage',
      meta: '10 observations',
      summary: { label: 'Observed', value: 8 },
      details: createElement('p', { className: 'synthetic-extra' }, 'Additional synthetic detail')
    }, createElement(DashboardMetricBars, { items: [{ label: 'Visible synthetic metric', value: 8, tone: 'coverage' }] }))));

    const toggle = container.querySelector('.client-info-card-toggle') as HTMLButtonElement;
    expect(toggle.querySelector('.triangle-icon-down')).not.toBeNull();
    expect(toggle.getAttribute('aria-expanded')).toBe('true');
    expect(container.querySelector('.client-info-card-details')).not.toBeNull();
    expect(container.querySelector('.client-info-bar-label')?.textContent).toBe('Visible synthetic metric');
    expect(container.querySelector('.synthetic-extra')?.textContent).toBe('Additional synthetic detail');

    const header = container.querySelector('.client-info-card > header') as HTMLElement;
    act(() => toggle.dispatchEvent(new MouseEvent('click', { bubbles: true })));
    expect(toggle.querySelector('.triangle-icon-right')).not.toBeNull();
    expect(toggle.getAttribute('aria-expanded')).toBe('false');
    expect(container.querySelector('.client-info-card-content')).toBeNull();

    act(() => header.dispatchEvent(new MouseEvent('click', { bubbles: true })));
    expect(container.querySelector('.client-info-card-details')).not.toBeNull();
    expect((container.querySelector('.client-info-bar-track i') as HTMLElement).style.getPropertyValue('--share')).toBe('100%');
    act(() => root.unmount());
  });

  it('minimizes donut cards through the complete title bar', () => {
    const container = document.createElement('div');
    const root = createRoot(container);

    act(() => root.render(createElement(DashboardDonutCard, {
      title: 'Synthetic distribution',
      meta: '10 records',
      children: createElement('div', { className: 'synthetic-donut' }, 'Synthetic donut')
    })));

    const toggle = container.querySelector('.client-info-card-toggle') as HTMLButtonElement;
    expect(toggle.querySelector('.triangle-icon-down')).not.toBeNull();
    expect(toggle.getAttribute('aria-expanded')).toBe('true');
    expect(container.querySelector('.synthetic-donut')).not.toBeNull();

    const heading = container.querySelector('.client-info-card-heading') as HTMLElement;
    act(() => heading.dispatchEvent(new MouseEvent('click', { bubbles: true })));
    expect(toggle.querySelector('.triangle-icon-right')).not.toBeNull();
    expect(toggle.getAttribute('aria-expanded')).toBe('false');
    expect(container.querySelector('.client-info-card-content')).toBeNull();
    act(() => root.unmount());
  });
});