import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { ScrollArea } from '../../ui/scroll-area';
import BackButton from '../../ui/BackButton';
import ProviderGrid from './ProviderGrid';
import { useConfig } from '../../ConfigContext';
import { ProviderDetails } from '../../../api';
import { createNavigationHandler } from '../../../utils/navigationUtils';
import { defineMessages, useIntl } from '../../../i18n';

const i18n = defineMessages({
  otherProviders: {
    id: 'providerSettings.otherProviders',
    defaultMessage: 'Other providers',
  },
  configurationSettings: {
    id: 'providerSettings.configurationSettings',
    defaultMessage: 'Provider Configuration Settings',
  },
  onboardingDescription: {
    id: 'providerSettings.onboardingDescription',
    defaultMessage:
      "Select an AI model provider to get started with goose. You'll need to use API keys generated by each provider which will be encrypted and stored locally. You can change your provider at any time in settings.",
  },
  loadingProviders: {
    id: 'providerSettings.loadingProviders',
    defaultMessage: 'Loading providers...',
  },
});

interface ProviderSettingsProps {
  onClose: () => void;
  isOnboarding: boolean;
  onProviderLaunched?: (model?: string) => void;
}

export default function ProviderSettings({
  onClose,
  isOnboarding,
  onProviderLaunched,
}: ProviderSettingsProps) {
  const intl = useIntl();
  const { getProviders } = useConfig();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [providers, setProviders] = useState<ProviderDetails[]>([]);
  const initialLoadDone = useRef(false);

  const setView = useMemo(() => createNavigationHandler(navigate), [navigate]);

  // Create a function to load providers that can be called multiple times
  const loadProviders = useCallback(async () => {
    setLoading(true);
    try {
      // Only force refresh when explicitly requested, not on initial load
      const result = await getProviders(!initialLoadDone.current);
      if (result) {
        setProviders(result);
        initialLoadDone.current = true;
      }
    } catch (error) {
      console.error('Failed to load providers:', error);
    } finally {
      setLoading(false);
    }
  }, [getProviders]);

  // Load providers only once when component mounts
  useEffect(() => {
    loadProviders();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Intentionally not including loadProviders in deps to prevent reloading

  // This function will be passed to ProviderGrid for manual refreshes after config changes
  const refreshProviders = useCallback(async () => {
    if (initialLoadDone.current) {
      const result = await getProviders(true);
      if (result) setProviders(result);
    }
  }, [getProviders]);

  return (
    <div className="h-screen w-full flex flex-col bg-background-primary text-text-primary">
      <ScrollArea className="flex-1 w-full">
        <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-12 pb-4">
          {/* Consistent header pattern with back button */}
          <div className="flex flex-col pb-8 border-b border-border-primary">
            <div className="flex items-center pt-2 mb-1 no-drag">
              <BackButton onClick={onClose} />
            </div>
            <h1 className="text-4xl font-light mb-4 pt-6" data-testid="provider-selection-heading">
              {isOnboarding
                ? intl.formatMessage(i18n.otherProviders)
                : intl.formatMessage(i18n.configurationSettings)}
            </h1>
            {isOnboarding && (
              <p className="text-sm sm:text-base text-text-secondary max-w-full sm:max-w-2xl">
                {intl.formatMessage(i18n.onboardingDescription)}
              </p>
            )}
          </div>
        </div>

        <div className="py-8 pt-[20px]">
          {/* Content Area */}
          <div className="w-full max-w-6xl mx-auto pt-4 px-4 sm:px-6 md:px-8">
            <div className="relative z-10">
              {loading ? (
                <div>{intl.formatMessage(i18n.loadingProviders)}</div>
              ) : (
                <ProviderGrid
                  providers={providers}
                  isOnboarding={isOnboarding}
                  refreshProviders={refreshProviders}
                  setView={setView}
                  onModelSelected={onProviderLaunched}
                />
              )}
            </div>
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}
