Goo Reaction Bar

"use client";

import { useEffect, useId, useRef, useState } from "react";
import { Heart } from "@phosphor-icons/react";
import { cn } from "@/lib/cn";

interface Reaction {
  id: string;
  emoji: string;
  label: string;
  count: number;
  /** Slot on the fan, in px from the trigger's centre. */
  x: number;
  y: number;
}

/*
 * Slots sit on a shallow arc above the pill. Centres are 56px apart while the
 * blobs are 44px across: any tighter and the goo threshold fuses neighbours
 * into one amoeba that never separates. The 12px gap is what lets a neck
 * stretch and snap.
 */
const REACTIONS: Reaction[] = [
  { id: "love", emoji: "❤️", label: "Love", count: 128, x: -112, y: -58 },
  { id: "haha", emoji: "😂", label: "Haha", count: 41, x: -56, y: -70 },
  { id: "party", emoji: "🎉", label: "Celebrate", count: 63, x: 0, y: -76 },
  { id: "wow", emoji: "😮", label: "Wow", count: 17, x: 56, y: -70 },
  { id: "clap", emoji: "👏", label: "Applaud", count: 22, x: 112, y: -58 },
];

const BASE_TOTAL = REACTIONS.reduce((sum, r) => sum + r.count, 0);

/*
 * Travel is CSS, not Motion, for two reasons: the shape layer and the emoji
 * layer must move as one (any drift and the goo detaches from its glyph), and
 * an entrance gated on the async useReducedMotion() value can latch at
 * opacity 0 before that value ever resolves.
 */
const REACTION_STYLES = `
.grb-slot {
  transform: translate(0px, 0px) scale(0.34);
  transition:
    transform 460ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 160ms linear;
  transition-delay: calc(var(--ri) * 45ms);
}
[data-open="true"] .grb-slot {
  transform: translate(var(--x), var(--y)) scale(1);
  transition-delay: calc(var(--i) * 45ms);
}
.grb-emoji { opacity: 0; }
[data-open="true"] .grb-emoji { opacity: 1; }

.grb-label {
  opacity: 0;
  transition: opacity 140ms linear;
}
.grb-emoji:hover .grb-label,
.grb-emoji:focus-visible .grb-label {
  opacity: 1;
}

@keyframes grb-count-pop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-2px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}
.grb-count[data-bumped="true"] {
  animation: grb-count-pop 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .grb-slot {
    transition: none;
    transform: translate(var(--x), var(--y)) scale(1);
    opacity: 0;
  }
  [data-open="true"] .grb-slot { opacity: 1; }
  .grb-label { transition: none; }
  .grb-count[data-bumped="true"] { animation: none; }
}
`;

/**
 * A like button that splits into a fan of emoji reactions. The trigger pill and
 * every reaction blob live in one goo-filtered layer, so the blobs tear away
 * from the pill through stretching liquid necks rather than simply appearing.
 *
 * The glyphs ride an unfiltered layer pinned to the same transforms — the goo
 * blurs the shapes, never the emoji.
 *
 * @param {string} className - Extra classes on the root. [Optional]
 *
 * @example
 * <ReactionBar />
 */
export function ReactionBar({ className }: { className?: string }) {
  const gooId = useId().replace(/:/g, "");
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [isBumped, setIsBumped] = useState(false);
  const [liveMessage, setLiveMessage] = useState("");

  const selected = REACTIONS.find((r) => r.id === selectedId) ?? null;
  const total = BASE_TOTAL + (selected ? 1 : 0);

  useEffect(() => {
    if (!isOpen) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      setIsOpen(false);
      triggerRef.current?.focus();
    };
    const onPointer = (event: PointerEvent) => {
      if (rootRef.current && !rootRef.current.contains(event.target as Node)) setIsOpen(false);
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("pointerdown", onPointer);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("pointerdown", onPointer);
    };
  }, [isOpen]);

  const choose = (reaction: Reaction) => {
    const isSame = reaction.id === selectedId;
    setSelectedId(isSame ? null : reaction.id);
    setIsBumped(!isSame);
    setLiveMessage(isSame ? "Reaction removed" : `Reacted with ${reaction.label}`);
    setIsOpen(false);
    // Closing marks the glyph layer inert. A keyboard user standing on the
    // chosen emoji would be dropped onto <body>; hand focus back to the pill.
    triggerRef.current?.focus();
  };

  const slotVars = (index: number, reaction: Reaction) =>
    ({
      "--i": index,
      "--ri": REACTIONS.length - 1 - index,
      "--x": `${reaction.x}px`,
      "--y": `${reaction.y}px`,
    }) as React.CSSProperties;

  return (
    <div ref={rootRef} className={cn("relative isolate inline-flex", className)}>
      {/* href+precedence let React 19 hoist and dedupe this stylesheet across
          reaction bar instances. */}
      <style href="goo-reaction-bar" precedence="medium">
        {REACTION_STYLES}
      </style>

      {/* Goo filter: blur, snap the alpha back into solid shapes, then lay the
          crisp original on top so neighbouring blobs fuse at liquid edges. */}
      <svg aria-hidden width="0" height="0" className="pointer-events-none absolute">
        <title>Reaction goo filter</title>
        <defs>
          <filter id={gooId} x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"
              result="goo"
            />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
          </filter>
        </defs>
      </svg>

      {/* Shape layer — the metaball body. Filter is dropped by CSS, not by the
          reduce flag: useReducedMotion() reads false on the server and true on
          the client, which would desync hydration. */}
      <div
        aria-hidden
        data-open={isOpen}
        className="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-[280px] w-[360px] -translate-x-1/2 -translate-y-1/2 [filter:var(--goo-filter)] motion-reduce:[filter:none]"
        style={{ "--goo-filter": `url(#${gooId})` } as React.CSSProperties}
      >
        <div className="absolute left-1/2 top-1/2 -ml-14 -mt-[22px] h-11 w-28 rounded-full bg-popover" />
        {REACTIONS.map((reaction, index) => (
          <div
            key={reaction.id}
            style={slotVars(index, reaction)}
            className="grb-slot absolute left-1/2 top-1/2 -ml-[22px] -mt-[22px] size-11 rounded-full bg-popover"
          />
        ))}
      </div>

      {/* The pill's own face. The white surface behind it comes from the goo. */}
      <button
        ref={triggerRef}
        type="button"
        onClick={() => setIsOpen((open) => !open)}
        aria-expanded={isOpen}
        aria-label={selected ? `Reacted with ${selected.label}` : "Add a reaction"}
        className="relative z-10 flex h-11 w-28 items-center justify-center gap-2 rounded-full text-neutral-900 outline-none transition-transform duration-150 focus-visible:ring-2 focus-visible:ring-white/70 active:scale-[0.97] motion-reduce:transition-none"
      >
        {selected ? (
          <span className="text-lg leading-none">{selected.emoji}</span>
        ) : (
          <Heart size={18} weight="regular" className="text-neutral-500" />
        )}
        <span
          className="grb-count text-sm font-semibold tabular-nums"
          data-bumped={isBumped}
          onAnimationEnd={() => setIsBumped(false)}
        >
          {total}
        </span>
      </button>

      {/* Glyph layer — same transforms, no filter, so the emoji stay crisp.
          The container never takes pointer events (it spans 360×280 over the
          pill and the post text — as a hit target it would swallow their
          clicks); only the emoji buttons re-enable them, and inert keeps those
          untouchable while closed. */}
      <div
        inert={!isOpen}
        data-open={isOpen}
        role="group"
        aria-label="Reactions"
        className="pointer-events-none absolute left-1/2 top-1/2 z-10 h-[280px] w-[360px] -translate-x-1/2 -translate-y-1/2"
      >
        {REACTIONS.map((reaction, index) => (
          <button
            key={reaction.id}
            type="button"
            onClick={() => choose(reaction)}
            aria-pressed={reaction.id === selectedId}
            aria-label={`${reaction.label}, ${
              reaction.count + (reaction.id === selectedId ? 1 : 0)
            } reactions`}
            style={slotVars(index, reaction)}
            className={cn(
              "grb-slot grb-emoji pointer-events-auto absolute left-1/2 top-1/2 -ml-[22px] -mt-[22px] grid size-11 place-items-center rounded-full text-xl outline-none",
              "focus-visible:ring-2 focus-visible:ring-[#f97316]",
              reaction.id === selectedId && "ring-2 ring-[#f97316]",
            )}
          >
            <span aria-hidden>{reaction.emoji}</span>
            <span className="grb-label pointer-events-none absolute -top-8 whitespace-nowrap rounded-md bg-neutral-900 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">
              {reaction.label}
            </span>
          </button>
        ))}
      </div>

      <span aria-live="polite" className="sr-only">
        {liveMessage}
      </span>
    </div>
  );
}