/* eslint-disable */
/* =============================================================
   CentersPage (مراكزي) — pixel-built to reference + expandable
   -----
   • Chart card: الوعي | bodygraph | اللاوعي + legend + ring
   • Detail cards: real artwork (assets/centers/*.webp) + DB content.
     Clicking استكشف SMOOTHLY expands the card in place (grid-rows
     0fr→1fr, no layout jank) to reveal the full record:
       function · defined/undefined meaning · active gates (clickable
       → جيناتك) · related channels · full description · reflection.
   • Vision card.
   Data: CENTER_DB, BG_GATES, BG_CHANNELS, ACTIVE_GATES, GATE_DB.
   ============================================================= */
(function () {
  const { useState, useMemo } = React;

  /* Resolve a toned field ({ simple, masri, pro }) to the active
     register. Plain strings pass through unchanged. */
  const tp = (f) =>
    typeof f === "string" ? f
      : !f ? ""
      : (window.SpadeTone ? SpadeTone.pick(f) : (f.simple || f.pro || ""));

  const CC_ART = {
    head:["#C77DFF","#7B2CBF"], ajna:["#5FA8FF","#2C5FBF"], throat:["#62DDFF","#2C8FBF"],
    g:["#8FE36A","#2C8F3F"], ego:["#FFC857","#BF6A2C"], spleen:["#6AE39B","#2C8F5F"],
    solar_plexus:["#FF9D5C","#BF4A2C"], sacral:["#FF7A8A","#BF2C4A"], root:["#FF6B6B","#8F2C2C"],
  };

  function PlanetColumn({ rows, side, lang }) {
    const ar = lang === "ar";
    const color = side === "p" ? "#62DDFF" : "#C084FF";
    return (
      <div className="planet-col" data-side={side}>
        <div className="pc-head" style={{ color }}>{ar ? (side === "p" ? "الوعي" : "اللاوعي") : (side === "p" ? "Conscious" : "Design")}</div>
        <div className="pc-list">
          {rows.map((r, i) => (
            <div key={i} className="pc-row" title={ar ? r.ar : r.en}>
              <span className="pc-glyph" style={{ color }}>{r.glyph}</span>
              <span className="pc-num">{r.g}.{r.l}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // ── Side panel: one channel, read through YOUR chart ────────
  function ChannelPanel({ ch, lang, onClose, onRoute }) {
    const ar = lang === "ar";
    const L = I18N[lang].centers;
    const key = `${ch.a}-${ch.b}`, alt = `${ch.b}-${ch.a}`;
    const deep = (window.CHANNEL_DEEP_DB || {})[key] || (window.CHANNEL_DEEP_DB || {})[alt] || {};
    const cdb = (window.CHANNEL_DB || {})[key] || (window.CHANNEL_DB || {})[alt] || {};
    const name = ar ? (deep.name_ar || cdb.name_ar || ch.label) : (deep.name || cdb.name || ch.label);
    const circuit = cdb.circuit && window.circuitLabel ? circuitLabel(cdb.circuit, lang) : null;

    React.useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, []);

    const cName = (id) => {
      const c = (window.CENTER_DB || {})[id] || {};
      const bg = (window.BG_CENTERS || []).find((x) => x.id === id) || {};
      return ar ? (c.name_ar || bg.ar) : (c.name || bg.en);
    };
    const sideLine = ch.side === "personality" ? L.channel_side.personality
      : ch.side === "design" ? L.channel_side.design
      : L.channel_side.mixed;

    const gateBlock = (g) => {
      const gdb = (window.GATE_DB || {})[g] || {};
      const center = cName((window.BG_GATE_CENTER || {})[g]);
      const actsP = (window.CHART_PERSONALITY || []).filter((r) => r.g === g);
      const actsD = (window.CHART_DESIGN || []).filter((r) => r.g === g);
      return (
        <div key={g} className="chp-gate">
          <button className="chp-gate-h" onClick={() => onRoute && onRoute(`gate/${g}`)}>
            <b>{g}</b> {ar ? gdb.name_ar : gdb.name} <span className="chp-center">· {center}</span>
          </button>
          <div className="chp-acts">
            {actsP.map((r, i) => (
              <span key={`p${i}`} className="chp-act p">{r.glyph} {ar ? r.ar : r.en} {g}.{r.l} — {ar ? L.side_conscious : L.side_conscious.toLowerCase()}</span>
            ))}
            {actsD.map((r, i) => (
              <span key={`d${i}`} className="chp-act d">{r.glyph} {ar ? r.ar : r.en} {g}.{r.l} — {ar ? L.side_design : L.side_design.toLowerCase()}</span>
            ))}
            {actsP.length + actsD.length === 0 && <span className="chp-act">—</span>}
          </div>
        </div>
      );
    };

    const rows = [
      [L.deep_nature, ar ? deep.nature_ar : deep.nature_en, "#D5D7F2"],
      [L.deep_gifts, ar ? deep.gifts_ar : deep.gifts_en, "#5FD6B5"],
      [L.deep_challenges, ar ? deep.challenges_ar : deep.challenges_en, "#FF78B5"],
      [L.deep_relational, ar ? deep.relational_ar : deep.relational_en, "#62DDFF"],
    ].filter((r) => r[1]);

    return (
      <React.Fragment>
        <div className="chp-dim" onClick={onClose}></div>
        <aside className="chp-panel" role="dialog" aria-modal="true" aria-label={name} data-galaxy-ui>
          <button className="chp-x" onClick={onClose} aria-label={L.close}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
          </button>
          <span className="chp-key">{ch.a}–{ch.b}</span>
          <h3 className="chp-name">{name}</h3>
          {circuit && <span className="chp-circuit">{circuit}</span>}
          <p className="chp-sideline">{sideLine}</p>
          <div className="chp-gates">{[ch.a, ch.b].map(gateBlock)}</div>
          {rows.map(([h, body, color], i) => (
            <div key={i} className="chp-block">
              <span className="chp-block-h" style={{ color }}>{h}</span>
              <p>{body}</p>
            </div>
          ))}
          <button className="chp-full" onClick={() => { onClose(); onRoute && onRoute(`channel/${ch.a}-${ch.b}`); }}>
            {L.channel_full_page} <span>{ar ? "←" : "→"}</span>
          </button>
        </aside>
      </React.Fragment>
    );
  }

  /* ── تبويب «تعريف المراكز» ────────────────────────────────
     تعريفٌ عامّ للمراكز التسعة، لا قراءةٌ لخريطتك. المصدر
     `CENTER_TONE_DB` (منبَّرة بالكامل: desc · shadow · gift في
     اللغتين) وهي قاعدةٌ كانت تقرؤها صفحتا التفاصيل والدليل فقط.

     نعرض حالة المركز عندك كشارةٍ جانبية فحسب — التعريف يبقى عامًّا
     كي يصلح مرجعًا، والشارة تربطه بك دون أن تحوّله إلى قراءة. */
  function CenterDefinitions({ lang, onRoute }) {
    const ar = lang === "ar";
    const L = I18N[lang].centers;
    const CT = window.CENTER_TONE_DB || {};
    const CD = window.CENTER_DB || {};
    const defined = window.DEFINED_CENTERS || new Set();

    return (
      <div className="cdef-grid">
        {(window.BG_CENTERS || []).map((c) => {
          const ct = CT[c.id] || {}, db = CD[c.id] || {};
          const name = ar ? (db.name_ar || c.ar) : (db.name || c.en);
          const isDef = defined.has(c.id);
          const rows = [
            [L.def_desc, tp(ar ? ct.desc_ar : ct.desc_en), c.tone],
            [L.def_gift, tp(ar ? ct.gift_ar : ct.gift_en), "#5FD6B5"],
            [L.def_shadow, tp(ar ? ct.shadow_ar : ct.shadow_en), "#FF78B5"],
          ].filter((r) => r[1]);

          return (
            <div key={c.id} className="cdef-card" data-galaxy-ui style={{ "--cc-tone": c.tone }}>
              <div className="cdef-head">
                <span className="cdef-dot" style={{ background: c.tone }} />
                <h3>{name}</h3>
                <span className={`cc-tag ${isDef ? "tag-def" : "tag-open"}`}>
                  {isDef ? L.defined : L.undefined}
                </span>
              </div>
              {(ar ? ct.keynote_ar : ct.keynote_en) ? (
                <p className="cdef-key">{ar ? ct.keynote_ar : ct.keynote_en}</p>
              ) : null}
              {rows.map(([h, body, col], i) => (
                <div key={i} className="cdef-block">
                  <span className="cdef-h" style={{ color: col }}>{h}</span>
                  <p>{body}</p>
                </div>
              ))}
              <button className="cc-fulllink" onClick={() => onRoute && onRoute(`center/${c.id}`)}>
                {L.full_center_page} <span>{ar ? "←" : "→"}</span>
              </button>
            </div>
          );
        })}
      </div>
    );
  }

  window.CentersPage = function CentersPage({ lang, onRoute }) {
    const L = I18N[lang].centers;
    const ar = lang === "ar";
    const [tab, setTab] = useState(0);
    const [sel, setSel] = useState(null);       // hovered/selected center on the bodygraph
    const [expanded, setExpanded] = useState(null); // expanded card id
    const [chSel, setChSel] = useState(null);   // channel opened in the side panel

    const definedCount = DEFINED_CENTERS.size;
    const undefinedCount = BG_CENTERS.length - definedCount;
    const pct = Math.round((definedCount / BG_CENTERS.length) * 100);

    // gates per center (active only), and channels touching a center (active only)
    const gatesByCenter = useMemo(() => {
      const m = {};
      BG_GATES.forEach((g) => {
        const a = ACTIVE_GATES[g.g];
        if (a && (a.p || a.d)) (m[g.c] = m[g.c] || []).push({ g: g.g, side: a.p && a.d ? "both" : a.p ? "p" : "d" });
      });
      return m;
    }, []);
    const channelsByCenter = useMemo(() => {
      const m = {};
      BG_CHANNELS.forEach(([a, b, , label]) => {
        const ga = ACTIVE_GATES[a], gb = ACTIVE_GATES[b];
        if (!(ga && gb && (ga.p || ga.d) && (gb.p || gb.d))) return;
        const ca = BG_GATE_CENTER[a], cb = BG_GATE_CENTER[b];
        (m[ca] = m[ca] || []).push({ a, b, label });
        if (cb !== ca) (m[cb] = m[cb] || []).push({ a, b, label });
      });
      return m;
    }, []);

    return (
      <div className="page page-centers">
        <PageHeader title={L.title} sub={L.sub} help={L.help} lang={lang} />

        <div className="tabs-row" data-galaxy-ui>
          {L.tabs.map((t, i) => (
            <button key={i} className={`tab-pill ${tab === i ? "active" : ""}`} onClick={() => setTab(i)}>{t}</button>
          ))}
        </div>

        {/* التبويبات كانت تُبدِّل التمييز فقط: `tab` يُضبَط ولا يُقرأ،
            والأقسام الثلاثة تُعرَض مكدَّسة دائمًا. صار كلّ تبويبٍ يعرض
            قسمه وحده. */}
        {tab === 1 && <CenterDefinitions lang={lang} onRoute={onRoute} />}

        {tab === 0 && <div className="centers-grid">
          {/* ── Left: your chart ── */}
          <div className="centers-chart-card" data-galaxy-ui>
            <div className="ccc-top">
              <h3 className="card-h">{L.yours_title}</h3>
              <div className="ccc-ring">
                <svg viewBox="0 0 36 36" width="52" height="52">
                  <circle cx="18" cy="18" r="14" fill="none" stroke="rgba(95,214,181,0.15)" strokeWidth="3" />
                  <circle cx="18" cy="18" r="14" fill="none" stroke="#5FD6B5" strokeWidth="3"
                    strokeDasharray={`${(pct / 100) * 88} 88`} strokeLinecap="round"
                    transform="rotate(-90 18 18)" style={{ filter: "drop-shadow(0 0 6px rgba(95,214,181,0.5))" }} />
                  <text x="18" y="22" textAnchor="middle" fontSize="9" fontWeight="700" fill="#fff">{pct}%</text>
                </svg>
                <div className="ccc-ring-text">
                  <strong>{L.def_pct} — {pct}%</strong>
                  <em>{L.def_note}</em>
                </div>
              </div>
            </div>

            <div className="ccc-legend">
              <span className="legend-item"><span className="lg-dot defined"></span>{L.legend_def} — {L.legend_n(definedCount)}</span>
              <span className="legend-item"><span className="lg-dot undefined"></span>{L.legend_undef} — {L.legend_n(undefinedCount)}</span>
            </div>

            <div className="ccc-stage">
              <PlanetColumn rows={CHART_PERSONALITY} side="p" lang={lang} />
              <div className="ccc-bodygraph">
                <InteractiveBodygraph
                  lang={lang}
                  selection={sel ? { kind: "center", id: sel } : null}
                  onSelect={(s) => setSel(s && s.kind === "center" ? s.id : null)}
                  showGateNumbers={true}
                />
              </div>
              <PlanetColumn rows={CHART_DESIGN} side="d" lang={lang} />
            </div>
          </div>

          {/* ── Right: detail cards ── */}
          <div className="centers-details">
            <div className="cd-h-row">
              <h3 className="cd-h">{L.details_title}</h3>
              <HelpButton lang={lang} route="centers_def" label={L.what_is_center} />
            </div>
            <div className="centers-detail-grid">
              {BG_CENTERS.map((c, i) => {
                const defined = DEFINED_CENTERS.has(c.id);
                const db = (window.CENTER_DB && CENTER_DB[c.id]) || {};
                /* The long description exists in TWO places: an untoned
                   plain string on CENTER_DB (from hd-knowledge.js) and a
                   toned {simple,masri,pro} on CENTER_TONE_DB. Nothing
                   merges the latter into the former — GuidePage and
                   DetailPage read CENTER_TONE_DB directly for exactly this
                   reason. Reading db.desc_ar here pinned "نظرة أعمق" to
                   فصحى in every register; prefer the toned source. */
                const ct = (window.CENTER_TONE_DB && CENTER_TONE_DB[c.id]) || {};
                const label = ar ? (db.name_ar || c.ar) : (db.name || c.en);
                /* CENTER_DB's function/defined/undefined carry registers
                   (centers-guide-tone-db.js), so resolve before use —
                   shortDesc is later passed to .replace(). Both languages
                   read the same field names; English used to be forced to
                   "" here because defined_en/undefined_en didn't exist —
                   they're authored now, so read them like Arabic does. */
                const shortDesc = tp(ar ? (db.function_ar || db.desc_ar || "") : (db.function_en || db.desc_en || ""));
                const fullDesc = tp(ar ? (ct.desc_ar || db.desc_ar || "") : (ct.desc_en || db.desc_en || ""));
                const meaning = tp(ar ? (defined ? db.defined_ar : db.undefined_ar) : (defined ? db.defined_en : db.undefined_en));
                const isOpen = expanded === c.id;
                const gates = gatesByCenter[c.id] || [];
                const channels = channelsByCenter[c.id] || [];
                const [g1, g2] = CC_ART[c.id] || ["#8A5CFF", "#3A1C6F"];
                return (
                  <div key={c.id}
                       className={`center-card ${defined ? "is-defined" : "is-open"} ${isOpen ? "is-expanded" : ""} ${sel === c.id ? "is-active" : ""}`}
                       data-galaxy-ui
                       style={{ "--cc-tone": c.tone }}
                       onMouseEnter={() => setSel(c.id)}
                       onMouseLeave={() => setSel(null)}>
                    <div className="cc-figure">
                      <img src={`assets/centers/${c.id}.webp`} alt={label} loading="lazy" />
                      <div className="cc-figure-glow" style={{ background: `radial-gradient(circle at 50% 36%, ${g1}33, transparent 70%)` }}></div>
                    </div>
                    <div className="cc-body" style={{ padding: "13px 15px" }}>
                      <div className="cc-title">
                        <span className="cc-num">{i + 1}.</span>
                        <span className="cc-name">{label}</span>
                        <span className={`cc-tag ${defined ? "tag-def" : "tag-open"}`}>{defined ? L.defined : L.undefined}</span>
                      </div>
                      <p className="cc-short">{shortDesc}</p>

                      {/* expandable detail */}
                      <div className={`cc-expand ${isOpen ? "open" : ""}`} aria-hidden={!isOpen} inert={isOpen ? undefined : ""}>
                        <div className="cc-expand-inner">
                          {meaning && (
                            <div className="cc-block">
                              <span className="cc-block-h" style={{ color: c.tone }}>
                                {defined ? L.because_defined : L.because_undefined}
                              </span>
                              <p>{meaning}</p>
                            </div>
                          )}
                          {fullDesc && fullDesc !== shortDesc && (
                            <div className="cc-block">
                              <span className="cc-block-h" style={{ color: c.tone }}>{L.deeper_view}</span>
                              <p>{fullDesc}</p>
                            </div>
                          )}
                          {gates.length > 0 && (
                            <div className="cc-block">
                              <span className="cc-block-h" style={{ color: c.tone }}>{L.your_active_gates}</span>
                              <div className="cc-gate-chips">
                                {gates.map((gg) => {
                                  const gdb = (window.GATE_DB && GATE_DB[gg.g]) || {};
                                  const col = gg.side === "d" ? "#C084FF" : "#62DDFF";
                                  return (
                                    <button key={gg.g} className="cc-gate-chip" style={{ "--chip": col }}
                                            onClick={() => onRoute && onRoute(`gate/${gg.g}`)}>
                                      <b>{gg.g}</b> {ar ? gdb.name_ar : gdb.name}
                                    </button>
                                  );
                                })}
                              </div>
                            </div>
                          )}
                          {channels.length > 0 && (
                            <div className="cc-block">
                              <span className="cc-block-h" style={{ color: c.tone }}>{L.related_channels}</span>
                              <div className="cc-chan-chips">
                                {channels.map((ch, j) => (
                                  <button key={j} className="cc-chan-chip" onClick={() => onRoute && onRoute(`channel/${ch.a}-${ch.b}`)}>{ch.a}–{ch.b} · {window.channelShort(ch.a, ch.b, lang)}</button>
                                ))}
                              </div>
                            </div>
                          )}
                          <div className="cc-block">
                            <span className="cc-block-h" style={{ color: "#62DDFF" }}>{L.reflection_h}</span>
                            <p className="cc-reflect">
                              {(defined ? L.reflection_clause_defined : L.reflection_clause_undefined) + " " +
                                L.reflection_tail.replace("{q}", shortDesc.replace(/[،.].*$/, ""))}
                            </p>
                          </div>
                          <button className="cc-fulllink" onClick={() => onRoute && onRoute(`center/${c.id}`)}>
                            {L.full_center_page} <span>{ar ? "←" : "→"}</span>
                          </button>
                        </div>
                      </div>

                      <button className={`cc-cta ${defined ? "" : "muted"} ${isOpen ? "is-open" : ""}`}
                              onClick={() => setExpanded(isOpen ? null : c.id)}>
                        {isOpen ? L.close : L.explore}
                        <span className="cc-cta-chev"><Icon.chevDown size={14} /></span>
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>}

        {/* ── Active channels — deep, personalized ── */}
        {tab === 2 && (window.ACTIVE_CHANNELS || []).length > 0 && (
          <div className="chac-card" data-galaxy-ui>
            <div className="chac-head">
              <h3>{L.your_active_channels} <span className="chac-n">{ACTIVE_CHANNELS.length}</span></h3>
              <HelpButton lang={lang} route="channels_def" label={L.what_is_channel} />
            </div>
            <p className="chac-sub">{L.channels_sub}</p>
            <div className="chac-list">
              {ACTIVE_CHANNELS.map((ch) => {
                const key = `${ch.a}-${ch.b}`;
                const deep = (window.CHANNEL_DEEP_DB || {})[key] || (window.CHANNEL_DEEP_DB || {})[`${ch.b}-${ch.a}`] || {};
                const cdb = (window.CHANNEL_DB || {})[key] || (window.CHANNEL_DB || {})[`${ch.b}-${ch.a}`] || {};
                const nm = ar ? (deep.name_ar || cdb.name_ar || ch.label) : (deep.name || cdb.name || ch.label);
                const sideMeta = ch.side === "personality"
                  ? { t: L.side_conscious, c: "#62DDFF" }
                  : ch.side === "design"
                    ? { t: L.side_design, c: "#C084FF" }
                    : { t: L.side_mixed, c: "#5FD6B5" };
                return (
                  <button key={key} className="chac-chip" style={{ "--chc": sideMeta.c }} onClick={() => setChSel(ch)}>
                    <b>{ch.a}–{ch.b}</b>
                    <span className="chac-nm">{nm}</span>
                    <em>{sideMeta.t}</em>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* قناةٌ واحدة على الأقل تحتاج مركزين معرَّفين متّصلين. الرفلكتور
            بلا قنوات أصلًا — فالفراغ هنا حالةٌ صحيحة لا عطب، ويجب أن
            يُقال ذلك بدل ترك التبويب أبيض. */}
        {tab === 2 && (window.ACTIVE_CHANNELS || []).length === 0 && (
          <div className="chac-card chac-empty" data-galaxy-ui>
            <p>{L.channels_none}</p>
          </div>
        )}

        {chSel && <ChannelPanel ch={chSel} lang={lang} onClose={() => setChSel(null)} onRoute={onRoute} />}

        {/* ── Vision — خاصّة بخريطتك، فلا تظهر تحت التعريفات العامّة ── */}
        {tab === 0 && (
          <div className="vision-card" data-galaxy-ui>
            <div className="vc-icon" style={{ color: "#C084FF" }}><Icon.sparkle size={20} /></div>
            <div className="vc-text">
              <h3>{L.vision_title}</h3>
              <p>{L.vision_body}</p>
            </div>
            <div className="vc-figure"><DnaMark size={88} active={true} /></div>
          </div>
        )}
      </div>
    );
  };
})();