sass-mohfarawati/components/layout/floating-controls.tsx

"use client";

import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { Plus, ShieldCheck } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import { useState, type ReactNode } from "react";

import { LocaleToggle } from "@/components/layout/locale-toggle";
import { SoundToggle } from "@/components/sound-toggle";
import { ThemeToggle } from "@/components/theme-toggle";
import { buildAdminUrl } from "@/lib/admin-routing";
import type { AppLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";

type FloatingControlsProps = {
  locale: string;
  defaultLocale: AppLocale;
  isSuperAdmin?: boolean;
};

const pill =
  "flex h-11 w-11 items-center justify-center rounded-full border border-border/60 bg-background/85 text-foreground/80 shadow-panel backdrop-blur-chrome transition-colors hover:bg-accent hover:text-foreground";

/** Radius (px) of the arc the items fan out along. */
const RADIUS = 92;

export function FloatingControls({
  locale,
  defaultLocale,
  isSuperAdmin = false,
}: FloatingControlsProps) {
  const [open, setOpen] = useState(false);
  const t = useTranslations("navigation");
  const activeLocale = useLocale();
  const isRtl = activeLocale === "ar";
  const reducedMotion = useReducedMotion();

  const controls: ReactNode[] = [
    <SoundToggle
      key="sound"
      ariaLabel={t("soundMute")}
      mutedAriaLabel={t("soundUnmute")}
      variant="ghost"
      className={cn(pill, "border-transparent bg-transparent")}
    />,
    <ThemeToggle
      key="theme"
      ariaLabel={t("themeToggle")}
      variant="ghost"
      className={cn(pill, "border-transparent bg-transparent")}
    />,
    <LocaleToggle
      key="locale"
      locale={locale}
      defaultLocale={defaultLocale}
      className={cn(pill, "border-transparent bg-transparent p-0")}
    />,
  ];

  if (isSuperAdmin) {
    controls.push(
      <a key="admin" href={buildAdminUrl("/")} aria-label="Open admin dashboard" className={pill}>
        <ShieldCheck className="h-[1.125rem] w-[1.125rem]" />
      </a>,
    );
  }

  const count = controls.length;
  // Fan the items across a quarter arc from "up" (90°) to "sideways" (180°),
  // mirrored for RTL so they always spread away from the corner into the page.
  const startAngle = 94;
  const endAngle = 176;
  const positionFor = (index: number) => {
    const angle = count === 1 ? 135 : startAngle + ((endAngle - startAngle) * index) / (count - 1);
    const radians = (angle * Math.PI) / 180;
    return {
      x: (isRtl ? -1 : 1) * Math.cos(radians) * RADIUS,
      y: -Math.sin(radians) * RADIUS,
    };
  };

  return (
    <div
      className="pointer-events-none fixed bottom-0 end-0 z-50 p-4"
      style={{ paddingBottom: "calc(1.1rem + env(safe-area-inset-bottom, 0px))" }}
    >
      <div className="pointer-events-auto relative h-12 w-12">
        <AnimatePresence>
          {open ? (
            <>
              {/* click-away scrim */}
              <motion.button
                key="scrim"
                type="button"
                aria-hidden
                tabIndex={-1}
                onClick={() => setOpen(false)}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className="fixed inset-0 -z-10 cursor-default bg-transparent"
              />
              {controls.map((control, index) => {
                const { x, y } = positionFor(index);
                return (
                  <motion.div
                    key={index}
                    className="absolute bottom-0 end-0 grid h-12 w-12 place-items-center"
                    initial={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
                    animate={reducedMotion ? { opacity: 1 } : { opacity: 1, x, y, scale: 1 }}
                    exit={reducedMotion ? { opacity: 0 } : { opacity: 0, x: 0, y: 0, scale: 0.4 }}
                    transition={
                      reducedMotion
                        ? { duration: 0 }
                        : { type: "spring", stiffness: 460, damping: 26, delay: index * 0.035 }
                    }
                  >
                    {control}
                  </motion.div>
                );
              })}
            </>
          ) : null}
        </AnimatePresence>

        {/* trigger */}
        <button
          type="button"
          onClick={() => setOpen((value) => !value)}
          aria-expanded={open}
          aria-label={open ? t("closeMenu") : t("openMenu")}
          className={cn(
            pill,
            "relative h-12 w-12",
            open && "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
          )}
        >
          <motion.span
            animate={{ rotate: open ? 135 : 0 }}
            transition={reducedMotion ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 22 }}
            className="flex items-center justify-center"
          >
            <Plus className="h-5 w-5" />
          </motion.span>
        </button>
      </div>
    </div>
  );
}