// share-card.jsx — stable save/share image for dream diagnosis
const ShareCard = React.forwardRef(({ reading, dateStr }, ref) => {
  const symbolMeta = window.getDreamSymbolMeta
    ? window.getDreamSymbolMeta(reading.primary_symbol)
    : { no: "01", nameJp: reading.card_name_jp || "夢のシンボル", nameEn: reading.card_name_en || "Dream Symbol", image: "uploads/symbol-cards-web/symbol-card-01-moon-crescent.webp" };
  const shareCardImage = symbolMeta.image;
  const summary = reading.share_summary || reading.main_message || "夢に現れた象徴から、今日の心の流れを読み解きました。";
  const summaryText = summary.length > 92 ? `${summary.slice(0, 92)}…` : summary;
  const advice = reading.advice || reading.sign_message || "今日は、気になることを一つだけ言葉にして、小さく整えるところから始めてみてください。";
  const adviceText = advice.length > 66 ? `${advice.slice(0, 66)}…` : advice;
  const dreamType = reading.dream_type_jp || `${symbolMeta.nameJp}のサイン`;
  const cardName = reading.card_name_jp || symbolMeta.nameJp || "夢のサイン";
  const roman = symbolMeta.no || reading.roman || "01";
  const symbolWords = Array.isArray(reading.keywords)
    ? reading.keywords.slice(0, 3).map(k => k.word).filter(Boolean)
    : [];
  const themes = [
    { jp: "恋愛", value: reading.themes?.love?.text || "相手の気持ちを急がず、自分が安心できる距離を確認してみて。" },
    { jp: "仕事", value: reading.themes?.work?.text || "気になる作業を一つだけ書き出すと、動き出しやすくなります。" },
    { jp: "対人", value: reading.themes?.relations?.text || "無理に合わせず、返事や相談のタイミングを少し整えて。" },
  ].map(item => ({ ...item, value: item.value }));

  return (
    <div ref={ref} className="share-card share-simple-card">
      <div className="share-simple-bg"></div>
      <div className="share-simple-shell">
        <main className="share-simple-main">
          <div className="share-simple-kicker">AI DREAM READING</div>
          <h2>夢診断書</h2>
          <div className="share-simple-symbols">
            {(symbolWords.length ? symbolWords : [cardName]).map((word, i) => <span key={i}>#{word}</span>)}
          </div>
          <section className="share-simple-message">
            <div className="share-simple-label">夢の中心シンボル</div>
            <h3>{dreamType}</h3>
            <p>{summaryText}</p>
          </section>
          <section className="share-simple-advice">
            <div className="share-simple-label">今日のアドバイス</div>
            <p>{adviceText}</p>
          </section>
          <div className="share-simple-themes">
            {themes.map(theme => (
              <div className="share-simple-theme" key={theme.jp}>
                <strong>{theme.jp}</strong>
                <span>{theme.value}</span>
              </div>
            ))}
          </div>
        </main>
        <aside className="share-simple-side">
          <div className="share-simple-card-frame">
            <img src={shareCardImage} alt={`${cardName}のカード`} crossOrigin="anonymous" />
          </div>
          <div className="share-simple-date">{dateStr}</div>
        </aside>
      </div>
    </div>
  );
});

window.ShareCard = ShareCard;