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

const navigateMock = vi.fn();

const tMock = (
  _key: string,
  fallback?: string | Record<string, unknown>,
  options?: Record<string, unknown>,
) => {
  let value = typeof fallback === 'string' ? fallback : _key;
  if (options) {
    Object.entries(options).forEach(([key, val]) => {
      value = value.replaceAll(`{{${key}}}`, String(val));
    });
  }
  return value;
};

vi.mock('react-router-dom', () => ({
  useNavigate: () => navigateMock,
}));

vi.mock('react-i18next', () => ({
  useTranslation: () => ({ t: tMock }),
  initReactI18next: {
    type: '3rdParty',
    init: () => undefined,
  },
}));

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

vi.mock('../theme', () => ({
  useAdminTheme: () => ({
    textStrong: '#111827',
    text: '#111827',
    muted: '#6b7280',
    border: '#e5e7eb',
    danger: '#b91c1c',
  }),
}));

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

vi.mock('../components/Primitives', () => ({
  MobileCard: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CTAButton: ({ label, onPress }: { label: string; onPress?: () => void }) => (
    <button type="button" onClick={onPress}>
      {label}
    </button>
  ),
  PillBadge: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
  SkeletonCard: () => <div>Loading...</div>,
}));

vi.mock('../components/FormControls', () => ({
  MobileSelect: ({ children, ...props }: { children: React.ReactNode }) => (
    <select {...props}>{children}</select>
  ),
}));

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

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

vi.mock('@tamagui/switch', () => ({
  Switch: Object.assign(
    ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
    { Thumb: () => <div /> },
  ),
}));

vi.mock('@tamagui/react-native-web-lite', () => ({
  Pressable: ({
    children,
    onPress,
    ...rest
  }: {
    children: React.ReactNode;
    onPress?: () => void;
    [key: string]: unknown;
  }) => (
    <button type="button" onClick={onPress} {...rest}>
      {children}
    </button>
  ),
  FlatList: ({ data = [], renderItem }: { data?: unknown[]; renderItem?: (info: any) => React.ReactNode }) => (
    <div>{renderItem ? data.map((item, index) => renderItem({ item, index })) : null}</div>
  ),
}));

vi.mock('../../api', () => ({
  listTenantDataExports: vi.fn().mockResolvedValue([]),
  getEvents: vi.fn().mockResolvedValue([]),
  requestTenantDataExport: vi.fn(),
  downloadTenantDataExport: vi.fn(),
}));

import MobileDataExportsPage from '../DataExportsPage';

describe('MobileDataExportsPage', () => {
  it('renders account scope label', async () => {
    render(<MobileDataExportsPage />);

    expect(await screen.findByText('Account')).toBeInTheDocument();
  });
});