'use client';

import React, { useState, useEffect, useMemo } from 'react';
import { LOCALE_CONFIG, filterPseudoLocales, type SupportedLocale } from '@alga-psa/core/i18n/config';
import { updateClientLocaleAction, getClientLocaleAction } from '@alga-psa/clients/actions';
import { toast } from 'react-hot-toast';
import { handleError } from '@alga-psa/ui/lib/errorHandling';
import CustomSelect, { SelectOption } from '@alga-psa/ui/components/CustomSelect';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

interface ClientLanguagePreferenceProps {
  /** Client ID */
  clientId: string;
  /** Client name for display */
  clientName?: string;
  /** Whether to show as a card with title */
  showCard?: boolean;
  /** Additional CSS classes */
  className?: string;
  /** Callback after successful save */
  onSave?: (locale: SupportedLocale) => void;
}

/**
 * Language preference component for admin pages (without i18n dependency)
 * This sets the default language for all contacts from a client
 */
export function ClientLanguagePreference({
  clientId,
  clientName,
  showCard = false,
  className = '',
  onSave,
}: ClientLanguagePreferenceProps) {
  const { t } = useTranslation('msp/clients');
  const [currentLocale, setCurrentLocale] = useState<SupportedLocale | undefined>();
  const [loading, setLoading] = useState(true);
  const [isChanging, setIsChanging] = useState(false);

  const visibleLocales = useMemo(
    () => filterPseudoLocales(LOCALE_CONFIG.supportedLocales),
    [],
  );

  const languageOptions = useMemo((): SelectOption[] => {
    return visibleLocales.map((locale) => ({
      value: locale,
      label: `${LOCALE_CONFIG.localeNames[locale]} (${locale.toUpperCase()})`,
    }));
  }, [visibleLocales]);

  useEffect(() => {
    const loadClientLocale = async () => {
      try {
        const locale = await getClientLocaleAction(clientId);
        if (locale) {
          setCurrentLocale(locale);
        }
      } catch (error) {
        console.error('Failed to load client language preference:', error);
      } finally {
        setLoading(false);
      }
    };

    loadClientLocale();
  }, [clientId]);

  const handleLanguageChange = async (newLocale: string) => {
    const locale = newLocale as SupportedLocale;

    if (locale === currentLocale) return;

    setIsChanging(true);
    try {
      await updateClientLocaleAction(clientId, locale);
      setCurrentLocale(locale);
      toast.success(t('clientLanguagePreference.saveSuccess', {
        defaultValue: 'Default language for {{clientName}} contacts updated to {{language}}',
        clientName: clientName || t('clientLanguagePreference.thisClient', { defaultValue: 'client' }),
        language: LOCALE_CONFIG.localeNames[locale]
      }));
      onSave?.(locale);
    } catch (error) {
      handleError(error, t('clientLanguagePreference.saveError', { defaultValue: 'Failed to update client language preference' }));
    } finally {
      setIsChanging(false);
    }
  };

  const content = (
    <div className={className}>
      <CustomSelect
        id={`client-${clientId}-language`}
        label={t('clientLanguagePreference.label', { defaultValue: 'Default Language for Contacts' })}
        options={languageOptions}
        value={currentLocale || ''}
        onValueChange={handleLanguageChange}
        disabled={loading || isChanging}
        placeholder={t('clientLanguagePreference.selectPlaceholder', { defaultValue: 'Select a language' })}
        data-automation-id={`client-${clientId}-language-select`}
      />
      <p className="mt-1 text-sm text-gray-500">
        {t('clientLanguagePreference.description', {
          defaultValue: 'Applies to every portal user from {{clientName}} unless they have set their own preference in their profile.',
          clientName: clientName || t('clientLanguagePreference.thisClient', { defaultValue: 'this client' })
        })}
      </p>
      {isChanging && (
        <p className="mt-2 text-sm text-gray-500">{t('clientLanguagePreference.updating', { defaultValue: 'Updating language preference...' })}</p>
      )}
    </div>
  );

  if (showCard) {
    return (
      <div className={`bg-white rounded-lg border border-gray-200 p-6 ${className}`}>
        <h3 className="text-lg font-medium text-gray-900 mb-2">
          {t('clientLanguagePreference.title', { defaultValue: 'Client Language Settings' })}
        </h3>
        <p className="text-sm text-gray-600 mb-4">
          {t('clientLanguagePreference.cardDescription', {
            defaultValue: 'Set the default language for all contacts in {{clientName}}.',
            clientName: clientName || t('clientLanguagePreference.thisClient', { defaultValue: 'this client' })
          })}
        </p>
        {content}
      </div>
    );
  }

  return content;
}
