/* innerbloom — shared helpers + Home, Tools, Profile */
const { useState, useEffect, useRef } = React;

const tt = (lang, k) => ((STR[lang] || STR.en)[k] ?? k);
window.tt = tt;
const CONSULT_URL = "https://calendly.com/lizh-2045/1-hour-consultation";
window.CONSULT_URL = CONSULT_URL;

function digitRoot(n) { while (n > 9) { n = String(n).split("").reduce((a, b) => a + +b, 0); } return n || 1; }
window.digitRoot = digitRoot;

/* push header with back */
function PushHeader({ title, onBack, lang, solid }) {
  return (
    <div className={"phead" + (solid ? " solid" : "")}>
      <button className="back" onClick={onBack}>
        <svg width="11" height="19" viewBox="0 0 11 19" fill="none"><path d="M9.5 1.5 2 9.5l7.5 8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        {tt(lang, "back")}
      </button>
      <span className="ptitle">{title}</span>
    </div>
  );
}
window.PushHeader = PushHeader;

/* consultation strip (reused) */
function ConsultStrip({ lang }) {
  return (
    <a className="consult-strip" href={CONSULT_URL} target="_blank" rel="noopener">
      <span className="cs-ic"><IbIcon.Calendar width="20" height="20" /></span>
      <span className="cs-bd">
        <span className="cs-tt">{tt(lang, "consult_t")}</span>
        <span className="cs-ds">{tt(lang, "consult_s")}</span>
      </span>
      <span className="entry-ar">›</span>
    </a>
  );
}
window.ConsultStrip = ConsultStrip;

function NumCards({ nums, lang }) {
  return (
    <div className="nums-row">
      <div className="numcard solar">
        <div className="lab">☀ {tt(lang, "n_solar")}</div>
        <div className="big">{nums.solar}</div>
        <div className="cap">{CONTENT.meaning[nums.solar][lang]}</div>
      </div>
      <div className="numcard lunar">
        <div className="lab">☾ {tt(lang, "n_lunar")}</div>
        <div className="big">{nums.lunar}</div>
        <div className="cap">{CONTENT.meaning[nums.lunar][lang]}</div>
      </div>
    </div>
  );
}
window.NumCards = NumCards;

/* ───────────── HOME ───────────── */
function Home({ lang, setLang, go, push, nums }) {
  return (
    <div className="scr fade">
      <div className="scr-scroll">
        <div className="home-top">
          <div className="home-greet">
            <div className="hi">{tt(lang, "home_hi")} ✦</div>
            <h1>{tt(lang, "home_greet")}</h1>
          </div>
          <div className="lang-pill">
            <button className={lang === "zh" ? "on" : ""} onClick={() => setLang("zh")}>中文</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
        </div>

        <div style={{ height: 18 }}></div>

        <button className="today" onClick={() => push("draw")} style={{ border: "none", display: "block", width: "calc(100% - 40px)", cursor: "pointer", fontFamily: "inherit" }}>
          <div className="today-inner">
            <div className="today-glyph">✦</div>
            <div className="today-tx" style={{ textAlign: "left" }}>
              <div className="today-ey">{tt(lang, "today_ey")}</div>
              <div className="today-tt">{tt(lang, "today_t")}</div>
              <div className="today-cta">{tt(lang, "today_cta")} →</div>
            </div>
          </div>
        </button>

        <div style={{ height: 22 }}></div>
        <div className="scr-pad" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
          <span className="eyebrow">{tt(lang, "your_numbers")}</span>
          <button className="btn-ghost" style={{ color: "var(--accent-coral)", fontSize: 13, padding: 0 }} onClick={() => push("rainbow")}>{tt(lang, "explore")} ›</button>
        </div>
        <NumCards nums={nums} lang={lang} />


        <div style={{ height: 22 }}></div>
        <ConsultStrip lang={lang} />
        <div className="tabpad"></div>
      </div>
    </div>
  );
}
window.Home = Home;

/* ───────────── TOOLS HUB ───────────── */
function Tools({ lang, push }) {
  return (
    <div className="scr fade">
      <div className="scr-scroll">
        <div className="lhead">
          <div className="ey">inner bloom</div>
          <h1>{tt(lang, "tools_t")}</h1>
          <p className="sub">{tt(lang, "tools_s")}</p>
        </div>
        <div className="scr-pad stack" style={{ marginTop: 6 }}>
          <button className="entry" onClick={() => push("rainbow")}>
            <div className="entry-ic rainbow"><IbIcon.Rainbow width="26" height="26" /></div>
            <div className="entry-bd">
              <div className="entry-tt">{tt(lang, "tool_rainbow_t")}</div>
              <div className="entry-ds">{tt(lang, "tool_rainbow_s")}</div>
            </div>
            <div className="entry-ar">›</div>
          </button>
          <button className="entry" onClick={() => push("draw")}>
            <div className="entry-ic card"><IbIcon.Card width="26" height="26" /></div>
            <div className="entry-bd">
              <div className="entry-tt">{tt(lang, "tool_draw_t")}</div>
              <div className="entry-ds">{tt(lang, "tool_draw_s")}</div>
            </div>
            <div className="entry-ar">›</div>
          </button>
          <button className="entry" onClick={() => push("med")} style={{ position: "relative" }}>
            <span className="coming-soon-badge">{lang === "zh" ? "即将上线" : "Coming Soon"}</span>
            <div className="entry-ic med"><IbIcon.Headphones width="26" height="26" /></div>
            <div className="entry-bd">
              <div className="entry-tt">{tt(lang, "med_t")}</div>
              <div className="entry-ds">{tt(lang, "med_s")}</div>
            </div>
          </button>
        </div>
        <div className="tabpad"></div>
      </div>
    </div>
  );
}
window.Tools = Tools;

/* ───────────── PROFILE ───────────── */
function Profile({ lang, setLang, nums, saved, onRemoveSaved, push }) {
  const m = CONTENT.meaning[nums.solar];
  return (
    <div className="scr fade">
      <div className="scr-scroll">
        <div style={{ height: 6 }}></div>
        <div className="pf-hero">
          <div className="pf-av">{m[lang].slice(0, 1)}</div>
          <div className="pf-name">{m[lang]}</div>
          <div className="pf-sub">{tt(lang, "me_sub")}</div>
        </div>

        <div style={{ height: 18 }}></div>
        <div className="pf-section-t">{tt(lang, "me_numbers")}</div>
        <div style={{ height: 8 }}></div>
        <div className="pf-numwrap">
          <div className="numcard solar" style={{ flex: 1 }}>
            <div className="lab">☀ {tt(lang, "n_solar")}</div>
            <div className="big">{nums.solar}</div>
            <div className="cap">{CONTENT.meaning[nums.solar][lang]}</div>
          </div>
          <div className="numcard lunar" style={{ flex: 1 }}>
            <div className="lab">☾ {tt(lang, "n_lunar")}</div>
            <div className="big">{nums.lunar}</div>
            <div className="cap">{CONTENT.meaning[nums.lunar][lang]}</div>
          </div>
        </div>

        <div style={{ height: 22 }}></div>
        <div className="pf-section-t" style={{ display: "flex", justifyContent: "space-between" }}>
          <span>{tt(lang, "me_saved")}</span>
        </div>
        <div style={{ height: 8 }}></div>
        <div className="scr-pad stack">
          {saved.length === 0 && (
            <div className="saved-card" style={{ justifyContent: "center", color: "var(--text-dim)", fontSize: 13 }}>{tt(lang, "saved_empty")}</div>
          )}
          {saved.map((s, i) => (
            <div key={i} className="saved-card">
              <div className="saved-sym" style={{ color: s.accent }}>{s.sym}</div>
              <div className="saved-bd">
                <div className="saved-tt">{s.guide}</div>
                <div className="saved-ms">"{s.msg}"</div>
                <div className="saved-dt">{s.date}</div>
              </div>
              <button className="saved-remove-btn" onClick={() => onRemoveSaved(i)} aria-label="Remove">×</button>
            </div>
          ))}
        </div>

        <div style={{ height: 22 }}></div>
        <div className="pf-section-t">{tt(lang, "me_settings")}</div>
        <div style={{ height: 8 }}></div>
        <div className="pf-list">
          <div className="pf-row" style={{ cursor: "default" }}>
            <span className="pf-ic"><IbIcon.Globe /></span>
            <span className="pf-tt">{tt(lang, "set_lang")}</span>
            <div className="seg">
              <button className={lang === "zh" ? "on" : ""} onClick={() => setLang("zh")}>中文</button>
              <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
          </div>
          <button className="pf-row" onClick={() => push("consult")}>
            <span className="pf-ic"><IbIcon.Calendar /></span>
            <span className="pf-tt">{tt(lang, "consult_t")}</span>
            <span className="pf-ar">›</span>
          </button>
          <div className="pf-row" style={{ cursor: "default" }}>
            <span className="pf-ic"><IbIcon.Info /></span>
            <span className="pf-tt">{tt(lang, "set_about")}</span>
            <span className="pf-val">v1.0</span>
          </div>
        </div>
        <div className="tabpad"></div>
      </div>
    </div>
  );
}
window.Profile = Profile;

function ToggleRow({ icon, label, def }) {
  const [on, setOn] = useState(def);
  return (
    <button className="pf-row" onClick={() => setOn(!on)}>
      <span className="pf-ic">{icon}</span>
      <span className="pf-tt">{label}</span>
      <span style={{ width: 44, height: 26, borderRadius: 100, background: on ? "var(--accent-coral)" : "rgba(150,110,130,0.22)", position: "relative", transition: "background 0.2s", flexShrink: 0 }}>
        <span style={{ position: "absolute", top: 2, left: on ? 20 : 2, width: 22, height: 22, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 4px rgba(0,0,0,0.2)", transition: "left 0.2s var(--ease-soft)" }}></span>
      </span>
    </button>
  );
}
window.ToggleRow = ToggleRow;