'use client'

import { useRouter, usePathname } from 'next/navigation'
import { useCallback } from 'react'
import { getPublicSiteDictionary, type PublicSiteLanguage } from '@/lib/i18n'

interface VehicleFiltersProps {
  language: PublicSiteLanguage
  categories: string[]
  transmissions: string[]
  maxPossiblePrice: number
  current: {
    category: string
    transmission: string
    maxPrice: string
  }
}

export default function VehicleFilters({
  language,
  categories,
  transmissions,
  maxPossiblePrice,
  current,
}: VehicleFiltersProps) {
  const dict = getPublicSiteDictionary(language)
  const router = useRouter()
  const pathname = usePathname()

  const update = useCallback(
    (key: string, value: string) => {
      const params = new URLSearchParams()
      const next = { ...current, [key]: value }
      if (next.category) params.set('category', next.category)
      if (next.transmission) params.set('transmission', next.transmission)
      if (next.maxPrice) params.set('maxPrice', next.maxPrice)
      const qs = params.toString()
      router.push(qs ? `${pathname}?${qs}` : pathname)
    },
    [current, router, pathname],
  )

  const hasFilters = current.category || current.transmission || current.maxPrice

  return (
    <div className="card p-5 space-y-6">
      <div className="flex items-center justify-between">
        <h2 className="font-semibold text-slate-900">{dict.vehicles.filters.title}</h2>
        {hasFilters && (
          <button
            onClick={() => router.push(pathname)}
            className="text-xs font-medium text-sky-700 hover:underline"
          >
            {dict.vehicles.filters.clearAll}
          </button>
        )}
      </div>

      <fieldset>
        <legend className="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">
          {dict.vehicles.filters.category}
        </legend>
        <div className="space-y-1.5">
          {categories.map((cat) => (
            <label key={cat} className="flex cursor-pointer items-center gap-2.5 text-sm text-slate-700">
              <input
                type="radio"
                name="category"
                value={cat}
                checked={current.category === cat}
                onChange={() => update('category', current.category === cat ? '' : cat)}
                className="accent-sky-600"
              />
              <span>{cat}</span>
            </label>
          ))}
        </div>
      </fieldset>

      <fieldset>
        <legend className="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">
          {dict.vehicles.filters.transmission}
        </legend>
        <div className="space-y-1.5">
          {transmissions.map((tx) => (
            <label key={tx} className="flex cursor-pointer items-center gap-2.5 text-sm text-slate-700">
              <input
                type="radio"
                name="transmission"
                value={tx}
                checked={current.transmission === tx}
                onChange={() => update('transmission', current.transmission === tx ? '' : tx)}
                className="accent-sky-600"
              />
              <span>{tx}</span>
            </label>
          ))}
        </div>
      </fieldset>

      {maxPossiblePrice > 0 && (
        <fieldset>
          <legend className="mb-2 text-xs font-semibold uppercase tracking-[0.12em] text-slate-500">
            {dict.vehicles.filters.maxPricePerDay}
          </legend>
          <input
            type="range"
            min={0}
            max={maxPossiblePrice}
            step={50}
            value={current.maxPrice || maxPossiblePrice}
            onChange={(e) =>
              update('maxPrice', e.target.value === String(maxPossiblePrice) ? '' : e.target.value)
            }
            className="w-full accent-sky-600"
          />
          <p className="mt-1 text-sm text-slate-600">
            {dict.vehicles.filters.upTo}{' '}
            <span className="font-semibold text-slate-900">
              {current.maxPrice ? `${Number(current.maxPrice).toLocaleString()} MAD` : `${maxPossiblePrice.toLocaleString()} MAD`}
            </span>
          </p>
        </fieldset>
      )}
    </div>
  )
}
