Edge Dock Sidebar

"use client";

import { createContext, memo, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  EdgeDockSidebar — context + provider                                    */
/* ------------------------------------------------------------------ */

interface SidebarState {
  open: boolean;
  toggle: () => void;
  close: () => void;
}

const SidebarContext = createContext<SidebarState>({
  open: false,
  toggle: () => {},
  close: () => {},
});

/** Read the sidebar's open state and controls from anywhere inside the provider. */
export function useEdgeDockSidebar() {
  return useContext(SidebarContext);
}

interface ProviderProps {
  children: ReactNode;
  /** Start opened (handy for demos/thumbnails) [Optional, default: false] */
  defaultOpen?: boolean;
  /** Single-key shortcut that toggles the drawer [Optional, default: "s"] */
  keyboardShortcut?: string;
  /** Open when the pointer rests at the left edge [Optional, default: true] */
  edgeTrigger?: boolean;
  edgeDelay?: number;
}

/**
 * Wraps the app, holding the drawer's open state. It binds a single-key
 * shortcut (ignored inside inputs) and an optional left-edge hover trigger
 * that opens the drawer after a short dwell.
 * @param {boolean} defaultOpen - Start opened [Optional, default: false]
 * @param {string} keyboardShortcut - Toggle key [Optional, default: "s"]
 */
export export function EdgeDockSidebarProvider({
  children,
  defaultOpen = false,
  keyboardShortcut = "s",
  edgeTrigger = true,
  edgeDelay = 500,
}: ProviderProps) {
  const [open, setOpen] = useState(defaultOpen);
  const toggle = useCallback(() => setOpen((v) => !v), []);
  const close = useCallback(() => setOpen(false), []);
  const value = useMemo(() => ({ open, toggle, close }), [open, toggle, close]);

  useEffect(() => {
    if (!keyboardShortcut) return;
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement;
      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) return;
      if (e.key === keyboardShortcut) toggle();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [keyboardShortcut, toggle]);

  useEffect(() => {
    if (!edgeTrigger) return;
    let timer: ReturnType<typeof setTimeout> | null = null;
    const onMove = (e: MouseEvent) => {
      if (!open && e.clientX <= 16) {
        if (!timer) timer = setTimeout(() => setOpen(true), edgeDelay);
      } else if (timer) {
        clearTimeout(timer);
        timer = null;
      }
    };
    window.addEventListener("mousemove", onMove);
    return () => {
      window.removeEventListener("mousemove", onMove);
      if (timer) clearTimeout(timer);
    };
  }, [open, edgeTrigger, edgeDelay]);

  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
}

/* ------------------------------------------------------------------ */
/*  Item + Section                                                     */
/* ------------------------------------------------------------------ */

const PreviewContext = createContext<{ setPreview: (src: string | null) => void }>({
  setPreview: () => {},
});

interface ItemProps {
  href: string;
  label: string;
  isActive?: boolean;
  /** Optional video src to preview beside the cursor on hover [Optional] */
  preview?: string;
  className?: string;
  onClick?: () => void;
  enterDelay?: number;
}

/** Scroll an active row toward the viewport center once, on activation. */
function useScrollIntoView(active: boolean) {
  const ref = useRef<HTMLDivElement>(null);
  const done = useRef(false);
  useEffect(() => {
    if (!active || done.current || !ref.current) return;
    done.current = true;
    const el = ref.current;
    const id = requestAnimationFrame(() => {
      const viewport = el.closest("[data-scroll-viewport]");
      if (!(viewport instanceof HTMLElement)) return;
      const vr = viewport.getBoundingClientRect();
      const er = el.getBoundingClientRect();
      const delta = er.top - vr.top - vr.height / 2 + er.height / 2;
      if (Math.abs(delta) > 40) viewport.scrollBy({ top: delta, behavior: "smooth" });
    });
    return () => cancelAnimationFrame(id);
  }, [active]);
  useEffect(() => {
    if (!active) done.current = false;
  }, [active]);
  return ref;
}

export const EdgeDockSidebarItem = memo(export function EdgeDockSidebarItem({
  href,
  label,
  isActive = false,
  preview,
  className,
  onClick,
  enterDelay = 0,
}: ItemProps) {
  const { setPreview } = useContext(PreviewContext);
  const [hovered, setHovered] = useState(false);
  const scrollRef = useScrollIntoView(isActive);
  // State, not a ref: the entrance-vs-interaction delay is render output,
  // and reading a mutable ref during render tears under concurrent React.
  const [hasEntered, setHasEntered] = useState(false);
  useEffect(() => {
    setHasEntered(true);
  }, []);
  const delay = hasEntered ? 0 : enterDelay;
  const lineSpring = { type: "spring" as const, stiffness: 600, damping: 30 };

  return (
    <div ref={scrollRef} className="relative">
      {isActive && (
        <motion.span
          layoutId="sb002-active-bar"
          className="pointer-events-none absolute top-1/2 z-40 h-[1.8px] -translate-y-1/2 rounded-full bg-[#F4574D]"
          animate={{ width: 30 }}
          transition={{ type: "spring", stiffness: 500, damping: 30 }}
        />
      )}
      <motion.span
        className="pointer-events-none absolute left-0 top-1/2 h-px -translate-y-1/2 bg-zinc-400 dark:bg-zinc-500"
        initial={{ width: 0 }}
        animate={{ width: isActive ? 0 : hovered ? 26 : 18 }}
        transition={{ ...lineSpring, delay }}
      />
      <motion.span
        className="pointer-events-none absolute left-0 top-1/4 h-px bg-zinc-300 dark:bg-zinc-600"
        initial={{ width: 0 }}
        animate={{ width: 13 }}
        transition={{ duration: 0.2, delay: hasEntered ? 0 : enterDelay + 0.04, ease: "easeOut" }}
      />
      <motion.a
        href={href}
        onClick={(e) => {
          e.preventDefault();
          onClick?.();
        }}
        onMouseEnter={() => {
          setHovered(true);
          if (preview) setPreview(preview);
        }}
        onMouseLeave={() => {
          setHovered(false);
          setPreview(null);
        }}
        className={cn("relative flex select-none items-center py-1 pl-8 pr-3", className)}
        initial={{ opacity: 0, x: -18 }}
        animate={{ opacity: isActive || hovered ? 1 : 0.55, x: isActive ? 8 : hovered ? 6 : 0 }}
        transition={{
          opacity: { duration: 0.22, delay, ease: "easeOut" },
          x: { type: "spring", stiffness: 700, damping: 30, delay },
        }}
        style={{ transformOrigin: "left center" }}
      >
        <span className="truncate text-base text-zinc-900 dark:text-zinc-100">{label}</span>
      </motion.a>
    </div>
  );
});

interface SectionProps {
  label: string;
  count?: number;
  children: ReactNode;
  className?: string;
  enterDelay?: number;
}

/** A labelled group of items, with an optional count. */
export export function EdgeDockSidebarSection({ label, count, children, className, enterDelay = 0 }: SectionProps) {
  return (
    <div className={cn("mb-2 flex flex-col gap-0", className)}>
      <motion.span
        className="flex items-baseline gap-2 px-0 py-4 text-base font-medium text-zinc-400 dark:text-zinc-500"
        initial={{ opacity: 0, x: -12 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{
          opacity: { duration: 0.2, delay: enterDelay, ease: "easeOut" },
          x: { type: "spring", stiffness: 600, damping: 30, delay: enterDelay },
        }}
      >
        {label}
        {count !== undefined && (
          <span className="text-xs font-normal tabular-nums text-zinc-300 dark:text-zinc-600">
            {count}
          </span>
        )}
      </motion.span>
      {children}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  EdgeDockSidebar — the drawer                                            */
/* ------------------------------------------------------------------ */

interface EdgeDockSidebarProps {
  open: boolean;
  onClose: () => void;
  children: ReactNode;
  className?: string;
  position?: "fixed" | "absolute";
}

/**
 * A left-edge drawer that springs in over the page: escape, an outside
 * pointer-down, or a scroll dismisses it. A single hovered item drives a
 * video preview panel that follows the cursor. When positioned `absolute`
 * it anchors to the nearest positioned ancestor instead of the viewport.
 * @param {boolean} open - Whether the drawer is shown [Required]
 * @param {() => void} onClose - Dismiss handler [Required]
 */
export function EdgeDockSidebar({ open, onClose, children, className, position = "fixed" }: EdgeDockSidebarProps) {
  const panelRef = useRef<HTMLDivElement>(null);
  const anchorRef = useRef<HTMLElement | null>(null);
  const [preview, setPreview] = useState<string | null>(null);
  const px = useMotionValue(0);
  const py = useMotionValue(0);
  const springX = useSpring(px, { stiffness: 300, damping: 30 });
  const springY = useSpring(py, { stiffness: 300, damping: 30 });
  const previewCtx = useMemo(() => ({ setPreview }), []);

  useEffect(() => {
    if (position !== "absolute" || !panelRef.current) return;
    let el = panelRef.current.parentElement;
    while (el) {
      const pos = window.getComputedStyle(el).position;
      if (pos === "relative" || pos === "absolute" || pos === "sticky") {
        anchorRef.current = el;
        return;
      }
      el = el.parentElement;
    }
    anchorRef.current = document.documentElement;
  }, [position, open]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  useEffect(() => {
    if (!open) return;
    const onScroll = () => onClose();
    const onDown = (e: PointerEvent) => {
      const t = e.target as HTMLElement;
      if (t.closest("[data-sidebar002-toggle]")) return;
      if (panelRef.current && !panelRef.current.contains(t)) onClose();
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    document.addEventListener("pointerdown", onDown);
    return () => {
      window.removeEventListener("scroll", onScroll);
      document.removeEventListener("pointerdown", onDown);
    };
  }, [open, onClose]);

  useEffect(() => {
    if (!open) return;
    const onMove = (e: MouseEvent) => {
      if (position === "absolute" && anchorRef.current) {
        const r = anchorRef.current.getBoundingClientRect();
        px.set(e.clientX - r.left);
        py.set(e.clientY - r.top);
      } else {
        px.set(e.clientX);
        py.set(e.clientY);
      }
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, [open, position, px, py]);

  const anchor = position === "absolute" ? "absolute" : "fixed";

  return (
    <PreviewContext.Provider value={previewCtx}>
      <AnimatePresence>
        {open && (
          <>
            <motion.div
              ref={panelRef}
              className={cn(
                `${anchor} left-0 top-0 z-50 h-full w-72 border-r border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950`,
                className,
              )}
              initial={{ x: "-100%" }}
              animate={{ x: "0%" }}
              exit={{ x: "-100%" }}
              transition={{ type: "spring", stiffness: 300, damping: 28 }}
            >
              <nav
                data-scroll-viewport
                className="[scrollbar-width:none] [&::-webkit-scrollbar]:hidden relative z-10 flex h-full flex-col gap-1 overflow-y-auto px-3 pb-32 pt-32"
              >
                {children}
              </nav>
            </motion.div>

            <AnimatePresence>
              {preview && (
                <motion.div
                  className={`${anchor} z-[150] overflow-hidden rounded-md shadow-2xl pointer-events-none`}
                  style={{ x: springX, y: springY, translateX: "20px", translateY: "-80%", width: 267, height: 167 }}
                  initial={{ opacity: 0, scale: 0.88 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.88 }}
                  transition={{ duration: 0.15 }}
                >
                  <video
                    key={preview}
                    src={preview}
                    autoPlay
                    loop
                    muted
                    playsInline
                    className="h-full w-full object-cover"
                  />
                </motion.div>
              )}
            </AnimatePresence>
          </>
        )}
      </AnimatePresence>
    </PreviewContext.Provider>
  );
}