"use client";

import { useId } from "react";
import { toPersianDigits } from "@/lib/to-english-digits";

type RangeSliderProps = {
  id?: string;
  label: string;
  value: number | null;
  onChange: (value: number | null) => void;
  min?: number;
  max?: number;
  optional?: boolean;
  disabled?: boolean;
  className?: string;
};

function formatValue(value: number | null, optional: boolean) {
  if (value === null) {
    return optional ? "—" : toPersianDigits(0);
  }

  return toPersianDigits(value);
}

export function RangeSlider({
  id,
  label,
  value,
  onChange,
  min = 0,
  max = 10,
  optional = false,
  disabled = false,
  className = "",
}: RangeSliderProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const range = max - min;
  const fillPercent =
    value === null ? 0 : range > 0 ? ((value - min) / range) * 100 : 0;

  const handleChange = (nextValue: number) => {
    onChange(nextValue);
  };

  const handleClear = () => {
    if (optional) {
      onChange(null);
    }
  };

  return (
    <div className={`space-y-2 ${className}`}>
      <div className="flex items-center justify-between gap-3">
        <label htmlFor={inputId} className="text-sm font-medium text-foreground">
          {label}
          {optional ? (
            <span className="ms-1 text-xs font-normal text-muted-foreground">
              (اختیاری)
            </span>
          ) : null}
        </label>

        <div className="flex items-center gap-2">
          <span
            className={`inline-flex min-w-8 items-center justify-center rounded-xl px-2 py-1 text-sm font-semibold ${
              value === null
                ? "bg-muted text-muted-foreground"
                : "bg-primary/10 text-primary"
            }`}
            dir="ltr"
          >
            {formatValue(value, optional)}
          </span>

          {optional && value !== null ? (
            <button
              type="button"
              onClick={handleClear}
              disabled={disabled}
              className="text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
            >
              پاک کردن
            </button>
          ) : null}
        </div>
      </div>

      <div className="relative pt-1">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-muted"
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute start-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary/70 transition-[width]"
          style={{ width: `${fillPercent}%` }}
        />

        <input
          id={inputId}
          type="range"
          min={min}
          max={max}
          step={1}
          value={value ?? min}
          disabled={disabled}
          onChange={(event) => handleChange(Number(event.target.value))}
          className="relative z-10 h-8 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:shadow-soft-sm [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-soft-sm"
        />
      </div>

      <div className="flex items-center justify-between text-xs text-muted-foreground">
        <span dir="ltr">{toPersianDigits(min)}</span>
        <span dir="ltr">{toPersianDigits(max)}</span>
      </div>
    </div>
  );
}

export type { RangeSliderProps };