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

class IntersectionObserverMock {
  observe() {}
  unobserve() {}
  disconnect() {}
}

Object.defineProperty(globalThis, 'IntersectionObserver', {
  writable: true,
  value: IntersectionObserverMock,
});

vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, fallback?: string | { defaultValue?: unknown }) => {
      if (typeof fallback === 'string') {
        return fallback;
      }
      if (fallback && typeof fallback === 'object' && 'defaultValue' in fallback) {
        return fallback.defaultValue;
      }
      return key;
    },
  }),
}));

vi.mock('@inertiajs/react', () => ({
  Link: ({ children, href }: { children: React.ReactNode; href: string }) => <a href={href}>{children}</a>,
  usePage: () => ({ props: { flash: {} } }),
}));

vi.mock('@/layouts/mainWebsite', () => ({
  default: ({ children, title }: { children: React.ReactNode; title: string }) => (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  ),
}));

vi.mock('@/hooks/useAnalytics', () => ({
  useAnalytics: () => ({ trackEvent: vi.fn() }),
}));

vi.mock('@/hooks/useCtaExperiment', () => ({
  useCtaExperiment: () => ({ variant: 'default', trackClick: vi.fn() }),
}));

vi.mock('@/hooks/useLocalizedRoutes', () => ({
  useLocalizedRoutes: () => ({
    localizedPath: (path: string) => path,
  }),
}));

vi.mock('@/hooks/useLocale', () => ({
  useLocale: () => 'de',
}));

vi.mock('react-hot-toast', () => ({
  default: {
    error: vi.fn(),
  },
}));

import Packages from '../Packages';

describe('Packages', () => {
  beforeEach(() => {
    window.matchMedia = vi.fn().mockImplementation(() => ({
      matches: false,
      media: '',
      onchange: null,
      addListener: vi.fn(),
      removeListener: vi.fn(),
      addEventListener: vi.fn(),
      removeEventListener: vi.fn(),
      dispatchEvent: vi.fn(),
    }));

    if (!HTMLElement.prototype.scrollTo) {
      HTMLElement.prototype.scrollTo = vi.fn();
    }
  });

  it('renders the hero headline', () => {
    render(
      <Packages
        endcustomerPackages={[
          {
            id: 1,
            name: 'Starter',
            slug: 'starter',
            description: 'Desc',
            description_breakdown: [],
            price: 29,
            events: 1,
            features: [],
            limits: { max_photos: 600, max_guests: 100, gallery_days: 180 },
            branding_allowed: false,
            watermark_allowed: false,
          },
          {
            id: 2,
            name: 'Standard',
            slug: 'standard',
            description: 'Desc',
            description_breakdown: [],
            price: 59,
            events: 1,
            features: ['no_watermark'],
            limits: { max_photos: 4000, max_guests: 250, gallery_days: 365 },
            branding_allowed: true,
            watermark_allowed: true,
          },
        ]}
        resellerPackages={[
          {
            id: 3,
            name: 'Agentur',
            slug: 'agency',
            description: 'Desc',
            description_breakdown: [],
            price: 199,
            events: null,
            features: ['reseller_dashboard'],
            limits: { max_events_per_year: 10 },
            included_package_slug: 'standard',
            branding_allowed: true,
            watermark_allowed: true,
          },
        ]}
      />
    );

    expect(screen.getByText('packages.hero_title')).toBeInTheDocument();
  });
});
