import React, { type ReactNode } from 'react';
import Keycloak from 'keycloak-js';
import { KeycloakAuthProvider } from '@micahgoodman/auth';
import { supabase } from '../supabaseClient';
import { detectMode, getKeycloakConfig } from './utils';
import type { AppMode } from './types';

interface AuthProviderProps {
  children: ReactNode;
  mode?: AppMode;
}

/**
 * Universal auth provider that automatically selects the appropriate
 * auth strategy based on the app mode
 * 
 * - Standalone mode: Uses KeycloakAuthProvider from @micahgoodman/auth
 * - Library/Embedded SDK mode: No auth provider (consumer provides RemoteAuthProvider)
 */
export function AuthProvider({ children, mode }: AuthProviderProps) {
  const detectedMode = mode || detectMode();

  if (detectedMode === 'standalone') {
    const keycloakConfig = getKeycloakConfig();
    const keycloak = new Keycloak({
      url: keycloakConfig.url,
      realm: keycloakConfig.realm,
      clientId: keycloakConfig.clientId,
    }) as any; // Cast to any to handle keycloak-js type differences

    return (
      <KeycloakAuthProvider
        supabaseClient={supabase}
        keycloakInstance={keycloak}
        onLoad="login-required"
      >
        {children}
      </KeycloakAuthProvider>
    );
  }

  // Library mode and embedded SDK mode - no auth provider needed
  // Consumer provides their own auth context or uses RemoteAuthProvider from @micahgoodman/auth
  return <>{children}</>;
}