import {
  useId,
  useRef,
  type ClipboardEvent,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { cn } from "../../lib/cn";

export type OtpInputProps = {
  disabled?: boolean;
  label?: ReactNode;
  length?: number;
  onChange?: (value: string) => void;
  obscure?: boolean;
  obscureCharacter?: string;
  value?: string;
};

export function OtpInput({
  disabled = false,
  label,
  length = 6,
  onChange,
  obscure = false,
  obscureCharacter = "•",
  value = "",
}: OtpInputProps) {
  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
  const fieldId = useId();
  const cells = Array.from({ length }, (_, index) => value[index] ?? "");
  const customObscure = obscure && obscureCharacter !== "•";

  function focusCell(index: number) {
    inputRefs.current[Math.max(0, Math.min(length - 1, index))]?.focus();
  }

  function updateCell(index: number, nextValue: string) {
    const digit = nextValue.replace(/\D/g, "").slice(-1);
    const next = cells.slice();
    next[index] = digit;
    onChange?.(next.join(""));
    if (digit && index < length - 1) {
      focusCell(index + 1);
    }
  }

  function handleKeyDown(index: number, event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Backspace" && !cells[index] && index > 0) {
      event.preventDefault();
      const next = cells.slice();
      next[index - 1] = "";
      onChange?.(next.join(""));
      focusCell(index - 1);
    } else if (event.key === "ArrowLeft") {
      event.preventDefault();
      focusCell(index - 1);
    } else if (event.key === "ArrowRight") {
      event.preventDefault();
      focusCell(index + 1);
    }
  }

  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {
    event.preventDefault();
    const pasted = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
    if (!pasted) {
      return;
    }

    onChange?.(pasted);
    focusCell(Math.min(pasted.length, length - 1));
  }

  return (
    <div className="space-y-2">
      {label ? <label className="block text-sm font-medium text-[var(--uhuru-text-primary)]" htmlFor={`${fieldId}-0`}>{label}</label> : null}
      <div aria-label={typeof label === "string" ? label : "One-time password"} className="flex gap-2" role="group">
        {cells.map((cell, index) => (
        <span className="relative block h-[var(--uhuru-control-height)] w-10" key={index}>
          <input
            aria-label={`${typeof label === "string" ? label : "One-time password"}, digit ${index + 1} of ${length}`}
            autoComplete={index === 0 ? "one-time-code" : "off"}
            className={cn("relative z-10 h-full w-full rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-center text-sm font-medium text-[var(--uhuru-text-primary)] outline-none transition focus:border-[var(--uhuru-border-accent)] focus:ring-1 focus:ring-[var(--uhuru-accent-subtle)] disabled:cursor-not-allowed disabled:opacity-50", customObscure && "text-transparent caret-transparent")}
            disabled={disabled}
            id={`${fieldId}-${index}`}
            inputMode="numeric"
            maxLength={1}
            onChange={(event) => updateCell(index, event.target.value)}
            onKeyDown={(event) => handleKeyDown(index, event)}
            onPaste={handlePaste}
            ref={(element) => {
              inputRefs.current[index] = element;
            }}
            type={obscure && !customObscure ? "password" : "text"}
            value={cell}
          />
          {customObscure && cell ? <span aria-hidden="true" className="pointer-events-none absolute inset-0 z-20 grid place-items-center text-sm font-medium text-[var(--uhuru-text-primary)]">{obscureCharacter}</span> : null}
        </span>
        ))}
      </div>
    </div>
  );
}