spsays-training/components/sadhna/rewards-gallery.tsx

"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 } from "lucide-react";
import type { SadhnaRewardGrant } from "@/lib/sadhna";
import { useMounted } from "@/lib/use-mounted";

export function RewardsGallery({
  collected,
  nextRewardDate,
}: {
  collected: SadhnaRewardGrant[];
  nextRewardDate: string | null;
}) {
  const [detail, setDetail] = useState<SadhnaRewardGrant | null>(null);

  // 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);
    }
  }

  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={() => setDetail(g)}
              className="group flex flex-col items-center gap-1.5 rounded-xl border border-border bg-background p-2 text-center transition-colors hover:border-primary/40 hover:bg-muted/40"
            >
              <div className="relative aspect-square w-full">
                <Image
                  src={g.reward.image_url}
                  alt={g.reward.name}
                  fill
                  sizes="(max-width: 640px) 30vw, 120px"
                  className="object-contain p-1"
                />
              </div>
              <span className="line-clamp-2 text-[13px] font-medium leading-tight text-foreground">
                {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}
    </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">
          Earned on day {grant.milestone} of your streak
        </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",
  });
}