Fab

"use client";

import { useEffect, useId, useRef, useState, type ReactNode } from "react";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FabAction {
  label: string;
  icon: ReactNode;
  tone?: "peach" | "mint" | "lavender" | "butter";
  onSelect?: () => void;
}

export interface FabProps {
  label?: string;
  actions?: FabAction[];
  /** fixed = pinned bottom-right of the viewport; static = in flow. */
  position?: "fixed" | "static";
  className?: string;
}

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/15 text-da-fg",
  butter: "bg-da-warning/35 text-da-fg",
} as const;

/** Floating action button: a big round periwinkle “+” that rotates into “×” and fans out labelled pastel speed-dial actions with a staggered bounce. */
export function Fab({
  label = "Create",
  actions = [
    { label: "New task", icon: "✅", tone: "mint" },
    { label: "New board", icon: "🧩", tone: "lavender" },
    { label: "Reminder", icon: "🔔", tone: "butter" },
    { label: "Note", icon: "📝", tone: "peach" },
  ],
  position = "fixed",
  className,
}: FabProps) {
  const [open, setOpen] = useState(false);
  const id = useId();
  const root = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    const onDown = (e: MouseEvent) => root.current && !root.current.contains(e.target as Node) && setOpen(false);
    window.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onDown);
    return () => {
      window.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onDown);
    };
  }, [open]);

  return (
    <div ref={root} className={cn(position === "fixed" ? "fixed right-6 bottom-6 z-40" : "relative", "flex flex-col items-end gap-3", className)}>
      {open && (
        <ul id={id} className="flex flex-col items-end gap-2.5">
          {actions.map((a, i) => (
            <li
              key={a.label}
              className="transition-[opacity,translate,scale] duration-(--da-duration) ease-da-emphasized starting:translate-y-3 starting:scale-75 starting:opacity-0"
              style={{ transitionDelay: `${(actions.length - 1 - i) * 40}ms` }}
            >
              <button
                type="button"
                onClick={() => {
                  a.onSelect?.();
                  setOpen(false);
                }}
                className="da-focus group flex items-center gap-3 rounded-da-pill"
              >
                <span className="rounded-da-pill bg-da-surface px-3 py-1.5 text-sm font-semibold shadow-da-md">{a.label}</span>
                <span
                  aria-hidden
                  className={cn(
                    "grid size-12 place-items-center rounded-full text-xl shadow-da-md transition-[scale] duration-(--da-duration) group-hover:scale-110",
                    TONES[a.tone ?? "lavender"],
                  )}
                >
                  {a.icon}
                </span>
              </button>
            </li>
          ))}
        </ul>
      )}
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        aria-label={open ? "Close menu" : label}
        onClick={() => setOpen((o) => !o)}
        className="da-focus grid size-16 place-items-center rounded-full bg-da-primary text-da-primary-fg shadow-da-lg transition-[scale] duration-(--da-duration) ease-da-emphasized hover:scale-105 active:scale-95"
      >
        <Plus aria-hidden className={cn("size-7 transition-transform duration-(--da-duration) ease-da-emphasized", open && "rotate-45")} />
      </button>
    </div>
  );
}

export default Fab;