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 {
  LiquidGlass,
  LiquidGlassTabLabel,
  useLiquidGlassHighlight,
  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. */

// Ease-out cubic, the curve the glass materializes on.
const EASE = [0.33, 1, 0.68, 1] as const;

// ── 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-0.5", 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="rounded-full px-3.5 py-1.5 text-sm font-medium whitespace-nowrap text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring sm:px-4"
        >
          <LiquidGlassTabLabel>{option}</LiquidGlassTabLabel>
        </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 />
      <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, as iOS 27's: it pours out of its button and covers it, the button
 * becoming the menu, and closing it draws back into the button as a drop.
 */
export function GlassMenu({ className }: { className?: string }) {
  const [open, setOpen] = React.useState(false);
  const [sort, setSort] = React.useState(SORTS[0]!);
  const root = React.useRef<HTMLDivElement>(null);
  const button = React.useRef<HTMLButtonElement>(null);
  const glass = React.useRef<LiquidGlassHandle | null>(null);
  // While it draws back, pressing the button pours it straight back out.
  const closing = React.useRef(false);

  const close = React.useCallback(() => {
    if (closing.current) return;
    closing.current = true;
    void glass.current?.drawBack().then((gone) => {
      if (!gone || !closing.current) return;
      closing.current = false;
      setOpen(false);
    });
  }, []);

  const reopen = () => {
    closing.current = false;
    if (button.current) void glass.current?.pourFrom(button.current, { cover: true });
  };

  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
        ref={button}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => (!open ? setOpen(true) : closing.current ? reopen() : close())}
        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 />
        Sort by {sort.toLowerCase()}
        <IconChevronDown className="size-4 text-foreground/60" />
      </button>
      {open ? (
        <SortMenu
          button={button}
          glass={glass}
          sort={sort}
          onChoose={(item) => {
            setSort(item);
            close();
          }}
        />
      ) : null}
    </div>
  );
}

function SortMenu({
  button,
  glass,
  sort,
  onChoose,
}: {
  button: React.RefObject<HTMLButtonElement | null>;
  glass: React.RefObject<LiquidGlassHandle | null>;
  sort: string;
  onChoose: (item: string) => void;
}) {
  const menu = React.useRef<HTMLDivElement>(null);
  // A pill under the row you point at, stretching toward the next one.
  useLiquidGlassHighlight(menu);
  // Placed below its button, it pours out of it and over it.
  React.useLayoutEffect(() => {
    if (button.current) void glass.current?.pourFrom(button.current, { cover: true });
  }, [button, glass]);
  return (
    <div ref={menu} role="menu" aria-label="Sort by" className="absolute top-12 left-0 z-10 w-52 rounded-[22px] p-1.5 text-foreground">
      <LiquidGlass glassRef={glass} appearance="class" floating />
      {SORTS.map((item) => (
        <button
          key={item}
          type="button"
          role="menuitemradio"
          aria-checked={item === sort}
          onClick={() => onChoose(item)}
          className="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"
        >
          {item}
          {item === sort ? <IconCheck className="size-4" /> : null}
        </button>
      ))}
    </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);
    void glass.current?.dematerialize({ scale: 0.98 }).then(() => {
      setOpen(false);
      setLeaving(false);
      trigger.current?.focus();
    });
  }, []);

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

  return (
    <div className={cn("absolute inset-0 grid place-items-center", className)}>
      <button
        ref={trigger}
        type="button"
        aria-haspopup="dialog"
        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 />
        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: leaving ? 0.18 : 0.26, ease: EASE }}
              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.965 }}
                animate={leaving ? { opacity: 0, scale: 0.98 } : { opacity: 1, scale: 1 }}
                transition={{ duration: leaving ? 0.18 : 0.24, 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>
  );
}

// ── Card ────────────────────────────────────────────────

/** Regular glass over text: drag it and the rim bends the letters it crosses. */
export function GlassCard({ initial = { x: 0.5, y: 0.5 } }: { initial?: { x: number; y: number } }) {
  const drag = useDraggable({ initial });
  return (
    <div
      ref={drag.ref}
      style={drag.style}
      onPointerDown={drag.onPointerDown}
      onPointerMove={drag.onPointerMove}
      onPointerUp={drag.onPointerUp}
      onPointerCancel={drag.onPointerCancel}
      className={cn(
        "absolute grid h-[132px] w-[236px] cursor-grab content-start gap-1 rounded-[30px] p-5 text-foreground select-none",
        drag.dragging && "cursor-grabbing",
      )}
    >
      <LiquidGlass appearance="class" />
      <span className="text-base font-semibold tracking-tight">Drag me over the text</span>
      <span className="text-sm text-foreground/70">The rim bends each letter as it crosses.</span>
    </div>
  );
}