"use client";

import { useState } from 'react';
import { usePathname } from 'next/navigation';
import { Globe, ChevronDown, Check } from 'lucide-react';
import { detectLocale, getAlternates, LOCALES, type Locale } from '@/config/i18nRoutes';

const LABEL: Record<Locale, string> = { fr: 'Français', en: 'English', es: 'Español' };
const SHORT: Record<Locale, string> = { fr: 'FR', en: 'EN', es: 'ES' };

interface Props {
  variant?: 'desktop' | 'mobile';
  lightBg?: boolean;
  scrolled?: boolean;
  /** Localized heading shown above the mobile pills ("Langue"/"Language"/"Idioma"). */
  mobileLabel?: string;
}

/**
 * FR / EN / ES language switcher. Renders nothing when the current page has no
 * translated equivalent (city pages, legal/FR-only pages, blog/reference details).
 */
const LanguageSwitcher = ({ variant = 'desktop', lightBg, scrolled, mobileLabel }: Props) => {
  const pathname = usePathname();
  const triple = getAlternates(pathname);
  const [open, setOpen] = useState(false);

  if (!triple) return null; // no alternative language → hide

  const current = detectLocale(pathname);

  if (variant === 'mobile') {
    return (
      <div className="pt-3 border-t border-border">
        {mobileLabel && (
          <p className="pb-1.5 text-[10px] uppercase tracking-[0.18em] font-semibold text-foreground/35">
            {mobileLabel}
          </p>
        )}
        <div className="flex items-center gap-2">
          {LOCALES.map((loc) => (
            <a
              key={loc}
              href={triple[loc]}
              aria-current={loc === current ? 'true' : undefined}
              className={`px-3.5 py-1.5 rounded-full text-sm font-semibold transition-colors ${
                loc === current
                  ? 'bg-primary/10 text-primary'
                  : 'text-foreground/55 hover:text-primary hover:bg-secondary'
              }`}
            >
              {SHORT[loc]}
            </a>
          ))}
        </div>
      </div>
    );
  }

  const triggerColor = scrolled
    ? 'text-foreground hover:text-primary'
    : lightBg
    ? 'text-foreground/70 hover:text-foreground'
    : 'text-white/90 hover:text-white';

  return (
    <div className="relative" onMouseLeave={() => setOpen(false)}>
      <button
        onClick={() => setOpen((v) => !v)}
        onMouseEnter={() => setOpen(true)}
        className={`flex items-center gap-1.5 text-sm font-medium transition-colors ${triggerColor}`}
        aria-label="Language"
        aria-expanded={open}
      >
        <Globe className="w-4 h-4" />
        <span>{SHORT[current]}</span>
        <ChevronDown className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <div className="absolute top-full right-0 pt-2 z-50">
          <div className="bg-card rounded-xl shadow-[0_10px_40px_rgba(26,42,58,0.12)] border border-border overflow-hidden min-w-[160px] p-1">
            {LOCALES.map((loc) => (
              <a
                key={loc}
                href={triple[loc]}
                className={`flex items-center justify-between gap-3 px-3 py-2 text-sm rounded-lg transition-colors ${
                  loc === current
                    ? 'bg-secondary text-primary font-semibold'
                    : 'text-foreground hover:bg-secondary'
                }`}
              >
                {LABEL[loc]}
                {loc === current && <Check className="w-3.5 h-3.5" />}
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default LanguageSwitcher;