"use client";

/**
 * RewardsGallery — the collected-gifts section on /sadhna-streak. Shows each
 * unique reward the devotee has earned as a tappable tile (image + short
 * name); tapping opens a detail dialog with the full name + symbolic
 * meaning + which streak day it was earned. Remaining catalog slots show as
 * locked tiles to entice completion.
 *
 * Built to read in both themes (card/foreground tokens), keep names legible
 * (line-clamped, never overflowing), and resize the large R2 images via
 * next/image.
 */

import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { Gift, Sparkles } from "lucide-react";
import { sadhna, type SadhnaRewardGrant } from "@/lib/sadhna";
import { useMounted } from "@/lib/use-mounted";
import { RewardCelebration } from "@/components/sadhna/reward-celebration";
import { cn } from "@/lib/utils";

export function RewardsGallery({
  collected,
  nextRewardDate,
}: {
  collected: SadhnaRewardGrant[];
  nextRewardDate: string | null;
}) {
  const [detail, setDetail] = useState<SadhnaRewardGrant | null>(null);
  // The gift currently being opened — shown enlarged, over confetti.
  const [unwrapping, setUnwrapping] = useState<SadhnaRewardGrant | null>(null);
  // Gifts opened in this session. Held locally so the tile clears the moment
  // the celebration is dismissed, rather than waiting for a page refresh.
  const [justOpened, setJustOpened] = useState<Set<string>>(new Set());

  // De-dupe by reward (collected is newest-first, so the first wins).
  const seen = new Set<string>();
  const unique: SadhnaRewardGrant[] = [];
  for (const g of collected) {
    if (!seen.has(g.reward.key)) {
      seen.add(g.reward.key);
      unique.push(g);
    }
  }

  // A gift stays wrapped until opened. Everything else — every streak
  // reward — is simply collected.
  const isWrapped = (g: SadhnaRewardGrant) =>
    g.source === "gift" && !g.opened && !justOpened.has(g.reward.key);

  const openGift = (g: SadhnaRewardGrant) => {
    setUnwrapping(null);
    setJustOpened((prev) => new Set(prev).add(g.reward.key));
    // The tile has already cleared; a failed write only means it arrives
    // wrapped again next load, which is better than blocking the celebration.
    void sadhna.openGift(g.reward.key).catch(() => {});
  };

  return (
    <section className="rounded-2xl border border-border bg-card p-4 sm:p-5">
      <div className="mb-3 flex items-center gap-2">
        <Gift className="size-5 text-primary" />
        <h2 className="text-base font-semibold text-foreground">
          Sacred Rewards
        </h2>
      </div>

      {unique.length === 0 ? (
        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 px-4 py-8 text-center">
          <Gift className="size-8 text-muted-foreground/50" />
          <p className="text-sm text-muted-foreground">
            No gifts yet. Keep your sādhana streak — a sacred reward arrives
            every 7 days.
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-3 gap-2.5 sm:grid-cols-4">
          {unique.map((g) => (
            <button
              key={g.reward.key}
              type="button"
              onClick={() =>
                isWrapped(g) ? setUnwrapping(g) : setDetail(g)
              }
              aria-label={
                isWrapped(g)
                  ? "A gift is waiting — tap to open"
                  : g.reward.name
              }
              className={cn(
                "group flex flex-col items-center gap-1.5 rounded-xl border bg-background p-2 text-center transition-colors",
                isWrapped(g)
                  ? "border-primary/40 hover:border-primary"
                  : "border-border hover:border-primary/40 hover:bg-muted/40",
              )}
            >
              <div className="relative aspect-square w-full">
                <Image
                  src={g.reward.image_url}
                  alt={isWrapped(g) ? "" : g.reward.name}
                  fill
                  sizes="(max-width: 640px) 30vw, 120px"
                  className={cn(
                    "object-contain p-1 transition-all",
                    // Blurred, not hidden: the shape hints at what's coming
                    // without giving it away.
                    isWrapped(g) && "scale-95 blur-md",
                  )}
                />
                {isWrapped(g) && (
                  <span className="absolute inset-0 flex items-center justify-center">
                    <Sparkles className="size-6 text-primary drop-shadow" />
                  </span>
                )}
              </div>
              <span className="line-clamp-2 text-[13px] font-medium leading-tight text-foreground">
                {isWrapped(g) ? "A gift for you" : shortName(g.reward.name)}
              </span>
            </button>
          ))}
        </div>
      )}

      {nextRewardDate ? (
        <p className="mt-3.5 text-center text-xs text-muted-foreground">
          Next gift on{" "}
          <span className="font-medium text-foreground">
            {fmtLong(nextRewardDate)}
          </span>
        </p>
      ) : null}

      {detail ? (
        <RewardDetail grant={detail} onClose={() => setDetail(null)} />
      ) : null}

      {/* Reuses the streak celebration wholesale — a gift should feel like
          any other sacred reward arriving, not like a second mechanism. */}
      {unwrapping ? (
        <RewardCelebration
          grant={unwrapping}
          onClose={() => openGift(unwrapping)}
        />
      ) : null}
    </section>
  );
}

function RewardDetail({
  grant,
  onClose,
}: {
  grant: SadhnaRewardGrant;
  onClose: () => void;
}) {
  const mounted = useMounted();
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => 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}
      />
      <div 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 select-none">
        <div className="relative mx-auto mb-4 flex size-40 items-center justify-center">
          <div className="absolute inset-0 rounded-full bg-primary/10 blur-2xl" />
          <Image
            src={r.image_url}
            alt={r.name}
            width={224}
            height={224}
            sizes="224px"
            className="relative size-full object-contain drop-shadow-lg"
          />
        </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}
        <p className="mt-4 text-xs text-muted-foreground">
          {/* A gift has no milestone — saying "day null of your streak"
              would be worse than saying nothing about where it came from. */}
          {grant.milestone !== null
            ? `Earned on day ${grant.milestone} of your streak`
            : "An occasional gift"}
        </p>
        <button
          type="button"
          onClick={onClose}
          className="mt-5 inline-flex w-full items-center justify-center rounded-xl border border-border px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
        >
          Close
        </button>
      </div>
    </div>,
    document.body,
  );
}

/** The evocative term before the em-dash, for compact tile labels. */
function shortName(name: string): string {
  const parts = name.split("—");
  return (parts[0] ?? name).trim();
}

function fmtLong(date: string): string {
  const d = new Date(`${date}T00:00:00Z`);
  if (Number.isNaN(d.getTime())) return "";
  return d.toLocaleDateString(undefined, {
    month: "short",
    day: "numeric",
    timeZone: "UTC",
  });
}