/* eslint-disable */
/* =============================================================
   GuidePage — Spade's Life Explained UI Kit
   -----
   Browser build: classic <script type="text/babel">; attaches window.GuidePage.
   Reads globals: I18N, Icon, PageHeader, Btn, InteractiveBodygraph,
     CHART_SUMMARY, DEFINED_CENTERS, BG_CENTERS,
     TYPE_DB, AUTHORITY_DB, CENTER_DB  (hd-knowledge.js)
   Next.js port: lift the component into its own module —
     export default function GuidePage({ lang, onRoute }) { … }
   — and replace the window globals above with real imports.
   ============================================================= */
(function () {
  // Positions in the desktop diagram's 1000 × 500 coordinate space.
  const mapLabels = {
    head: ["left", 50],
    ajna: ["right", 105],
    throat: ["right", 177],
    g: ["left", 263],
    ego: ["right", 283],
    spleen: ["left", 365],
    solar_plexus: ["right", 365],
    sacral: ["right", 444],
    root: ["left", 453],
  };

  function GuideCenterMap({ lang }) {
    const ar = lang === "ar";
    const [hovered, setHovered] = React.useState(null);
    const [focused, setFocused] = React.useState(null);
    const highlighted = hovered || focused;
    return (
      <figure className="guide-card guide-center-map" data-galaxy-ui>
        <figcaption>
          <h3 className="card-h">{ar ? "المراكز التسعة على الخريطة" : "The nine centers on the bodygraph"}</h3>
          <p>{ar ? "مثال تعليمي يوضح مكان كل مركز ووظيفته." : "A sample chart showing where each center sits and what it represents."}</p>
        </figcaption>
        <div className="guide-center-stage">
          <div className="guide-center-chart">
            <InteractiveBodygraph lang={lang} educational annotated onCenterHover={setHovered}
              selection={highlighted ? { kind: "center", id: highlighted } : null} />
          </div>
          <svg className="guide-center-leaders" viewBox="0 0 1000 500" aria-hidden="true">
            {BG_CENTERS.map((center) => {
              const [side, labelY] = mapLabels[center.id];
              const x = center.pts ? center.pts.reduce((sum, point) => sum + point[0], 0) / center.pts.length : center.x + center.w / 2;
              const y = center.pts ? center.pts.reduce((sum, point) => sum + point[1], 0) / center.pts.length : center.y + center.h / 2;
              const edge = side === "left" ? 270 : 730;
              const elbow = edge + (side === "left" ? 38 : -38);
              const startX = 300 + x * .4;
              const startY = y * .4;
              return <g key={center.id} className={highlighted === center.id ? "is-highlighted" : ""} style={{ color: center.tone }}>
                <path d={`M${startX} ${startY} L${elbow} ${labelY} H${edge}`} />
                <circle cx={startX} cy={startY} r="3" />
              </g>;
            })}
          </svg>
          <dl className="guide-center-labels" dir={ar ? "rtl" : "ltr"}>
            {BG_CENTERS.map(({ id, tone, en, ar: arabicName }) => {
              const [side, y] = mapLabels[id];
              const db = CENTER_DB[id];
              const explanation = CENTER_TONE_DB[id === "ego" ? "heart" : id];
              return <div key={id} tabIndex={0} className={highlighted === id ? "is-highlighted" : ""} data-side={side}
                style={{ "--center-tone": tone, "--label-y": `${y / 5}%` }}
                onMouseEnter={() => setHovered(id)} onMouseLeave={() => setHovered(null)}
                onFocus={() => setFocused(id)} onBlur={() => setFocused(null)}>
                <dt>{ar ? db?.name_ar || arabicName : db?.name || en}</dt>
                <dd>{ar ? explanation.keynote_ar : explanation.keynote_en}</dd>
              </div>;
            })}
          </dl>
        </div>
      </figure>
    );
  }
  const { useState, useMemo, useEffect } = React;

  const TYPE_ORDER = ["Manifestor", "Generator", "Manifesting Generator", "Projector", "Reflector"];
  const AUTH_ORDER = ["Sacral", "Emotional", "Splenic", "Ego / Heart", "Self-Projected", "Mental / Environmental", "Lunar"];
  const TYPE_TONE = { "Manifestor": "#F45F5F", "Generator": "#F69859", "Manifesting Generator": "#F8C648", "Projector": "#C084FF", "Reflector": "#5FD6B5" };
  const AURA = {
    "Manifestor": { ar: "مغلقة وطاردة / مبادِرة", en: "Closed & repelling / initiating" },
    "Generator": { ar: "منفتحة ومُحيطة", en: "Open & enveloping" },
    "Manifesting Generator": { ar: "منفتحة ومُحيطة بزخم مبادِر", en: "Open & enveloping, with momentum" },
    "Projector": { ar: "مركّزة ونافذة", en: "Focused & penetrating" },
    "Reflector": { ar: "أخذ عيّنات وانعكاس", en: "Sampling & reflecting" },
  };

  // localized field helper
  const pick = (o, base, lang) => (!o ? "" : (lang === "ar" ? (o[base + "_ar"] || o[base] || "") : (o[base + "_en"] || o[base] || "")));

  // tone-aware helpers (prefer the toned content-db, else fall back)
  const tp = (f) => (window.SpadeTone ? window.SpadeTone.pick(f) : (typeof f === "string" ? f : (f && (f.simple || f.pro)) || ""));
  const TYPE_TKEY = { "Manifestor": "manifestor", "Generator": "generator", "Manifesting Generator": "manifesting_generator", "Projector": "projector", "Reflector": "reflector" };
  const AUTH_TKEY = { "Emotional": "emotional", "Sacral": "sacral", "Splenic": "splenic", "Ego / Heart": "ego", "Self-Projected": "self_projected", "Mental / Environmental": "mental", "Lunar": "lunar" };
  const typeTone = (key) => (window.TYPE_TONE_DB || {})[TYPE_TKEY[key]] || null;
  const authTone = (key) => (window.AUTHORITY_TONE_DB || {})[AUTH_TKEY[key]] || null;
  const tdesc = (t, lang) => (t ? tp(lang === "ar" ? t.desc_ar : t.desc_en) : "");

  /* Resolve a field from the toned DB first, then the flat one.
     hd-knowledge-rich.js copies fields like practice/pitfall onto the
     flat DBs as plain فصحى strings, so reading them with pick() alone
     renders text that never responds to the tone switch — it looks
     wired up but is frozen in `simple`. Always go through this. */
  const tfield = (toned, flat, base, lang) => {
    const key = base + (lang === "ar" ? "_ar" : "_en");
    const t = toned && toned[key];
    if (t) { const s = tp(t); if (s) return s; }
    return pick(flat, base, lang);
  };

  // ── small presentational pieces ─────────────────────────────
  function YoursBadge({ label }) {
    return <span className="yours-badge"><Icon.star size={11} />{label}</span>;
  }
  function Chip({ tone, k, v }) {
    return (
      <span className="learn-chip" style={tone ? { borderColor: tone + "66", color: tone } : null}>
        <em>{k}</em>{v}
      </span>
    );
  }

  // ════════════════════════════════════════════════════════════
  //   GUIDE
  // ════════════════════════════════════════════════════════════
  window.GuidePage = function GuidePage({ lang, onRoute, param }) {
    const L = I18N[lang].guide;
    const ar = lang === "ar";
    const [tab, setTab] = useState(0); // 0..4

    // Variable detail view (#/guide/var-<key>-<valueKey>) — full page
    // listing all six values with the user's value highlighted.
    const varMatch = /^var-([a-z_]+)-([a-z_]+)$/.exec(param || "");
    useEffect(() => {
      if (!varMatch) return;
      const t = setTimeout(() => {
        const el = document.getElementById(`var-${varMatch[1]}-${varMatch[2]}`);
        if (el) el.scrollIntoView({ block: "center" });
      }, 320);
      return () => clearTimeout(t);
    }, [param]);
    if (varMatch) {
      const HC = window.HDContent;
      const v = HC && HC.variable(varMatch[1], lang);
      if (v) {
        return (
          <div className="page page-guide">
            <PageHeader title={v.label} sub={ar ? "أحد أسهم خريطتك (Variables)" : "One of your chart's variables"} lang={lang} />
            <button className="auth-secondary" style={{ margin: "0 0 16px" }} onClick={() => onRoute("overview")}>
              <Icon.chevRight size={14} /> {ar ? "العودة لنظرة عامة" : "Back to overview"}
            </button>
            <p className="var-guide-source">{v.source}</p>
            <div className="var-values">
              {v.values.map((val) => (
                <div key={val.vk} id={`var-${v.key}-${val.vk}`} className={`var-value-card ${val.active ? "active" : ""}`}>
                  <div className="var-value-head">
                    <strong>{val.name}</strong>
                    {val.active && <span className="var-value-yours">{ar ? "قيمتك" : "Yours"}</span>}
                  </div>
                  <p>{val.desc}</p>
                </div>
              ))}
            </div>
          </div>
        );
      }
    }

    const S = (window.CHART_SUMMARY) || {};
    const myType = S.type_key || "";
    const myAuth = S.authority_key || "";
    const personalOnly = ChartStore.remote && !ChartStore.isAdmin();
    const defined = useMemo(() => {
      const d = window.DEFINED_CENTERS;
      return d instanceof Set ? d : new Set(Array.isArray(d) ? d : []);
    }, []);
    const PILL_TONE = ["cyan", "violet", "gold", "green", "red"];

    // ── Panel 0 · What is Human Design ───────────────────────
    function IntroPanel() {
      const pillars = L.start_steps;
      const colors = ["#62DDFF", "#C084FF", "#FF78B5", "#5FD6B5", "#F8C648"];
      const icons = [Icon.planets, Icon.compass, Icon.heart, Icon.flash, Icon.diamond];
      return (
        <div className="guide-intro">
          <div className="guide-card intro-prose" data-galaxy-ui>
            <h3 className="card-h">{L.intro_title}</h3>
            <p className="intro-lead">{L.intro_lead}</p>
            {L.intro_paras.map((p, i) => <p key={i} className="intro-para">{p}</p>)}
            <div className="intro-actions">
              <Btn kind="primary" onClick={() => onRoute("overview")}><Icon.compass size={14} />{L.ready_cta1}</Btn>
              {BetaAccess.permits("glossary") && <Btn kind="ghost" onClick={() => onRoute("learn")}><Icon.bookOpen size={14} />{ar ? "اقرأ المقالة الكاملة" : "Read the full article"}</Btn>}
            </div>
          </div>
          <div className="guide-card intro-pillars" data-galaxy-ui>
            <h3 className="card-h">{ar ? "خمس لبنات تبني خريطتك" : "Five building blocks of your chart"}</h3>
            <div className="pillar-rail">
              {pillars.map((p, i) => (
                <div key={i} className="pillar-row" style={{ "--c": colors[i] }}>
                  <span className="pillar-ic">{icons[i]({ size: 18 })}</span>
                  <div className="pillar-tx">
                    <strong>{p.t}</strong>
                    <span>{p.body}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    }

    // ── Panel 1 · How to read the chart (steps · map · glossary)
    function ReadPanel() {
      const showMap = BetaAccess.permits("guide_sample");
      const showGlossary = BetaAccess.permits("glossary");
      return (
        <div className="guide-grid guide-grid-no-sample">
          {showMap && <GuideCenterMap lang={lang} />}
          <div className="guide-card" data-galaxy-ui>
            <h3 className="card-h">{L.start_title}</h3>
            <ol className="guide-steps">
              {L.start_steps.map((s, i) => (
                <li key={i} className="step">
                  <div className="step-num">{i + 1}</div>
                  <div className="step-icon">
                    {[Icon.planets, Icon.compass, Icon.heart, Icon.flash, Icon.diamond][i]({ size: 18, style: { color: ["#62DDFF","#C084FF","#FF78B5","#5FD6B5","#F8C648"][i] } })}
                  </div>
                  <div className="step-text">
                    <strong style={{ color: ["#62DDFF","#C084FF","#FF78B5","#5FD6B5","#F8C648"][i] }}>{s.t}</strong>
                    <span>{s.body}</span>
                  </div>
                </li>
              ))}
            </ol>
          </div>
          <div className="guide-card" data-galaxy-ui>
            <h3 className="card-h">{L.glossary_title}</h3>
            <div className="glossary-list">
              {L.glossary.map((g, i) => (
                <div key={i} className="gloss-row gloss-row-static">
                  <div className="gloss-text"><strong>{g.t}</strong><span>{g.s}</span></div>
                  <span className="gloss-icon" style={{ color: ["#62DDFF","#C084FF","#FF78B5","#A28DFE","#5FD6B5","#F8C648","#F45F5F","#5FD6B5","#7C5BE3"][i % 9] }}>
                    {[Icon.planets, Icon.compass, Icon.heart, Icon.centers, Icon.diamond, Icon.star, Icon.flash, Icon.gates, Icon.gates][i % 9]({ size: 14 })}
                  </span>
                </div>
              ))}
            </div>
            {showGlossary && <Btn kind="ghost" onClick={() => onRoute("learn/glossary")}><Icon.bookOpen size={14} />{ar ? "افتح المعجم" : "Open glossary"}</Btn>}
          </div>
        </div>
      );
    }

    // ── Panel 2 · Types ──────────────────────────────────────
    function TypesPanel() {
      const DB = window.TYPE_DB || {};
      return (
        <div className="learn-panel">
          <p className="learn-lead">{personalOnly ? (ar ? "نوعك في خريطتك، وإزاي تستخدم الاستراتيجية بتاعتك." : "Your chart type and how to use your strategy.") : L.types_lead}</p>
          <div className="learn-grid types">
            {TYPE_ORDER.filter((key) => !personalOnly || !myType || key === myType).sort((a, b) => (b === myType) - (a === myType)).map((key) => {
              const db = DB[key]; if (!db) return null;
              const mine = key === myType;
              const tone = TYPE_TONE[key];
              const tt = typeTone(key);
              const name = ar ? db.type_ar : key;
              const strat = (tt && tp(ar ? tt.strategy_ar : tt.strategy_en)) || (ar ? db.strategy_ar : db.strategy);
              const sign = (tt && tp(ar ? tt.signature_ar : tt.signature_en)) || (ar ? ({ Peace: "السلام", Satisfaction: "الرضا", Success: "النجاح", Surprise: "المفاجأة" }[db.signature] || db.signature) : db.signature);
              const notself = (tt && tp(ar ? tt.not_self_ar : tt.not_self_en)) || (ar ? ({ Anger: "الغضب", Frustration: "الإحباط", "Frustration / Anger": "الإحباط/الغضب", Bitterness: "المرارة", Disappointment: "خيبة الأمل" }[db.not_self] || db.not_self) : db.not_self);
              return (
                <article key={key} className={`learn-card ${mine ? "mine" : ""}`} style={{ "--c": tone }}>
                  <header className="learn-head">
                    <span className="learn-dot" />
                    <h4>{name}</h4>
                    {mine && <YoursBadge label={L.yours_badge} />}
                  </header>
                  <p className="learn-desc">{tdesc(tt, lang) || (mine ? (pick(db, "deep", lang) || pick(db, "desc", lang)) : pick(db, "desc", lang))}</p>
                  {/* The aligned / notself / practice rows used to render here for
                      the reader's own type. They restated the three chips directly
                      below them — aligned≈signature, notself≈not-self,
                      practice≈strategy — so the card said each idea twice, and the
                      extra height broke the side-by-side comparison this grid
                      exists for.

                      Only the rendering was removed. TYPE_TONE_DB still carries
                      aligned_ar / practice_ar / deep_ar in all three registers
                      (tone-depth-db.js), and no other screen shows them yet — so
                      this content is authored, intact, and currently unsurfaced.
                      Re-home it rather than re-add it here. */}
                  <div className="learn-chips">
                    <Chip tone={tone} k={L.strategy_label} v={strat} />
                    <Chip k={L.signature_label} v={sign} />
                    <Chip k={L.notself_label} v={notself} />
                    <Chip k={L.aura_label} v={ar ? AURA[key].ar : AURA[key].en} />
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      );
    }

    // ── Panel 3 · Authority ──────────────────────────────────
    function AuthorityPanel() {
      const DB = window.AUTHORITY_DB || {};
      return (
        <div className="learn-panel">
          <p className="learn-lead">{personalOnly ? (ar ? "تعرّف على سلطتك الداخلية من خريطتك." : "Learn about the authority in your chart.") : L.auth_lead}</p>
          <div className="learn-grid auth">
            {AUTH_ORDER.filter((key) => !personalOnly || !myAuth || key === myAuth).sort((a, b) => (b === myAuth) - (a === myAuth)).map((key) => {
              const db = DB[key]; if (!db) return null;
              const mine = key === myAuth;
              const tone = "#9872FF";
              const at = authTone(key);
              const name = ar ? db.authority_ar : key;
              const adesc = tdesc(at, lang);
              const adecide = at ? tp(ar ? at.how_to_decide_ar : at.how_to_decide_en) : "";
              return (
                <article key={key} className={`learn-card ${mine ? "mine" : ""}`} style={{ "--c": tone }}>
                  <header className="learn-head">
                    <span className="learn-dot" />
                    <h4>{name}</h4>
                    {mine && <YoursBadge label={L.yours_badge} />}
                  </header>
                  <p className="learn-desc">{adesc || (mine ? (tfield(at, db, "deep", lang) || pick(db, "desc", lang)) : pick(db, "desc", lang))}</p>
                  <div className="learn-process">
                    <span className="lp-k">{L.process_label}</span>
                    <span className="lp-v">{adecide || (ar ? (db.process_ar || db.process) : db.process)}</span>
                  </div>
                  {(() => {
                    const practice = tfield(at, db, "practice", lang);
                    const pitfall = tfield(at, db, "pitfall", lang);
                    return mine && (practice || pitfall) && (
                    <div className="learn-rich">
                      {practice && <div className="lr-row practice"><span>{ar ? "ممارسة" : "Practice"}</span><p>{practice}</p></div>}
                      {pitfall && <div className="lr-row notself"><span>{ar ? "احذر" : "Pitfall"}</span><p>{pitfall}</p></div>}
                    </div>
                    );
                  })()}
                </article>
              );
            })}
          </div>
        </div>
      );
    }

    // ── Panel 4 · Centers ────────────────────────────────────
    function CentersPanel() {
      const DB = window.CENTER_DB || {};
      const order = (window.BG_CENTERS || []).map((c) => ({ id: c.id, tone: c.tone }));
      return (
        <div className="learn-panel">
          <p className="learn-lead">{L.centers_lead}</p>
          <div className="learn-grid centers">
            {order.map(({ id, tone }) => {
              const db = DB[id]; if (!db) return null;
              const isDef = defined.has(id);
              const name = ar ? db.name_ar : db.name;
              /* centers-guide-tone-db.js turns these into register objects,
                 so every read goes through tp(). A raw one reaching React
                 throws and blanks the page — that has happened twice. */
              const hint = tp(pick(db, isDef ? "defined" : "undefined", lang));
              const fn = tp(pick(db, "function", lang));

              return (
                <article key={id} className={`learn-card center ${isDef ? "mine" : "open"}`} style={{ "--c": tone }}>
                  <header className="learn-head">
                    <span className="learn-dot" />
                    <h4>{name}</h4>
                    <span className={`status-pill ${isDef ? "def" : "und"}`}>{isDef ? L.defined_label : L.undefined_label}</span>
                  </header>
                  <p className="learn-fn">{fn}</p>
                  <p className="learn-desc small">{hint}</p>
                  {(!ChartStore.remote || BetaAccess.state("centers").open) && (
                    <button type="button" className="btn-ghost guide-center-detail" onClick={() => onRoute(`center/${id}`)}>
                      {ar ? "تفاصيل المركز" : "Center details"} <Icon.chevLeft size={14} />
                    </button>
                  )}
                </article>
              );
            })}
          </div>
        </div>
      );
    }

    const PANELS = [IntroPanel, ReadPanel, TypesPanel, AuthorityPanel, CentersPanel];
    const Panel = PANELS[tab];

    return (
      <div className="page page-guide">
        <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 ${PILL_TONE[i]} ${tab === i ? "active" : ""}`}
              onClick={() => setTab(i)}
              aria-pressed={tab === i}
            >{t}</button>
          ))}
        </div>

        <Panel />

        <div className="ready-cta" data-galaxy-ui>
          <div className="rc-icon"><Icon.bookOpen size={32} /></div>
          <div className="rc-text">
            <h3>{L.ready_title}</h3>
            <p>{L.ready_body}</p>
          </div>
          <div className="rc-actions">
            <Btn kind="outline" onClick={() => onRoute("overview")}><Icon.chevLeft size={14} />{L.ready_cta1}</Btn>
            {!window.ChartStore?.remote && <Btn kind="outline" onClick={() => onRoute("report")}><Icon.download size={14} />{L.ready_cta2}</Btn>}
          </div>
        </div>
      </div>
    );
  };
})();