/* innerbloom — Draw oracle cards (breathing → flip → reading) */
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

function DrawFlow({ lang, onBack, onSave }) {
  const PHASES = [
    { key: "dr_in", cls: "breathe-in", ms: 4000 },
    { key: "dr_hold", cls: "hold", ms: 4000 },
    { key: "dr_out", cls: "breathe-out", ms: 4000 },
  ];
  const [stage, setStage] = useStateD("intro");
  const [phase, setPhase] = useStateD(0);
  const [cycles, setCycles] = useStateD(0);
  const [ready, setReady] = useStateD(false);
  const [flipped, setFlipped] = useStateD(false);
  const [card, setCard] = useStateD(CONTENT.oracle[0]);
  const [savedFlag, setSavedFlag] = useStateD(false);
  const to = useRefD(null);

  useEffectD(() => {
    if (stage !== "breath") return;
    clearTimeout(to.current);
    to.current = setTimeout(() => {
      const next = (phase + 1) % PHASES.length;
      if (next === 0) {
        const c = cycles + 1; setCycles(c);
        if (c >= 3) setReady(true);
      }
      setPhase(next);
    }, PHASES[phase].ms);
    return () => clearTimeout(to.current);
  }, [stage, phase]);

  const begin = () => { setStage("breath"); setPhase(0); setCycles(0); setReady(false); };
  const draw  = () => { setCard(CONTENT.oracle[Math.floor(Math.random() * CONTENT.oracle.length)]); setStage("reveal"); setFlipped(false); setSavedFlag(false); };
  const again = () => { setStage("intro"); setFlipped(false); };
  const save  = () => {
    if (savedFlag) return;
    setSavedFlag(true);
    onSave({ sym: card.sym, accent: card.accent, guide: lang === "zh" ? card.guide_zh : card.guide_en, msg: lang === "zh" ? card.msg_zh : card.msg_en });
  };

  const g = (k) => tt(lang, k);
  const zh = lang === "zh";

  return (
    <div className="scr fade">
      <PushHeader title={g("tool_draw_t")} onBack={onBack} lang={lang} />
      <div className="scr-scroll pushed" id="view-card" style={{ display: "flex", flexDirection: "column" }}>

        {stage === "intro" && (
          <div className="card-intro">
            <div className="card-intro-icon"><IbIcon.Card width="48" height="48" /></div>
            <h2 className="card-intro-title">{g("dr_intro_t")}</h2>
            <p className="card-intro-body">{g("dr_intro_s")}</p>
            <button className="begin-breathing-btn" onClick={begin}>{g("dr_begin")}</button>
          </div>
        )}

        {stage === "breath" && (
          <div className="breath-guide">
            <div className="breath-ring-outer"><div className={"breath-circle " + PHASES[phase].cls}></div></div>
            <div className="breath-label">{g(PHASES[phase].key)}</div>
            <div className="breath-counter">{"· ".repeat(cycles).trim()}</div>
            <p className="think-text" style={{ opacity: ready ? 1 : 0 }}>{g("dr_think")}</p>
            <button className="ready-btn" style={{ opacity: ready ? 1 : 0, pointerEvents: ready ? "auto" : "none" }} onClick={draw}>{g("dr_ready")}</button>
          </div>
        )}

        {stage === "reveal" && (
          <div className={"card-reveal" + (flipped ? " revealed" : "")}>

            {/* ── Card display ── */}
            {!flipped ? (
              /* Single large card, tap to flip */
              <div className="card-pair">
                <div className="oracle-card oracle-card--large" onClick={() => setFlipped(true)} style={{ cursor: "pointer" }}>
                  <div className="oracle-card-inner">
                    <div className="oracle-card-back">
                      {card.back
                        ? <img src={card.back} className="card-img" alt="" />
                        : <div className="card-back-pattern">✦</div>}
                    </div>
                    <div className="oracle-card-front" style={{ "--card-accent": card.accent }}>
                      {card.front
                        ? <img src={card.front} className="card-img" alt="" />
                        : <div className="card-symbol" style={{ color: card.accent }}>{card.sym}</div>}
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              /* Both sides shown side by side after reveal */
              <div className="card-pair">
                <div className="card-back-revealed">
                  {card.back
                    ? <img src={card.back} className="card-img" alt="" />
                    : <div className="oracle-card-back" style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "inherit" }}><div className="card-back-pattern">✦</div></div>}
                </div>
                <div className="oracle-card" style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid rgba(192,160,200,0.25)", background: "#2e1a28" }}>
                  {card.front
                    ? <img src={card.front} className="card-img" alt="" />
                    : <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}><div className="card-symbol" style={{ color: card.accent }}>{card.sym}</div></div>}
                </div>
              </div>
            )}

            {!flipped && (
              <p className="think-text" style={{ opacity: 1, marginTop: 16 }}>{g("dr_tap")}</p>
            )}

            {flipped && (
              <div className="card-reading">

                {/* ── Guide + Message ── */}
                <div className="reading-guide-block">
                  <div className="reading-meta-row">
                    <span className="reading-meta-label" style={{ color: card.accent }}>{card.sym}</span>
                    <span className="reading-guide-name" style={{ color: card.accent }}>{zh ? card.guide_zh : card.guide_en}</span>
                  </div>
                  <p className="reading-message">{zh ? card.msg_zh : card.msg_en}</p>
                </div>

                {/* ── Body / Mind / Spirit dims ── */}
                <div className="reading-dims">
                  {[
                    { cls: "reading-dim-body",   icon: zh ? "体" : "Body",   label: zh ? card.body_label_zh   : card.body_label_en,   txt: zh ? card.body_zh   : card.body_en },
                    { cls: "reading-dim-mind",   icon: zh ? "心" : "Mind",   label: zh ? card.mind_label_zh   : card.mind_label_en,   txt: zh ? card.mind_zh   : card.mind_en },
                    { cls: "reading-dim-spirit", icon: zh ? "灵" : "Spirit", label: zh ? card.spirit_label_zh : card.spirit_label_en, txt: zh ? card.spirit_zh : card.spirit_en },
                  ].map((d, i) => (
                    <div key={i} className="reading-dim">
                      <div className="reading-dim-head">
                        <span className={"reading-dim-icon " + d.cls}>{d.icon}</span>
                        {d.label && <span className="reading-dim-label">{d.label}</span>}
                      </div>
                      <p className="reading-dim-text">{d.txt}</p>
                    </div>
                  ))}
                </div>

                {/* ── Actions ── */}
                <div className="reading-actions">
                  <button className="reading-save-btn"
                    style={{ background: savedFlag ? "rgba(150,110,130,0.12)" : card.accent, color: savedFlag ? "var(--text-secondary)" : "#fff" }}
                    onClick={save}>
                    {savedFlag ? g("dr_saved_toast") : "♡ " + g("dr_save")}
                  </button>
                  <button className="draw-again-btn" onClick={again}>{g("dr_again")}</button>
                </div>

                <ConsultStrip lang={lang} />
              </div>
            )}
          </div>
        )}
        <div className="flowpad"></div>
      </div>
    </div>
  );
}
window.DrawFlow = DrawFlow;