// share-card.jsx — Offscreen-rendered shareable image, captured via html2canvas
const ShareCard = React.forwardRef(({ reading, dateStr }, ref) => {
  const dreamCard = window.getDreamCardByRoman ? window.getDreamCardByRoman(reading.roman) : null;
  const primary = window.STICKERS.find(s => s.id === reading.primary_symbol)
              || window.STICKERS.find(s => s.id === "moon-crescent");
  const secondary = reading.secondary_symbol
    ? window.STICKERS.find(s => s.id === reading.secondary_symbol)
    : null;
  const hasImage = !!reading._image;
  const aura = reading.aura_color || { hex: "#C89255", name: "蜜色" };

  return (
    <div ref={ref} className={`share-card ${hasImage ? "has-image" : ""}`}>
      <div className="share-corner tl"></div>
      <div className="share-corner tr"></div>
      <div className="share-corner bl"></div>
      <div className="share-corner br"></div>

      <div className="share-sparkles">
        {[
          [10,12],[88,8],[6,42],[92,38],[14,70],[90,76],[20,90],[80,92],
          [50,6],[30,30],[68,28],[40,86],[60,84],[24,52],[78,60],
        ].map(([x,y], i) => (
          <span key={i} style={{ left: `${x}%`, top: `${y}%`, fontSize: 12 + (i % 3) * 6 + "px" }}>✦</span>
        ))}
      </div>

      <div className="share-top">
        <div className="share-top-left">
          <div className="share-date">
            <span>{dateStr}</span>
          </div>
          <div className="share-tag">DREAM DIAGNOSIS · 夢診断書</div>
        </div>
        <div className="share-top-right">
          <div className="share-edition">{reading.type_code}</div>
        </div>
      </div>

      <div className="share-brand">夢 診 断</div>
      <div className="share-brand-sub">YUMESHINDAN · MORNING ANALYSIS</div>

      <div className="share-tarot generated-share-tarot">
        {dreamCard?.image && <img className="share-generated-bg" src={dreamCard.image} alt=""/>}
        <div className="share-generated-overlay"></div>
        <div className="share-tarot-typecode">
          <span className="label">DREAM TYPE</span>
          <span className="value">{reading.type_code}</span>
        </div>
        <div className="share-tarot-roman">{reading.roman}</div>
        <div className="share-tarot-illust">
          {hasImage ? (
            <>
              {secondary && <div className="secondary s1">{secondary.render()}</div>}
              <div className="share-avatar">
                <img src={reading._image} alt=""/>
              </div>
              <div className="share-avatar-halo">{primary.render()}</div>
            </>
          ) : (
            <>
              {secondary && <div className="secondary s1">{secondary.render()}</div>}
              <div className="primary">{primary.render()}</div>
            </>
          )}
          <span className="sparkle sp1">✦</span>
          <span className="sparkle sp2">✧</span>
          <span className="sparkle sp3">·</span>
        </div>
        <div className="share-tarot-name-en">{reading.card_name_en}</div>
        <div className="share-tarot-name-jp">{reading.dream_type_jp || reading.card_name_jp}</div>
        <div className="share-tarot-match">MATCH {reading.match_score}%</div>
      </div>

      {/* aura + diagnosis */}
      <div className="share-meta-row">
        <div className="share-aura">
          <span className="share-aura-label">TODAY'S AURA</span>
          <span className="share-aura-swatch" style={{ background: aura.hex }}></span>
          <span className="share-aura-name">{aura.name}</span>
        </div>
      </div>

      <div className="share-message">
        <div className="label">DREAM ANALYSIS</div>
        <div className="text">{reading.main_message}</div>
      </div>

      <div className="share-advice">
        <div className="label">今　日　の　ア　ド　バ　イ　ス</div>
        <div className="text">{reading.advice}</div>
      </div>

      <div className="share-footer">
        ✦ &nbsp;&nbsp; YUMESHINDAN · A MORNING DREAM ANALYSIS &nbsp;&nbsp; ✦
      </div>
    </div>
  );
});

window.ShareCard = ShareCard;