'use client'

import { useState } from 'react'
import { Globe } from 'lucide-react'
import { useLanguage } from '@/lib/LanguageContext'
import type { Language } from '@/lib/i18n'
import { usePathname, useRouter } from 'next/navigation'

export default function LanguageSelector({ scrolled }: { scrolled: boolean }) {
  const { language } = useLanguage()
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()
  const router = useRouter()

  const languages: { code: Language; label: string }[] = [
    { code: 'en', label: 'EN' },
    { code: 'es', label: 'ES' },
    { code: 'fr', label: 'FR' },
  ]

  const switchLanguage = (newLang: Language) => {
    setIsOpen(false)
    if (newLang === language) return

    // Replace the language segment in the URL
    // e.g., /en/buy -> /es/buy
    // e.g., /en -> /es
    const segments = pathname?.split('/') || []
    if (segments.length > 1) {
      segments[1] = newLang
      router.push(segments.join('/'))
    } else {
      router.push(`/${newLang}`)
    }
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={(e) => { e.stopPropagation(); setIsOpen(!isOpen); }}
        className={`flex items-center gap-2 px-4 py-2 rounded-lg border-2 transition-all ${!scrolled
          ? 'border-white/30 text-white hover:border-white'
          : 'border-brand-accent text-brand-text hover:border-brand-primary'
          }`}
        aria-expanded={isOpen}
        aria-haspopup="listbox"
        aria-label="Select language"
      >
        <Globe size={16} />
        <span className="text-xs font-bold uppercase tracking-widest">{language.toUpperCase()}</span>
      </button>

      {isOpen && (
        <>
          <div className="fixed inset-0 z-[100]" onClick={() => setIsOpen(false)} aria-hidden="true" />
          <div className="absolute top-full right-0 mt-2 bg-white border-2 border-brand-accent rounded-lg shadow-xl z-[101] min-w-[120px] overflow-visible">
            {languages.map((lang) => (
              <button
                key={lang.code}
                onClick={() => switchLanguage(lang.code)}
                className={`w-full text-left px-4 py-3 text-xs font-bold uppercase tracking-widest transition-colors ${language === lang.code
                  ? 'bg-brand-primary text-white'
                  : 'text-brand-text hover:bg-brand-light'
                  }`}
              >
                {lang.label}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  )
}