"use client";

/**
 * Stickers on a message, rendered without a chat bubble.
 *
 * Laid out as rows of at most two, NOT a fixed 2-column grid: a grid reserves
 * the second cell whether or not anything fills it, so a single sticker sat
 * beside a gap the width of another sticker. Rows size themselves — a lone
 * sticker takes the row and is drawn larger, a pair shares it and both shrink.
 * An odd count therefore ends on one big sticker rather than a hole.
 *
 * Unlike the media grid, this never collapses into "+N more" — every sticker
 * sent is drawn. They are small and deliberately playful, and hiding some
 * behind a counter would make a wall of them read as an attachment list
 * rather than what it is.
 *
 * Long-pressing or right-clicking one offers to keep it, which is the only
 * way a sticker spreads beyond the person who earned it.
 */

import { useState } from "react";
import Image from "next/image";
import { toast } from "sonner";
import { chat, type Attachment } from "@/lib/chat";
import { cn } from "@/lib/utils";

/** At most two per row, as WhatsApp and Telegram do. */
const STICKERS_PER_ROW = 2;

export function StickerGrid({
  conversationId,
  messageId,
  stickers,
  /** Own stickers are already in your collection — no point offering to save. */
  mine,
}: {
  conversationId: string;
  messageId: string;
  stickers: Attachment[];
  mine: boolean;
}) {
  const [saving, setSaving] = useState<string | null>(null);

  if (stickers.length === 0) return null;

  const save = async (a: Attachment) => {
    const key = a.entity_id;
    if (!key || mine || saving) return;
    setSaving(key);
    try {
      await chat.saveSticker(conversationId, messageId, key);
      toast.success(`Saved ${a.title ?? "sticker"} to your collection`);
    } catch {
      toast.error("Could not save that sticker");
    } finally {
      setSaving(null);
    }
  };

  // Chunk into rows of at most two. Doing this in JS rather than CSS is what
  // lets a row know how many it holds, which is what sets the size.
  const rows: Attachment[][] = [];
  for (let i = 0; i < stickers.length; i += STICKERS_PER_ROW) {
    rows.push(stickers.slice(i, i + STICKERS_PER_ROW));
  }

  return (
    // w-fit so the block hugs its rows: any fixed width would reintroduce the
    // empty space this layout exists to remove.
    <div className="flex w-fit flex-col gap-1">
      {rows.map((row, i) => (
        <div key={i} className="flex gap-1">
          {row.map((a) => {
            const alone = row.length === 1;
            return (
              <button
                key={a.id}
                type="button"
                disabled={mine}
                onContextMenu={(e) => {
                  if (mine) return;
                  e.preventDefault();
                  void save(a);
                }}
                title={
                  mine
                    ? (a.title ?? "")
                    : `${a.title ?? "Sticker"} — hold to save`
                }
                aria-label={a.title ?? "Sticker"}
                className={cn(
                  "relative disabled:cursor-default",
                  alone ? "size-32 sm:size-36" : "size-24 sm:size-28",
                )}
              >
                {a.image_url && (
                  <Image
                    src={a.image_url}
                    alt={a.title ?? ""}
                    fill
                    sizes={alone ? "144px" : "112px"}
                    className="object-contain"
                  />
                )}
              </button>
            );
          })}
        </div>
      ))}
    </div>
  );
}