/* ==========================================================
   求籤頁 Fortune
   流程: 擲筊 → 聖筊得籤 / 笑筊神含笑 / 陰筊神不允
   視覺: 紅木供桌 + 紅布幔 + 籤筒 + 兩座香爐
   ========================================================== */

/* === 擲筊機率分布 === */
const JIAO_RESULTS = [
  /* sheng = 聖筊 (一正一反 — 神同意) */
  { key: "sheng", weight: 6, label: "聖筊",
    desc: "一仰一覆，神已允諾。請靜心抽籤。" },
  /* xiao = 笑筊 (兩平 — 兩面皆仰) — 神含笑不批 */
  { key: "xiao",  weight: 3, label: "笑筊",
    desc: "兩面皆仰，梟婆含笑不應。請整衣再擲，或心中再思所求。" },
  /* yin = 陰筊 (兩凸 — 兩面皆覆) — 神不允 */
  { key: "yin",   weight: 2, label: "陰筊",
    desc: "兩面皆覆，梟婆未允。所問或非其時，請改日再來。" },
];
const drawJiao = () => {
  const total = JIAO_RESULTS.reduce((s, r) => s + r.weight, 0);
  let n = Math.random() * total;
  for (const r of JIAO_RESULTS) {
    n -= r.weight;
    if (n <= 0) return r;
  }
  return JIAO_RESULTS[0];
};

const Altar = ({onTubeClick, tubeShake}) => (
  <div className="altar">
    <div className="altar-banner">
      <div className="ch brush-glyph">梟婆神位</div>
      <div className="en">XIAO·PO  GODDESS  ENSHRINED</div>
    </div>
    <div className="altar-curtain">敬請靜心　心誠則靈</div>
    <div className="altar-table">
      <div className="altar-censer" aria-hidden="true">
        <span className="wisp"></span>
        <span className="wisp"></span>
        <span className="wisp"></span>
        <div className="stick3"><i></i><i></i><i></i></div>
        <div className="pot"><div className="rim"></div></div>
      </div>

      <div className={"tube-on-altar" + (tubeShake ? " shaking" : "")}
           onClick={onTubeClick}
           role="button" tabIndex={0}>
        <div className="rim-band"></div>
        <div className="ribbon-band">百籤筒</div>
        <div className="sticks-wrap">
          {Array.from({length: 12}).map((_, i) => (
            <span className="stick" key={i}></span>
          ))}
        </div>
      </div>

      <div className="altar-censer" aria-hidden="true">
        <span className="wisp"></span>
        <span className="wisp"></span>
        <span className="wisp"></span>
        <div className="stick3"><i></i><i></i><i></i></div>
        <div className="pot"><div className="rim"></div></div>
      </div>
    </div>
  </div>
);

const JiaoArena = ({state, jiaoResult, onThrow}) => {
  /* state: idle | throwing | shown */
  const j1Class = (() => {
    if (state === "throwing") return "jiao throwing";
    if (state !== "shown") return "jiao is-yang"; /* idle: 平面朝上 */
    if (!jiaoResult) return "jiao is-yang";
    if (jiaoResult.key === "sheng") return "jiao is-yang";   /* 一正一反 → j1 仰 */
    if (jiaoResult.key === "xiao")  return "jiao is-yang";   /* 兩仰 */
    return "jiao is-yin";                                    /* 兩覆 */
  })();
  const j2Class = (() => {
    if (state === "throwing") return "jiao j2 throwing";
    if (state !== "shown") return "jiao j2 is-yang";
    if (!jiaoResult) return "jiao j2 is-yang";
    if (jiaoResult.key === "sheng") return "jiao j2 is-yin"; /* 一正一反 → j2 覆 */
    if (jiaoResult.key === "xiao")  return "jiao j2 is-yang";/* 兩仰 */
    return "jiao j2 is-yin";                                 /* 兩覆 */
  })();

  return (
    <div className="jiao-arena">
      {state === "shown" && jiaoResult && (
        <div className={"jiao-call " + jiaoResult.key}>
          {jiaoResult.label}
        </div>
      )}
      <div className={j1Class}>
        <span className="face yin">聖</span>
        <span className="face yang"></span>
      </div>
      <div className={j2Class}>
        <span className="face yin">筊</span>
        <span className="face yang"></span>
      </div>
      {state === "idle" && (
        <div style={{
          position: "absolute", inset: 0, display: "grid", placeItems: "center",
          pointerEvents: "none",
        }}>
          <div style={{
            color: "var(--ink-mute)", fontSize: 12,
            letterSpacing: "0.4em", fontFamily: "var(--serif)",
            background: "rgba(247,239,214,0.6)", padding: "6px 18px",
          }}>請於下方按鈕擲筊</div>
        </div>
      )}
    </div>
  );
};

const FortunePage = () => {
  /* phase: pray (默念求籤) | tossing (擲筊動畫中) | jiao (結果) | drawn (得籤) */
  const [phase, setPhase] = React.useState("pray");
  const [jiao, setJiao] = React.useState(null);
  const [tubeShake, setTubeShake] = React.useState(false);
  const [pick, setPick] = React.useState(null);
  const [tries, setTries] = React.useState(0);

  const toss = () => {
    setPick(null);
    setPhase("tossing");
    setTimeout(() => {
      const r = drawJiao();
      setJiao(r);
      setTries(t => t + 1);
      setPhase("jiao");
    }, 1400);
  };

  const draw = () => {
    setTubeShake(true);
    setTimeout(() => {
      const f = FORTUNES[Math.floor(Math.random() * FORTUNES.length)];
      setPick(f);
      setTubeShake(false);
      setPhase("drawn");
      window.__xpgToast && window.__xpgToast("梟婆已賜籤", "請靜心閱讀籤詩");
    }, 1200);
  };

  const reset = () => {
    setPhase("pray");
    setJiao(null);
    setPick(null);
  };

  /* 指引文字 */
  const verdict = (() => {
    if (phase === "pray")
      return { lbl: "第一步 · 默念所求", txt: "請雙手合十，心中默念所求之事（一事一問），擲筊問梟婆是否賜籤。" };
    if (phase === "tossing")
      return { lbl: "梟婆審察中…", txt: "兩茭飛旋落地，命運自天定。" };
    if (phase === "jiao" && jiao)
      return { lbl: jiao.label, txt: jiao.desc };
    if (phase === "drawn")
      return { lbl: "已得籤", txt: "請靜心閱讀下方籤詩。若疑慮未消，可至本宮櫃台請師父解籤。" };
    return { lbl: "", txt: "" };
  })();

  return (
    <React.Fragment>
      {/* Sub Hero */}
      <section className="subhero">
        <div className="deco" aria-hidden="true">
          <div className="ring r1"></div>
          <div className="ring r2"></div>
          <div className="ring r3"></div>
        </div>
        <div className="wrap inner">
          <div>
            <div className="breadcrumb">
              <a href="index.html">首頁</a>　／　線上求籤
            </div>
            <h1>
              敬問　梟婆<br/>
              <span className="accent">擲筊　求　籤</span>
            </h1>
            <p className="lead">
              台灣宮廟求籤之禮，先擲筊以告神明，求得「聖筊」後，
              方可至籤筒前抽得一支竹籤。籤詩雖短，卻句句指應，
              得籤者宜謹記詩意，事過三日再行印證。
            </p>
            <div className="info-pills">
              <span className="p"><strong>百籤筒</strong>　歷代相傳</span>
              <span className="p"><strong>三筊定意</strong>　聖／笑／陰</span>
              <span className="p"><strong>免費</strong>　請隨喜添香油</span>
            </div>
          </div>
          <div className="visual">
            <img src="assets/logo.png" alt="梟婆宮印" />
          </div>
        </div>
      </section>

      {/* 主求籤儀式 */}
      <section className="altar-wrap" id="altar">
        <div className="wrap">
          <SectionHead kicker="求籤儀式" title="淨手·默念·擲筊·抽籤" latin="The Rite of Drawing" />

          <Altar
            onTubeClick={() => {
              if (phase === "jiao" && jiao && jiao.key === "sheng") draw();
              else if (phase === "drawn") reset();
              else window.__xpgToast && window.__xpgToast("尚未得聖筊", "請先於下方擲筊問梟婆");
            }}
            tubeShake={tubeShake}
          />

          <div className="jiao-stage">
            <JiaoArena state={
              phase === "tossing" ? "throwing"
              : (phase === "jiao" || phase === "drawn") ? "shown" : "idle"
            } jiaoResult={jiao} onThrow={toss} />

            <div className="jiao-panel">
              <h4>{verdict.lbl ? `· ${verdict.lbl} ·` : ""}</h4>
              <div className="verdict">
                <div className="lbl">梟婆批示</div>
                <div className="txt">{verdict.txt}</div>
              </div>

              <ol className="step-list">
                <li><b>一．</b>淨手定心，雙手合十於胸前。</li>
                <li><b>二．</b>心中默念姓名、生辰、住址，告知所求之事。</li>
                <li><b>三．</b>擲筊請梟婆指示是否賜籤。</li>
                <li><b>四．</b>得聖筊後，方可至籤筒抽籤。</li>
                <li><b>五．</b>得籤回到神前，再擲筊確認此籤為應。</li>
              </ol>

              <div className="jiao-actions">
                {(phase === "pray" || phase === "jiao") && (
                  <button className="btn-jiao" onClick={toss} disabled={phase === "tossing"}>
                    {tries === 0 ? "擲筊問梟婆" : "再擲一筊"}
                  </button>
                )}
                {phase === "jiao" && jiao && jiao.key === "sheng" && (
                  <button className="btn-jiao" onClick={draw}>
                    抽籤 →
                  </button>
                )}
                {phase === "drawn" && (
                  <button className="btn-jiao ghost" onClick={reset}>
                    重　新　求　籤
                  </button>
                )}
              </div>
            </div>
          </div>

          {/* 籤詩展示 */}
          {pick && (
            <div className="poem-card">
              <div className="head">
                <div className="no">{pick.no}</div>
                <div className="grade">{pick.grade}</div>
              </div>
              <div className="poem">{pick.poem}</div>
              <div className="meaning">
                <b>籤解．</b>{pick.meaning}
              </div>
              <div style={{
                marginTop: 18, paddingTop: 14,
                borderTop: "1px dashed rgba(28,20,14,0.18)",
                display: "flex", justifyContent: "space-between",
                fontSize: 12, letterSpacing: "0.25em",
                color: "var(--ink-mute)",
              }}>
                <span>· 籤序 {pick.no} · 等第 {pick.grade} ·</span>
                <span>梟婆神娘娘　親賜</span>
              </div>
            </div>
          )}

          {/* 在地宮廟知識 */}
          <div className="rite-knowledge">
            <div className="col">
              <h3>關於<span>「擲筊」</span>　台灣宮廟之禮</h3>
              <p>
                <span className="em">擲筊（poa̍h-poe）</span>是台灣與閩南民間信仰中向神明請示的傳統儀式。
                兩塊半月形紅木為「筊杯」，一面平、一面凸；信眾雙手合十祈禱後，
                將筊杯擲於神桌前的紅布上，依其落地姿態判讀神意。
              </p>
              <p>
                求籤時，須先以筊問神「弟子可請此籤否？」得<span className="em">聖筊</span>
                後方可抽籤。抽出籤後再擲筊，連得三聖筊即可確認此籤為應；
                若擲出陰筊或笑筊，須再抽一籤。
              </p>
              <p>
                籤詩多為四句七言，含詩、史、卦、評；
                信眾可至本宮櫃台請師父解籤，或對照籤譜自行參悟。
                得籤事應之後，宜回宮答謝，奉香還願。
              </p>
            </div>
            <div className="col">
              <div className="terms">
                <div className="term">
                  <span className="k">聖　筊<span className="lat">SIÚⁿ-PE</span></span>
                  <span className="v">一仰一覆。神已允諾，可繼續所求之事。</span>
                </div>
                <div className="term">
                  <span className="k">笑　筊<span className="lat">CHHIÒ-PE</span></span>
                  <span className="v">兩面皆仰。神含笑不批，意指所問未明，宜再思索。</span>
                </div>
                <div className="term">
                  <span className="k">陰　筊<span className="lat">IM-PE</span></span>
                  <span className="v">兩面皆覆。神不允諾，所問非其時，宜改日再來。</span>
                </div>
                <div className="term">
                  <span className="k">立　筊<span className="lat">KHIA-PE</span></span>
                  <span className="v">筊杯豎立不倒。罕見奇象，意指神明親臨指點。</span>
                </div>
                <div className="term">
                  <span className="k">籤　詩<span className="lat">CHHIAM-SI</span></span>
                  <span className="v">本宮百籤，分上上、上吉、中吉、中平、下下五等。</span>
                </div>
                <div className="term">
                  <span className="k">解　籤<span className="lat">KÉ-CHHIAM</span></span>
                  <span className="v">本宮值殿師父駐廟解籤，每日 09:00–17:00。</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
};

Object.assign(window, { FortunePage });