import React from 'react';
import { render, waitFor } from '@testing-library/react';
import { EventBrandingProvider } from '../EventBrandingContext';
import type { EventBranding } from '../../types/event-branding';

const sampleBranding: EventBranding = {
  primaryColor: '#ff3366',
  secondaryColor: '#ff99aa',
  backgroundColor: '#fef2f2',
  fontFamily: 'Montserrat, sans-serif',
  logoUrl: null,
  typography: {
    heading: null,
    body: null,
    sizePreset: 'l',
  },
  mode: 'dark',
};

describe('EventBrandingProvider', () => {
  afterEach(() => {
    document.documentElement.classList.remove('guest-theme', 'dark');
    document.documentElement.style.removeProperty('color-scheme');
    document.documentElement.style.removeProperty('--guest-background');
    document.documentElement.style.removeProperty('--guest-font-scale');
  });

  it('applies guest theme classes and variables', async () => {
    const { unmount } = render(
      <EventBrandingProvider branding={sampleBranding}>
        <div>Guest</div>
      </EventBrandingProvider>
    );

    await waitFor(() => {
      expect(document.documentElement.classList.contains('guest-theme')).toBe(true);
      expect(document.documentElement.classList.contains('dark')).toBe(true);
      expect(document.documentElement.style.colorScheme).toBe('dark');
      expect(document.documentElement.style.getPropertyValue('--guest-background')).toBe(sampleBranding.backgroundColor);
      expect(document.documentElement.style.getPropertyValue('--guest-font-scale')).toBe('1.08');
    });

    unmount();

    expect(document.documentElement.classList.contains('guest-theme')).toBe(false);
  });
});
