/* eslint-disable */
/* =============================================================
   DreamPage — مصفوفة الحلم
   -------------------------------------------------------------
   Browser build: classic <script type="text/babel">; attaches
   window.DreamPage. Reads globals: Icon · PageHeader · DreamRave ·
   DREAM_CONTENT · DreamBodygraph · SpadeTone · ChartStore.

   Every authored string comes from DREAM_CONTENT through tp(),
   which resolves BOTH the language and the register. Nothing is
   read raw: a register object reaching React throws and blanks the
   page — that has happened four times in this project.

   Field shape is { ar: {simple,masri,pro}, en: {simple,pro} }.
   English has two registers only (tone.js: BY_LANG), so tp() hands
   the language branch to SpadeTone.pick and lets it fall back.
   ============================================================= */
(function () {
  const { useMemo } = React;

  const tp = (f, lang) => {
    if (typeof f === "string") return f;
    if (!f) return "";
    const branch = f[lang === "en" ? "en" : "ar"] || f;
    return window.SpadeTone ? SpadeTone.pick(branch, lang) : (branch.simple || branch.pro || "");
  };

  const PLANET_GLYPH = {
    sun: "☉", earth: "⊕", moon: "☽", n_node: "☊", s_node: "☋",
    mercury: "☿", venus: "♀", mars: "♂", jupiter: "♃", saturn: "♄",
    uranus: "♅", neptune: "♆", pluto: "♇",
  };
  const PLANET_AR = {
    sun: "الشمس", earth: "الأرض", moon: "القمر", n_node: "العقدة الشمالية",
    s_node: "العقدة الجنوبية", mercury: "عطارد", venus: "الزهرة", mars: "المريخ",
    jupiter: "المشتري", saturn: "زحل", uranus: "أورانوس", neptune: "نبتون", pluto: "بلوتو",
  };
  const PLANET_EN = {
    sun: "Sun", earth: "Earth", moon: "Moon", n_node: "North Node", s_node: "South Node",
    mercury: "Mercury", venus: "Venus", mars: "Mars", jupiter: "Jupiter", saturn: "Saturn",
    uranus: "Uranus", neptune: "Neptune", pluto: "Pluto",
  };
  const FIELD_TONE = { light: "#F8C648", earth: "#5FD6B5", demon: "#F45F5F" };
  const CENTER_ORDER = ["throat", "g", "sacral", "spleen", "root"];

  window.DreamPage = function DreamPage({ lang, onRoute }) {
    const ar = lang !== "en";
    const C = window.DREAM_CONTENT || {};
    const P = C.page || {};
    const T = (f) => tp(f, lang);

    if (window.ChartStore && !ChartStore.hasComputedChart() && window.EmptyChartState) {
      return <EmptyChartState lang={lang} onRoute={onRoute} />;
    }

    const data = useMemo(() => {
      try {
        const rec = window.ChartStore && ChartStore.getActiveChart();
        if (!rec || !rec.input || !window.DreamRave) return null;
        return window.DreamRave.compute(rec.input);
      } catch (e) {
        if (window.console) console.warn("[dream] " + (e && e.message));
        return null;
      }
    }, [window.CHART_SUMMARY, window.SpadeTone && SpadeTone.get(), lang]);

    if (!data) {
      return (
        <div className="page page-dream">
          <PageHeader title={T(P.title)} sub={T(P.sub)} lang={lang} />
          <div className="dream-empty card-glass" data-galaxy-ui>
            <p>{ar ? "تعذّر حساب مصفوفة الحلم لهذه الخريطة."
                  : "Could not compute the dream matrix for this chart."}</p>
          </div>
        </div>
      );
    }

    const typeInfo = (C.types || {})[data.type.key] || {};
    const noGates = data.gates.length === 0;

    function Activation({ a }) {
      const pn = ar ? PLANET_AR[a.planet] : PLANET_EN[a.planet];
      return (
        <span className={`dr-act ${a.layer === "lunar" ? "lunar" : "waking"}`}
              title={(pn || a.planet) + " — " + T(a.layer === "lunar" ? P.layerLunar : P.layerWaking)}>
          <b className="dr-act-glyph">{PLANET_GLYPH[a.planet] || "•"}</b>
          <span className="dr-act-num">{a.gate}.{a.line}</span>
        </span>
      );
    }

    function GateRow({ g }) {
      const m = (C.gates || {})[g.gate] || {};
      const isHanging = data.hanging.indexOf(g.gate) >= 0;
      return (
        <article className={`dr-gate ${g.active ? "on" : "off"}`}>
          <span className="dr-gate-num">{g.gate}</span>
          <div className="dr-gate-body">
            <h4 className="dr-gate-name">{T(m.name)}</h4>
            <p className="dr-gate-txt">{T(m.short)}</p>

            {/* الطبقات الثلاث تُعرَض للمفعَّل فقط: شرحُ ما لم يحدث
                فيك يُطيل الصفحة ولا يزيدها معنى. */}
            {g.active && (
              <>
                <p className="dr-gate-deep">{T(m.deep)}</p>

                <div className="dr-vibe">
                  <div className="dr-vibe-row high">
                    <span className="dr-vibe-k">{T(P.highLabel)}</span>
                    <p>{T(m.high)}</p>
                  </div>
                  <div className="dr-vibe-row low">
                    <span className="dr-vibe-k">{T(P.lowLabel)}</span>
                    <p>{T(m.low)}</p>
                  </div>
                </div>

                <div className="dr-gate-acts">
                  {g.activations.map((a, i) => <Activation key={i} a={a} />)}
                  {isHanging && <span className="dr-hang" title={T(P.hanging)}>◦</span>}
                </div>
              </>
            )}
          </div>
        </article>
      );
    }

    function Field({ id }) {
      const f = data.fields[id];
      const meta = (C.fields || {})[id] || {};
      const intro = T(meta.intro);
      return (
        <section className="dr-field card-glass" data-galaxy-ui style={{ "--c": FIELD_TONE[id] }}>
          <header className="dr-field-head">
            <h3>{T(meta.name)}</h3>
            <span className="dr-field-count">
              {T(P.activeOf)} <b>{f.activeCount}</b> / {f.total}
            </span>
          </header>

          {/* المقدّمة فقرات: نصٌّ بهذا الطول ككتلةٍ واحدة لا يُقرأ. */}
          <div className="dr-field-intro">
            {String(intro).split("\n\n").map((para, i) => <p key={i}>{para}</p>)}
          </div>

          <div className="dr-gates">
            {f.gates.map((g) => <GateRow key={g.gate} g={g} />)}
          </div>
        </section>
      );
    }

    return (
      <div className="page page-dream">
        <PageHeader title={T(P.title)} sub={T(P.sub)} lang={lang} />

        {/* ── الملخّص ── */}
        <div className="dr-summary card-glass" data-galaxy-ui>
          <p className="dr-intro">{T(P.intro)}</p>

          {/* الرسم قبل الأرقام: الشكل يُقرأ في لمحة، وما بعده يشرح
              ما رآه القارئ لا يسبقه. */}
          {window.DreamBodygraph && <DreamBodygraph result={data} lang={lang} />}

          <div className="dr-types">
            <div className="dr-type">
              <span className="dr-type-k">{T(P.wakingType)}</span>
              <b className="dr-type-v waking">{
                (ar ? (window.CHART_SUMMARY || {}).type_ar
                    : (window.CHART_SUMMARY || {}).type_en) || "—"
              }</b>
            </div>
            <div className="dr-type">
              <span className="dr-type-k">{T(P.dreamType)}</span>
              <b className="dr-type-v dream">{T(typeInfo.name) || (ar ? data.type.ar : data.type.en)}</b>
            </div>
            <div className="dr-type wide">
              <span className="dr-type-k">{T(P.activeCenters)}</span>
              <b className="dr-type-v">{
                data.centers.length
                  ? data.centers.map((c) => T(((C.centers || {})[c.id] || {}).name) || c.id).join(" · ")
                  : T(P.noCenters)
              }</b>
            </div>
          </div>

          {typeInfo.desc && <p className="dr-type-desc">{T(typeInfo.desc)}</p>}

          {data.channels.length > 0 && (
            <div className="dr-channels">
              <h4 className="dr-sub-h">{T(P.channelsTitle)}</h4>
              {data.channels.map((ch) => {
                const key = ch.gates[0] + "-" + ch.gates[1];
                const m = (C.channels || {})[key] || {};
                return (
                  <div className="dr-channel" key={key}>
                    <span className="dr-channel-n">{ch.gates[0]}–{ch.gates[1]}</span>
                    <div className="dr-channel-b">
                      <b>{T(m.name)}</b>
                      <span className="dr-channel-t">{T(m.desc)}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          )}

          {noGates && <p className="dr-none">{T(P.empty)}</p>}

          <p className="dr-layers">{T(P.layersNote)}</p>
        </div>

        {/* ── المراكز الخمسة ── */}
        {C.centers && (
          <section className="dr-centers card-glass" data-galaxy-ui>
            <h3 className="dr-sec-h">{T(P.activeCenters)}</h3>
            <div className="dr-center-list">
              {CENTER_ORDER.map((id) => {
                const m = C.centers[id];
                if (!m) return null;
                const on = data.centers.some((c) => c.id === id);
                return (
                  <article className={"dr-center" + (on ? " on" : "")} key={id}>
                    <header>
                      <b>{T(m.name)}</b>
                      <span className="dr-center-st">
                        {T(on ? (C.graph || {}).defined : (C.graph || {}).open)}
                      </span>
                    </header>
                    <p>{T(m.inSleep)}</p>
                  </article>
                );
              })}
            </div>
            {C.dormant && (
              <div className="dr-dormant">
                <b>{T(C.dormant.title)}</b>
                <p>{T(C.dormant.body)}</p>
              </div>
            )}
          </section>
        )}

        {/* ── الحقول الثلاثة ── */}
        <p className="dr-states-note">{T(P.statesNote)}</p>
        <div className="dr-fields">
          <Field id="light" />
          <Field id="earth" />
          <Field id="demon" />
        </div>
      </div>
    );
  };
})();