'use client'

import { useState, useEffect } from 'react'
import { useTranslations } from 'next-intl'
import { useCurrencyStore } from '@/store/currencyStore'

interface PriceRangeFilterProps {
  min: number
  max: number
  step?: number
  values: [number, number]
  onChange: (values: [number, number]) => void
}

export default function PriceRangeFilter({
  min,
  max,
  step = 10,
  values,
  onChange,
}: PriceRangeFilterProps) {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Filters')
  const [localValues, setLocalValues] = useState<[number, number]>(values)

  useEffect(() => {
    setLocalValues(values)
  }, [values])

  const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Math.min(Number(e.target.value), localValues[1] - step)
    setLocalValues([value, localValues[1]])
  }

  const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = Math.max(Number(e.target.value), localValues[0] + step)
    setLocalValues([localValues[0], value])
  }

  const applyPriceRange = () => {
    onChange(localValues)
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between text-sm text-gray-custom">
        <span>{formatAmount(localValues[0])}</span>
        <span>{formatAmount(localValues[1])}</span>
      </div>
      
      <div className="relative h-1 bg-gray-200 rounded-full">
        <div 
          className="absolute h-1 bg-gradient-primary rounded-full"
          style={{
            left: `${((localValues[0] - min) / (max - min)) * 100}%`,
            right: `${100 - ((localValues[1] - min) / (max - min)) * 100}%`
          }}
        />
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={localValues[0]}
          onChange={handleMinChange}
          className="absolute w-full -top-1 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md"
        />
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={localValues[1]}
          onChange={handleMaxChange}
          className="absolute w-full -top-1 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md"
        />
      </div>
      
      <div className="flex gap-3">
        <input
          type="number"
          value={localValues[0]}
          onChange={(e) => setLocalValues([Number(e.target.value), localValues[1]])}
          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          placeholder={t('min')}
        />
        <input
          type="number"
          value={localValues[1]}
          onChange={(e) => setLocalValues([localValues[0], Number(e.target.value)])}
          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none"
          placeholder={t('max')}
        />
      </div>
      
      <button
        onClick={applyPriceRange}
        className="w-full bg-gradient-primary text-white py-2 rounded-lg text-sm font-medium hover:opacity-90 transition"
      >
        {t('applyPrice')}
      </button>
    </div>
  )
}