/* eslint-disable */
/* =============================================================
   LabsPage — Spade's Life Explained UI Kit
   -----
   Browser build: classic <script type="text/babel">; attaches window.LabsPage.
   Reads globals: I18N, Icon
   Card / hero figures are <image-slot>s so the user can drop the neon
   illustrations (brain, heart, network, flasks…). Compass + sun ship
   pre-filled from assets/ via the slot's `src` fallback.
   Next.js port: lift the component into its own module —
     export default function LabsPage({ lang, onRoute }) { … }
   ============================================================= */
(function () {
  const { useState } = React;

  window.LabsPage = function LabsPage({ lang, onRoute }) {
    const L = I18N[lang].labs;
    const ar = lang === "ar";
    const [filter, setFilter] = useState("open");

    // figure per card — src pre-fills the slot; user drop overrides it.
    const figs = [
      { src: null, ph: ar ? "شبكة كوكبية متصلة (نيون بنفسجي)" : "Connected constellation graph", anim: "network" },
      { src: "assets/img-hero-sun.png",     ph: ar ? "شمس / عبور اليوم" : "Sun / today's transit", anim: "sun"    },
      { src: null, ph: ar ? "قلب نيون أحمر" : "Neon heart",                                       anim: "heart"   },
      { src: "assets/img-hero-compass.png", ph: ar ? "بوصلة كونية" : "Cosmic compass",           anim: "compass"  },
    ];
    const itemColors = ["#C084FF", "#62DDFF", "#FF5C76", "#5FD6B5"];

    // Filter the grid by the active tab. Tools carry a `status`
    // (open / beta / soon). The old "prem" tab went with the paid tier.
    // Keep the original index so each card keeps its figure + colour.
    const matchesFilter = (it) => it.status === filter;
    const visible = L.items.map((it, i) => ({ it, i })).filter(({ it }) => matchesFilter(it));

    // Tools that have a live destination in the app.
    // 2 = AI Compatibility → Compare · 3 = Ask Spade → Compass chat.
    const cardRoute = { 2: "compare", 3: "compass" };

    return (
      <div className="page page-labs">
        {/* ── Hero ── */}
        <div className="labs-hero">
          <div className="labs-hero-text">
            <h1 className="labs-title">Spade Labs</h1>
            <p className="labs-sub">{L.sub}</p>
            <div className="labs-hero-help"><HelpButton lang={lang} /></div>
          </div>
          <div className="labs-hero-figure" aria-hidden>
            <div className="labs-hero-rings"></div>
            <div className="labs-hero-glow"></div>
            <image-slot
              id="labs-hero-fig"
              fit="cover"
              shape="rect"
              placeholder={ar ? "قارورة سبيد ♠ نيون" : "Neon spade flask"}
              style={{ width: "400px", height: "150px", display: "block" }}
            ></image-slot>
          </div>
        </div>

        {/* ── Filters ── */}
        <div className="labs-filters" data-galaxy-ui>
          {[
            { id: "open", label: L.filters.open, icon: Icon.beaker },
            { id: "beta", label: L.filters.beta, icon: Icon.flash },
            { id: "soon", label: L.filters.soon, icon: Icon.clock },
            { id: "prem", label: L.filters.prem, icon: Icon.crown },
          ].map((f) => (
            <button key={f.id} className={`tab-pill ${filter === f.id ? "active" : ""}`} onClick={() => setFilter(f.id)}>
              <f.icon size={14} /> {f.label}
            </button>
          ))}
        </div>

        {/* ── Grid: 2 large + 3 + 3 ── */}
        <div className="labs-grid">
          {visible.length === 0 && (
            <div className="labs-empty">{ar ? "لا توجد أدوات في هذا القسم بعد." : "No tools in this section yet."}</div>
          )}
          {visible.map(({ it, i }, pos) => {
            const color = itemColors[i] || "#C084FF";
            const fig = figs[i] || {};
            const isLocked = it.status === "soon";
            const solo = visible.length === 1;
            const big = !solo && pos < 2;
            return (
              <div
                key={i}
                className={`lab-card ${big ? "lab-big" : ""} ${solo ? "lab-solo" : ""} ${it.featured ? "lab-featured" : ""} ${it.status === "beta" ? "lab-beta" : ""} ${isLocked ? "lab-locked" : ""}`}
                data-galaxy-ui
                style={{ "--lc-color": color }}
              >
                {it.featured && <span className="lc-pin"><Icon.starOutline size={11} /> {L.featured_badge}</span>}
                {isLocked && <span className="lc-pin lc-soon"><Icon.clock size={11} /> {L.coming_soon}</span>}

                <div className="lc-figure">
                  <div className="lc-figure-glow"></div>
                  <image-slot
                    id={`labs-fig-${i}`}
                    shape="rect"
                    fit="cover"
                    src={fig.src || undefined}
                    placeholder={fig.ph}
                    style={{ width: big ? "150px" : "104px", height: big ? "150px" : "104px", display: "block" }}
                  ></image-slot>
                </div>

                <div className="lc-text">
                  <div className="lc-title-row">
                    <h3 className="lc-title" style={{ color }}>{it.t}</h3>
                    {it.status === "beta" && <span className="lc-beta-badge">{L.beta_badge}</span>}
                  </div>
                  {it.lead && <p className="lc-lead" style={{ color }}>{it.lead}</p>}
                  <p className="lc-body">{it.body}</p>
                  {!isLocked && (
                    <div className="lc-actions">
                      <button className="lc-cta" data-galaxy-ui style={{ "--lc-color": color }} onClick={() => cardRoute[i] && onRoute(cardRoute[i])}>{it.cta} <Icon.chevLeft size={15} /></button>
                      <HelpButton lang={lang} route="labs" className="lc-more" label={it.more} />
                    </div>
                  )}
                  {isLocked && (
                    <button className="lc-locked-btn" data-galaxy-ui><Icon.lock size={14} /> {ar ? "متاح قريبًا" : "Available soon"}</button>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* official disclaimer (content-db labs._meta) */}
        {L.note && <p className="labs-note">{L.note}</p>}
      </div>
    );
  };
})();