// @vitest-environment jsdom

import { act, createElement, type ComponentProps } from 'react';
import { createRoot } from 'react-dom/client';
import { afterEach, describe, expect, it, vi } from 'vitest';

import { SuggestedPrompts, type SuggestedPromptItem } from '../SuggestedPrompts';

(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;

const items: readonly SuggestedPromptItem[] = [
  { id: 'one', label: 'First prompt', prompt: 'First prompt' },
  { id: 'two', label: 'Second prompt', prompt: 'Second prompt' },
];

describe('SuggestedPrompts', () => {
  const mounted: Array<ReturnType<typeof createRoot>> = [];

  afterEach(() => {
    act(() => mounted.splice(0).forEach((root) => root.unmount()));
  });

  function render(props: Partial<ComponentProps<typeof SuggestedPrompts>> = {}) {
    const container = document.createElement('div');
    const root = createRoot(container);
    mounted.push(root);
    act(() => {
      root.render(createElement(SuggestedPrompts, {
        items,
        onPick: vi.fn(),
        title: 'Start here',
        ...props,
      }));
    });
    return container;
  }

  it('uses native list semantics without overriding button roles', () => {
    const container = render();
    const list = container.querySelector('ul');

    expect(list?.children).toHaveLength(2);
    expect(Array.from(list?.children ?? []).every((item) => item.tagName === 'LI')).toBe(true);
    expect(container.querySelectorAll('button[role]')).toHaveLength(0);
  });

  it('defaults to h2 and lets the host select the outline level', () => {
    expect(render().querySelector('h2')?.textContent).toBe('Start here');
    expect(render({ titleLevel: 4 }).querySelector('h4')?.textContent).toBe('Start here');
  });
});
