import React from 'react';
import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
import { render, waitFor } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';

const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
const originalResizeObserver = globalThis.ResizeObserver;

vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (_key: string, fallback?: string) => fallback ?? _key,
  }),
}));

vi.mock('@tamagui/stacks', () => ({
  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
}));

vi.mock('@tamagui/text', () => ({
  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
}));

vi.mock('@tamagui/react-native-web-lite', () => ({
  Pressable: ({ children, onPress, ...props }: { children: React.ReactNode; onPress?: () => void }) => (
    <button type="button" onClick={onPress} {...props}>
      {children}
    </button>
  ),
}));

vi.mock('../../theme', () => ({
  useAdminTheme: () => ({
    primary: '#FF5A5F',
    muted: '#6b7280',
    glassSurfaceStrong: 'rgba(255,255,255,0.9)',
    surfaceMuted: '#f8fafc',
    surface: '#ffffff',
    glassBorder: 'rgba(229,231,235,0.7)',
    border: '#e5e7eb',
    glassShadow: 'rgba(15,23,42,0.14)',
    shadow: 'rgba(0,0,0,0.12)',
  }),
}));

vi.mock('../../../constants', () => ({
  adminPath: (path: string) => path,
}));

import { BottomNav } from '../BottomNav';

describe('BottomNav', () => {
  beforeEach(() => {
    HTMLElement.prototype.getBoundingClientRect = () =>
      ({
        x: 0,
        y: 0,
        width: 0,
        height: 84,
        top: 0,
        left: 0,
        right: 0,
        bottom: 84,
        toJSON: () => ({}),
      }) as DOMRect;

    (globalThis as unknown as { ResizeObserver: typeof ResizeObserver }).ResizeObserver = class {
      private callback: () => void;

      constructor(callback: () => void) {
        this.callback = callback;
      }

      observe() {
        this.callback();
      }

      disconnect() {}
    };

    document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
  });

  afterEach(() => {
    HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
    document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
    if (originalResizeObserver) {
      globalThis.ResizeObserver = originalResizeObserver;
    } else {
      delete (globalThis as unknown as { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
    }
  });

  it('sets the admin bottom nav offset CSS variable', async () => {
    render(
      <MemoryRouter initialEntries={['/mobile/profile']}>
        <BottomNav active="profile" onNavigate={() => undefined} />
      </MemoryRouter>
    );

    await waitFor(() => {
      expect(document.documentElement.style.getPropertyValue('--admin-bottom-nav-offset')).toBe('84px');
    });
  });
});