import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import EventWizard from '@/features/event/components/EventWizard';
import type { Event } from '@/features/event/api/eventService';

// Mock PhotoPostWizard presenter to avoid heavy UI while verifying selection behavior
vi.mock('@/features/photopost/components/PhotoPostWizard', () => ({
  default: ({ eventId }: { eventId: string | number }) => (
    <div data-testid="photopost-wizard">PhotoPost for {String(eventId)}</div>
  ),
}));

describe('EventWizard presenter', () => {
  it('shows loading state', () => {
    render(
      <EventWizard onComplete={() => {}} events={[]} loading={true} error={null} onReload={() => {}} />
    );
    expect(screen.getByText(/Events werden geladen/i)).toBeInTheDocument();
  });

  it('shows error state', () => {
    render(
      <EventWizard onComplete={() => {}} events={[]} loading={false} error="Fehler" onReload={() => {}} />
    );
    expect(screen.getByText('Fehler')).toBeInTheDocument();
  });

  it('lists events and allows selecting one to open PhotoPostWizard', async () => {
    const user = userEvent.setup();
    const events: Event[] = [
      { id: 'e1', name: 'Event Eins', begin_date: '2025-01-01', end_date: '2025-01-02' },
      { id: 'e2', name: 'Event Zwei', begin_date: '2025-02-01', end_date: '2025-02-02' },
    ];

    render(
      <EventWizard onComplete={() => {}} events={events} loading={false} error={null} onReload={() => {}} />
    );

    // both event names are rendered
    expect(screen.getByText('Event Eins')).toBeInTheDocument();
    expect(screen.getByText('Event Zwei')).toBeInTheDocument();

    // select the first event by clicking on its name (event container is clickable)
    await user.click(screen.getByText('Event Eins'));

    // PhotoPostWizard (mock) should be visible with the eventId
    expect(await screen.findByTestId('photopost-wizard')).toHaveTextContent('e1');
  });
});
