"use client";

/**
 * /reward-gifts — hand a sticker to everyone, outside the streak.
 *
 * These arrive wrapped: each devotee sees a blurred tile in their rewards
 * gallery, and opening it plays the same celebration a streak reward does.
 * Nothing is required of them to earn it.
 *
 * Sending is idempotent — a repeat reaches only accounts that don't already
 * hold the sticker — so a double click tops up rather than duplicating.
 */

import { useEffect, useState } from "react";
import Image from "next/image";
import { toast } from "sonner";
import { rewardGifts, type GiftableReward } from "@/lib/api";

export default function RewardGiftsPage() {
  const [catalog, setCatalog] = useState<GiftableReward[] | null>(null);
  const [sending, setSending] = useState<string | null>(null);

  useEffect(() => {
    rewardGifts
      .catalog()
      .then(setCatalog)
      .catch(() => {
        toast.error("Could not load the reward catalog");
        setCatalog([]);
      });
  }, []);

  const send = async (reward: GiftableReward) => {
    if (
      !window.confirm(
        `Send “${reward.name}” to every devotee? They'll see it wrapped in their gallery.`,
      )
    ) {
      return;
    }
    setSending(reward.key);
    try {
      const { granted } = await rewardGifts.send(reward.key);
      toast.success(
        granted === 0
          ? "Everyone already has this one"
          : `Sent to ${granted} ${granted === 1 ? "devotee" : "devotees"}`,
      );
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not send the gift");
    } finally {
      setSending(null);
    }
  };

  return (
    <div className="space-y-6">
      <header>
        <h1 className="text-xl font-semibold text-foreground">
          Occasional gifts
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Send a sticker to everyone, no streak required. It arrives wrapped
          and opens with a celebration.
        </p>
      </header>

      {catalog === null ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : catalog.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          The reward catalog is empty.
        </p>
      ) : (
        <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
          {catalog.map((r) => (
            <li
              key={r.key}
              className="flex flex-col items-center gap-2 rounded-xl border border-border p-3 text-center"
            >
              <div className="relative aspect-square w-full">
                <Image
                  src={r.image_url}
                  alt={r.name}
                  fill
                  sizes="160px"
                  className="object-contain p-1"
                  unoptimized
                />
              </div>
              <p className="line-clamp-2 text-sm font-medium text-foreground">
                {r.name}
              </p>
              <button
                type="button"
                disabled={sending !== null}
                onClick={() => send(r)}
                className="w-full rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
              >
                {sending === r.key ? "Sending…" : "Send to everyone"}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}