"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { PartyPopper } from "lucide-react";
import { useAdminOrders } from "@/lib/data/admin-orders-provider";

export function NewOrderToast() {
  const { newOrderPulse } = useAdminOrders();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (newOrderPulse === 0) return;
    setVisible(true);
    const t = setTimeout(() => setVisible(false), 4000);
    return () => clearTimeout(t);
  }, [newOrderPulse]);

  return (
    <AnimatePresence>
      {visible && (
        <motion.div
          initial={{ opacity: 0, y: -16, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: -16, scale: 0.95 }}
          transition={{ type: "spring", stiffness: 400, damping: 30 }}
          className="fixed right-4 top-4 z-[60] flex items-center gap-3 rounded-2xl bg-gold px-4 py-3 text-ink shadow-glow-gold sm:right-6 sm:top-6"
        >
          <PartyPopper size={18} strokeWidth={2.5} />
          <div>
            <p className="text-sm font-semibold">New order received!</p>
            <p className="text-xs text-ink/70">The list just updated automatically</p>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}