"use client";

import React, { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";

type RangeFieldProps = {
  fromName: string;
  toName: string;
  label?: string;
  required?: boolean;
  type?: string;
  placeholderFrom?: string;
  placeholderTo?: string;
  className?: string;
  inputClassName?: string;
};

export default function RangeField({
  fromName,
  toName,
  label,
  required,
  type = "text",
  placeholderFrom = "من",
  placeholderTo = "الى",
  className = "",
  inputClassName = "",
}: RangeFieldProps) {
  const [fromRawValue, setFromRawValue] = useState("");
  const [toRawValue, setToRawValue] = useState("");

  const formatWithThousands = (raw: string) => {
    const digitsOnly = raw.replace(/\D/g, "");
    if (!digitsOnly) return "";
    return digitsOnly.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  useEffect(() => {
    if (type === "number") return;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type]);

  const handleNumberKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    const allowed = [
      "Backspace",
      "Tab",
      "ArrowLeft",
      "ArrowRight",
      "Delete",
      "Home",
      "End",
    ];

    if (!/[0-9]/.test(e.key) && !allowed.includes(e.key)) {
      e.preventDefault();
    }
  };

  const handleFromChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (type !== "number") return;
    const raw = e.target.value;
    const digitsOnly = raw.replace(/\D/g, "");
    setFromRawValue(digitsOnly);
  };

  const handleToChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (type !== "number") return;
    const raw = e.target.value;
    const digitsOnly = raw.replace(/\D/g, "");
    setToRawValue(digitsOnly);
  };

  return (
    <div className={`relative ${className}`}>
      <input type="hidden" name={fromName} value={fromRawValue} />
      <input type="hidden" name={toName} value={toRawValue} />

      {label ? (
        <label
          className="px-2 absolute right-3 -top-[25%] bg-white block text-sm text-gray-700 z-1"
        >
          {label}
          {required ? <span className="text-red-500">{"    *"}</span> : null}
        </label>
      ) : null}

      <div className="flex items-center rounded-md border w-full border-input py-1 bg-transparent text-slate-400">
        <div className="relative flex items-center w-full">
          <Input
            required={required}
            placeholder={placeholderFrom}
            type={type === "number" ? "text" : type}
            inputMode={type === "number" ? "numeric" : undefined}
            className={`border-none rounded-none focus-visible:ring-0 text-right w-full bg-transparent shadow-none ${inputClassName}`}
            value={type === "number" ? formatWithThousands(fromRawValue) : undefined}
            onChange={type === "number" ? handleFromChange : undefined}
            onKeyDown={type === "number" ? handleNumberKeyDown : undefined}
          />
        </div>

        <div className="border-l h-6" />

        <div className="relative flex items-center w-full">
          <Input
            placeholder={placeholderTo}
            type={type === "number" ? "text" : type}
            inputMode={type === "number" ? "numeric" : undefined}
            className={`border-none rounded-none focus-visible:ring-0 text-right w-full bg-transparent shadow-none ${inputClassName}`}
            value={type === "number" ? formatWithThousands(toRawValue) : undefined}
            onChange={type === "number" ? handleToChange : undefined}
            onKeyDown={type === "number" ? handleNumberKeyDown : undefined}
          />
        </div>
      </div>
    </div>
  );
}