import {
  useId,
  useRef,
  type ComponentProps,
  type CSSProperties,
  type PointerEvent as ReactPointerEvent,
  type Ref,
  type ReactNode,
} from "react";

export type LiquidGlassMode = "standard" | "polar" | "prominent";

interface LiquidGlassEffectProps {
  children: ReactNode;
  mode?: LiquidGlassMode;
  displacementScale?: number;
  blurAmount?: number;
  saturation?: number;
  aberrationIntensity?: number;
  elasticity?: number;
  cornerRadius?: number | string;
  padding?: string;
  overLight?: boolean;
}

export interface LiquidGlassProps
  extends
    LiquidGlassEffectProps,
    Omit<ComponentProps<"div">, keyof LiquidGlassEffectProps> {}

export interface LiquidGlassButtonProps
  extends
    LiquidGlassEffectProps,
    Omit<ComponentProps<"button">, keyof LiquidGlassEffectProps> {}

interface EffectFrameProps {
  children: ReactNode;
  filterId: string;
  mode?: LiquidGlassMode;
  displacementScale?: number;
  overLight?: boolean;
}

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

function modeSettings(mode: LiquidGlassMode) {
  if (mode === "polar")
    return { frequency: "0.018 0.012", octaves: 2, multiplier: 0.82 };
  if (mode === "prominent")
    return { frequency: "0.008 0.02", octaves: 3, multiplier: 1.35 };
  return { frequency: "0.012 0.024", octaves: 2, multiplier: 1 };
}

function effectVariables({
  blurAmount,
  saturation,
  aberrationIntensity,
  cornerRadius,
  padding,
}: Pick<
  LiquidGlassEffectProps,
  | "blurAmount"
  | "saturation"
  | "aberrationIntensity"
  | "cornerRadius"
  | "padding"
>) {
  const variables: Record<string, string | number> = {};
  if (cornerRadius !== undefined)
    variables["--liquid-glass-radius"] =
      typeof cornerRadius === "number" ? `${cornerRadius}px` : cornerRadius;
  if (padding !== undefined) variables["--liquid-glass-padding"] = padding;
  if (blurAmount !== undefined)
    variables["--liquid-glass-blur"] = `${clamp(blurAmount, 0, 40)}px`;
  if (saturation !== undefined)
    variables["--liquid-glass-saturation"] = `${clamp(saturation, 0, 300)}%`;
  if (aberrationIntensity !== undefined)
    variables["--liquid-glass-aberration"] = clamp(aberrationIntensity, 0, 12);
  return variables as CSSProperties;
}

function EffectFrame({
  children,
  filterId,
  mode = "standard",
  displacementScale = 36,
  overLight = false,
}: EffectFrameProps) {
  const settings = modeSettings(mode);
  return (
    <>
      <svg className="ynr-liquid-glass__filter" aria-hidden="true">
        <defs>
          <filter
            id={filterId}
            x="-30%"
            y="-30%"
            width="160%"
            height="160%"
            colorInterpolationFilters="sRGB"
          >
            <feTurbulence
              type="fractalNoise"
              baseFrequency={settings.frequency}
              numOctaves={settings.octaves}
              seed={mode === "polar" ? 8 : mode === "prominent" ? 14 : 3}
              result="noise"
            />
            <feGaussianBlur in="noise" stdDeviation="1.2" result="softNoise" />
            <feDisplacementMap
              in="SourceGraphic"
              in2="softNoise"
              scale={clamp(displacementScale, 0, 120) * settings.multiplier}
              xChannelSelector={mode === "polar" ? "G" : "R"}
              yChannelSelector={mode === "polar" ? "R" : "B"}
            />
          </filter>
        </defs>
      </svg>
      <span
        className="ynr-liquid-glass__backdrop"
        style={{ filter: `url(#${filterId})` }}
        aria-hidden="true"
      />
      <span className="ynr-liquid-glass__highlight" aria-hidden="true" />
      {overLight && (
        <span className="ynr-liquid-glass__contrast" aria-hidden="true" />
      )}
      <span className="ynr-liquid-glass__content">{children}</span>
    </>
  );
}

function setRef<T>(ref: Ref<T> | undefined, value: T | null) {
  if (typeof ref === "function") ref(value);
  else if (ref) ref.current = value;
}

function useLiquidGlassInteraction(elasticity: number, disabled = false) {
  const rootRef = useRef<HTMLElement | null>(null);

  function reset() {
    const node = rootRef.current;
    if (!node) return;
    node.style.removeProperty("--liquid-glass-x");
    node.style.removeProperty("--liquid-glass-y");
    node.style.removeProperty("--liquid-glass-angle");
    node.removeAttribute("data-moving");
  }

  function move(event: ReactPointerEvent<HTMLElement>) {
    if (
      disabled ||
      event.pointerType !== "mouse" ||
      globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches
    )
      return;
    const rect = event.currentTarget.getBoundingClientRect();
    if (!rect.width || !rect.height) return;
    const horizontal = clamp(
      (event.clientX - rect.left) / rect.width - 0.5,
      -0.5,
      0.5,
    );
    const vertical = clamp(
      (event.clientY - rect.top) / rect.height - 0.5,
      -0.5,
      0.5,
    );
    const strength = clamp(elasticity, 0, 1) * 18;
    const node = event.currentTarget;
    node.style.setProperty("--liquid-glass-x", `${horizontal * strength}px`);
    node.style.setProperty("--liquid-glass-y", `${vertical * strength}px`);
    node.style.setProperty(
      "--liquid-glass-angle",
      `${135 + horizontal * 70 + vertical * 30}deg`,
    );
    node.setAttribute("data-moving", "true");
  }

  return { rootRef, move, reset };
}

export function LiquidGlass({
  children,
  mode = "standard",
  displacementScale,
  blurAmount,
  saturation,
  aberrationIntensity,
  elasticity = 0.18,
  cornerRadius,
  padding,
  overLight,
  className = "",
  style,
  ref,
  onPointerMove,
  onPointerLeave,
  ...props
}: LiquidGlassProps) {
  const filterId = `ynr-liquid-glass-${useId().replaceAll(":", "")}`;
  const interaction = useLiquidGlassInteraction(elasticity);
  return (
    <div
      {...props}
      ref={(node) => {
        interaction.rootRef.current = node;
        setRef(ref, node);
      }}
      className={`ynr-liquid-glass ${className}`}
      data-mode={mode}
      data-over-light={overLight || undefined}
      style={{
        ...effectVariables({
          blurAmount,
          saturation,
          aberrationIntensity,
          cornerRadius,
          padding,
        }),
        ...style,
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        interaction.move(event);
      }}
      onPointerLeave={(event) => {
        interaction.reset();
        onPointerLeave?.(event);
      }}
    >
      <EffectFrame
        filterId={filterId}
        mode={mode}
        displacementScale={displacementScale}
        overLight={overLight}
      >
        {children}
      </EffectFrame>
    </div>
  );
}

export function LiquidGlassButton({
  children,
  mode = "standard",
  displacementScale,
  blurAmount,
  saturation,
  aberrationIntensity,
  elasticity = 0.18,
  cornerRadius,
  padding = "12px 20px",
  overLight,
  className = "",
  style,
  ref,
  type = "button",
  disabled = false,
  onPointerMove,
  onPointerLeave,
  ...props
}: LiquidGlassButtonProps) {
  const filterId = `ynr-liquid-glass-${useId().replaceAll(":", "")}`;
  const interaction = useLiquidGlassInteraction(elasticity, disabled);
  return (
    <button
      {...props}
      ref={(node) => {
        interaction.rootRef.current = node;
        setRef(ref, node);
      }}
      type={type}
      disabled={disabled}
      className={`ynr-liquid-glass ynr-liquid-glass-button ${className}`}
      data-mode={mode}
      data-over-light={overLight || undefined}
      style={{
        ...effectVariables({
          blurAmount,
          saturation,
          aberrationIntensity,
          cornerRadius,
          padding,
        }),
        ...style,
      }}
      onPointerMove={(event) => {
        onPointerMove?.(event);
        interaction.move(event);
      }}
      onPointerLeave={(event) => {
        interaction.reset();
        onPointerLeave?.(event);
      }}
    >
      <EffectFrame
        filterId={filterId}
        mode={mode}
        displacementScale={displacementScale}
        overLight={overLight}
      >
        {children}
      </EffectFrame>
    </button>
  );
}