"use client";

import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "framer-motion";
import React, {
  type ComponentPropsWithoutRef,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";

import { cn } from "@/lib/utils";

const RING_LAYOUT_ID = "smooth-focus-ring";
let ringOwner: string | null = null;
let focusedId: string | null = null;
let clearTimer: number | null = null;
const ringListeners = new Set<() => void>();

function notifyRing() {
  ringListeners.forEach((l) => l());
}

function claimRing(id: string) {
  if (clearTimer !== null) {
    window.clearTimeout(clearTimer);
    clearTimer = null;
  }
  if (ringOwner === id) return;
  ringOwner = id;
  notifyRing();
}

function releaseRing(id: string) {
  if (ringOwner !== id) return;
  if (clearTimer !== null) window.clearTimeout(clearTimer);
  clearTimer = window.setTimeout(() => {
    clearTimer = null;
    if (ringOwner !== id) return;
    ringOwner = focusedId && focusedId !== id ? focusedId : null;
    notifyRing();
  }, 90);
}

const inputWrapperClassName = cn(
  "relative w-full max-w-[420px] rounded-2xl bg-white/[0.06] p-4",
);

function GlideRing({ show }: { show: boolean }) {
  const reduce = useReducedMotion();
  if (!show) return null;
  return (
    <motion.span
      aria-hidden
      layoutId={RING_LAYOUT_ID}
      className="pointer-events-none absolute -inset-[3px] rounded-[18px] border-2 border-accent"
      transition={
        reduce
          ? { duration: 0 }
          : { type: "spring", stiffness: 500, damping: 35, mass: 0.6 }
      }
    />
  );
}

function useGlideRing() {
  const id = useId();
  const [active, setActive] = useState(false);
  const hoveredRef = useRef(false);

  useEffect(() => {
    const sync = () => {
      const owner = hoveredRef.current ? id : focusedId;
      setActive(ringOwner !== null && owner === ringOwner);
    };
    ringListeners.add(sync);
    sync();
    return () => {
      ringListeners.delete(sync);
      hoveredRef.current = false;
      if (focusedId === id) focusedId = null;
      if (ringOwner === id) {
        ringOwner = focusedId;
        notifyRing();
      }
    };
  }, [id]);

  return {
    active,
    onFocusCapture: () => {
      focusedId = id;
      claimRing(id);
    },
    onBlur: (e: React.FocusEvent<HTMLDivElement>) => {
      if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
        if (focusedId === id) focusedId = null;
        releaseRing(id);
      }
    },
    onMouseEnter: () => {
      hoveredRef.current = true;
      claimRing(id);
    },
    onMouseLeave: () => {
      hoveredRef.current = false;
      releaseRing(id);
    },
  };
}

const inputClassName =
  "w-full bg-transparent outline-none placeholder:text-ink/40";

type InputFieldProps = ComponentPropsWithoutRef<"input"> & {
  wrapperClassName?: string;
};

type SmoothInputType = "text" | "password";

type SmoothInputProps = Omit<InputFieldProps, "type"> & {
  type?: SmoothInputType;
  fontSize?: number;
  spring?: { stiffness: number; damping: number; mass: number };
};

const Input = ({ className, wrapperClassName, onFocus, onBlur, ...props }: InputFieldProps) => {
  const { active, ...ringHandlers } = useGlideRing();
  return (
    <div className={cn(inputWrapperClassName, wrapperClassName)} {...ringHandlers}>
      <GlideRing show={active} />
      <input
        className={cn(inputClassName, className)}
        onFocus={onFocus}
        onBlur={onBlur}
        {...props}
      />
    </div>
  );
};

const PASSWORD_CHAR =
  typeof navigator !== "undefined" && /firefox|fxios/i.test(navigator.userAgent)
    ? "●"
    : "•";

function isChromeEngine() {
  return (
    typeof navigator !== "undefined" &&
    /chrome|chromium|crios/i.test(navigator.userAgent)
  );
}

const SmoothInput = ({
  className,
  wrapperClassName,
  value,
  defaultValue,
  onChange,
  onBlur,
  type = "text",
  placeholder,
  fontSize = 24,
  spring = { stiffness: 500, damping: 30, mass: 0.5 },
  style,
  ...props
}: SmoothInputProps) => {
  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
  const caretX = useMotionValue(0);
  const caretOpacity = useMotionValue(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const measureRef = useRef<HTMLSpanElement>(null);
  const prefersReducedMotion = useReducedMotion();

  const { active, ...ringHandlers } = useGlideRing();

  const isControlled = value !== undefined;

  const springCaretX = useSpring(
    caretX,
    prefersReducedMotion
      ? { stiffness: 10000, damping: 100, mass: 0.1 }
      : spring,
  );

  const inputValue = isControlled ? String(value) : internalValue;

  const syncMeasureSpan = () => {
    const input = inputRef.current;
    const measureSpan = measureRef.current;
    if (!input || !measureSpan) return;

    const styles = window.getComputedStyle(input);
    const isPassword = input.type === "password";

    let size = styles.fontSize;
    if (PASSWORD_CHAR === "•" && isPassword && !isChromeEngine()) {
      size = parseFloat(size) + 6.25 + "px";
    }

    measureSpan.style.font =
      styles.fontStyle +
      " " +
      styles.fontWeight +
      " " +
      size +
      " " +
      styles.fontFamily;
    measureSpan.style.letterSpacing = styles.letterSpacing;
    measureSpan.style.fontFeatureSettings = styles.fontFeatureSettings;
    measureSpan.style.fontVariationSettings = styles.fontVariationSettings;
  };

  const measurePrefixWidth = (text: string) => {
    const input = inputRef.current;
    const measureSpan = measureRef.current;
    if (!input || !measureSpan) return null;

    syncMeasureSpan();
    measureSpan.textContent = text;

    const paddingLeft =
      parseFloat(window.getComputedStyle(input).paddingLeft) || 0;

    return text.length > 0
      ? measureSpan.offsetWidth + paddingLeft
      : paddingLeft - 1;
  };

  const scrollCaretIntoView = (
    target: HTMLInputElement,
    absoluteWidth: number,
  ) => {
    const styles = window.getComputedStyle(target);
    const paddingLeft = parseFloat(styles.paddingLeft) || 0;
    const paddingRight = parseFloat(styles.paddingRight) || 0;
    const maxScroll = Math.max(0, target.scrollWidth - target.clientWidth);
    const visibleRight = target.scrollLeft + target.clientWidth - paddingRight;
    const visibleLeft = target.scrollLeft + paddingLeft;

    if (absoluteWidth > visibleRight) {
      target.scrollLeft = Math.min(
        absoluteWidth - target.clientWidth + paddingRight,
        maxScroll,
      );
      return;
    }

    if (absoluteWidth < visibleLeft) {
      target.scrollLeft = Math.max(0, absoluteWidth - paddingLeft);
    }
  };

  const getCaretIndex = (target: HTMLInputElement) => {
    const selectionStart = target.selectionStart ?? 0;
    const selectionEnd = target.selectionEnd ?? 0;

    if (selectionStart === selectionEnd) {
      return selectionStart;
    }

    return target.selectionDirection === "backward"
      ? selectionStart
      : selectionEnd;
  };

  const updateCaretFromInput = (target: HTMLInputElement) => {
    const selectionStart = target.selectionStart ?? 0;
    const selectionEnd = target.selectionEnd ?? 0;
    const hasSelection = selectionStart !== selectionEnd;
    const caretIndex = getCaretIndex(target);
    const isPassword = target.type === "password";
    const textBeforeCaret = isPassword
      ? PASSWORD_CHAR.repeat(caretIndex)
      : target.value.slice(0, caretIndex);

    const absoluteWidth = measurePrefixWidth(textBeforeCaret);
    if (absoluteWidth === null) return;

    scrollCaretIntoView(target, absoluteWidth);

    const styles = window.getComputedStyle(target);
    const paddingLeft = parseFloat(styles.paddingLeft) || 0;
    const paddingRight = parseFloat(styles.paddingRight) || 0;
    const caretPosition = absoluteWidth - target.scrollLeft;
    const minX = paddingLeft - 1;
    const maxX = target.clientWidth - paddingRight;
    const isCaretVisible =
      caretPosition >= minX && caretPosition <= maxX + 1;

    caretX.set(Math.min(caretPosition, maxX));

    if (!isCaretVisible || hasSelection) {
      caretOpacity.set(0);
      return;
    }

    caretOpacity.set(1);
  };

  const updateCaretRef = useRef(updateCaretFromInput);
  updateCaretRef.current = updateCaretFromInput;
  const caretOpacityRef = useRef(caretOpacity);
  caretOpacityRef.current = caretOpacity;

  useEffect(() => {
    const input = inputRef.current;
    if (input && document.activeElement === input) {
      updateCaretRef.current(input);
    }
  }, [inputValue]);

  useEffect(() => {
    const input = inputRef.current;
    if (input && document.activeElement === input) {
      updateCaretRef.current(input);
    }
  }, [type, fontSize]);

  useEffect(() => {
    const input = inputRef.current;
    const container = containerRef.current;
    if (!input || !container) return;

    const updateCaretIfFocused = () => {
      if (document.activeElement === input) {
        updateCaretRef.current(input);
      }
    };

    const handleSelectionChange = () => {
      if (document.activeElement !== input) return;

      requestAnimationFrame(() => {
        if (document.activeElement === input) {
          updateCaretRef.current(input);
        }
      });
    };

    document.addEventListener("selectionchange", handleSelectionChange);
    document.fonts.addEventListener("loadingdone", updateCaretIfFocused);
    void document.fonts.ready.then(updateCaretIfFocused);
    input.addEventListener("scroll", updateCaretIfFocused);

    const resizeObserver = new ResizeObserver(updateCaretIfFocused);
    resizeObserver.observe(container);

    updateCaretIfFocused();

    return () => {
      document.removeEventListener("selectionchange", handleSelectionChange);
      document.fonts.removeEventListener("loadingdone", updateCaretIfFocused);
      input.removeEventListener("scroll", updateCaretIfFocused);
      resizeObserver.disconnect();
    };
  }, []);

  return (
    <div className={cn(inputWrapperClassName, wrapperClassName)} {...ringHandlers}>
      <GlideRing show={active} />
      <div
        ref={containerRef}
        className="relative grid grid-cols-1 p-0"
        style={{ caretColor: "transparent", fontSize: fontSize }}
      >
        <input
          {...props}
          ref={inputRef}
          type={type}
          placeholder={placeholder ?? "smooth input"}
          className={cn(
            inputClassName,
            "col-start-1 col-end-2 row-start-1 row-end-2 text-inherit",
            className,
          )}
          style={style}
          value={inputValue}
          onChange={(e) => {
            if (!isControlled) setInternalValue(e.target.value);
            onChange?.(e);
            requestAnimationFrame(() => {
              updateCaretRef.current(e.target);
            });
          }}
          onBlur={(e) => {
            caretOpacityRef.current.set(0);
            onBlur?.(e);
          }}
        />
        <span
          ref={measureRef}
          aria-hidden
          className="pointer-events-none invisible absolute top-0 left-0 whitespace-pre"
        />
        <motion.div
          className="bg-accent pointer-events-none col-start-1 col-end-2 row-start-1 row-end-2 h-[0.9em] w-0.5 self-center"
          style={{ x: springCaretX, opacity: caretOpacity }}
        />
      </div>
    </div>
  );
};

export { Input, SmoothInput };