/* eslint-disable */
/* =============================================================
   DetailPage — unified deep-dive for every chart element
   -------------------------------------------------------------
   One component, eight kinds (driven by route + :id param):
     gate · center · channel · planet · authority · profile ·
     definition · cross
   Reached from the bodygraph popups ("عرض التفاصيل الكاملة") and
   from list pages. The location-map bodygraph on the left is itself
   navigable — clicking any element jumps to its detail.
   Globals: GATE_DB, GATE_NAMES, GATE_THEMES, CHANNEL_DB, CENTER_INFO,
            PLANET_DB, BG_GATES, BG_CHANNELS, BG_GATE_CENTER,
            DEFINED_CENTERS, ACTIVE_GATES, HDContent, InteractiveBodygraph
   ============================================================= */
const { useState: useStateDT } = React;

/* Module-level tone resolver. The two local `tp` helpers further down live
   inside nested closures, so the gate `body` below had none in scope — and
   GATE_DB.desc_* carries registers now (gate-desc-tone-db.js). An unresolved
   register object in JSX throws React #31 and blanks the page. */
const tpDT = (f) =>
  typeof f === "string" ? f
    : !f ? ""
    : (window.SpadeTone ? SpadeTone.pick(f) : (f.simple || f.pro || ""));

window.DetailPage = function DetailPage({ lang = "ar", onRoute, route, param }) {
  const ar = lang === "ar";
  const kind = route;
  const go = (r) => onRoute && onRoute(r);

  const T = ar
    ? { back: "رجوع", gate: "البوابة", center: "المركز", channel: "القناة", planet: "الكوكب",
        located: "موقعها في الخريطة", viewFull: "عرض الخريطة الكاملة", keywords: "الكلمات المفتاحية",
        shadow: "الظل", gift: "الهدية", siddhi: "السرّ", related: "القنوات المرتبطة",
        gatesIn: "بوابات هذا المركز", links: "يربط بين", defined: "مُعرّف", open: "مفتوح",
        active: "مُفعّلة", inactive: "غير مُفعّلة", circuit: "الدائرة", reminder: "تذكير",
        bothSides: "وعي + لاوعي", cons: "وعي", uncons: "لاوعي", crumbGate: "دليل البوابات",
        crumbCenter: "المراكز", crumbChannel: "القنوات", crumbPlanet: "الكواكب" }
    : { back: "Back", gate: "Gate", center: "Center", channel: "Channel", planet: "Planet",
        located: "Location on the chart", viewFull: "View full chart", keywords: "Keywords",
        shadow: "Shadow", gift: "Gift", siddhi: "Siddhi", related: "Related channels",
        gatesIn: "Gates in this center", links: "Links", defined: "Defined", open: "Open",
        active: "Active", inactive: "Open", circuit: "Circuit", reminder: "Reminder",
        bothSides: "Both", cons: "Conscious", uncons: "Unconscious", crumbGate: "Gates guide",
        crumbCenter: "Centers", crumbChannel: "Channels", crumbPlanet: "Planets" };

  // ── resolve content per kind ──
  const data = buildDetail(kind, param, ar, T);
  if (!data) {
    return (
      <div className="dt-page">
        <button className="dt-back" onClick={() => go("overview")}>‹ {T.back}</button>
        <div className="dt-empty">{ar ? "العنصر غير موجود." : "Item not found."}</div>
      </div>
    );
  }

  const mapSel = data.mapSel;
  const centerDetail = kind === "center";

  return (
    <div className={`dt-page${centerDetail ? " dt-page-center" : ""}`} data-screen-label={`detail ${kind}`}>
      {/* header */}
      <div className="dt-head">
        <button className="dt-back" onClick={() => go(data.backRoute)}>
          <span className="dt-back-arrow">{ar ? "→" : "←"}</span> {data.crumb}
        </button>
        {window.HelpButton && <HelpButton lang={lang} route={kind} />}
      </div>

      <div className="dt-grid">
        {/* ── left: location map + related ── */}
        <aside className="dt-aside">
          <div className="dt-card dt-map-card">
            <div className="dt-card-h"><span>{T.located}</span></div>
            <div className="dt-map">
              {window.InteractiveBodygraph && (
                <InteractiveBodygraph
                  lang={lang}
                  showGateNumbers={true}
                  popups={false}
                  selection={mapSel}
                  onSelect={(s) => { if (s) go(`${s.kind}/${s.id}`); }}
                />
              )}
            </div>
            <button className="dt-map-full" onClick={() => go("overview")}>
              {T.viewFull} <span>⤢</span>
            </button>
          </div>

          {!centerDetail && data.related && data.related.length > 0 && (
            <div className="dt-card">
              <div className="dt-card-h"><span>{data.relatedTitle}</span></div>
              <div className="dt-related">
                {data.related.map((r) => (
                  <button key={r.route} className="dt-related-row" onClick={() => go(r.route)}>
                    <span className="dt-related-name">{r.name}</span>
                    {r.meta && <span className="dt-related-meta">{r.meta}</span>}
                    <span className="dt-related-go">{ar ? "‹" : "›"}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </aside>

        {/* ── right: hero + body + triad + extra ── */}
        <main className="dt-main">
          <div className="dt-card dt-hero">
            <div className="dt-hero-badge" style={data.badgeStyle}>{data.badge}</div>
            <div className="dt-hero-titles">
              <h1>{data.title}</h1>
              <p>{data.subtitle}</p>
            </div>
            {data.statusChip && <div className={`dt-status ${data.statusChip.cls}`}>{data.statusChip.label}</div>}
          </div>

          {data.keywords && data.keywords.length > 0 && (
            <div className="dt-card dt-kw">
              <div className="dt-card-h sm"><span>{T.keywords}</span></div>
              <div className="dt-kw-row">
                {data.keywords.map((k, i) => <span key={i} className="dt-chip">{k}</span>)}
              </div>
            </div>
          )}

          {data.body && <p className="dt-body">{data.body}</p>}

          {data.triad && (
            <div className="dt-triad">
              <TriadCard kind="shadow" label={T.shadow} word={data.triad.shadow} />
              <TriadCard kind="gift" label={T.gift} word={data.triad.gift} />
              <TriadCard kind="siddhi" label={T.siddhi} word={data.triad.siddhi} />
            </div>
          )}

          {data.gateChips && (
            <div className={`dt-card${centerDetail ? " dt-center-links" : ""}`}>
              <div>
                <div className="dt-card-h sm"><span>{T.gatesIn}</span></div>
                <div className="dt-gatechips">
                  {data.gateChips.map((g) => (
                    <button key={g.g} className={`dt-gatechip${g.on ? " on" : ""}`} onClick={() => go(`gate/${g.g}`)}>{g.g}</button>
                  ))}
                </div>
              </div>
              {centerDetail && data.related?.length > 0 && <div>
                <div className="dt-card-h sm"><span>{data.relatedTitle}</span></div>
                <div className="dt-gatechips">
                  {data.related.map((item) => <button key={item.route} type="button" className="dt-gatechip"
                    title={item.name} aria-label={item.name} onClick={() => go(item.route)}><bdi>{item.route.split("/")[1]}</bdi></button>)}
                </div>
              </div>}
            </div>
          )}

          {data.sections && data.sections.map((sec, i) => (
            <div key={i} className="dt-card">
              <div className="dt-card-h sm"><span>{sec.title}</span></div>
              {sec.text && <p className="dt-sec-text">{sec.text}</p>}
              {sec.rows && (
                <div className="dt-rows">
                  {sec.rows.map((row, j) => (
                    <div key={j} className="dt-row">
                      <span className="dt-row-l">{row.l}</span>
                      <span className="dt-row-r">{row.r}</span>
                    </div>
                  ))}
                </div>
              )}
              {sec.quote && <blockquote className="dt-quote">{sec.quote}</blockquote>}
            </div>
          ))}

          {data.gateLines && (
            <div className="dt-card">
              <div className="dt-card-h sm"><span>{data.gateLines.title}</span></div>
              <div className="dt-lines">
                {data.gateLines.items.map((ln) => (
                  <div key={ln.n} className={`dt-line${ln.mine ? " mine" : ""}`}>
                    <span className="dt-line-n">{data.gateLines.gate}.{ln.n}</span>
                    <div className="dt-line-text">
                      <strong>{ln.keynote}{ln.mine && <em className="dt-line-tag">{ln.tag}</em>}</strong>
                      <p>{ln.desc}</p>
                      <div className="dt-line-meta"><span className="sh">● {ln.shadow}</span><span className="gf">✦ {ln.gift}</span></div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {data.centerTone && (data.centerTone.shadow || data.centerTone.gift) && (
            <div className="dt-card">
              <div className="dt-lines">
                {data.centerTone.shadow && (
                  <div className="dt-line">
                    <span className="dt-line-n" style={{ color: "#FF78B5", borderColor: "rgba(255,120,181,0.4)" }}>{ar ? "الظل" : "Shadow"}</span>
                    <div className="dt-line-text"><p style={{ margin: 0 }}>{data.centerTone.shadow}</p></div>
                  </div>
                )}
                {data.centerTone.gift && (
                  <div className="dt-line mine">
                    <span className="dt-line-n" style={{ color: "#5FD6B5", borderColor: "rgba(95,214,181,0.45)" }}>{ar ? "الهدية" : "Gift"}</span>
                    <div className="dt-line-text"><p style={{ margin: 0 }}>{data.centerTone.gift}</p></div>
                  </div>
                )}
              </div>
            </div>
          )}

          {data.reminder && (
            <div className="dt-reminder">
              <span className="dt-reminder-tag">★ {T.reminder}</span>
              <p>{data.reminder}</p>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

function TriadCard({ kind, label, word }) {
  if (!word) return null;
  return (
    <div className={`dt-triad-card ${kind}`}>
      <span className="dt-triad-dot" />
      <span className="dt-triad-label">{label}</span>
      <strong className="dt-triad-word">{word}</strong>
    </div>
  );
}

// ── content builder ──────────────────────────────────────────
function buildDetail(kind, param, ar, T) {
  const GN = window.GATE_NAMES || {}, GNE = window.GATE_NAMES_EN || {};
  const GDB = window.GATE_DB || {}, CDB = window.CHANNEL_DB || {};
  const CI = ar ? (window.CENTER_INFO || {}) : (window.CENTER_INFO_EN || {});
  const GC = window.BG_GATE_CENTER || {};
  const CHANS = window.BG_CHANNELS || [];
  const GATES = window.BG_GATES || [];
  const ACT = window.ACTIVE_GATES || {};
  const TONE = { head:"#F8C648", ajna:"#5FD6B5", throat:"#7C5BE3", g:"#F1D24E", ego:"#F47A7A",
                 spleen:"#63CF86", solar_plexus:"#F4CD58", sacral:"#F69859", root:"#F45F5F" };
  const gateOn = (g) => { const a = ACT[g] || {}; return !!(a.p || a.d); };

  if (kind === "gate") {
    const g = parseInt(param, 10);
    const db = GDB[g];
    if (!g || !db) return null;
    const cid = GC[g];
    const cinfo = CI[cid] || {};
    const name = ar ? (GN[g] || db.name) : (db.name || GNE[g]);
    const a = ACT[g] || {};
    const isOn = !!(a.p || a.d);
    // related channels (where g is an endpoint)
    const related = CHANS.filter((c) => c[0] === g || c[1] === g).map((c) => {
      const other = c[0] === g ? c[1] : c[0];
      const key = `${c[0]}-${c[1]}`, cdb = CDB[key] || CDB[`${c[1]}-${c[0]}`] || {};
      const oc = CI[GC[other]] || {};
      return { route: `channel/${c[0]}-${c[1]}`, name: ar ? (cdb.name_ar || `قناة ${c[0]}-${c[1]}`) : (cdb.name || `Channel ${c[0]}-${c[1]}`),
               meta: `${g}–${other} · ${oc.name || ""}` };
    });
    const kw = [cinfo.name, db.circuit ? window.circuitLabel(db.circuit, ar ? "ar" : "en").split(" / ")[0].replace("الدائرة ", "") : null, ar ? (db.gift_ar || db.gift) : (db.gift || db.gift_ar)].filter(Boolean);
    return {
      backRoute: "gates", crumb: T.crumbGate,
      badge: g, badgeStyle: { background: `${TONE[cid]}22`, borderColor: `${TONE[cid]}88`, color: TONE[cid] },
      title: `${T.gate} ${g}`, subtitle: name,
      statusChip: { cls: isOn ? "on" : "off", label: isOn ? T.active : T.inactive },
      keywords: kw,
      body: tpDT(ar ? (db.desc_ar || db.theme_ar || (window.GATE_THEMES && window.GATE_THEMES[g])) : (db.desc_en || db.theme)),
      triad: { shadow: ar ? db.shadow_ar : db.shadow, gift: ar ? db.gift_ar : db.gift, siddhi: ar ? db.siddhi_ar : db.siddhi },
      related, relatedTitle: T.related,
      gateLines: (function () {
        const GLT = window.GATE_LINE_TONE_DB || {};
        const GL = window.GATE_LINE_DB || {};
        if (!GLT[g + ".1"] && !GL[g + ".1"]) return null;
        const tp = (f) => (window.SpadeTone ? SpadeTone.pick(f) : (typeof f === "string" ? f : (f && f.simple) || ""));
        const mine = {};
        (window.CHART_PERSONALITY || []).forEach((r) => { if (r.g === g) (mine[r.l] = mine[r.l] || {}).p = 1; });
        (window.CHART_DESIGN || []).forEach((r) => { if (r.g === g) (mine[r.l] = mine[r.l] || {}).d = 1; });
        const personalOnly = window.ChartStore?.remote && !ChartStore.isAdmin();
        const numbers = [1, 2, 3, 4, 5, 6].filter((n) => !personalOnly || mine[n]);
        if (!numbers.length) return null;
        return {
          title: personalOnly ? (ar ? "خطوطك في البوابة" : "Your lines in this gate") : (ar ? "الخطوط الستة" : "The six lines"),
          gate: g,
          items: numbers.map((n) => {
            const ldb = GLT[g + "." + n] || GL[g + "." + n] || {};
            const m = mine[n];
            return {
              n, mine: !!m,
              tag: m ? (m.p && m.d ? (ar ? "وعي + لاوعي" : "Conscious + Design") : m.p ? (ar ? "خطك — في وعيك" : "Yours — conscious") : (ar ? "خطك — في لاوعيك" : "Yours — design")) : null,
              keynote: ar ? ldb.keynote_ar : ldb.keynote_en,
              desc: tp(ar ? ldb.desc_ar : ldb.desc_en),
              shadow: tp(ar ? ldb.shadow_ar : ldb.shadow_en),
              gift: tp(ar ? ldb.gift_ar : ldb.gift_en),
            };
          }),
        };
      })(),
      sections: [
        { title: T.circuit, rows: [
          { l: ar ? "المركز" : "Center", r: cinfo.name || "" },
          { l: T.circuit, r: window.circuitLabel(db.circuit, ar ? "ar" : "en") },
          { l: ar ? "الحالة" : "State", r: a.p && a.d ? T.bothSides : a.p ? T.cons : a.d ? T.uncons : T.inactive },
        ]},
      ],
      mapSel: { kind: "gate", id: g },
    };
  }

  if (kind === "center") {
    const id = param;
    const info = CI[id];
    if (!info) return null;
    const defined = (window.DEFINED_CENTERS || new Set()).has(id);
    const gatesIn = GATES.filter((x) => x.c === id).map((x) => ({ g: x.g, on: gateOn(x.g) }));
    const related = CHANS.filter((c) => GC[c[0]] === id || GC[c[1]] === id).map((c) => {
      const key = `${c[0]}-${c[1]}`, cdb = CDB[key] || CDB[`${c[1]}-${c[0]}`] || {};
      const oc = CI[GC[c[0]] === id ? GC[c[1]] : GC[c[0]]] || {};
      return { route: `channel/${c[0]}-${c[1]}`, name: ar ? (cdb.name_ar || `قناة ${c[0]}-${c[1]}`) : (cdb.name || `Channel ${c[0]}-${c[1]}`),
               meta: oc.name || "" };
    });
    const ct = (window.CENTER_TONE_DB || {})[id === "ego" ? "heart" : id];
    const reflection = defined ? window.DEFINED_CENTER_REFLECTIONS?.[id]?.[ar ? "ar" : "en"] : null;
    const tp = (f) => (window.SpadeTone ? SpadeTone.pick(f) : (typeof f === "string" ? f : (f && f.simple) || ""));
    return {
      backRoute: "centers", crumb: T.crumbCenter,
      badge: "◈", badgeStyle: { background: `${TONE[id]}22`, borderColor: `${TONE[id]}88`, color: TONE[id] },
      title: ct ? (ar ? ct.keynote_ar : ct.keynote_en) && info.name : info.name,
      subtitle: `${defined ? T.defined : T.open} · ${gatesIn.length} ${ar ? "بوابات" : "gates"}`,
      statusChip: { cls: defined ? "on" : "off", label: defined ? T.defined : T.open },
      body: ct ? tp(ar ? ct.desc_ar : ct.desc_en) : info.summary,
      centerTone: reflection || (ct ? { shadow: tp(ar ? ct.shadow_ar : ct.shadow_en), gift: tp(ar ? ct.gift_ar : ct.gift_en) } : null),
      gateChips: gatesIn,
      related, relatedTitle: T.related,
      mapSel: { kind: "center", id },
    };
  }

  if (kind === "channel") {
    const parts = String(param).split("-").map((n) => parseInt(n, 10));
    const [a, b] = parts;
    if (!a || !b) return null;
    const key = `${a}-${b}`, cdb = CDB[key] || CDB[`${b}-${a}`] || {};
    const ca = CI[GC[a]] || {}, cb = CI[GC[b]] || {};
    const aOn = gateOn(a), bOn = gateOn(b), active = aOn && bOn;
    return {
      backRoute: "centers", crumb: T.crumbChannel,
      badge: `${a}-${b}`, badgeStyle: { fontSize: "20px", background: "linear-gradient(135deg,#62DDFF22,#C084FF22)", borderColor: "#C084FF88", color: "#C9B6FF" },
      title: ar ? (cdb.name_ar || `قناة ${a}-${b}`) : (cdb.name || `Channel ${a}-${b}`),
      subtitle: `${ca.name || ""} ↔ ${cb.name || ""}`,
      statusChip: { cls: active ? "on" : "off", label: active ? T.active : T.inactive },
      keywords: [cdb.circuit ? window.circuitLabel(cdb.circuit, ar ? "ar" : "en").split(" / ")[0].replace("الدائرة ", "") : null].filter(Boolean),
      body: ar ? cdb.desc_ar : cdb.desc_en,
      related: [
        { route: `gate/${a}`, name: `${T.gate} ${a} · ${ar ? (GN[a] || "") : (GNE[a] || "")}`, meta: ca.name || "" },
        { route: `gate/${b}`, name: `${T.gate} ${b} · ${ar ? (GN[b] || "") : (GNE[b] || "")}`, meta: cb.name || "" },
      ],
      relatedTitle: ar ? "بوابتا القناة" : "Channel gates",
      mapSel: { kind: "channel", id: `${a}-${b}` },
    };
  }

  if (kind === "planet") {
    const p = (window.PLANET_DB || {})[param];
    if (!p) return null;
    return {
      backRoute: "planets", crumb: T.crumbPlanet,
      badge: p.glyph, badgeStyle: { background: `${p.color}22`, borderColor: `${p.color}88`, color: p.color, fontSize: "26px" },
      title: ar ? p.ar : p.en, subtitle: ar ? p.head_ar : p.head_en,
      body: ar ? p.body_ar : p.body_en,
      sections: [{ title: ar ? "طاقة الكوكب" : "Planet energy", quote: ar ? p.quote_ar : p.quote_en }],
      mapSel: null,
    };
  }

  // chart-level kinds via HDContent
  const HC = window.HDContent;
  if (kind === "authority" && HC) {
    const d = HC.authority(langOf(ar));
    return chartMeta(ar, T, "⚖", "#5FD6B5", ar ? "السلطة الداخلية" : "Inner Authority", d.name, d.desc, d.process && [{ title: ar ? "كيف تعمل" : "How it works", text: d.process }]);
  }
  if (kind === "profile" && HC) {
    const d = HC.profile(langOf(ar));
    return chartMeta(ar, T, "👤", "#F4CD58", ar ? "البروفايل" : "Profile", `${d.code} · ${d.theme || ""}`, d.desc);
  }
  if (kind === "definition" && HC) {
    const d = HC.definition(langOf(ar));
    const sections = [];
    if (d.rich) {
      if (d.rich.how) sections.push({ title: ar ? "كيف تعمل" : "How it works", text: d.rich.how });
      if (d.rich.strengths && d.rich.strengths.length) sections.push({ title: ar ? "قوّتك في هذا التعريف" : "Your strengths here", rows: d.rich.strengths.map((s) => ({ l: "✦", r: s })) });
      if (d.rich.practice) sections.push({ title: ar ? "ممارسة لك" : "A practice for you", quote: d.rich.practice });
    }
    if (d.theme) sections.push({ title: ar ? "الثيمة" : "Theme", text: d.theme });
    const lead = (d.rich && d.rich.intro) || d.desc;
    return chartMeta(ar, T, "◇", "#62DDFF", ar ? "التعريف" : "Definition", d.name, lead, sections.length ? sections : null);
  }
  if (kind === "cross" && HC) {
    const d = HC.cross(langOf(ar));
    return chartMeta(ar, T, "✦", "#C084FF", ar ? "صليب التجسيد" : "Incarnation Cross", d.angle, d.codes ? (ar ? `البوابات: ${d.codes}` : `Gates: ${d.codes}`) : "");
  }
  return null;
}

function langOf(ar) { return ar ? "ar" : "en"; }

function chartMeta(ar, T, glyph, color, crumb, title, body, sections) {
  return {
    backRoute: "overview", crumb,
    badge: glyph, badgeStyle: { background: `${color}22`, borderColor: `${color}88`, color, fontSize: "24px" },
    title: title || crumb, subtitle: crumb,
    body: body || "",
    sections: sections || null,
    mapSel: null,
  };
}