import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import LiveShowPlayerPage from '../LiveShowPlayerPage';

vi.mock('../../hooks/useLiveShowState', () => ({
  useLiveShowState: () => ({
    status: 'ready',
    connection: 'polling',
    error: null,
    event: { id: 1, name: 'Showcase' },
    photos: [],
    settings: {
      retention_window_hours: 12,
      moderation_mode: 'manual',
      playback_mode: 'newest_first',
      pace_mode: 'auto',
      fixed_interval_seconds: 8,
      layout_mode: 'single',
      effect_preset: 'film_cut',
      effect_intensity: 70,
      background_mode: 'gradient',
    },
  }),
}));

vi.mock('../../hooks/useLiveShowPlayback', () => ({
  useLiveShowPlayback: () => ({
    frame: [],
    nextFrame: [],
    layout: 'single',
    frameKey: 'empty',
  }),
}));

vi.mock('../../i18n/useTranslation', () => ({
  useTranslation: () => ({
    t: (_key: string, fallback: string) => fallback,
  }),
}));

describe('LiveShowPlayerPage', () => {
  it('renders empty state when no photos', () => {
    render(
      <MemoryRouter initialEntries={['/show/demo']}>
        <Routes>
          <Route path="/show/:token" element={<LiveShowPlayerPage />} />
        </Routes>
      </MemoryRouter>
    );

    expect(screen.getByText('Noch keine Live-Fotos')).toBeInTheDocument();
  });
});