'use client'

import { useRouter, useSearchParams } from 'next/navigation'
import { getTranslation } from '@/lib/i18n'
import { useLanguage } from '@/lib/LanguageContext'
import type { CategoryNodeDTO } from '@/lib/api/cms'

const AREAS = [
  'conchas-chinas',
  'zona-romantica',
  'emiliano-zapata',
  'alta-vista',
  'sayulita',
  'riviera-nayarit',
] as const

interface Props {
  categories?: CategoryNodeDTO[]
}

export default function RentalFilters({ categories = [] }: Props) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { language } = useLanguage()
  const t = (k: string) => getTranslation(language, k)

  const area = searchParams.get('area') ?? ''
  const minGuests = searchParams.get('minGuests') ?? ''
  const category = searchParams.get('category') ?? ''

  function update(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString())
    if (value) params.set(key, value)
    else params.delete(key)
    router.push(`/${language}/rentals/?${params.toString()}`)
  }

  return (
    <div className="mb-8 flex flex-wrap gap-4">
      {/* Solo aparece si el CMS respondió con categorías: sin ellas el
          catálogo tiene que seguir funcionando, solo sin este filtro. */}
      {categories.length > 0 && (
        <select
          value={category}
          onChange={(e) => update('category', e.target.value)}
          className="rounded-lg border border-gray-300 px-4 py-2 text-sm"
          aria-label={t('rentals.filterCategory')}
        >
          <option value="">
            {t('rentals.filterCategory')}: {t('rentals.filterAll')}
          </option>
          {categories.map((root) => (
            <optgroup key={root.id} label={root.name}>
              <option value={root.slug}>{root.name}</option>
              {root.children.map((child) => (
                <option key={child.id} value={child.slug}>
                  {root.name} › {child.name}
                </option>
              ))}
            </optgroup>
          ))}
        </select>
      )}

      <select
        value={area}
        onChange={(e) => update('area', e.target.value)}
        className="rounded-lg border border-gray-300 px-4 py-2 text-sm"
        aria-label={t('rentals.filterArea')}
      >
        <option value="">
          {t('rentals.filterArea')}: {t('rentals.filterAll')}
        </option>
        {AREAS.map((a) => {
          const key = `rentals.areas.${a}`
          const label = t(key)
          // getTranslation devuelve la propia key cuando no encuentra la
          // traducción. Caemos al slug antes que mostrar `rentals.areas.x`.
          return (
            <option key={a} value={a}>
              {label === key ? a : label}
            </option>
          )
        })}
      </select>

      <select
        value={minGuests}
        onChange={(e) => update('minGuests', e.target.value)}
        className="rounded-lg border border-gray-300 px-4 py-2 text-sm"
        aria-label={t('rentals.filterGuests')}
      >
        <option value="">
          {t('rentals.filterGuests')}: {t('rentals.filterAll')}
        </option>
        <option value="2">2+</option>
        <option value="4">4+</option>
        <option value="6">6+</option>
        <option value="8">8+</option>
      </select>
    </div>
  )
}