import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import UploadPage from '../UploadPage';

vi.mock('react-router-dom', () => ({
  useNavigate: () => vi.fn(),
  useParams: () => ({ token: 'demo' }),
  useSearchParams: () => [new URLSearchParams(), vi.fn()],
}));

vi.mock('../../hooks/useGuestTaskProgress', () => ({
  useGuestTaskProgress: () => ({
    markCompleted: vi.fn(),
  }),
}));

vi.mock('../../context/GuestIdentityContext', () => ({
  useGuestIdentity: () => ({
    name: 'Guest',
  }),
}));

vi.mock('../../hooks/useEventData', () => ({
  useEventData: () => ({
    event: {
      guest_upload_visibility: 'immediate',
      demo_read_only: false,
      engagement_mode: 'photo_only',
    },
  }),
}));

vi.mock('../../context/EventStatsContext', () => ({
  useEventStats: () => ({
    latestPhotoAt: null,
    onlineGuests: 0,
  }),
}));

vi.mock('../../context/EventBrandingContext', () => ({
  useEventBranding: () => ({
    branding: {
      primaryColor: '#FF5A5F',
      secondaryColor: '#FFF8F5',
      buttons: { radius: 12 },
      typography: {},
      fontFamily: 'Montserrat',
    },
  }),
}));

vi.mock('../../i18n/useTranslation', () => ({
  useTranslation: () => ({
    t: (key: string, fallback?: string) => fallback ?? key,
    locale: 'de',
  }),
}));

vi.mock('../../services/eventApi', () => ({
  getEventPackage: vi.fn().mockResolvedValue(null),
}));

vi.mock('../../services/photosApi', () => ({
  uploadPhoto: vi.fn(),
}));

describe('UploadPage immersive mode', () => {
  it('adds the guest-immersive class on mount', async () => {
    render(<UploadPage />);

    await waitFor(() => {
      expect(document.body.classList.contains('guest-immersive')).toBe(true);
    });
  });

  it('centers the capture button within the countdown ring', () => {
    render(<UploadPage />);

    const captureButton = screen.getByRole('button', { name: 'upload.buttons.startCamera' });
    const wrapper = captureButton.parentElement;

    expect(wrapper).not.toBeNull();
    expect(wrapper?.className).toContain('items-center');
    expect(wrapper?.className).toContain('justify-center');
  });
});
