"use client";

import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui";
import { springGentle } from "@/lib/motion";
import { toastBus, type Toast } from "@/lib/toast";

/**
 * Global toast host: undo for reversible destructive actions, share fallbacks.
 * Sits above the tab bar on phones and near the bottom on desktop.
 */
export function Toaster() {
  const [toasts, setToasts] = useState<Toast[]>([]);

  useEffect(
    () =>
      toastBus.subscribe((toast) => {
        setToasts((current) => [...current.slice(-2), toast]);
        window.setTimeout(
          () => setToasts((current) => current.filter((entry) => entry.id !== toast.id)),
          toast.durationMs ?? 5000,
        );
      }),
    [],
  );

  const dismiss = (id: number) => setToasts((current) => current.filter((entry) => entry.id !== id));

  return (
    <div className="pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom,0px)+5.25rem)] z-[60] flex flex-col items-center gap-2 px-4 sm:bottom-6">
      <AnimatePresence initial={false}>
        {toasts.map((toast) => (
          <motion.div
            key={toast.id}
            layout
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 10 }}
            transition={springGentle}
            role="status"
            className="pointer-events-auto flex w-full max-w-md items-center gap-3 rounded-2xl border border-[var(--glass-border)] bg-[color-mix(in_oklab,var(--surface)_92%,transparent)] px-4 py-3 shadow-lift backdrop-blur-xl"
          >
            <p className="min-w-0 flex-1 text-[13px] font-medium text-[var(--text)]">{toast.message}</p>
            {toast.actionLabel ? (
              <button
                type="button"
                onClick={() => {
                  toast.onAction?.();
                  dismiss(toast.id);
                }}
                className="shrink-0 text-[13px] font-bold text-accent-700 dark:text-accent-200"
              >
                {toast.actionLabel}
              </button>
            ) : (
              <Button size="sm" variant="ghost" className="shrink-0" onClick={() => dismiss(toast.id)} aria-label="Dismiss">
                ✕
              </Button>
            )}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}