/* planner-stickers.jsx — sticker tray (drag onto blocks) */

function StickerTray({ visible, onPickup }) {
  if (!visible) return null;

  const onStart = (e, kind) => {
    if (e.button !== 0) return;
    window.__draggingSticker = { kind, x: e.clientX, y: e.clientY };
    e.currentTarget.classList.add("dragging-sticker");
    const ghost = e.currentTarget.cloneNode(true);
    ghost.style.position = "fixed";
    ghost.style.zIndex = 999;
    ghost.style.pointerEvents = "none";
    ghost.style.left = (e.clientX - 20) + "px";
    ghost.style.top = (e.clientY - 20) + "px";
    ghost.style.opacity = "0.85";
    ghost.style.transform = "rotate(-10deg) scale(1.2)";
    document.body.appendChild(ghost);

    const onMove = (ev) => {
      ghost.style.left = (ev.clientX - 20) + "px";
      ghost.style.top = (ev.clientY - 20) + "px";
    };
    const onUp = () => {
      ghost.remove();
      window.__draggingSticker = null;
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      document.querySelectorAll(".dragging-sticker").forEach(el => el.classList.remove("dragging-sticker"));
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
  };

  return (
    <div className="sticker-tray" role="toolbar" aria-label="Stickers">
      <span className="tray-label">Stickers ✨</span>
      {window.STICKER_LIST.map(s => {
        const Cmp = window.Sticker[s.id];
        return (
          <div key={s.id} className="sticker" onMouseDown={(e) => onStart(e, s.id)} title={s.label}>
            <Cmp/>
          </div>
        );
      })}
    </div>
  );
}

window.StickerTray = StickerTray;