/* eslint-disable */
/* =============================================================
   OverviewPage — Spade's Life Explained UI Kit
   -----
   Browser build: classic <script type="text/babel">; attaches window.OverviewPage.
   Reads globals: I18N, Icon, PageHeader, Btn, InteractiveBodygraph, CHART_SUMMARY, CHART_PERSONALITY, CHART_DESIGN (InsightCard is local)
   Next.js port: lift the component into its own module —
     export default function OverviewPage({ lang, onRoute }) { … }
   — and replace the window globals above with real imports.
   ============================================================= */
(function () {
  const { useState, useMemo, useEffect, useRef } = React;

  // ════════════════════════════════════════════════════════════
  //   OVERVIEW
  // ════════════════════════════════════════════════════════════
  window.OverviewPage = function OverviewPage({ lang, onRoute }) {
    const L = I18N[lang].overview;
    // no active/computed chart → show the cosmic empty state
    if (window.ChartStore && !ChartStore.hasComputedChart() && window.EmptyChartState) {
      return <EmptyChartState lang={lang} onRoute={onRoute} />;
    }
    const S = CHART_SUMMARY;
    const ar = lang === "ar";
    const HC = window.HDContent;
    /* Resolve a toned field. Plain strings pass through, so this is safe
       on fields that have not been given registers yet. */
    const tone = (f) =>
      typeof f === "string" ? f
        : !f ? ""
        : (window.SpadeTone ? SpadeTone.pick(f) : (f.simple || f.pro || ""));
    const [varPopup, setVarPopup] = useState(null);
    const cType = HC ? HC.type(lang) : { name: ar ? S.type_ar : S.type_en, desc: "" };
    const cAuth = HC ? HC.authority(lang) : { name: ar ? S.authority_ar : S.authority_en, desc: "" };
    const cDef = HC ? HC.definition(lang) : { name: ar ? S.definition_ar : S.definition_en, desc: "" };
    const cProf = HC ? HC.profile(lang) : { name: "", desc: "" };
    const sig = HC ? HC.signature(lang) : (ar ? S.signature_ar : S.signature_en);
    const notSelf = HC ? HC.notSelf(lang) : (ar ? S.not_self_ar : S.not_self_en);
    const sigDesc = HC && HC.signatureDesc ? HC.signatureDesc(lang) : "";
    const nsDesc = HC && HC.notSelfDesc ? HC.notSelfDesc(lang) : "";
    const sigBody = (sigDesc || nsDesc)
      ? `${sigDesc}${sigDesc && nsDesc ? " " : ""}${nsDesc}`
      : (ar
        ? `حين تعيش في انسجام مع طبيعتك يظهر «${sig}» كتوقيع لك؛ وعند الابتعاد عنها يطفو «${notSelf}» كإشارة لطيفة لإعادة المعايرة.`
        : `Living in alignment with your nature, «${sig}» becomes your signature; drifting away, «${notSelf}» surfaces as a gentle cue to recalibrate.`);
    const syn = HC && HC.synthesis ? HC.synthesis(lang) : null;

    // ── content-db v3.0: life cross + deep channels ──
    const crossDb = (function () {
      const CDB = window.CROSS_DB || {};
      const sunRow = (window.CHART_PERSONALITY || []).find((r) => r.p === "sun");
      if (!sunRow) return null;
      const prof = (S.profile || "").split("/").map((x) => parseInt(x, 10));
      if (!prof[0] || !prof[1]) return null;
      const angle = prof[0] === 4 && prof[1] === 1 ? "JX" : prof[0] < prof[1] ? "RAX" : "LAX";
      return CDB[angle + "-" + sunRow.g] || null;
    })();
    const deepChans = (function () {
      const DD = window.CHANNEL_DEEP_DB || {};
      const seen = {};
      return (window.ACTIVE_CHANNELS || []).map((ch) => {
        const k1 = ch.a + "-" + ch.b, k2 = ch.b + "-" + ch.a;
        const db = DD[k1] || DD[k2];
        const key = DD[k1] ? k1 : k2;
        if (!db || seen[key]) return null;
        seen[key] = 1;
        return {
          key, name: ar ? db.name_ar : db.name,
          nature: ar ? db.nature_ar : db.nature_en,
          gifts: ar ? db.gifts_ar : db.gifts_en,
          challenges: ar ? db.challenges_ar : db.challenges_en,
          relational: ar ? db.relational_ar : db.relational_en,
        };
      }).filter(Boolean);
    })();
    const insights = window.SpadeInsights ? SpadeInsights.compute(lang) : null;
    const [sel, setSel] = useState(null);
    const tt = (a2, e2) => (ar ? a2 : e2);
    const toast = (type, title, msg) => window.HDToast && HDToast.show({ type, title, msg });
    const onShare = () => {
      try { if (navigator.clipboard && navigator.clipboard.writeText) { const p = navigator.clipboard.writeText(location.href); if (p && p.catch) p.catch(() => {}); } } catch (e) {}
      toast("info", tt("تم نسخ رابط خريطتك", "Chart link copied"), tt("شاركه مع من تثق به ليطّلع على خريطتك.", "Share it with someone you trust."));
    };
    const onFav = () => toast("success", tt("أُضيفت إلى المفضلة", "Added to favorites"), tt("تقدر ترجع لها بسرعة من «خرائطي».", "Find it quickly under My Charts."));
    const onDownload = () => onRoute("report");

    // Planet row: order matches reference
    const planetOrder = ["sun","earth","moon","n_node","mercury","venus","mars","jupiter","saturn","uranus","neptune","pluto","s_node"];
    const planetGlyphColor = {
      sun: "#F8C648", earth: "#C084FF", moon: "#62DDFF", n_node: "#5FD6B5",
      mercury: "#F4A261", venus: "#FF78B5", mars: "#F45F5F", jupiter: "#9076FF",
      saturn: "#AFA8C7", uranus: "#62DDFF", neptune: "#5FD6B5", pluto: "#C084FF",
      s_node: "#F8C648",
    };

    function planetRow(side) {
      const arr = side === "P" ? CHART_PERSONALITY : CHART_DESIGN;
      const byKey = {};
      arr.forEach((p) => byKey[p.p] = p);
      return planetOrder.map((k) => byKey[k]).filter(Boolean);
    }

    function ColRow({ p }) {
      return (
        <div className="prow">
          <span className="planet-glyph" style={{ color: planetGlyphColor[p.p] }}>{p.glyph}</span>
          <span className="planet-num">{p.g}.{p.l}</span>
        </div>
      );
    }

    return (
      <div className="page page-overview">
        <PageHeader title={L.title} sub={L.sub} help={L.help} lang={lang} />
        {window.ChartStore?.remote && <BetaJourney key={ChartStore.currentUser()?.id} lang={lang} onRoute={onRoute} />}
        {window.ChartStore?.getActiveChart()?.input?.unknownTime && (
          <p className="card-glass" role="note" style={{ padding: "12px 16px", marginBlock: "0 16px" }}>
            {lang === "ar"
              ? "الشارت تقديري لأن وقت الميلاد غير معروف. الحساب مبني على الساعة 12 ظهرًا بالتوقيت المحلي."
              : "This chart is an estimate because the birth time is unknown. It uses 12:00 noon local time."}
          </p>
        )}

        <div className="overview-grid">
          {/* chart-merge: transparent on desktop (display:contents), one unified card on mobile */}
          <div className="chart-merge">
          {/* Personality column */}
          <div className="planet-col personality" data-galaxy-ui>
            <div className="pcol-header">
              <span className="pcol-title">{L.personality}</span>
              <span className="pcol-icon" style={{ color: "#F8C648" }}><Icon.sun size={18} /></span>
            </div>
            <div className="pcol-rows">
              {planetRow("P").map((p, i) => <ColRow key={i} p={p} />)}
            </div>
          </div>

          {/* Bodygraph center */}
          <div className="bodygraph-wrap" data-galaxy-ui>
            <InteractiveBodygraph
              lang={lang}
              selection={sel}
              onSelect={setSel}
              width={360}
              height={530}
              showGateNumbers={true}
            />
          </div>

          {/* Design column */}
          <div className="planet-col design" data-galaxy-ui>
            <div className="pcol-header">
              <span className="pcol-title">{L.design}</span>
              <span className="pcol-icon" style={{ color: "#C084FF" }}><Icon.moon size={18} /></span>
            </div>
            <div className="pcol-rows">
              {planetRow("D").map((p, i) => <ColRow key={i} p={p} />)}
            </div>
          </div>
          </div>{/* /chart-merge */}

          {/* Summary card */}
          <div className="summary-card" data-galaxy-ui>
            <div className="sum-header">
              <span className="sum-title">{L.summary_title}</span>
              <span className="sum-star" style={{ color: "#F8C648" }}><Icon.star size={16} /></span>
            </div>
            <div className="sum-rows">
              <div className="sum-row"><span className="sum-label">{L.labels.type}</span><span className="sum-value" style={{ color: "#62DDFF" }}>{lang === "ar" ? S.type_ar : S.type_en}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.strategy}</span><span className="sum-value small">{lang === "ar" ? S.strategy_ar : S.strategy_en}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.authority}</span><span className="sum-value" style={{ color: "#63CF86" }}>{lang === "ar" ? S.authority_ar : S.authority_en}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.definition}</span><span className="sum-value small">{lang === "ar" ? S.definition_ar : S.definition_en}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.profile}</span><span className="sum-value" style={{ color: "#F8C648" }}>{S.profile}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.cross}</span><span className="sum-value tiny">{ar ? S.cross_ar : S.cross_en}<br/><span style={{ color: "#AFA8C7" }}>{S.cross_codes}</span></span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.signature}</span><span className="sum-value" style={{ color: "#5FD6B5" }}>{lang === "ar" ? S.signature_ar : S.signature_en}</span></div>
              <div className="sum-row"><span className="sum-label">{L.labels.not_self}</span><span className="sum-value" style={{ color: "#FF78B5" }}>{lang === "ar" ? S.not_self_ar : S.not_self_en}</span></div>
            </div>
            {HC && HC.variables && HC.variables(lang).length > 0 && (
              <div className="sum-vars">
                <div className="sum-vars-h">{ar ? "الأسهم (Variables)" : "Variables"}</div>
                {HC.variables(lang).map((v) => (
                  <button key={v.key} className="sum-var-row" onClick={() => setVarPopup(v.key)}>
                    <span className="sum-label">{v.label}</span>
                    <span className="sum-var-val">{v.valueName}<Icon.help size={12} /></span>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Personalized synthesis — composed from the WHOLE chart, unique per person */}
        {syn && (
          <div className="reading-synth" data-galaxy-ui>
            <div className="rs-head">
              <span className="rs-eyebrow">{ar ? "قراءتك الفريدة" : "Your unique reading"}</span>
              <h3 className="rs-headline">{syn.headline}</h3>
            </div>
            <p className="rs-lead">{syn.lead}</p>
            {syn.paragraphs.map((p, i) => <p key={i} className="rs-para">{p}</p>)}
          </div>
        )}

        {/* Insight cards — personalized to THIS chart, single-language */}
        <div className="insights-grid">
          <InsightCard kind="type"   icon={<Icon.planets />}  color="#5FC8EF" title={L.insights.type.t}   subtitle={<span style={{ color: "#62DDFF" }}>{cType.name}</span>}        body={cType.desc || L.insights.type.body} />
          <InsightCard kind="sig"    icon={<Icon.heart />}    color="#C084FF" title={L.insights.sig.t}    subtitle={<span style={{ color: "#C084FF" }}>{sig}{notSelf ? ` / ${notSelf}` : ""}</span>} body={sigBody} />
          <InsightCard kind="strat"  icon={<Icon.compass />}  color="#5FD6B5" title={L.insights.strat.t}  subtitle={<span style={{ color: "#5FD6B5" }}>{HC ? HC.strategy(lang) : ""}{cAuth.name ? ` · ${cAuth.name}` : ""}</span>} body={(HC && HC.strategyDesc(lang)) || cAuth.desc || L.insights.strat.body} onClick={() => onRoute("authority")} />
          <InsightCard kind="def"    icon={<Icon.diamond />}  color="#F8C648" title={L.insights.def.t}    subtitle={<span style={{ color: "#F8C648" }}>{cDef.name}</span>}         body={cDef.desc || L.insights.def.body} onClick={() => onRoute("definition")} />
          <InsightCard kind="vision" icon={<Icon.eye />}      color="#C084FF" title={L.insights.vision.t} subtitle={<span style={{ color: "#C084FF" }}>{cProf.code}{cProf.name ? ` · ${cProf.name}` : ""}</span>} body={cProf.desc || L.insights.vision.body} onClick={() => onRoute("profile")} />
        </div>

        {/* Life cross — content-db + angle layer.
            The 192 cross entries carry only 64 distinct descriptions: the
            three angles of a sun gate share identical text. The angle layer
            (crosses-angle-db.js) supplies what actually differs between
            them, and is rendered above the gate-level paragraph. */}
        {crossDb && (
          <div className="ov-cross" data-galaxy-ui>
            <div className="rs-head">
              <span className="rs-eyebrow">{ar ? "صليب حياتك" : "Your life's cross"}</span>
              <h3 className="rs-headline">{ar ? crossDb.name_ar : crossDb.name_en}</h3>
            </div>
            {/* Every cross field goes through tone(): crosses-tone-db.js
                turns keynote/desc/life_theme into register objects, and a
                raw one reaching React throws and blanks the page. */}
            <p className="ovc-keynote">✦ {tone(ar ? crossDb.keynote_ar : crossDb.keynote_en)}</p>
            {crossDb.angle_layer && (
              <p className="rs-para ovc-angle">
                <strong>{ar ? crossDb.angle_layer.label_ar : crossDb.angle_layer.label_en}</strong>
                {" — "}
                <em>{tone(ar ? crossDb.angle_layer.tag_ar : crossDb.angle_layer.tag_en)}</em>
                {". "}
                {tone(ar ? crossDb.angle_layer.desc_ar : crossDb.angle_layer.desc_en)}
              </p>
            )}
            <p className="rs-para">{tone(ar ? crossDb.desc_ar : crossDb.desc_en)}</p>
            <p className="ovc-theme">{tone(ar ? crossDb.life_theme_ar : crossDb.life_theme_en)}</p>
            <div className="ovc-gates">
              {[
                ["personality_sun", ar ? "شمس الوعي" : "P. Sun"],
                ["personality_earth", ar ? "أرض الوعي" : "P. Earth"],
                ["design_sun", ar ? "شمس اللاوعي" : "D. Sun"],
                ["design_earth", ar ? "أرض اللاوعي" : "D. Earth"],
              ].map(([k, lbl]) => (
                <button key={k} className="ovc-gate" onClick={() => onRoute(`gate/${crossDb.gates[k]}`)}>
                  {lbl} <b>{crossDb.gates[k]}</b>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Strengths / watch-outs — computed from YOUR chart */}
        {insights && (insights.strengths.length > 0 || insights.watch.length > 0) && (
          <div className="ov-insights">
            <div className="ovi-card ovi-strong" data-galaxy-ui>
              <div className="ovi-head">
                <span className="ovi-ic" aria-hidden="true"><Icon.strengths size={20} /></span>
                <div>
                  <h3>{ar ? "أبرز نقاط قوتك" : "Your standout strengths"}</h3>
                  <span>{ar ? "مهارات ثابتة في تصميمك — من قنواتك ومراكزك المعرّفة" : "Fixed skills in your design — from your channels and defined centers"}</span>
                </div>
              </div>
              <div className="ovi-list">
                {insights.strengths.slice(0, 6).map((x, i) => (
                  <button key={i} className="ovi-row" onClick={() => onRoute(x.route)}>
                    <b>{x.t}</b>
                    <p>{x.body}</p>
                  </button>
                ))}
              </div>
            </div>
            <div className="ovi-card ovi-watch" data-galaxy-ui>
              <div className="ovi-head">
                <span className="ovi-ic" aria-hidden="true"><Icon.attention size={20} /></span>
                <div>
                  <h3>{ar ? "مناطق الانتباه" : "Watch-out zones"}</h3>
                  <span>{ar ? "أنماط تستحق الملاحظة في مراكزك غير المعرّفة وقنواتك" : "Patterns to notice in your undefined centers and channels"}</span>
                </div>
              </div>
              <div className="ovi-list">
                {insights.watch.slice(0, 6).map((x, i) => (
                  <button key={i} className="ovi-row" onClick={() => onRoute(x.route)}>
                    <b>{x.t}</b>
                    <p>{x.body}</p>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Deep channels — content-db */}
        {deepChans.length > 0 && (!ChartStore.remote || BetaAccess.state("gates").open) && (
          <div className="ov-deep">
            <div className="ovd-head">
              <h3>{ar ? "قنواتك — بالعمق" : "Your channels — in depth"}</h3>
              <span>{ar ? "طبيعة كل قناة مفعّلة، هباتها وتحدياتها" : "The nature, gifts and challenges of each defined channel"}</span>
            </div>
            <div className="ovd-grid">
              {deepChans.map((c) => (
                <div key={c.key} className="ovd-card" data-galaxy-ui>
                  <div className="ovd-title"><strong>{c.name}</strong><span>{c.key}</span></div>
                  <p className="ovd-nature">{c.nature}</p>
                  <div className="ovd-rows">
                    <div className="ovd-row g"><span>{ar ? "الهبات" : "Gifts"}</span><p>{c.gifts}</p></div>
                    <div className="ovd-row c"><span>{ar ? "التحديات" : "Challenges"}</span><p>{c.challenges}</p></div>
                    <div className="ovd-row r"><span>{ar ? "في العلاقات" : "Relational"}</span><p>{c.relational}</p></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Actions */}
        <div className="action-bar">
          {!ChartStore.remote && <>
            <Btn kind="ghost" onClick={onShare}><Icon.share />{L.actions.share}</Btn>
            <Btn kind="ghost" onClick={onFav}><Icon.heart />{L.actions.favorite}</Btn>
          </>}
          {!window.ChartStore?.remote && <>
            <Btn kind="ghost" onClick={onDownload}><Icon.download />{L.actions.download}</Btn>
            <Btn kind="gold" onClick={() => onRoute("report")}><Icon.bookOpen />{L.actions.full_reading}</Btn>
          </>}
        </div>

        {varPopup && HC && (() => {
          const v = HC.variable(varPopup, lang);
          if (!v) return null;
          return (
            <div className="var-pop-dim" onClick={() => setVarPopup(null)}>
              <div className="var-pop" onClick={(e) => e.stopPropagation()}>
                <button className="var-pop-x" onClick={() => setVarPopup(null)} aria-label="close"><Icon.plus size={18} /></button>
                <div className="var-pop-eyebrow">{v.label}</div>
                <div className="var-pop-val">{v.valueName}</div>
                <p className="var-pop-hint">{v.hint}</p>
                <button className="var-pop-more" onClick={() => { setVarPopup(null); onRoute(`guide/var-${v.key}-${v.valueKey}`); }}>
                  {ar ? "اعرف أكتر" : "Learn more"} <Icon.chevLeft size={14} />
                </button>
              </div>
            </div>
          );
        })()}
      </div>
    );
  };

  function InsightCard({ kind, icon, color, title, subtitle, body, onClick }) {
    const clickable = typeof onClick === "function";
    return (
      <div
        className={`insight-card ${clickable ? "clickable" : ""}`}
        data-galaxy-ui
        style={{ "--ic-accent": color, "--ic-color": color }}
        onClick={onClick}
        role={clickable ? "button" : undefined}
        tabIndex={clickable ? 0 : undefined}
        onKeyDown={clickable ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}
      >
        <div className="ic-head">
          <div className="ic-icon" style={{ borderColor: `${color}66`, background: `${color}1A`, color }}><Sigil>{icon}</Sigil></div>
          <div className="ic-headtext">
            <div className="ic-title">{title}</div>
            {subtitle && <div className="ic-subtitle">{subtitle}</div>}
          </div>
        </div>
        <p className="ic-body">{body}</p>
        {clickable && <span className="ic-go"><Icon.chevLeft size={14} /></span>}
      </div>
    );
  }
})();