import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import { clearToken, getToken, setToken } from './lib/auth-storage';

// Stub the network layer so the authed shell renders without real requests.
// /api/me resolves an admin so the gate stays authed and the header shows the email.
vi.mock('./lib/api', async () => {
  const actual = await vi.importActual<typeof import('./lib/api')>('./lib/api');
  return {
    ...actual,
    apiFetch: vi.fn().mockResolvedValue({
      user: { id: 'u1', email: 'admin@solelog.local', name: 'Admin', role: 'admin' },
    }),
  };
});

function renderApp() {
  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>,
  );
}

describe('App', () => {
  afterEach(() => {
    clearToken();
  });

  it('shows the login screen when there is no token', () => {
    clearToken();
    renderApp();
    expect(screen.getByText('E-mailadres')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Inloggen' })).toBeInTheDocument();
  });

  it('shows the sidebar nav when a token is present', () => {
    setToken('tok');
    renderApp();
    const nav = within(screen.getByRole('navigation'));
    expect(nav.getByText('Live')).toBeInTheDocument();
    expect(nav.getByText('Handelingen')).toBeInTheDocument();
  });

  it('clears the token when logout is clicked', async () => {
    setToken('tok');
    renderApp();
    expect(getToken()).toBe('tok');
    await userEvent.click(screen.getByRole('button', { name: 'Uitloggen' }));
    expect(getToken()).toBeNull();
  });
});