/* global React */

// Placeholder comic poster — striped panels with monospace topic label
// Built deterministically from the comic's palette (no random fake AI art).
function ComicPoster({ comic, dense = false }) {
  // Real image takes precedence over the placeholder grid.
  // In dense (gallery) mode, prefer the lightweight thumbnail when one exists.
  if (comic.image) {
    const src = dense && comic.thumb ? comic.thumb : comic.image;
    return (
      <div style={{ position: "relative", width: "100%", height: dense ? "100%" : "auto" }}>
        <img
          src={src}
          alt={comic.description}
          loading="lazy"
          style={{
            display: "block",
            width: "100%",
            height: dense ? "100%" : "auto",
            objectFit: dense ? "cover" : "contain",
            objectPosition: dense ? "top" : "center",
            aspectRatio: dense ? "4 / 3" : "auto",
            background: "#FFFDF6",
          }}
        />
        {/* Per-card pose accent — only on dense (gallery) view, only when topic_pose is set */}
        {dense && comic.topic_pose && (
          <img
            src={`assets/poses/hoopy-pose-${comic.topic_pose}-transparent.png`}
            alt=""
            aria-hidden="true"
            loading="lazy"
            style={{
              position: "absolute",
              right: 6,
              bottom: 6,
              width: 56,
              height: 56,
              objectFit: "contain",
              filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.18))",
              pointerEvents: "none",
            }}
          />
        )}
      </div>
    );
  }
  const cols = comic.panel_count >= 6 ? 3 : (comic.panel_count >= 4 ? 2 : 2);
  const rows = Math.ceil(comic.panel_count / cols);
  const panels = Array.from({ length: comic.panel_count }, (_, i) => i);

  return (
    <div
      role="img"
      aria-label={comic.description}
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: dense ? "4 / 3" : "5 / 4",
        background: "#FFFDF6",
        display: "grid",
        gridTemplateColumns: `repeat(${cols}, 1fr)`,
        gridTemplateRows: `repeat(${rows}, 1fr)`,
        gap: 6,
        padding: 8,
        boxSizing: "border-box",
      }}
    >
      {panels.map((i) => (
        <Panel
          key={i}
          index={i}
          color={comic.palette[i % comic.palette.length]}
          slug={comic.slug}
          topic={comic.topic}
          dense={dense}
          isFirst={i === 0}
          isLast={i === comic.panel_count - 1}
          comic={comic}
        />
      ))}
    </div>
  );
}

function Panel({ index, color, slug, topic, dense, isFirst, isLast, comic }) {
  // Diagonal-stripe background — the universal "image goes here" placeholder.
  const stripeColor = "rgba(42,42,42,0.06)";
  const bg = `repeating-linear-gradient(${(index * 17) % 180}deg, ${stripeColor} 0 6px, transparent 6px 12px), ${color}`;

  const labels = [
    "INTRO",
    "STEP 01",
    "STEP 02",
    "COMPARE",
    "DETAIL",
    "DIAGRAM",
    "RESULT",
    "OUTRO",
  ];
  const label = isFirst ? "INTRO" : isLast ? "OUTRO" : labels[index % labels.length];

  return (
    <div
      style={{
        background: bg,
        border: "1px solid rgba(42,42,42,0.55)",
        borderRadius: 2,
        position: "relative",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        padding: dense ? 6 : 10,
      }}
    >
      <div
        style={{
          fontFamily: "IBM Plex Mono, monospace",
          fontSize: dense ? 8 : 10,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "rgba(42,42,42,0.7)",
          display: "flex",
          justifyContent: "space-between",
          gap: 8,
        }}
      >
        <span>{String(index + 1).padStart(2, "0")}</span>
        <span>{label}</span>
      </div>

      {/* Tiny Hoopy in panel 0 */}
      {isFirst && !dense && (
        <div style={{ position: "absolute", left: "50%", top: "55%", transform: "translate(-50%, -50%)" }}>
          <window.HoopyThink size="sm" />
        </div>
      )}
      {isFirst && dense && (
        <div style={{ position: "absolute", left: "50%", top: "55%", transform: "translate(-50%, -50%)" }}>
          <window.HoopyThink size="xs" />
        </div>
      )}

      <div
        style={{
          fontFamily: "Caveat, cursive",
          fontSize: dense ? 11 : 16,
          color: "rgba(42,42,42,0.7)",
          lineHeight: 1.05,
          maxWidth: "90%",
        }}
      >
        {!isFirst && (
          <span>
            {/* stand-in copy — short, panel-shaped */}
            {["The setup.", "Watch the temp.", "Add the swirl.", "Two ways.", "Close-up.", "Diagram.", "Done well.", "You got this."][index % 8]}
          </span>
        )}
      </div>
    </div>
  );
}

window.ComicPoster = ComicPoster;