import React from 'react';
import { describe, expect, it, vi, beforeEach } from 'vitest';
import { render, 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: 2,
  }),
}));

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 bottom nav visibility', () => {
  beforeEach(() => {
    document.body.classList.remove('guest-nav-visible');
    document.body.classList.remove('guest-immersive');
    Object.defineProperty(window, 'scrollY', { value: 0, writable: true, configurable: true });
    vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
      cb(0);
      return 0;
    });
    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => {});
  });

  it('toggles the nav visibility based on scroll position', async () => {
    render(<UploadPage />);

    expect(document.body.classList.contains('guest-nav-visible')).toBe(false);

    window.scrollY = 120;
    window.dispatchEvent(new Event('scroll'));
    await waitFor(() => {
      expect(document.body.classList.contains('guest-nav-visible')).toBe(true);
    });

    window.scrollY = 0;
    window.dispatchEvent(new Event('scroll'));
    await waitFor(() => {
      expect(document.body.classList.contains('guest-nav-visible')).toBe(false);
    });
  });
});