import * as React from "react";
import {
  IconBold,
  IconCheck,
  IconChevronDown,
  IconItalic,
  IconLink,
  IconList,
  IconSearch,
  IconStrikethrough,
} from "@tabler/icons-react";
import { cn, Kbd, motion } from "@colineapp/ui";
import { LENS_GEOMETRY } from "@colineapp/liquid-glass";
import { LiquidGlass, useLiquidGlassTabs, type LiquidGlassHandle } from "@colineapp/liquid-glass/react";
import { useDraggable } from "./stage";

/* The package's surfaces, built the way its README says to. Every glass
   surface here is a positioned, rounded element with <LiquidGlass /> first
   and nothing painted over it. */

const EASE = [0.22, 1, 0.36, 1] as const;

/**
 * Grows a floating surface's shadow in and out with its glass. 0.1.0's
 * materialize() and dematerialize() leave the shadow as it is, so a closing
 * menu kept a dark outline until it unmounted; the next release does this
 * itself.
 */
function growShadow(glass: LiquidGlassHandle | null, direction: "in" | "out", duration: number) {
  const surface = glass?.element.parentElement;
  if (!surface) return;
  const shadow = getComputedStyle(surface).boxShadow;
  if (!shadow || shadow === "none") return;
  const keyframes = [{ boxShadow: "none" }, { boxShadow: shadow }];
  surface.animate(direction === "in" ? keyframes : keyframes.reverse(), {
    duration,
    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
    fill: direction === "in" ? "backwards" : "forwards",
  });
}

// ── Pill tabs ───────────────────────────────────────────

export function GlassTabs({
  options,
  value,
  onChange,
  className,
  label,
}: {
  options: string[];
  value: string;
  onChange: (value: string) => void;
  className?: string;
  label: string;
}) {
  const track = React.useRef<HTMLDivElement>(null);
  useLiquidGlassTabs(track, { appearance: "class" });
  const index = options.indexOf(value);
  return (
    <div
      ref={track}
      role="tablist"
      aria-label={label}
      className={cn("relative flex rounded-full p-1", className)}
      onKeyDown={(event) => {
        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
        if (!step) return;
        event.preventDefault();
        const next = options[(index + step + options.length) % options.length];
        if (next === undefined) return;
        onChange(next);
        track.current?.querySelector<HTMLElement>(`[data-tab="${next}"]`)?.focus();
      }}
    >
      {options.map((option) => (
        <button
          key={option}
          type="button"
          role="tab"
          data-tab={option}
          aria-selected={option === value}
          tabIndex={option === value ? 0 : -1}
          onClick={() => onChange(option)}
          className={cn(
            "rounded-full px-3.5 py-1.5 text-sm font-medium whitespace-nowrap text-foreground transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-ring sm:px-4",
            option === value ? "" : "text-foreground/60 hover:text-foreground/85",
          )}
        >
          {option}
        </button>
      ))}
    </div>
  );
}

// ── Search field ────────────────────────────────────────

export function GlassSearch({ className, placeholder = "Search" }: { className?: string; placeholder?: string }) {
  const [value, setValue] = React.useState("");
  return (
    <label className={cn("relative flex h-11 cursor-text items-center gap-2.5 rounded-full px-4 text-foreground", className)}>
      <LiquidGlass appearance="class" interactive swell />
      <IconSearch className="size-4 shrink-0 text-foreground/60" />
      <input
        value={value}
        onChange={(event) => setValue(event.target.value)}
        placeholder={placeholder}
        aria-label={placeholder}
        className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-foreground/55"
      />
      <Kbd className="hidden sm:inline-flex">⌘K</Kbd>
    </label>
  );
}

// ── Toolbar ─────────────────────────────────────────────

const TOOLS = [
  { id: "bold", label: "Bold", icon: IconBold },
  { id: "italic", label: "Italic", icon: IconItalic },
  { id: "strike", label: "Strikethrough", icon: IconStrikethrough },
  { id: "link", label: "Link", icon: IconLink },
  { id: "list", label: "List", icon: IconList },
] as const;

export function GlassToolbar({ className }: { className?: string }) {
  const [on, setOn] = React.useState<Set<string>>(() => new Set(["bold"]));
  return (
    <div role="toolbar" aria-label="Formatting" className={cn("relative flex items-center gap-0.5 rounded-full p-1.5", className)}>
      <LiquidGlass appearance="class" interactive />
      {TOOLS.map(({ id, label, icon: Icon }) => {
        const active = on.has(id);
        return (
          <button
            key={id}
            type="button"
            aria-label={label}
            aria-pressed={active}
            onClick={() =>
              setOn((current) => {
                const next = new Set(current);
                if (next.has(id)) next.delete(id);
                else next.add(id);
                return next;
              })
            }
            className={cn(
              "grid size-9 place-items-center rounded-full text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
              active ? "liquid-glass-well" : "text-foreground/70 hover:text-foreground",
            )}
          >
            <Icon className="size-[18px]" stroke={2} />
          </button>
        );
      })}
    </div>
  );
}

// ── Menu ────────────────────────────────────────────────

const SORTS = ["Date added", "Name", "Size", "Kind"];

/** Glass menu: the contents fade and zoom, the glass materializes, and the surface only moves. */
export function GlassMenu({ className }: { className?: string }) {
  const [open, setOpen] = React.useState(false);
  const [sort, setSort] = React.useState(SORTS[0]!);
  const [active, setActive] = React.useState(-1);
  const root = React.useRef<HTMLDivElement>(null);
  const glass = React.useRef<LiquidGlassHandle | null>(null);
  const [leaving, setLeaving] = React.useState(false);

  const close = React.useCallback(() => {
    setLeaving(true);
    growShadow(glass.current, "out", 160);
    void glass.current?.dematerialize({ duration: 160, scale: 0.96 }).then(() => {
      setOpen(false);
      setLeaving(false);
      setActive(-1);
    });
  }, []);

  React.useLayoutEffect(() => {
    if (!open || leaving) return;
    void glass.current?.materialize({ duration: 240, scale: 0.96 });
    growShadow(glass.current, "in", 240);
  }, [open, leaving]);

  React.useEffect(() => {
    if (!open) return;
    const onDown = (event: PointerEvent) => {
      if (!root.current?.contains(event.target as Node)) close();
    };
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") close();
    };
    window.addEventListener("pointerdown", onDown);
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("pointerdown", onDown);
      window.removeEventListener("keydown", onKey);
    };
  }, [open, close]);

  return (
    <div ref={root} className={cn("relative", className)}>
      <button
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => (open ? close() : setOpen(true))}
        className="relative flex h-10 items-center gap-1.5 rounded-full pr-3 pl-4 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <LiquidGlass appearance="class" interactive swell />
        Sort by {sort.toLowerCase()}
        <IconChevronDown className="size-4 text-foreground/60" />
      </button>
      {open ? (
        <div role="menu" aria-label="Sort by" className="absolute top-12 left-0 z-10 w-52 origin-top-left rounded-[22px] p-1.5 text-foreground">
          <LiquidGlass glassRef={glass} appearance="class" floating />
          <motion.div
            initial={{ opacity: 0, scale: 0.96 }}
            animate={leaving ? { opacity: 0, scale: 0.96 } : { opacity: 1, scale: 1 }}
            transition={{ duration: leaving ? 0.16 : 0.24, ease: EASE }}
            className="origin-top-left"
          >
            {SORTS.map((item, index) => (
              <button
                key={item}
                type="button"
                role="menuitemradio"
                aria-checked={item === sort}
                onPointerEnter={() => setActive(index)}
                onPointerLeave={() => setActive(-1)}
                onClick={() => {
                  setSort(item);
                  close();
                }}
                className={cn(
                  "flex w-full items-center justify-between rounded-2xl px-3 py-2 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
                  index === active && "liquid-glass-well",
                )}
              >
                {item}
                {item === sort ? <IconCheck className="size-4" /> : null}
              </button>
            ))}
          </motion.div>
        </div>
      ) : null}
    </div>
  );
}

// ── Dialog ──────────────────────────────────────────────

/** A glass dialog inside its stage: floating="dialog", materializing as it zooms in. */
export function GlassDialog({ className }: { className?: string }) {
  const [open, setOpen] = React.useState(false);
  const [leaving, setLeaving] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const glass = React.useRef<LiquidGlassHandle | null>(null);
  const trigger = React.useRef<HTMLButtonElement>(null);
  const first = React.useRef<HTMLButtonElement>(null);

  const close = React.useCallback(() => {
    setLeaving(true);
    growShadow(glass.current, "out", 180);
    void glass.current?.dematerialize({ duration: 180, scale: 0.97 }).then(() => {
      setOpen(false);
      setLeaving(false);
      trigger.current?.focus();
    });
  }, []);

  React.useLayoutEffect(() => {
    if (!open || leaving) return;
    void glass.current?.materialize({ duration: 280, scale: 0.95 });
    growShadow(glass.current, "in", 280);
    first.current?.focus();
  }, [open, leaving]);

  return (
    <div className={cn("absolute inset-0 grid place-items-center", className)}>
      <button
        ref={trigger}
        type="button"
        onClick={() => setOpen(true)}
        className="relative flex h-10 items-center rounded-full px-5 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <LiquidGlass appearance="class" interactive swell />
        Share album…
      </button>
      <>
        {open ? (
          <div className="absolute inset-0 grid place-items-center p-4" onKeyDown={(event) => event.key === "Escape" && close()}>
            <motion.div
              aria-hidden="true"
              className="absolute inset-0 bg-background/50"
              initial={{ opacity: 0 }}
              animate={{ opacity: leaving ? 0 : 1 }}
              transition={{ duration: 0.2 }}
              onClick={close}
            />
            <div
              role="dialog"
              aria-modal="true"
              aria-labelledby="share-title"
              className="relative w-full max-w-[300px] rounded-[28px] p-5 text-foreground"
            >
              <LiquidGlass glassRef={glass} appearance="class" floating="dialog" />
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                animate={leaving ? { opacity: 0, scale: 0.97 } : { opacity: 1, scale: 1 }}
                transition={{ duration: leaving ? 0.18 : 0.28, ease: EASE }}
              >
                <h3 id="share-title" className="text-base font-semibold">
                  Share “Summer 2026”
                </h3>
                <p className="mt-1.5 text-sm text-foreground/70">Anyone with the link can see the 48 photos in this album.</p>
                <div className="mt-5 grid grid-cols-2 gap-2">
                  <button
                    ref={first}
                    type="button"
                    onClick={close}
                    onPointerEnter={() => setHover(true)}
                    onPointerLeave={() => setHover(false)}
                    className={cn("h-10 rounded-full text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring", hover && "liquid-glass-well")}
                  >
                    Cancel
                  </button>
                  <button
                    type="button"
                    onClick={close}
                    className="liquid-glass-well h-10 rounded-full text-sm font-semibold outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  >
                    Copy link
                  </button>
                </div>
              </motion.div>
            </div>
          </div>
        ) : null}
      </>
    </div>
  );
}

// ── Lens ────────────────────────────────────────────────

/** The tabs' lens on its own: drag it over the text; pressed, it magnifies more. */
export function GlassLens({ size = 132, initial = { x: 0.5, y: 0.45 } }: { size?: number; initial?: { x: number; y: number } }) {
  // Magnifies from the moment the glass exists, and more while it's held.
  const lens = React.useMemo(() => {
    let current: LiquidGlassHandle | null = null;
    return {
      get current() {
        return current;
      },
      set current(value: LiquidGlassHandle | null) {
        current = value;
        value?.magnify(1.12);
      },
    };
  }, []);
  const drag = useDraggable({ initial });
  React.useEffect(() => {
    lens.current?.magnify(drag.dragging ? 1.22 : 1.12);
  }, [drag.dragging, lens]);
  return (
    <div
      ref={drag.ref}
      style={{ ...drag.style, width: size, height: size }}
      onPointerDown={drag.onPointerDown}
      onPointerMove={drag.onPointerMove}
      onPointerUp={drag.onPointerUp}
      onPointerCancel={drag.onPointerCancel}
      className={cn("absolute cursor-grab rounded-full", drag.dragging && "cursor-grabbing")}
      role="img"
      aria-label="A magnifying glass lens. Drag it."
    >
      <LiquidGlass glassRef={lens} appearance="class" variant="lens" geometry={LENS_GEOMETRY} samples={4} />
    </div>
  );
}