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

import { OnboardingPage } from '../../src/OnboardingPage';

afterEach(() => { cleanup(); vi.unstubAllGlobals(); });

const completed = {
  state: { completed: true, step: 'completed', dashboardChoice: 'default', rulesChoice: 'default', dashboardId: 'overview', rulesReady: true },
  capabilities: [
    { id: 'auth', state: 'ready', detail: 'Aanmelding geconfigureerd.' },
    { id: 'database', state: 'ready', detail: 'Database beschikbaar.' },
  ],
  resume: false,
};

describe('afgeronde onboarding', () => {
  it('toont eerst alleen de samenvatting en maakt herconfiguratie expliciet en rolbewust', async () => {
    const fetchMock = vi.fn((input: RequestInfo | URL, init?: RequestInit) => {
      const url = String(input);
      if (url.includes('/system/status')) return Promise.resolve(new Response(JSON.stringify({ version: '1', generatedAt: new Date().toISOString(), overallState: 'healthy', components: [], backup: { state: 'disabled', reason: 'not_configured' }, sourceLag: [] }), { status: 200, headers: { 'Content-Type': 'application/json' } }));
      if (init?.method === 'POST') return Promise.resolve(new Response('{}', { status: 403 }));
      return Promise.resolve(new Response(JSON.stringify(completed), { status: 200, headers: { 'Content-Type': 'application/json' } }));
    });
    vi.stubGlobal('fetch', fetchMock);
    const confirm = vi.fn(() => false);
    vi.stubGlobal('confirm', confirm);
    const user = userEvent.setup();

    render(<OnboardingPage />);

    expect(await screen.findByRole('heading', { name: 'Pulse is geconfigureerd' })).toBeVisible();
    expect(screen.getByText('Overzicht actief')).toBeVisible();
    expect(screen.getByText('Standaardmeldingen actief')).toBeVisible();
    expect(screen.queryByRole('radio')).not.toBeInTheDocument();
    expect(screen.queryByRole('button', { name: 'Configuratie afronden' })).not.toBeInTheDocument();

    await user.click(screen.getByRole('button', { name: 'Herconfiguratie openen' }));
    expect(screen.getAllByRole('radio')).toHaveLength(4);
    const save = screen.getByRole('button', { name: 'Herconfiguratie opslaan' });
    await user.click(save);
    expect(confirm).toHaveBeenCalled();
    expect(fetchMock.mock.calls.some(([, init]) => init?.method === 'POST')).toBe(false);

    confirm.mockReturnValue(true);
    await user.click(save);
    expect(await screen.findByText('Alleen een beheerder kan onboardingkeuzes wijzigen.')).toBeVisible();
    expect(fetchMock.mock.calls.some(([, init]) => init?.method === 'POST')).toBe(true);
  });
});