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

const useEventDataMock = vi.fn();

vi.mock('react-router-dom', () => ({
  useNavigate: () => vi.fn(),
  useLocation: () => ({ pathname: '/e/demo' }),
}));

vi.mock('../context/EventDataContext', () => ({
  useEventData: () => useEventDataMock(),
}));

vi.mock('@/shared/guest/context/NotificationCenterContext', () => ({
  useOptionalNotificationCenter: () => ({ unreadCount: 0 }),
}));

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

vi.mock('../lib/guestTheme', () => ({
  useGuestThemeVariant: () => ({ isDark: false }),
}));

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

vi.mock('@tamagui/button', () => ({
  Button: ({ children, disabled, ...rest }: { children: React.ReactNode; disabled?: boolean }) => (
    <button type="button" disabled={disabled} {...rest}>
      {children}
    </button>
  ),
}));

vi.mock('../components/TopBar', () => ({
  default: () => <div>topbar</div>,
}));

vi.mock('../components/FloatingActionButton', () => ({
  default: () => <div>fab</div>,
}));

vi.mock('../components/CompassHub', () => ({
  default: ({ quadrants }: { quadrants: Array<{ key: string; label: string; disabled?: boolean }> }) => (
    <div>
      {quadrants.map((item) => (
        <button key={item.key} type="button" disabled={item.disabled}>
          {item.label}
        </button>
      ))}
    </div>
  ),
}));

vi.mock('../components/AmbientBackground', () => ({
  default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('../components/NotificationSheet', () => ({
  default: () => null,
}));

vi.mock('../components/SettingsSheet', () => ({
  default: () => null,
}));

vi.mock('../components/GuestAnalyticsNudge', () => ({
  default: () => null,
}));

vi.mock('lucide-react', () => ({
  Sparkles: () => <span>sparkles</span>,
  Share2: () => <span>share</span>,
  Image: () => <span>image</span>,
  Camera: () => <span>camera</span>,
  Settings: () => <span>settings</span>,
  Home: () => <span>home</span>,
  Menu: () => <span>menu</span>,
}));

import AppShell from '../components/AppShell';

describe('AppShell', () => {
  it('disables task link when no active tasks are available', () => {
    useEventDataMock.mockReturnValue({
      tasksEnabled: true,
      hasActiveTasks: false,
      event: { name: 'Demo Event' },
      token: 'demo',
    });

    render(<AppShell><div>content</div></AppShell>);

    expect(screen.getByRole('button', { name: 'Tasks' })).toBeDisabled();
  });

  it('keeps task link enabled when active tasks exist', () => {
    useEventDataMock.mockReturnValue({
      tasksEnabled: true,
      hasActiveTasks: true,
      event: { name: 'Demo Event' },
      token: 'demo',
    });

    render(<AppShell><div>content</div></AppShell>);

    expect(screen.getByRole('button', { name: 'Tasks' })).toBeEnabled();
  });
});