/* eslint-disable react/prop-types */
import React, { useState, useRef, useEffect } from "react";
import { HIGHLIGHT_COLOR } from "../Colors.js";

export function HorizontalSlider({
  value = 50,
  onChange,
  min = 0,
  max = 100,
  showFill = false,
}) {
  //   const [localValue, setLocalValue] = useState(value);
  const [percentage, setPercentage] = useState(
    ((value - min) / (max - min)) * 100
  );
  const sliderRef = useRef(null);
  const isDragging = useRef(false);

  useEffect(() => {
    setPercentage(((value - min) / (max - min)) * 100);
  }, [value, min, max]);

  const handleMouseDown = (e) => {
    isDragging.current = true;
    updateValue(e.clientX);
    e.preventDefault();
  };

  const updateValue = (clientX) => {
    if (!sliderRef.current) return;

    const rect = sliderRef.current.getBoundingClientRect();
    const percentage = Math.max(
      0,
      Math.min(100, ((clientX - rect.left) / rect.width) * 100)
    );
    const newValue = min + (percentage / 100) * (max - min);

    // setLocalValue(newValue);
    onChange?.(newValue);
  };

  useEffect(() => {
    const handleMouseMove = (e) => {
      if (!isDragging.current) return;
      updateValue(e.clientX);
    };

    const handleMouseUp = () => {
      isDragging.current = false;
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, []);

  return (
    <div className="relative w-64 h-10">
      <div
        ref={sliderRef}
        className="absolute top-1/2 -translate-y-1/2 w-full h-8 bg-[#1a1a1a] border-2 border-[#2a2a2a] rounded-full cursor-pointer select-none shadow-[inset_0_2px_8px_rgba(0,0,0,0.5),inset_0_-1px_3px_rgba(255,255,255,0.03)] overflow-hidden"
        onMouseDown={handleMouseDown}
      >
        {/* Diffused top highlight for track */}
        <div className="absolute -top-1 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.06] via-white/[0.015] to-transparent rounded-full pointer-events-none blur-[2px]" />

        {showFill && (
          <div
            className={`absolute left-0 top-0 h-full bg-primary rounded-full shadow-primary/40 shadow-[0_0_8px]`}
            style={{ width: `${percentage}%` }}
          />
        )}
      </div>

      {/* Thumb outside the track container */}
      <div
        className="absolute top-1/2 -translate-y-1/2 w-10 h-10 bg-[#2a2a2a] border-2 border-[#3a3a3a] rounded-full shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-1px_4px_rgba(255,255,255,0.05),inset_0_2px_4px_rgba(0,0,0,0.3)] overflow-hidden pointer-events-none"
        style={{ left: `calc(${percentage}% - 20px)` }}
      >
        <div className="absolute -top-1 left-0 right-0 h-3/4 bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent rounded-full pointer-events-none blur-[2px]" />
      </div>
    </div>
  );
}
