fotospiel-app/resources/js/admin/components/LanguageSwitcher.tsx

import React from 'react';
import { Check, Languages } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

import i18n from '../i18n';

type SupportedLocale = 'de' | 'en';

const SUPPORTED_LANGUAGES: Array<{ code: SupportedLocale; labelKey: string }> = [
  { code: 'de', labelKey: 'language.de' },
  { code: 'en', labelKey: 'language.en' },
];

function getCsrfToken(): string {
  return document.querySelector<HTMLMetaElement>('meta[name=\"csrf-token\"]')?.content ?? '';
}

async function persistLocale(locale: SupportedLocale): Promise<void> {
  const response = await fetch('/set-locale', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': getCsrfToken(),
      Accept: 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: JSON.stringify({ locale }),
    credentials: 'include',
  });

  if (!response.ok) {
    throw new Error(`locale update failed with status ${response.status}`);
  }
}

export function LanguageSwitcher() {
  const { t } = useTranslation('common');
  const [pendingLocale, setPendingLocale] = React.useState<SupportedLocale | null>(null);

  const currentLocale = (i18n.language || document.documentElement.lang || 'de') as SupportedLocale;

  const changeLanguage = React.useCallback(
    async (locale: SupportedLocale) => {
      if (locale === currentLocale || pendingLocale) {
        return;
      }

      setPendingLocale(locale);
      try {
        await persistLocale(locale);
        await i18n.changeLanguage(locale);
        document.documentElement.setAttribute('lang', locale);
      } catch (error) {
        if (import.meta.env.DEV) {
           
          console.error('Failed to switch language', error);
        }
      } finally {
        setPendingLocale(null);
      }
    },
    [currentLocale, pendingLocale]
  );

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="border-brand-rose-soft text-brand-rose hover:bg-brand-rose-soft/40"
          aria-label={t('app.languageSwitch')}
        >
          <Languages className="mr-2 h-4 w-4" />
          <span className="hidden sm:inline">{t('app.languageSwitch')}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {SUPPORTED_LANGUAGES.map(({ code, labelKey }) => {
          const isActive = currentLocale === code;
          const isPending = pendingLocale === code;

          return (
            <DropdownMenuItem
              key={code}
              onSelect={(event) => {
                event.preventDefault();
                changeLanguage(code);
              }}
              className="flex items-center justify-between gap-3"
              disabled={isPending}
            >
              <span>{t(labelKey)}</span>
              {(isActive || isPending) && <Check className="h-4 w-4 text-brand-rose" />}
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}