/* eslint-disable */
/* =============================================================
   PlanetsPage (كواكبك) — pixel-built to reference
   -----
   Hero: animated Orrery (real solar system; selected body focused).
   Right rail of data, all from the DB:
     • header: planet name + glyph + meaning headline + 2 badges
       (الوعي = personality g.l, اللاوعي = design g.l)
     • "ماذا تمثل X" : PLANET_DB.body_ar
     • في الوعي / في اللاوعي  : conscious gate desc / design gate desc
     • في اتزانك / خارج اتزانك : gift / shadow of the conscious gate
     • أسئلة للتأمل
     • middle "ارتباطاتك" : related gates (conscious + design + channel
       partners), line meaning, center, defined/undefined
     • planet strip (rail) at the bottom — click changes the planet
   ============================================================= */
(function () {
  const { useState, useMemo, useEffect, useRef } = React;

  const SIDE = { p: "#62DDFF", d: "#C084FF" };

  /* Fill {placeholders} in an already tone-resolved string. The copy has
     to stay a STRING in content.js — resolveTone passes functions through
     unresolved, which silently pins one register for every reader. */
  const fmt = (tpl, vars) =>
    String(tpl == null ? "" : tpl).replace(/\{(\w+)\}/g, (_, k) => (vars[k] != null ? vars[k] : ""));

  function centerIdFromName(n) {
    if (!n) return "g";
    const s = n.toLowerCase();
    if (s.includes("head")) return "head"; if (s.includes("ajna")) return "ajna";
    if (s.includes("throat")) return "throat"; if (s.includes("solar")) return "solar_plexus";
    if (s.includes("sacral")) return "sacral"; if (s.includes("spleen")) return "spleen";
    if (s.includes("root")) return "root"; if (s.includes("heart") || s.includes("ego") || s.includes("will")) return "ego";
    return "g";
  }

  // ── Orrery hero (canvas) ──
  function OrreryHero({ selKey, onSelect, lang }) {
    const ref = useRef(null);
    const inst = useRef(null);
    useEffect(() => {
      if (!window.Orrery || !ref.current) return;
      const o = new window.Orrery(ref.current, { size: 460, lang, selected: selKey, onSelect });
      o.start(); inst.current = o;
      return () => o.destroy();
    }, []);
    useEffect(() => { if (inst.current) inst.current.setSelected(selKey); }, [selKey]);
    useEffect(() => { if (inst.current) { inst.current.onSelect = onSelect; inst.current.setLang(lang); } }, [lang, onSelect]);
    return <div className="orrery-stage"><canvas ref={ref}></canvas></div>;
  }

  window.PlanetsPage = function PlanetsPage({ lang, onRoute }) {
    const L = I18N[lang].planets;
    const ar = lang === "ar";
    const [selKey, setSelKey] = useState("sun");
    const [favs, setFavs] = useState(() => { try { return JSON.parse(localStorage.getItem("hd-fav-planets") || "{}"); } catch (e) { return {}; } });

    const byKey = useMemo(() => {
      const m = {};
      CHART_PERSONALITY.forEach((p) => { m[p.p] = { key: p.p, pP: p, pD: null }; });
      CHART_DESIGN.forEach((p) => { m[p.p] = { ...(m[p.p] || { key: p.p }), pD: p }; });
      return m;
    }, []);
    const order = ["sun","earth","moon","mercury","venus","mars","jupiter","saturn","uranus","neptune","pluto","n_node","s_node"];
    const list = order.filter((k) => byKey[k]).map((k) => byKey[k]);

    const cur = byKey[selKey] || byKey.sun;
    const pdb = (window.PLANET_DB && PLANET_DB[selKey]) || {};
    const PKEY = { n_node: "north_node", s_node: "south_node" };
    const pt = (window.PLANET_TONE_DB || {})[selKey] || (window.PLANET_TONE_DB || {})[PKEY[selKey]] || null;
    const tpl = (f) => (window.SpadeTone ? window.SpadeTone.pick(f) : (typeof f === "string" ? f : (f && (f.simple || f.pro)) || ""));
    const name = ar ? pdb.ar : pdb.en;

    // conscious (personality) gate drives the "what it represents in you" detail
    const cg = cur.pP ? cur.pP.g : (cur.pD && cur.pD.g);
    const cl = cur.pP ? cur.pP.l : (cur.pD && cur.pD.l);
    const dg = cur.pD ? cur.pD.g : null;
    const gdbC = (window.GATE_DB && GATE_DB[cg]) || {};
    const gdbD = dg ? ((window.GATE_DB && GATE_DB[dg]) || {}) : {};
    const cid = centerIdFromName(gdbC.center);
    const cdb = (window.CENTER_DB && CENTER_DB[cid]) || {};
    const lineDb = (window.LINE_DB && LINE_DB[cl]) || {};

    // related gates: conscious + design gate + their channel partners
    const related = useMemo(() => {
      const set = new Map();
      [cg, dg].filter(Boolean).forEach((g) => set.set(g, true));
      BG_CHANNELS.forEach(([a, b]) => {
        if (a === cg || a === dg) set.set(b, true);
        if (b === cg || b === dg) set.set(a, true);
      });
      return [...set.keys()].slice(0, 6);
    }, [selKey]);

    const circuit = (gdbC.circuit || "").split(" / ")[0];

    return (
      <div className="page page-planets">
        {/* breadcrumb + actions */}
        <div className="pl-breadcrumb">
          <button className="pl-crumb" onClick={() => setSelKey("sun")}>{L.title}</button>
          <Icon.chevLeft size={13} />
          <span className="pl-crumb-cur">{name}</span>
          <div className="pl-actions">
            <HelpButton lang={lang} />
            <HelpButton lang={lang} route="planets_def" label={L.planets_help} />
            <button className="pl-act" onClick={() => onRoute && onRoute(`planet/${selKey}`)}><Icon.guide size={13} /> {L.full_page}</button>
            <button className="pl-act" onClick={() => { const url = location.href.split('#')[0] + '#/planet/' + selKey; (navigator.clipboard ? navigator.clipboard.writeText(url) : Promise.reject()).then(() => window.HDToast && HDToast.show({ type: "success", title: L.link_copied_title, msg: L.link_copied_msg }), () => window.HDToast && HDToast.show({ type: "info", title: url, msg: "" })); }}><Icon.share size={13} /> {L.share}</button>
            <button className={`pl-act fav ${favs[selKey] ? "on" : ""}`} onClick={() => { const next = { ...favs, [selKey]: !favs[selKey] }; setFavs(next); try { localStorage.setItem("hd-fav-planets", JSON.stringify(next)); } catch (e) {} window.HDToast && HDToast.show({ type: "success", title: !favs[selKey] ? L.fav_added : L.fav_removed, msg: "" }); }}><Icon.star size={13} /> {L.favorite}</button>
          </div>
        </div>

        {/* planet header */}
        <div className="pl-header">
          <div className="plh-title">
            <span className="plh-glyph" style={{ color: pdb.color }}>{pdb.glyph}</span>
            <div>
              <h1 className="plh-name">{name}</h1>
              <p className="plh-head">{ar ? pdb.head_ar : pdb.head_en}</p>
            </div>
          </div>
          <div className="plh-badges">
            {cur.pD && (
              <button className="plh-badge d" onClick={() => onRoute && onRoute(`gate/${cur.pD.g}`)} title={L.go_to_gate}>
                <span className="plhb-k">{L.in_design_k}</span>
                <strong>{cur.pD.g}.{cur.pD.l}</strong>
                <em>{fmt(L.gate_line_fmt, { g: cur.pD.g, l: cur.pD.l })}</em>
                <span className="plhb-go"><Icon.chevLeft size={12} /></span>
              </button>
            )}
            {cur.pP && (
              <button className="plh-badge p" onClick={() => onRoute && onRoute(`gate/${cur.pP.g}`)} title={L.go_to_gate}>
                <span className="plhb-k">{L.in_personality_k}</span>
                <strong>{cur.pP.g}.{cur.pP.l}</strong>
                <em>{fmt(L.gate_line_fmt, { g: cur.pP.g, l: cur.pP.l })}</em>
                <span className="plhb-go"><Icon.chevLeft size={12} /></span>
              </button>
            )}
          </div>
        </div>

        {/* 3-column body — RTL visual order: meaning(right) · connections(mid) · orrery(left) */}
        <div className="planets-layout">
          {/* right: meaning + 4 cards + reflection */}
          <div className="pl-right" key={selKey}>
            <div className="pl-meaning-card" data-galaxy-ui>
              <div className="plm-star"><Icon.sparkle size={18} /></div>
              <h3>{fmt(L.meaning_title, { name })}</h3>
              <p>{(pt && tpl(ar ? pt.meaning_ar : pt.meaning_en)) || (ar ? pdb.body_ar : pdb.body_en)}</p>
            </div>
            <div className="pl-quad">
              <div className="pl-qcard cyan">
                <div className="plq-h"><Icon.eye size={15} /> {L.in_personality}<em>{L.in_personality_sub}</em></div>
                <p>{tpl(ar ? gdbC.desc_ar : gdbC.desc_en)}</p>
              </div>
              <div className="pl-qcard violet">
                <div className="plq-h"><Icon.sparkle size={15} /> {L.in_design}<em>{L.in_design_sub}</em></div>
                <p>{dg ? tpl(ar ? gdbD.desc_ar : gdbD.desc_en) : L.no_design}</p>
              </div>
              <div className="pl-qcard green">
                <div className="plq-h"><Icon.leaf size={15} /> {L.in_balance}<em>{ar ? gdbC.gift_ar : gdbC.gift}</em></div>
                <p>{fmt(L.in_balance_tpl, {
                  gift: ar ? gdbC.gift_ar : gdbC.gift,
                  theme: ar ? gdbC.theme_ar : gdbC.theme,
                })}</p>
              </div>
              <div className="pl-qcard red">
                <div className="plq-h"><Icon.flash size={15} /> {L.off_balance}<em>{ar ? gdbC.shadow_ar : gdbC.shadow}</em></div>
                <p>{fmt(L.off_balance_tpl, { shadow: ar ? gdbC.shadow_ar : gdbC.shadow })}</p>
              </div>
            </div>
            <div className="pl-reflect-card" data-galaxy-ui>
              <div className="plr-h"><Icon.help size={15} /> {L.questions_title}</div>
              <ul>
                {(function () {
                  const RD = (window.REFLECTION_DB && window.REFLECTION_DB.gates) || {};
                  const authored = RD[cg];
                  const qs = authored && (ar ? authored.questions_ar : authored.questions_en);
                  if (qs && qs.length) return qs.map((q, i) => <li key={i}>{tpl(q)}</li>);
                  const gift = ar ? gdbC.gift_ar : gdbC.gift;
                  const shadow = ar ? gdbC.shadow_ar : gdbC.shadow;
                  return [
                    <li key="a">{L.q_fallback_1}</li>,
                    <li key="b">{fmt(L.q_fallback_2, { gift })}</li>,
                    <li key="c">{fmt(L.q_fallback_3, { shadow })}</li>,
                  ];
                })()}
              </ul>
            </div>
          </div>

          {/* middle column removed — page kept airy; gate links live on the header badges */}

          {/* left: orrery + energy quote (strip removed for a cleaner, airier page) */}
          <div className="pl-left">
            <div className="pl-orrery-card" data-galaxy-ui>
              <SolarDrift selKey={selKey} onSelect={setSelKey} lang={lang} />
            </div>
            <div className="pl-quote-card" data-galaxy-ui>
              <span className="plq-label">{L.energy_label}</span>
              <p className="plq-text">{tpl((pt && (ar ? pt.quote_ar : pt.quote_en)) || (ar ? pdb.quote_ar : pdb.quote_en))}</p>
              <span className="plq-mark">”</span>
            </div>
          </div>
        </div>

        {/* planet rail */}
        <div className="pl-rail-card" data-galaxy-ui>
          <div className="pl-rail-head">
            <h3>{L.rail_title}</h3>
            <span>{L.rail_sub}</span>
          </div>
          <div className="pl-rail">
            {list.map((p) => {
              const m = (window.PLANET_DB && PLANET_DB[p.key]) || {};
              const active = selKey === p.key;
              return (
                <button key={p.key} className={`pl-rail-item ${active ? "is-active" : ""}`} onClick={() => setSelKey(p.key)} style={{ "--pr": m.color }}>
                  <span className="pri-glyph" style={{ color: m.color }}>{m.glyph}</span>
                  <span className="pri-name">{ar ? m.ar : m.en}</span>
                  <span className="pri-nums">
                    {p.pP && <i className="p">{p.pP.g}.{p.pP.l}</i>}
                    {p.pD && <i className="d">{p.pD.g}.{p.pD.l}</i>}
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      </div>
    );
  };
})();