'use client';

import { useTransition } from 'react';

import { Locale, useLocale } from 'next-intl';
import { useParams, useSearchParams } from 'next/navigation';

import { type AppLocale, appLocales } from '@/config/i18n';
import { useLocaleSwitchOverrides } from '@/contexts/LocaleSwitchContext';
import { usePathname, useRouter } from '@/i18n/navigation';

// todo flags

const LangSelector: React.FC = () => {
  const locale = useLocale();
  const router = useRouter();
  const [, startTransition] = useTransition();
  const pathname = usePathname();
  const params = useParams();
  const searchParams = useSearchParams();
  const overrides = useLocaleSwitchOverrides();
  const handleLocaleChange = (newLocale: string) => {
    const nextLocale = newLocale as Locale;
    const query = Object.fromEntries(searchParams.entries());

    // Routes keyed by a locale-specific slug register a per-locale href; reusing
    // the current slug would point the other language at the wrong record.
    const override = overrides?.[nextLocale as AppLocale];
    const target = override
      ? { pathname: override.pathname, params: override.params, query }
      : { pathname, params, query };

    startTransition(() => {
      router.replace(
        // @ts-expect-error -- TypeScript validates params for the active route,
        // so the runtime combination here is safe.
        target,
        { locale: nextLocale }
      );
    });
  };

  return (
    <div className="flex items-center border border-[#151720]/15 bg-white shadow-sm">
      {appLocales.map((candidate) => {
        const isActive = locale === candidate;
        const baseClasses =
          'tracking-[0.2em] px-3 xl:px-4 py-2 transition font-roboto font-bold uppercase xl:text-base border border-transparent lg:max-xl:px-2 lg:max-xl:py-1.5 lg:max-xl:text-sm lg:max-xl:tracking-[0.14em]';
        const stateClasses = isActive ? 'bg-[#151720] text-white' : 'bg-white text-[#151720]/70';
        const hoverClass = !isActive ? ' hover:bg-[#f4f3ef]' : '';

        return (
          <button
            key={candidate}
            className={`${baseClasses} ${stateClasses}${hoverClass}`}
            onClick={() => handleLocaleChange(candidate)}
            title="Nyelv váltása"
          >
            {candidate.toUpperCase()}
          </button>
        );
      })}
    </div>
  );
};

export default LangSelector;