import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import styles from "./CreditsSlider.module.scss";
import clsx from "clsx";
const DEFAULT_TICKS = [
    { label: "0", value: 0 },
    { label: "5k", value: 5000 },
    { label: "10k", value: 10000 },
    { label: "20k", value: 20000 },
    { label: "30k", value: 30000 },
    { label: "40k", value: 40000 },
    { label: "50k", value: 50000 },
    { label: "Custom", value: 60000 },
];
const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
const formatCredits = (value) => {
    if (value >= 1000) {
        const rounded = Math.round(value / 100) / 10; // 12000 -> 12k
        return `${rounded % 1 === 0 ? rounded.toFixed(0) : rounded}K`;
    }
    return value.toString();
};
const CreditsSlider = ({ label = "Credits", value, min = 0, max = 60000, step = 1000, onChange, disabled = false, ticks = DEFAULT_TICKS, }) => {
    const safeMax = Math.max(min + step, max);
    const clampedValue = clamp(value, min, safeMax);
    const sliderRef = useRef(null);
    const [isDragging, setIsDragging] = useState(false);
    const updateFromClientX = useCallback((clientX) => {
        if (!sliderRef.current || disabled)
            return;
        const rect = sliderRef.current.getBoundingClientRect();
        const ratio = rect.width ? (clientX - rect.left) / rect.width : 0;
        const boundedRatio = Math.min(1, Math.max(0, ratio));
        const raw = min + boundedRatio * (safeMax - min);
        const snapped = Math.round(raw / step) * step;
        onChange(clamp(snapped, min, safeMax));
    }, [disabled, min, safeMax, step, onChange]);
    const handleChange = (event) => {
        const raw = Number(event.target.value);
        const snapped = Math.round(raw / step) * step;
        onChange(clamp(snapped, min, safeMax));
    };
    const handleMouseDown = (event) => {
        if (disabled)
            return;
        event.preventDefault();
        setIsDragging(true);
        updateFromClientX(event.clientX);
    };
    useEffect(() => {
        if (!isDragging)
            return;
        const handleMouseMove = (event) => {
            updateFromClientX(event.clientX);
        };
        const handleMouseUp = () => {
            setIsDragging(false);
        };
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);
        return () => {
            document.removeEventListener("mousemove", handleMouseMove);
            document.removeEventListener("mouseup", handleMouseUp);
        };
    }, [isDragging, updateFromClientX]);
    const percentage = ((clampedValue - min) / (safeMax - min || 1)) * 100;
    const compositeClassNames = clsx(styles["credits-slider"], {
        [styles.disabled]: disabled,
    });
    return (_jsxs("div", { className: compositeClassNames, children: [_jsxs("div", { className: styles.header, children: [_jsx("span", { className: styles.label, children: label }), _jsx("span", { className: styles.value, children: formatCredits(clampedValue) })] }), _jsxs("div", { className: styles["track-wrapper"], ref: sliderRef, onMouseDown: handleMouseDown, children: [_jsx("div", { className: styles.track, children: _jsx("div", { className: styles["track-active"], style: { width: `${percentage}%` } }) }), _jsx("div", { className: styles.thumb, style: { left: `${percentage}%` } }), _jsx("input", { type: "range", min: min, max: safeMax, step: step, value: clampedValue, onChange: handleChange, disabled: disabled, className: styles["range-input"] })] }), _jsx("div", { className: styles.ticks, children: ticks.map((tick) => {
                    const tickPct = ((tick.value - min) / (safeMax - min || 1)) * 100;
                    const isCustom = tick.label.toLowerCase() === "custom" || tick.value > safeMax;
                    return (_jsx("div", { className: styles.tick, style: { left: `${tickPct}%` }, children: _jsx("div", { className: clsx(styles["tick-label"], isCustom && styles["tick-label--custom"]), children: tick.label }) }, `${tick.label}-${tick.value}`));
                }) })] }));
};
export default CreditsSlider;
