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

  // ════════════════════════════════════════════════════════════
  //   HOME
  // ════════════════════════════════════════════════════════════
  window.HomePage = function HomePage({ lang, onRoute }) {
    const L = I18N[lang].home;
    const S = CHART_SUMMARY;
    const ar = lang === "ar";
    const name = lang === "ar" ? S.name_ar : S.name_en;
    const sumItems = [
      { k: "type",     v: lang === "ar" ? S.type_ar : S.type_en, color: "#FF78B5", icon: Icon.profile },
      { k: "strategy", v: lang === "ar" ? S.strategy_ar : S.strategy_en, color: "#62DDFF", icon: Icon.compass },
      { k: "authority",v: lang === "ar" ? S.authority_ar : S.authority_en, color: "#F8C648", icon: Icon.heart },
      { k: "profile",  v: S.profile, color: "#62DDFF", icon: Icon.users },
      { k: "definition", v: lang === "ar" ? S.definition_ar : S.definition_en, color: "#62DDFF", icon: Icon.definition },
      { k: "signature",v: lang === "ar" ? S.signature_ar : S.signature_en, color: "#F8C648", icon: Icon.star },
      { k: "not_self", v: lang === "ar" ? S.not_self_ar : S.not_self_en, color: "#62DDFF", icon: Icon.activity },
    ];

    const quick = [
      { id: "overview", icon: "overview", accent: "#A28DFE" },
      { id: "centers",  icon: "centers",  accent: "#F8C648" },
      { id: "gates",    icon: "gates",    accent: "#5FD6B5" },
      { id: "planets",  icon: "planets",  accent: "#62DDFF" },
      { id: "guide",    icon: "guide",    accent: "#C084FF" },
    ];

    return (
      <div className="page">
        <PageHeader title={L.title} sub={L.sub.replace("{name}", name)} lang={lang} />
        {window.ChartStore?.remote && <BetaJourney key={ChartStore.currentUser()?.id} lang={lang} onRoute={onRoute} />}

        <div className="home-grid">
          {/* Hero card */}
          <div className="hero-card" data-galaxy-ui>
            <div className="hero-text">
              <div className="hero-welcome">
                <Icon.sparkle size={18} />
                <span>{L.hero_welcome.replace("{name}", name)}</span>
              </div>
              <h2 className="hero-title">{L.hero_title}</h2>
              <p className="hero-body">{L.hero_body}</p>
              <Btn kind="outline" onClick={() => onRoute("overview")}>
                {L.hero_cta}
                <Icon.chevLeft />
              </Btn>
            </div>
            <div className="hero-figure" aria-hidden>
              <div className="hero-figure-glow"></div>
              <image-slot
                id="home-hero-figure"
                fit="cover"
                shape="rect"
                placeholder={ar ? "صورة متأمّل بهندسة مقدّسة مضيئة عند القلب" : "Meditating figure with a glowing heart sigil"}
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
            </div>
          </div>

          {/* Summary card */}
          <div className="home-summary" data-galaxy-ui>
            <div className="hs-header">
              <Icon.starOutline size={16} />
              <span>{L.summary_title}</span>
            </div>
            <div className="hs-rows">
              {sumItems.slice(0, 6).map((it, i) => (
                <div key={i} className="hs-row" onClick={() => onRoute("overview")}>
                  <Icon.chevLeft size={14} />
                  <div className="hs-text">
                    <span className="hs-v" style={{ color: it.color }}>{it.v}</span>
                    <span className="hs-l">{L.summary_labels[it.k]}</span>
                  </div>
                  <span className="hs-icon" style={{ color: it.color }}><it.icon size={16} /></span>
                </div>
              ))}
              <div className="hs-row" onClick={() => onRoute("overview")}>
                <Icon.chevLeft size={14} />
                <div className="hs-text">
                  <span className="hs-v" style={{ color: sumItems[6].color }}>{sumItems[6].v}</span>
                  <span className="hs-l">{L.summary_labels[sumItems[6].k]}</span>
                </div>
                <span className="hs-icon" style={{ color: sumItems[6].color }}><Icon.flash size={16} /></span>
              </div>
            </div>
          </div>
        </div>

        {/* Quick access strip */}
        <div className="quick-section">
          <div className="qs-label">{L.quick_access}</div>
          <div className="quick-grid">
            {quick.filter((q) => !window.SpadeAccess || SpadeAccess.canSee(q.id)).map((q) => {
              const II = Icon[q.icon];
              return (
                <button key={q.id} className="quick-card" data-galaxy-ui onClick={() => onRoute(q.id)} style={{ "--accent": q.accent }}>
                  <span className="qc-chev"><Icon.chevLeft size={14} /></span>
                  <span className="qc-icon"><II size={26} /></span>
                  <span className="qc-title">{L.quick[q.id].t}</span>
                  <span className="qc-sub">{L.quick[q.id].s}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Three feature cards — compass, labs (internal), today */}
        <div className={`features-grid ${(window.SpadeAccess && SpadeAccess.isAdmin()) ? "" : "features-2"}`}>
          <div className="feature-card compass-card" data-galaxy-ui>
            <div className="fc-figure">
              <div className="fc-figure-glow compass-glow"></div>
              <span className="fc-icon fci-compass" aria-hidden="true">
                <svg width="66" height="66" viewBox="0 0 24 24" fill="none" stroke="#C4B5FF" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
                  <circle className="fci-ring" cx="12" cy="12" r="9" />
                  <circle className="fci-trace" cx="12" cy="12" r="9" stroke="#EFE8FF" strokeWidth="1.5" strokeDasharray="9 47.55" />
                  <g className="fci-ticks" opacity="0.65"><path d="M12 3.6v1.6M12 18.8v1.6M3.6 12h1.6M18.8 12h1.6" /></g>
                  <g className="fci-needle">
                    <path d="m15.4 8.6-1.9 4.6-4.9 2.2 1.9-4.6z" fill="#C4B5FF" fillOpacity="0.2" />
                  </g>
                  <circle cx="12" cy="12" r="1.05" fill="#C4B5FF" />
                </svg>
              </span>
            </div>
            <div className="fc-body">
              <div className="fc-title-row">
                <h3>{L.compass_title}</h3>
                <Icon.sparkle size={16} />
              </div>
              <p>{L.compass_body}</p>
              <Btn kind="outline" onClick={() => onRoute("compass")}>{L.compass_cta} <Icon.sparkle size={14} /></Btn>
            </div>
          </div>

          {(window.SpadeAccess && SpadeAccess.isAdmin()) && (
          <div className="feature-card labs-card" data-galaxy-ui>
            <div className="fc-header">
              <div className="fc-title-row">
                <Icon.labs size={20} />
                <h3>{L.labs_title}</h3>
                <span className="badge-new">{L.labs_badge}</span>
              </div>
            </div>
            <p>{L.labs_body}</p>
            <div className="chips-row">
              {L.labs_chips.map((c, i) => (<span key={i} className="chip"><Icon.sparkle size={12} />{c}</span>))}
            </div>
            <Btn kind="outline" onClick={() => onRoute("labs")}>{L.labs_cta} <Icon.beaker size={14} /></Btn>
          </div>
          )}

          <div className="feature-card today-card" data-galaxy-ui>
            <div className="fc-figure today-figure">
              <div className="fc-figure-glow today-glow"></div>
              <span className="fc-icon fci-sun" aria-hidden="true">
                <svg width="66" height="66" viewBox="0 0 24 24" fill="none" stroke="#F8C648" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
                  <circle className="fci-core" cx="12" cy="12" r="4.5" fill="#F8C648" fillOpacity="0.16" />
                  <circle className="fci-trace fci-trace-sun" cx="12" cy="12" r="4.5" stroke="#FFF2C9" strokeWidth="1.5" strokeDasharray="5.5 22.77" />
                  <g className="fci-rays">
                    <path d="M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7" />
                  </g>
                </svg>
              </span>
            </div>
            <div className="fc-body" style={{ textAlign: lang === "ar" ? "right" : "left" }}>
              <div className="fc-title-row">
                <h3 style={{ color: "#F8C648" }}>{L.today_title}</h3>
                <Icon.sun size={16} />
              </div>
              <p>{L.today_body}</p>
              <div className="today-quote">
                <Icon.sparkle size={14} />
                <span>{(function () {
                  try {
                    if (window.HDEngine && HDEngine.ready() && window.TRANSIT_DB) {
                      const t = HDEngine.transit(new Date(), ["sun"])[0];
                      const db = t && TRANSIT_DB[t.g];
                      if (db) {
                        const tp = (f) => (window.SpadeTone ? window.SpadeTone.pick(f) : (typeof f === "string" ? f : (f && (f.simple || f.pro)) || ""));
                        const txt = tp(ar ? (db.transit_ar || db.transit_theme_ar) : (db.transit_en || db.transit_theme_en));
                        if (txt) return `☉ ${t.g}.${t.l} — ${txt}`;
                      }
                    }
                  } catch (e) {}
                  return L.today_quote;
                })()}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Strengths / watch-outs — compact (full version lives in Overview) */}
        {(function () {
          const ins = window.SpadeInsights ? SpadeInsights.compute(lang) : null;
          if (!ins || (ins.strengths.length === 0 && ins.watch.length === 0)) return null;
          return (
            <div className="home-insights">
              <div className="hi-card hi-strong" data-galaxy-ui>
                <div className="hi-head"><Icon.activity size={20} /> <h3>{ar ? "أبرز نقاط قوتك" : "Your strengths"}</h3></div>
                <ul>
                  {ins.strengths.slice(0, 3).map((x, i) => (
                    <li key={i}><b>{x.t}:</b> {x.body}</li>
                  ))}
                </ul>
                <button className="hi-more" onClick={() => onRoute("overview")}>{ar ? "القراءة الكاملة في خريطتك" : "Full reading in your chart"} <Icon.chevLeft size={13} /></button>
              </div>
              <div className="hi-card hi-watch" data-galaxy-ui>
                <div className="hi-head"><Icon.eye size={15} /> <h3>{ar ? "انتبه لنفسك هنا" : "Watch yourself here"}</h3></div>
                <ul>
                  {ins.watch.slice(0, 3).map((x, i) => (
                    <li key={i}><b>{x.t}:</b> {x.body}</li>
                  ))}
                </ul>
                <button className="hi-more" onClick={() => onRoute("overview")}>{ar ? "القراءة الكاملة في خريطتك" : "Full reading in your chart"} <Icon.chevLeft size={13} /></button>
              </div>
            </div>
          );
        })()}

        {/* Deep CTA */}
        <div className="deep-cta" data-galaxy-ui>
          <div className="dc-figure"><Icon.bookOpen size={40} /></div>
          <div className="dc-text">
            <h3>{L.deep_title}</h3>
            <p>{L.deep_body}</p>
          </div>
          <Btn kind="outline" onClick={() => onRoute("overview")}>{L.deep_cta} <Icon.bookOpen size={16} /></Btn>
        </div>
      </div>
    );
  };
})();