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

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/core', () => ({
  useTheme: () => ({
    color: { val: '#111827' },
    gray: { val: '#4b5563' },
    borderColor: { val: '#e5e7eb' },
    blue3: { val: '#FFE5EC' },
    blue6: { val: '#FFB6C1' },
    red10: { val: '#b91c1c' },
    surface: { val: '#ffffff' },
    gray12: { val: '#0f172a' },
  }),
}));

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

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

vi.mock('../components/FormControls', () => ({
  MobileField: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  MobileInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
  MobileSelect: ({
    children,
    compact,
    ...props
  }: {
    children: React.ReactNode;
    compact?: boolean;
  }) => <select {...props}>{children}</select>,
}));

describe('LimitWarnings', () => {
  it('renders a single checkout button when add-on selection is available', () => {
    const limits = {
      photos: {
        limit: 100,
        used: 100,
        remaining: 0,
        percentage: 100,
        state: 'limit_reached' as const,
        threshold_reached: null,
        next_threshold: null,
        thresholds: [],
      },
      guests: null,
      gallery: null,
      can_upload_photos: false,
      can_add_guests: true,
    };

    const addons = [
      {
        key: 'extra_photos_500',
        label: 'Extra photos',
        price_id: 'pri_addon_photos',
      },
    ];

    const { getAllByRole } = render(
      <LimitWarnings
        limits={limits}
        addons={addons}
        onCheckout={vi.fn()}
        busyScope={null}
        translate={(key) => key}
        textColor="#111827"
        borderColor="#e5e7eb"
      />,
    );

    expect(getAllByRole('button')).toHaveLength(1);
  });
});