// @vitest-environment jsdom

import { act, createElement } from 'react';
import { createRoot } from 'react-dom/client';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { AssessorApiClient } from '../../src/api/assessor-api-client';
import { DbStructurePanel } from '../../src/features/db-structure/DbStructurePanel';

describe('DB Structure interactions', () => {
  afterEach(() => vi.restoreAllMocks());

  it('renders synthetic schema metrics and expands one or all table details', async () => {
    (globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
    vi.spyOn(AssessorApiClient.prototype, 'getDatabaseStructure').mockResolvedValue({
      generatedAt: '2026-09-04T10:00:00.000Z',
      persistence: 'postgresql',
      tables: [
        {
          name: 'imports', layer: 'import', approximateRowCount: 4,
          columns: [{ name: 'id', dataType: 'uuid', nullable: false }],
          foreignKeys: []
        },
        {
          name: 'findings', layer: 'canonical', approximateRowCount: 9,
          columns: [{ name: 'import_id', dataType: 'uuid', nullable: false }],
          foreignKeys: [{ column: 'import_id', referencedTable: 'imports', referencedColumn: 'id' }]
        }
      ]
    });
    const container = document.createElement('div');
    const root = createRoot(container);

    await act(async () => {
      root.render(createElement(DbStructurePanel, { backendStatus: 'connected' }));
      await new Promise(resolve => setTimeout(resolve, 0));
    });

    expect(container.querySelector('.db-structure-summary')?.textContent).toContain('2');
    const tableButtons = [...container.querySelectorAll<HTMLButtonElement>('.db-structure-card-header')];
    expect(tableButtons).toHaveLength(2);
    expect(container.querySelectorAll('.db-structure-card-body')).toHaveLength(0);

    act(() => tableButtons[0].click());
    expect(tableButtons[0].getAttribute('aria-expanded')).toBe('true');
    expect(container.querySelectorAll('.db-structure-card-body')).toHaveLength(1);

    const expandAll = [...container.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent === 'Expand all');
    act(() => expandAll?.click());
    expect(container.querySelectorAll('.db-structure-card-body')).toHaveLength(2);
    expect(container.textContent).toContain('Collapse all');

    act(() => root.unmount());
  });
});