// stickers.jsx — stickers tab (auto-renders preview from each PDF)
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const STICKERS = window.STICKERS || [];

// Configure PDF.js worker once
if (window.pdfjsLib && window.pdfjsLib.GlobalWorkerOptions) {
  window.pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
}

function StickerCard({ item }) {
  const canvasRef = useRefS(null);
  const [status, setStatus] = useStateS("loading"); // loading | ok | error

  useEffectS(() => {
    let cancelled = false;
    async function render() {
      if (!window.pdfjsLib) { setStatus("error"); return; }
      try {
        const pdf = await window.pdfjsLib.getDocument(item.file).promise;
        const page = await pdf.getPage(1);
        const baseViewport = page.getViewport({ scale: 1 });
        // Render at a crisp width
        const targetW = 560;
        const scale = targetW / baseViewport.width;
        const viewport = page.getViewport({ scale });
        const canvas = canvasRef.current;
        if (!canvas || cancelled) return;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        const ctx = canvas.getContext("2d");
        await page.render({ canvasContext: ctx, viewport }).promise;
        if (!cancelled) setStatus("ok");
      } catch (e) {
        if (!cancelled) setStatus("error");
      }
    }
    render();
    return () => { cancelled = true; };
  }, [item.file]);

  const download = (e) => {
    e.stopPropagation();
    const a = document.createElement("a");
    a.href = item.file;
    a.download = item.file.split("/").pop();
    a.click();
  };

  const openZoom = (e) => {
    e.stopPropagation();
    window.openLightbox({
      kind: "pdf",
      file: item.file,
      label: "STICKER / ",
      title: item.title,
      downloadHref: item.file,
      downloadName: item.file.split("/").pop(),
    });
  };

  return (
    <div className="card sticker-card">
      <div className="thumb-wrap zoomable" onClick={openZoom}>
        {item.isNew && <span className="badge-new">NEW</span>}
        <canvas
          className="thumb"
          ref={canvasRef}
          style={{ display: status === "ok" ? "block" : "none" }}
        ></canvas>
        {status === "loading" && (
          <div className="sticker-state"><span className="spinner"></span></div>
        )}
        {status === "error" && (
          <div className="sticker-state">
            <svg viewBox="0 0 32 32" width="34" height="34" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M9 3h10l6 6v20H9z" /><path d="M19 3v6h6" /><path d="M13 17h6M13 21h6" />
            </svg>
            <span>PDF</span>
          </div>
        )}
        <button className="zoom-btn" onClick={openZoom} aria-label="Zoom in">
          <MagnifyIcon />
        </button>
        <div className="card-actions">
          <button className="dl-btn" onClick={download} aria-label="Download">
            <DownloadIcon />
            <span className="dl-label">Download</span>
          </button>
        </div>
      </div>
      <div className="card-meta">
        <span className="card-title">
          <span className="num mono">{item.title}</span>
        </span>
        <span className="card-res">PDF</span>
      </div>
    </div>
  );
}

function Stickers() {
  return (
    <div>
      <div className="page-head">
        <div>
          <h1>STICKERS <span className="h1-accent">/</span> PACK</h1>
          <p className="sticker-tagline">
            <span className="word">Download</span>
            <span className="dot-sep">·</span>
            <span className="word">Print</span>
            <span className="dot-sep">·</span>
            <span className="word">Stick</span>
          </p>
        </div>
        <p>Print-ready sticker sheets. Free for all players — grab the PDF and bring it to any print shop.</p>
      </div>

      {STICKERS.length === 0 ? (
        <div className="empty-state">
          <div className="empty-icon">
            <svg viewBox="0 0 32 32" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.4">
              <rect x="5" y="4" width="22" height="24" rx="2" />
              <path d="M11 11h10M11 16h10M11 21h6" />
            </svg>
          </div>
          <div className="empty-title">No stickers yet</div>
          <div className="empty-sub">Sticker packs will appear here soon.</div>
        </div>
      ) : (
        <div className="grid stickers">
          {STICKERS.map((s) => (
            <StickerCard key={s.id} item={s} />
          ))}
        </div>
      )}
    </div>
  );
}

window.Stickers = Stickers;