import React, { ReactElement } from 'react';
import { render as rtlRender, type RenderOptions } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { MemoryRouter } from 'react-router-dom';
import { SettingsProvider } from '../src/hooks/SettingsProvider';

/**
 * Standardized render utility for frontend tests to ensure all necessary 
 * providers (TanStack Query, Settings, Router, etc.) are present.
 */

interface CustomRenderOptions extends RenderOptions {
  queryClient?: QueryClient;
}

const createTestQueryClient = () => new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      gcTime: 0,
    },
  },
});

const AllTheProviders = ({ children, queryClient }: { children: React.ReactNode; queryClient: QueryClient }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <SettingsProvider>
        <MemoryRouter>
          {children}
        </MemoryRouter>
      </SettingsProvider>
    </QueryClientProvider>
  );
};

const renderWithProviders = (
  ui: ReactElement,
  { queryClient = createTestQueryClient(), ...renderOptions }: CustomRenderOptions = {}
) => {
  const component = (
    <AllTheProviders queryClient={queryClient}>
      {ui}
    </AllTheProviders>
  );

  return { queryClient, ...rtlRender(component, renderOptions) };
};

export * from '@testing-library/react';
export { renderWithProviders, createTestQueryClient };