'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';

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 pathWithoutLocale = pathname.replace(/^\/(en|de)/, '');
    return `/${newLocale}${pathWithoutLocale === '' ? '' : pathWithoutLocale}`;
  };

  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) => (
          <Link
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
              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>
            )}
          </Link>
        ))}
      </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/70 hover:text-white';
        }

        return (
          <Link
            key={loc.code}
            href={getSwitchedUrl(loc.code)}
            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 ${linkClass}`}
            aria-label={`Switch to ${loc.fullLabel}`}
          >
            <span className="text-sm" aria-hidden="true">{loc.flag}</span>
            <span>{loc.label}</span>
          </Link>
        );
      })}
    </div>
  );
}