e-tib.com/components/layout/LanguageSwitcher.tsx

'use client';

import { TransitionLink } from '@/components/ui/TransitionLink';
import { usePathname } from 'next/navigation';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
import enMessages from '@/messages/en.json';
import deMessages from '@/messages/de.json';

const getMessages = (locale: string) => {
  return locale === 'de' ? deMessages : enMessages;
};

// Synchronous version of mapSlugToFileSlug
function syncMapSlugToFileSlug(translatedSlug: string, locale: string): string {
  const messages = getMessages(locale);
  const slugs = messages.Slugs;

  if (slugs.pages && translatedSlug in slugs.pages) {
    return slugs.pages[translatedSlug as keyof typeof slugs.pages];
  }
  return translatedSlug;
}

// Synchronous version of mapFileSlugToTranslated
function syncMapFileSlugToTranslated(fileSlug: string, locale: string): string {
  const messages = getMessages(locale);
  const slugs = messages.Slugs;

  const sections = [slugs.pages];
  for (const sectionData of sections) {
    if (sectionData && typeof sectionData === 'object') {
      for (const [translatedSlug, mappedSlug] of Object.entries(sectionData)) {
        if (mappedSlug === fileSlug) {
          return translatedSlug;
        }
      }
    }
  }
  return fileSlug;
}

interface LanguageSwitcherProps {
  mobile?: boolean;
  isSolidMode?: boolean;
}

export function LanguageSwitcher({ mobile = false, isSolidMode = false }: LanguageSwitcherProps) {
  const pathname = usePathname() || '/';
  const currentLocale = pathname.startsWith('/en') ? 'en' : 'de';

  const getSwitchedUrl = (newLocale: string) => {
    const segments = pathname.split('/').filter(Boolean);
    if (segments.length === 0) {
      return `/${newLocale}`;
    }

    const currentLoc = segments[0] === 'en' || segments[0] === 'de' ? segments[0] : 'de';
    const hasLocale = segments[0] === 'en' || segments[0] === 'de';
    const pathSegments = hasLocale ? segments.slice(1) : segments;

    if (pathSegments.length === 1) {
      const slug = pathSegments[0];
      const fileSlug = syncMapSlugToFileSlug(slug, currentLoc);
      const translatedSlug = syncMapFileSlugToTranslated(fileSlug, newLocale);
      return `/${newLocale}/${translatedSlug}`;
    }

    return `/${newLocale}/${pathSegments.join('/')}`;
  };

  const locales = [
    { code: 'de', label: 'DE', fullLabel: 'Deutsch', flag: '🇩🇪' },
    { code: 'en', label: 'EN', fullLabel: 'English', flag: '🇬🇧' },
  ] as const;

  if (mobile) {
    return (
      <div className="flex flex-col gap-3">
        {locales.map((loc) => {
          const currentLocObj = locales.find(l => l.code === currentLocale) || locales[0];
          return (
            <TransitionLink
              key={loc.code}
              href={getSwitchedUrl(loc.code)}
              transitionMessage={currentLocale === loc.code ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
              className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 select-none ${
                currentLocale === loc.code
                  ? 'bg-primary/10 text-primary border border-primary/20'
                  : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
              }`}
            >
              <HoverShineOverlay shineColor="via-primary/5" />
              
              <span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
              <span className="relative z-10">{loc.fullLabel}</span>
              {currentLocale === loc.code && (
                <svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              )}
            </TransitionLink>
          );
        })}
      </div>
    );
  }

  // Desktop styles dependent on isSolidMode
  const containerClass = isSolidMode
    ? 'bg-neutral-100 border-neutral-200'
    : 'bg-white/10 backdrop-blur-sm border-white/10';

  return (
    <div className={`group relative overflow-hidden flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
      <HoverShineOverlay shineColor={isSolidMode ? "via-primary/10" : "via-white/20"} />
      
      {locales.map((loc) => {
        const isActive = currentLocale === loc.code;
        
        let linkClass = '';
        if (isActive) {
          linkClass = 'bg-white text-primary shadow-sm';
        } else {
          linkClass = isSolidMode 
            ? 'text-text-secondary hover:text-primary' 
            : 'text-white/90 hover:text-white';
        }

        const currentLocObj = locales.find(l => l.code === currentLocale) || locales[0];

        return (
          <TransitionLink
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            transitionMessage={isActive ? undefined : `LANG_SWITCH:${currentLocObj.flag}:${loc.flag}`}
            className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 select-none ${linkClass}`}
            aria-label={`Switch to ${loc.fullLabel}`}
          >
            <span className="text-sm" aria-hidden="true">{loc.flag}</span>
            <span>{loc.label}</span>
          </TransitionLink>
        );
      })}
    </div>
  );
}