"use client";

import { useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import Modal from "@/components/elements/Modal";
import RoundedButton from "@/components/elements/RoundedButton";
import { useTranslation } from "react-i18next";

const PARTICLES = ["🎉", "🎊", "✨", "🎈", "🎁"];

type Particle = {
  id: number;
  emoji: string;
  x: number;
  y: number;
  rotate: number;
  delay: number;
};

function buildParticles(count: number): Particle[] {
  return Array.from({ length: count }, (_, i) => {
    const angle = (Math.PI * 2 * i) / count + Math.random() * 0.5;
    const distance = 90 + Math.random() * 60;
    return {
      id: i,
      emoji: PARTICLES[i % PARTICLES.length],
      x: Math.cos(angle) * distance,
      y: Math.sin(angle) * distance,
      rotate: Math.random() * 360 - 180,
      delay: Math.random() * 0.15,
    };
  });
}

type GiftRevealModalProps = {
  isOpen: boolean;
  onClose: () => void;
  amount: number;
  message?: string | null;
};

export default function GiftRevealModal({
  isOpen,
  onClose,
  amount,
  message,
}: GiftRevealModalProps) {
  const { t } = useTranslation("common");
  const particles = useMemo(() => buildParticles(14), [isOpen]);

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      height="fit"
      elevated
      panelClassName="!bg-transparent !shadow-none !border-none max-w-sm w-full"
    >
      <div className="relative flex flex-col items-center gap-4 py-10">
        <div className="pointer-events-none absolute left-1/2 top-16 -translate-x-1/2">
          <AnimatePresence>
            {isOpen &&
              particles.map((p) => (
                <motion.span
                  key={p.id}
                  className="absolute text-2xl"
                  initial={{ x: 0, y: 0, opacity: 1, scale: 0.4, rotate: 0 }}
                  animate={{
                    x: p.x,
                    y: p.y,
                    opacity: 0,
                    scale: 1,
                    rotate: p.rotate,
                  }}
                  transition={{ duration: 1.4, delay: p.delay, ease: "easeOut" }}
                >
                  {p.emoji}
                </motion.span>
              ))}
          </AnimatePresence>
        </div>

        <motion.div
          initial={{ scale: 0.3, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ type: "spring", stiffness: 260, damping: 16 }}
          className="flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-b from-pink-400 to-purple-500 text-4xl shadow-lg"
        >
          🎁
        </motion.div>

        <motion.p
          initial={{ scale: 0.6, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.2, type: "spring", stiffness: 220, damping: 14 }}
          className="text-2xl font-extrabold text-white drop-shadow"
        >
          {amount.toLocaleString()} {t("settings.toman")}
        </motion.p>

        {message ? (
          <motion.p
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.35 }}
            className="max-w-[260px] text-center text-sm text-white/90"
          >
            {message}
          </motion.p>
        ) : null}

        <p className="text-xs text-white/70">{t("chats.gift.creditedHint")}</p>

        <RoundedButton
          type="button"
          onClick={onClose}
          className="!border-transparent mt-2 h-9 w-32 !bg-white/15 text-white"
        >
          {t("posts.close")}
        </RoundedButton>
      </div>
    </Modal>
  );
}
