import { Slider } from '@/components/ui/slider';
import { Input } from '@/components/ui/input';
import { useEffect, useState } from 'react';

interface AppPriceRangeFilterProps {
    min: number;
    max: number;
    valueMin: number | '';
    valueMax: number | '';
    onChange: (min: number | '', max: number | '') => void;
}

export default function AppPriceRangeFilter({ min, max, valueMin, valueMax, onChange }: AppPriceRangeFilterProps) {
    const effectiveMin = valueMin === '' ? min : valueMin;
    const effectiveMax = valueMax === '' ? max : valueMax;

    const [localMin, setLocalMin] = useState<number>(effectiveMin as number);
    const [localMax, setLocalMax] = useState<number>(effectiveMax as number);

    // Sync when external value resets (e.g. clear all)
    useEffect(() => {
        setLocalMin(valueMin === '' ? min : (valueMin as number));
        setLocalMax(valueMax === '' ? max : (valueMax as number));
    }, [valueMin, valueMax, min, max]);

    const handleSliderChange = (values: number[]) => {
        setLocalMin(values[0]);
        setLocalMax(values[1]);
        onChange(values[0], values[1]);
    };

    const handleMinInput = (raw: string) => {
        const n = parseFloat(raw);
        if (isNaN(n)) return;
        const clamped = Math.min(n, localMax);
        setLocalMin(clamped);
        onChange(clamped, localMax);
    };

    const handleMaxInput = (raw: string) => {
        const n = parseFloat(raw);
        if (isNaN(n)) return;
        const clamped = Math.max(n, localMin);
        setLocalMax(clamped);
        onChange(localMin, clamped);
    };

    return (
        <div className="space-y-4">
            <Slider
                min={min}
                max={max}
                step={1}
                value={[localMin, localMax]}
                onValueChange={handleSliderChange}
                className="mt-1"
            />
            <div className="flex items-center gap-2">
                <div className="flex flex-1 flex-col gap-1">
                    <span className="text-xs text-muted-foreground">Min</span>
                    <Input
                        type="number"
                        min={min}
                        max={localMax}
                        value={localMin}
                        onChange={(e) => handleMinInput(e.target.value)}
                        className="h-8 text-sm"
                    />
                </div>
                <span className="mt-5 text-muted-foreground">—</span>
                <div className="flex flex-1 flex-col gap-1">
                    <span className="text-xs text-muted-foreground">Max</span>
                    <Input
                        type="number"
                        min={localMin}
                        max={max}
                        value={localMax}
                        onChange={(e) => handleMaxInput(e.target.value)}
                        className="h-8 text-sm"
                    />
                </div>
            </div>
        </div>
    );
}