"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.js";
import { attachLiquidGlassHighlight, type LiquidGlassHighlight, type LiquidGlassHighlightOptions } from "./highlight.js";
import { attachLiquidGlassTabs, type LiquidGlassTabs, type LiquidGlassTabsOptions } from "./tabs.js";

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

/**
 * Applies options to a glass whenever one of their values changes, after the first
 * build. Returns the latest options, for that first build.
 */
function useGlassOptions(glass: RefObject<LiquidGlassHandle | null>, options: LiquidGlassOptions) {
  // Options arrive as fresh objects each render; compare values instead. A `shape`
  // function counts by its outline at the glass's size, which the glass reads itself.
  const latest = useRef(options);
  latest.current = options;
  const key = JSON.stringify(options, (name, value: unknown) => (name === "shape" && typeof value === "function" ? "function" : value));
  const applied = useRef(key);
  useIsomorphicLayoutEffect(() => {
    if (applied.current === key) return;
    applied.current = key;
    glass.current?.update(latest.current);
  }, [glass, key]);
  return latest;
}

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(), pourFrom() and the rest. */
  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 latest = useGlassOptions(glass, options);

  useIsomorphicLayoutEffect(() => {
    const node = element.current;
    if (!node) return;
    const instance = attachLiquidGlass(node, latest.current);
    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="refract" />
      <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 latest = useGlassOptions(glass, options);

  useIsomorphicLayoutEffect(() => {
    const node = surface.current;
    if (!node) return;
    const instance = createLiquidGlass(node, latest.current);
    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 solid
 * thumb that clears 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-0.5">…</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;
}

/**
 * A tab's text, semibold while its tab is selected, as iOS 27's segmented control
 * sets it, without the tab changing width.
 *
 * ```tsx
 * <button role="tab" aria-selected={selected}><LiquidGlassTabLabel>Week</LiquidGlassTabLabel></button>
 * ```
 */
export function LiquidGlassTabLabel({ children }: { children: string }) {
  return (
    <span className="liquid-glass-tabs-label" data-text={children}>
      <span>{children}</span>
    </span>
  );
}

/**
 * Gives a glass surface's rows a hover pill: a well in the glass that slides to
 * the row under the pointer or with focus, stretching toward the row it is
 * heading for.
 *
 * ```tsx
 * const menu = useRef<HTMLDivElement>(null);
 * useLiquidGlassHighlight(menu);
 * <div ref={menu} role="menu" className="relative rounded-2xl p-1.5"><LiquidGlass floating />…</div>
 * ```
 */
export function useLiquidGlassHighlight(surface: RefObject<HTMLElement | null>, options: LiquidGlassHighlightOptions = {}) {
  const highlight = useRef<LiquidGlassHighlight | null>(null);
  const { items } = options;

  // After the glass, which the pill sits over.
  useEffect(() => {
    const node = surface.current;
    if (!node) return;
    const instance = attachLiquidGlassHighlight(node, { items });
    highlight.current = instance;
    return () => {
      instance.destroy();
      highlight.current = null;
    };
  }, [surface, items]);

  return highlight;
}

export type { LiquidGlassHandle, LiquidGlassHighlight, LiquidGlassTabs, LiquidGlassTabsOptions };