"use client";

/**
 * RewardCelebration — a full-screen confetti celebration shown when the
 * devotee earns a streak gift. Centered card with the reward image, its
 * cosmic name, and symbolic meaning. Dismissing it acknowledges the gift
 * (via the caller) so it surfaces exactly once.
 *
 * Scrolls internally on small screens (max-h + overflow) and reads in both
 * themes (card/foreground tokens). Esc or backdrop-click closes.
 */

import { useEffect } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { motion } from "framer-motion";
import { Confetti } from "./confetti";
import type { SadhnaRewardGrant } from "@/lib/sadhna";
import { useMounted } from "@/lib/use-mounted";

export function RewardCelebration({
  grant,
  onClose,
}: {
  grant: SadhnaRewardGrant;
  onClose: () => void;
}) {
  const mounted = useMounted();

  // Esc to close + lock background scroll while open.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  if (!mounted) return null;
  const r = grant.reward;

  return createPortal(
    <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      <Confetti />
      <motion.div
        initial={{ scale: 0.85, opacity: 0, y: 16 }}
        animate={{ scale: 1, opacity: 1, y: 0 }}
        transition={{ type: "spring", stiffness: 220, damping: 20 }}
        className="relative z-10 w-full max-w-md max-h-[90vh] overflow-y-auto rounded-3xl border border-border bg-card p-6 text-center shadow-2xl"
      >
        <p className="text-xs font-semibold uppercase tracking-wider text-primary">
          A gift for your sādhana
        </p>
        <h2 className="mt-1 font-(family-name:--font-title) text-2xl font-semibold text-foreground">
          You&apos;ve earned a reward!
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          For {grant.milestone} days of unbroken sādhana 🙏
        </p>

        <div className="relative mx-auto my-6 flex size-48 items-center justify-center">
          <div className="absolute inset-0 rounded-full bg-primary/15 blur-2xl" />
          <Image
            src={r.image_url}
            alt={r.name}
            width={256}
            height={256}
            sizes="256px"
            className="relative size-full object-contain drop-shadow-xl"
          />
        </div>

        <h3 className="font-(family-name:--font-title) text-xl font-semibold text-foreground">
          {r.name}
        </h3>
        {r.meaning ? (
          <p className="mx-auto mt-2 max-w-sm text-[15px] leading-relaxed text-muted-foreground">
            {r.meaning}
          </p>
        ) : null}

        <button
          type="button"
          onClick={onClose}
          className="mt-6 inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
        >
          Hari bol! 🌸
        </button>
      </motion.div>
    </div>,
    document.body,
  );
}