import { Link } from '@/i18n/navigation';
import { locales, Locale } from '@/i18n/locales';
import { getTranslations } from 'next-intl/server';

// Map locales to flag emojis
const flagEmojis: Record<Locale, string> = {
    en: '🇬🇧',
    tr: '🇹🇷'
};

type Props = {
    locale: string;
    className?: string;
    pathname?: string; // Optional pathname to navigate to
};

/**
 * Server Component for switching locales
 * Uses the Link component from next-intl/navigation
 * Renders as a dropdown that excludes the current language
 */
export default async function LocaleSwitcherServer({ locale, className = '', pathname }: Props) {
    const t = await getTranslations({ locale: locale as Locale, namespace: 'Index' });

    // Use the provided pathname or default to the current route
    let pathWithoutLocale = pathname || '/home';

    // If we're on a locale-prefixed route like /en/home or /tr/about, 
    // extract just the path part without the locale prefix
    if (pathWithoutLocale.startsWith(`/${locale}/`)) {
        pathWithoutLocale = pathWithoutLocale.substring(locale.length + 1);
    } else if (pathWithoutLocale.startsWith('/')) {
        // If it already starts with /, keep it as is
    } else {
        // Ensure it starts with /
        pathWithoutLocale = `/${pathWithoutLocale}`;
    }

    // Filter out the current locale from the available options
    const availableLocales = locales.filter(lang => lang !== locale);

    return (
        <div className={`relative inline-block ${className}`}>
            <div className="group">
                <button type="button" className="inline-flex justify-center items-center w-12 h-8 rounded-md border border-gray-300 px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" title={locale.toUpperCase()}>
                    <span className="text-lg">{flagEmojis[locale as Locale]}</span>
                    <svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
                <div className="hidden group-hover:block mt-2 w-12 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
                    <div className="py-1" role="menu" aria-orientation="vertical">
                        {availableLocales.map((lang) => (
                            <Link
                                key={lang}
                                href={pathWithoutLocale}
                                locale={lang}
                                className="flex items-center justify-center px-2 py-1 text-lg hover:bg-gray-100"
                                role="menuitem"
                                title={lang.toUpperCase()}
                            >
                                {flagEmojis[lang]}
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}