'use client'

import i18nConfig from '@/i18nConfig'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect, useTransition } from 'react'
import { Globe } from 'lucide-react'

export function LanguageSwitcher() {
  const router = useRouter()
  const pathname = usePathname()
  const [isPending, startTransition] = useTransition()

  const currentLocale = pathname.split('/')[1] || i18nConfig.defaultLocale

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('preferred-language')
      console.log('[LanguageSwitcher] currentLocale:', currentLocale)
      console.log('[LanguageSwitcher] saved preferred-language:', saved)

      if (!saved || saved !== currentLocale) {
        localStorage.setItem('preferred-language', currentLocale)
        console.log('[LanguageSwitcher] preferred-language updated to:', currentLocale)
      }
    }
  }, [currentLocale])

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newLocale = e.target.value
    console.log('[LanguageSwitcher] User selected newLocale:', newLocale)
    console.log('[LanguageSwitcher] Current pathname:', pathname)

    if (typeof window !== 'undefined') {
      localStorage.setItem('preferred-language', newLocale)
      console.log('[LanguageSwitcher] Saved newLocale to localStorage')
    }

    const segments = pathname.split('/')
    console.log('[LanguageSwitcher] Segments before change:', segments)

    const localeList = [...i18nConfig.locales] as string[]
    const isLocaleInPath = localeList.includes(segments[1])
    console.log('[LanguageSwitcher] isLocaleInPath:', isLocaleInPath)

    if (isLocaleInPath) {
      segments[1] = newLocale
    } else {
      segments.unshift(newLocale)
    }

    const newPath = segments.join('/')
    console.log('[LanguageSwitcher] Final newPath:', newPath)

    startTransition(() => {
      router.push(newPath)
      router.refresh()
    })
  }

  return (
    <div className="absolute top-4 right-4 z-50 flex items-center gap-2">
      <Globe size={18} className="text-muted-foreground" />
      <select
        className="rounded-md border px-2 py-1 text-sm bg-background text-foreground"
        value={currentLocale}
        onChange={handleChange}
        disabled={isPending}
      >
        {i18nConfig.locales.map(locale => (
          <option key={locale} value={locale}>
            {i18nConfig.languageNames[locale] || locale.toUpperCase()}
          </option>
        ))}
      </select>
    </div>
  )
}