Goo Melt Filter

"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Bell, Bookmark, ChatRound, ClipboardAdd, Share, Star } from "@solar-icons/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  GooMeltFilter                                                     */
/* ------------------------------------------------------------------ */

interface GooMeltFilterProps {
  /** Filter id referenced via `filter: url(#id)` [Optional, default: "gooey-filter"] */
  id?: string;
  /** Blur radius driving how far shapes melt together [Optional, default: 15] */
  strength?: number;
}

/**
 * A hidden SVG filter that makes sibling shapes melt together like liquid:
 * a Gaussian blur smears them, a contrast-boosting color matrix snaps the
 * blurred alpha back to a hard edge, and the source composites on top.
 * Reference it from any element via `style={{ filter: "url(#id)" }}`.
 * @param {string} id - Filter id [Optional, default: "gooey-filter"]
 * @param {number} strength - Blur radius [Optional, default: 15]
 */
export function GooMeltFilter({ id = "gooey-filter", strength = 15 }: GooMeltFilterProps) {
  return (
    <svg className="absolute hidden" aria-hidden>
      <defs>
        <filter id={id}>
          <feGaussianBlur in="SourceGraphic" stdDeviation={strength} result="blur" />
          <feColorMatrix
            in="blur"
            type="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="goo"
          />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
      </defs>
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/*  Radial gooey menu                                                  */
/* ------------------------------------------------------------------ */

const ACTIONS: { label: string; icon: Icon; angle: number }[] = [
  { label: "Favorite", icon: Star, angle: -150 },
  { label: "Share", icon: Share, angle: -90 },
  { label: "Comment", icon: ChatRound, angle: -30 },
  { label: "Save", icon: Bookmark, angle: 30 },
  { label: "Notify", icon: Bell, angle: 90 },
  { label: "Add to list", icon: ClipboardAdd, angle: 150 },
];

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

/**
 * Six action dots bloom out of a central button; the gooey filter makes them
 * stretch and pinch off the hub like droplets. The filtered layer holds only
 * the solid shapes — icons live on an unfiltered twin layer so the goo never
 * smears them.
 */
export function RadialGooeyMenu() {
  const [isOpen, setIsOpen] = useState(false);

  const spoke = (index: number, open: boolean) => ({
    duration: 0.8,
    ease: EASE,
    delay: open ? index * 0.08 : (ACTIONS.length - 1 - index) * 0.05,
  });

  return (
    <div className="relative flex size-[300px] shrink-0 items-center justify-center">
      {/* Filtered layer: solid dots only */}
      <div
        className="absolute inset-0 flex items-center justify-center"
        style={{ filter: "url(#gooey-radial-menu)" }}
      >
        {ACTIONS.map((action, index) => (
          <motion.div
            key={action.label}
            className="absolute left-1/2 top-1/2"
            style={{ transformOrigin: "center center" }}
            animate={{ rotate: isOpen ? action.angle : action.angle + 90 }}
            transition={spoke(index, isOpen)}
          >
            <motion.div
              className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-900 dark:bg-zinc-100"
              animate={{ y: isOpen ? -RADIUS : 0, scale: isOpen ? 1 : 0.82 }}
              transition={spoke(index, isOpen)}
            />
          </motion.div>
        ))}
        <div className="size-14 rounded-full bg-zinc-900 dark:bg-zinc-100" />
      </div>

      {/* Unfiltered layer: icons + hit targets */}
      <div className="absolute inset-0">
        {ACTIONS.map((action, index) => (
          <motion.div
            key={action.label}
            className="absolute left-1/2 top-1/2"
            style={{ transformOrigin: "center center" }}
            animate={{ rotate: isOpen ? action.angle : action.angle + 90 }}
            transition={spoke(index, isOpen)}
          >
            <motion.div
              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
              animate={{
                y: isOpen ? -RADIUS : 0,
                scale: isOpen ? 1 : 0.7,
                opacity: isOpen ? 1 : 0,
              }}
              transition={{
                duration: 0.72,
                ease: EASE,
                delay: isOpen ? 0.06 + index * 0.08 : 0,
                opacity: { duration: 0.18, delay: isOpen ? 0.14 + index * 0.08 : 0 },
              }}
            >
              <motion.button
                type="button"
                aria-label={action.label}
                onClick={() => setIsOpen(false)}
                className="flex size-12 items-center justify-center rounded-full text-white dark:text-zinc-900"
                whileTap={isOpen ? { scale: 0.96 } : undefined}
              >
                {/* Counter-rotate so the glyph stays upright on the spoke */}
                <motion.div
                  animate={{
                    rotate: isOpen ? -(action.angle + 360) : -(action.angle + 90),
                  }}
                  transition={spoke(index, isOpen)}
                >
                  <action.icon size={20} weight="Bold" />
                </motion.div>
              </motion.button>
            </motion.div>
          </motion.div>
        ))}

        <motion.button
          type="button"
          onClick={() => setIsOpen((v) => !v)}
          aria-label={isOpen ? "Close radial menu" : "Open radial menu"}
          className="absolute left-1/2 top-1/2 z-10 flex size-14 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full text-white transition-transform active:scale-[0.96] dark:text-zinc-900"
        >
          <motion.svg
            viewBox="0 0 24 24"
            className="size-6"
            fill="none"
            stroke="currentColor"
            strokeWidth={2.2}
            strokeLinecap="round"
            animate={{ rotate: isOpen ? 45 : 0, scale: isOpen ? 0.92 : 1 }}
            transition={{ duration: 0.38, ease: EASE }}
          >
            <path d="M12 5v14M5 12h14" />
          </motion.svg>
        </motion.button>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Gooey tabs                                                         */
/* ------------------------------------------------------------------ */

const TAB_CONTENT = [
  { value: "2024", files: ["learning-to-meditate.md", "spring-garden-plans.md", "travel-wishlist.md", "new-side-projects.md"] },
  { value: "2023", files: ["year-in-review.md", "marathon-training-log.md", "recipe-collection.md", "book-reflections.md"] },
  { value: "2022", files: ["moving-to-a-new-city.md", "starting-a-blog.md", "photography-basics.md", "first-shipped-app.md"] },
];

/**
 * The active tab's pill and the content panel are drawn as one filtered
 * shape, so the pill drips into the panel and the seam melts shut while a
 * layoutId spring slides it between tabs. Text renders on an unfiltered
 * layer above.
 */
export function GooeyTabs() {
  const [activeTab, setActiveTab] = useState(TAB_CONTENT[0].value);
  const active = TAB_CONTENT.find((t) => t.value === activeTab) ?? TAB_CONTENT[0];

  return (
    <div className="relative w-full max-w-md p-2">
      {/* Filtered layer: tab pill + panel silhouette */}
      <div
        className="pointer-events-none absolute inset-0 p-2"
        style={{ filter: "url(#gooey-tabs-panel)" }}
      >
        <div className="flex w-full">
          {TAB_CONTENT.map((tab) => (
            <div key={tab.value} className="relative h-10 flex-1">
              {activeTab === tab.value && (
                <motion.div
                  layoutId="active-gooey-tab"
                  className="absolute inset-0 rounded-t-2xl bg-zinc-900 dark:bg-zinc-100"
                  transition={{ type: "spring", stiffness: 320, damping: 30 }}
                />
              )}
            </div>
          ))}
        </div>
        <div className="h-[204px] w-full rounded-b-3xl rounded-tr-3xl bg-zinc-900 dark:bg-zinc-100" />
      </div>

      {/* Unfiltered layer: labels + file list */}
      <div className="relative z-10">
        <div className="flex w-full">
          {TAB_CONTENT.map((tab) => (
            <button
              key={tab.value}
              type="button"
              onClick={() => setActiveTab(tab.value)}
              className={cn(
                "flex h-10 flex-1 items-center justify-center text-sm font-medium transition-colors active:scale-[0.98]",
                activeTab === tab.value
                  ? "text-white dark:text-zinc-900"
                  : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100",
              )}
            >
              {tab.value}
            </button>
          ))}
        </div>
        <div className="h-[204px] overflow-hidden px-6 py-4">
          <AnimatePresence mode="popLayout" initial={false}>
            <motion.ul
              key={active.value}
              initial={{ opacity: 0, y: 40, filter: "blur(10px)" }}
              animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
              exit={{ opacity: 0, y: -40, filter: "blur(10px)" }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              {active.files.map((file) => (
                <li
                  key={file}
                  className="border-b border-white/15 py-2 font-mono text-[13px] text-white last:border-0 dark:border-zinc-900/15 dark:text-zinc-900"
                >
                  {file}
                </li>
              ))}
            </motion.ul>
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}