"use client";

import {
  useEffect,
  useLayoutEffect,
  useRef,
  type CSSProperties,
  type ReactNode,
  type RefObject,
} from "react";

import {
  attachLiquidGlass,
  createLiquidGlass,
  type LiquidGlass as LiquidGlassHandle,
  type LiquidGlassOptions,
} from "./glass";
import { attachLiquidGlassTabs, type LiquidGlassTabs, type LiquidGlassTabsOptions } from "./tabs";

const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

/** Applies options to a glass whenever one of their values changes, after the first build. */
function useGlassOptions(glass: RefObject<LiquidGlassHandle | null>, options: LiquidGlassOptions) {
  // Options arrive as fresh objects each render; compare values instead.
  const key = JSON.stringify(options);
  const applied = useRef(key);
  useIsomorphicLayoutEffect(() => {
    if (applied.current === key) return;
    applied.current = key;
    glass.current?.update(JSON.parse(key) as LiquidGlassOptions);
  }, [glass, key]);
  return key;
}

export type LiquidGlassProps = LiquidGlassOptions & {
  className?: string | undefined;
  style?: CSSProperties | undefined;
  /** Extra layers over the glass, such as a tint of your own. */
  children?: ReactNode | undefined;
  /** Receives the glass, for materialize() and dematerialize(). */
  glassRef?: { current: LiquidGlassHandle | null } | undefined;
};

/**
 * Liquid Glass behind a surface's content. Render it first inside a positioned,
 * rounded element and paint nothing over it: no background, border, shadow or
 * backdrop-filter on the surface, and no opacity or filter on it or its ancestors
 * while the glass shows.
 *
 * ```tsx
 * <nav className="relative rounded-full px-6 py-3">
 *   <LiquidGlass />
 *   …
 * </nav>
 * ```
 */
export function LiquidGlass({ className, style, children, glassRef, ...options }: LiquidGlassProps) {
  const element = useRef<HTMLSpanElement>(null);
  const glass = useRef<LiquidGlassHandle | null>(null);
  const key = useGlassOptions(glass, options);
  const initial = useRef(key);
  initial.current = key;

  useIsomorphicLayoutEffect(() => {
    const node = element.current;
    if (!node) return;
    const instance = attachLiquidGlass(node, JSON.parse(initial.current) as LiquidGlassOptions);
    glass.current = instance;
    if (glassRef) glassRef.current = instance;
    return () => {
      instance.destroy();
      glass.current = null;
      if (glassRef) glassRef.current = null;
    };
  }, [glassRef]);

  return (
    <span ref={element} aria-hidden="true" className={className ? `liquid-glass ${className}` : "liquid-glass"} style={style}>
      <span className="liquid-glass-layer" data-layer="body" />
      <span className="liquid-glass-layer" data-layer="shade" />
      <span className="liquid-glass-layer" data-layer="glow" />
      <span className="liquid-glass-layer" data-layer="edge" />
      <span className="liquid-glass-layer" data-layer="highlight" />
      {children}
    </span>
  );
}

/**
 * Turns an element you already render into a glass surface. The glass is inserted
 * as its first child. Returns a ref to the glass.
 */
export function useLiquidGlass(surface: RefObject<HTMLElement | null>, options: LiquidGlassOptions = {}) {
  const glass = useRef<LiquidGlassHandle | null>(null);
  const key = useGlassOptions(glass, options);
  const initial = useRef(key);
  initial.current = key;

  useIsomorphicLayoutEffect(() => {
    const node = surface.current;
    if (!node) return;
    const instance = createLiquidGlass(node, JSON.parse(initial.current) as LiquidGlassOptions);
    glass.current = instance;
    return () => {
      instance.destroy();
      glass.current = null;
    };
  }, [surface]);

  return glass;
}

/**
 * Turns a row of tabs you render into Liquid Glass tabs: a glass track with a thumb
 * that lifts into a lens, travels and can be dragged. Selection stays yours; the
 * thumb follows `aria-selected`, `aria-checked` or Radix's `data-state`.
 *
 * ```tsx
 * const track = useRef<HTMLDivElement>(null);
 * useLiquidGlassTabs(track);
 * <div ref={track} role="tablist" className="flex rounded-full p-1">…</div>
 * ```
 */
export function useLiquidGlassTabs(track: RefObject<HTMLElement | null>, options: LiquidGlassTabsOptions = {}) {
  const tabs = useRef<LiquidGlassTabs | null>(null);
  // Callbacks may be fresh each render; the tabs call the latest ones.
  const latest = useRef(options);
  latest.current = options;
  const { appearance, orientation, tabs: selector, glass, refraction } = options;
  const glassKey = JSON.stringify(glass ?? null);

  useIsomorphicLayoutEffect(() => {
    const node = track.current;
    if (!node) return;
    const instance = attachLiquidGlassTabs(node, {
      appearance,
      orientation,
      tabs: selector,
      glass: JSON.parse(glassKey) as LiquidGlassTabsOptions["glass"] ?? undefined,
      refraction,
      isSelected: latest.current.isSelected ? tab => latest.current.isSelected?.(tab) ?? false : undefined,
      onSelect: latest.current.onSelect ? tab => latest.current.onSelect?.(tab) : undefined,
    });
    tabs.current = instance;
    return () => {
      instance.destroy();
      tabs.current = null;
    };
  }, [track, appearance, orientation, selector, glassKey, refraction]);

  return tabs;
}

export type { LiquidGlassHandle, LiquidGlassTabs, LiquidGlassTabsOptions };