"use client"

import * as React from "react"
import { Slider as SliderPrimitive } from "radix-ui"

import { cn } from "../../lib/utils"
import { Input } from "./input"

/**
 * `RangeControl` is the replacement for `@wordpress/components`' `RangeControl` -
 * **2 imports across 2 files**, built on Radix's Slider.
 *
 * AN ADAPTER, NOT A RENAME, ON TWO COUNTS.
 *
 * `onChange` hands back the NUMBER, not an event. Both call sites pass `field.onChange` straight
 * from react-hook-form, which stores whatever it is given - an event object would be stored verbatim
 * and the field would look filled while holding nothing usable.
 *
 * A WORDPRESS RANGE IS NOT JUST A SLIDER. `withInputField` defaults to TRUE, so every one of these
 * already renders a number box beside the rail, and `allowReset` (on both `FhirRange` sliders) adds
 * a Reset button after it. Dropping either would be removing a control people use, not a restyle.
 *
 * `marks` reproduces WP's rule literally: a tick every `step` from `min` to `max`. At `FhirRange`'s
 * 0-100 step 1 that is 101 ticks, which is what ships today.
 *
 * Not reproduced: WP's floating value bubble while dragging. The number field carries the same value
 * permanently, and the bubble is the one piece that needs a second floating layer.
 *
 * `__nextHasNoMarginBottom` and `__next40pxDefaultSize` are deliberately not accepted - meaningless
 * outside WordPress. Call sites drop them.
 */

export interface RangeControlProps {
  label?: React.ReactNode
  help?: React.ReactNode
  /** WP treats `undefined` and `null` alike: nothing chosen yet. */
  value?: number | null
  /** WP's contract: the NUMBER, or `undefined` when reset. */
  onChange?: (value: number | undefined) => void
  min?: number
  max?: number
  step?: number
  disabled?: boolean
  /** Renders the Reset button WP puts after the number field. */
  allowReset?: boolean
  /** A tick every `step` across the rail. */
  marks?: boolean
  /** Fallback shown when `value` is absent. */
  currentInput?: number
  /** Where the handle starts before anything is chosen. */
  initialPosition?: number
  className?: string
}

function clamp(value: number, min: number, max: number) {
  return Math.min(max, Math.max(min, value))
}

function RangeControl({
  label,
  help,
  value,
  onChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  allowReset = false,
  marks = false,
  currentInput,
  initialPosition,
  className,
}: RangeControlProps) {
  // A generated id keeps the label a real `<label for=...>`, the same reasoning as
  // `ui/input-control`. `useId` emits colons, which are not valid in a CSS selector.
  const generated = React.useId().replace(/:/g, "")
  const inputId = `range-control-${generated}`
  const helpId = help ? `${inputId}-help` : undefined

  // WP's order: the controlled value, then `currentInput`, then `initialPosition`, then the floor.
  const resolved = clamp(value ?? currentInput ?? initialPosition ?? min, min, max)

  const tickCount = marks && step > 0 ? 1 + Math.round((max - min) / step) : 0
  const ticks = React.useMemo(
    () => Array.from({ length: tickCount }, (_, index) => min + index * step),
    [tickCount, min, step]
  )

  return (
    <div data-slot="range-control" className={cn("w-full", className)}>
      {label && (
        <label
          data-slot="range-control-label"
          htmlFor={inputId}
          className="mb-1 block text-sm font-medium"
        >
          {label}
        </label>
      )}

      <div className="flex w-full items-center gap-3">
        <div className="relative flex-1">
          <SliderPrimitive.Root
            className="relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50"
            value={[resolved]}
            min={min}
            max={max}
            step={step}
            disabled={disabled}
            onValueChange={([next]) => onChange?.(next)}
          >
            <SliderPrimitive.Track className="bg-muted relative h-1 w-full grow overflow-hidden rounded-full">
              <SliderPrimitive.Range className="bg-primary absolute h-full" />
            </SliderPrimitive.Track>
            <SliderPrimitive.Thumb
              aria-label={typeof label === "string" ? label : "Value"}
              className="border-primary bg-card focus-visible:ring-ring block size-4 rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none"
            />
          </SliderPrimitive.Root>

          {tickCount > 0 && (
            <div aria-hidden="true" className="pointer-events-none relative mt-1 h-1.5">
              {ticks.map((tick) => (
                <span
                  key={tick}
                  className={cn(
                    "absolute top-0 h-1.5 w-px",
                    tick <= resolved ? "bg-primary" : "bg-border"
                  )}
                  // runtime-style: a tick's position is a percentage computed from min, max and
                  // step, so no stylesheet can know where it lands.
                  style={{ left: `${((tick - min) / (max - min)) * 100}%` }}
                />
              ))}
            </div>
          )}
        </div>

        <Input
          id={inputId}
          type="number"
          className="w-20 shrink-0"
          min={min}
          max={max}
          step={step}
          disabled={disabled}
          aria-describedby={helpId}
          value={value ?? currentInput ?? ""}
          onChange={(event) => {
            const next = event.target.value
            onChange?.(next === "" ? undefined : clamp(Number(next), min, max))
          }}
        />

        {allowReset && (
          <button
            type="button"
            disabled={disabled}
            onClick={() => onChange?.(undefined)}
            className="border-border text-ink hover:bg-accent focus-visible:ring-ring shrink-0 rounded-md border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50"
          >
            Reset
          </button>
        )}
      </div>

      {help && (
        <p
          data-slot="range-control-help"
          id={helpId}
          className="mt-1 text-sm text-muted-foreground"
        >
          {help}
        </p>
      )}
    </div>
  )
}

export { RangeControl }