// homehub-layouts.jsx — Two Home Hub layouts, both Bento-based:
//   • MobileBento  — asymmetric 6-col grid mobile
//   • DesktopBento — 12-col dashboard
//
// Both reflect the real game loop: Prediction (entry) → Coin → Pack → Card →
// Deck → Submit → XP → Leaderboard.

const { useRef, useState, useEffect, useMemo } = React;

// ─── MobileBento ───────────────────────────────────────────────────────────
function MobileBento({
  locale = 'fa',
  avatarSide = 'start',
  fiveTabs = false,
  scrollAware = true,
  showEmpty = false,
  dateMode = 'hybrid',
  notifications = 3,
  notifSimulate = true,
  onCardPick,
  onPredict,
  onAllMatches,
  onSubmit,
  onShop,
}) {
  const ll = HH_I18N[locale];
  const featured = useMemo(() => hhFeatured(locale), [locale]);
  const scrollRef = useRef(null);
  const shrunk = useScrollShrink(scrollRef);

  return (
    <div className="hh-screen">
      <div className="hh-screen-scroll hh-screen-scroll--bento" ref={scrollRef}>
        <AppBar locale={locale}
                user={HH_USER}
                density="compact"
                avatarSide={avatarSide}
                showStreak={false}
                showXP={true}
                notifications={notifSimulate ? notifications : 0}/>

        {showEmpty ? (
          <div className="hh-bento-body">
            <HHEmptyState locale={locale}/>
          </div>
        ) : (
          <div className="hh-bento-body">
            {/* Above-fold strip: greeting + compact level/streak pills */}
            <div className="hh-bento-strip">
              <div className="hh-bento-strip-greet">
                <div className="hh-bento-strip-greet-line1">{hhGreeting(locale, 11)}</div>
                <div className="hh-bento-strip-greet-line2">{HH_USER.displayName[locale]}</div>
              </div>
              <div className="hh-bento-strip-meta">
                <span className="hh-pill hh-pill--xp">
                  <span className="hh-pill-lvl-label">{ll.level}</span>
                  <span className="hh-pill-lvl-num tabular-nums">
                    {(window.toLocaleDigits || ((x)=>x))(HH_USER.level, locale)}
                  </span>
                </span>
              </div>
            </div>

            {/* Bento grid — 6 columns */}
            <div className="hh-bento-grid">

              {/* ── Row 1: Prediction slider (entry to economy) ── */}
              <div className="hh-bento-tile hh-bento-tile--hero">
                <PredictionSlider locale={locale}
                                  matches={HH_PREDICTIONS.matches}
                                  sponsorId="mci"
                                  dateMode={dateMode}
                                  nextLock={HH_PREDICTIONS.nextLock}
                                  rewardTotal={HH_PREDICTIONS.rewardTotal}
                                  dense={true}
                                  onPredict={onPredict}
                                  onAllMatches={onAllMatches}/>
              </div>

              {/* ── Row 2: Loop stats — Coin/Pack | Submit/Deck (compact) ── */}
              <div className="hh-bento-tile hh-bento-tile--coin">
                <CoinPackTile locale={locale}
                              coinBalance={HH_USER.coinBalance}
                              freePacks={1}
                              onCta={onShop}/>
              </div>
              <div className="hh-bento-tile hh-bento-tile--submit">
                <SubmitStatusTile locale={locale}
                                  deck={HH_DECK}
                                  onCta={onSubmit}/>
              </div>

              {/* ── Row 3: Player stats — XP progress | Rank ── */}
              <div className="hh-bento-tile hh-bento-tile--xp">
                <div className="hh-bento-xp-head">
                  <span className="hh-bento-xp-icon">
                    <HHIcon name="xp" size={14}/>
                  </span>
                  <span className="hh-bento-xp-lvl-label">{ll.level}</span>
                  <span className="hh-bento-xp-lvl-num tabular-nums">
                    {(window.toLocaleDigits || ((x)=>x))(HH_USER.level, locale)}
                  </span>
                </div>
                <div className="hh-bento-xp-value tabular-nums">
                  {(window.toLocaleDigits || ((x)=>x))(HH_USER.xpInLevel.toLocaleString('en-US'), locale)}
                  <span className="hh-bento-xp-of">/{(window.toLocaleDigits || ((x)=>x))(HH_USER.xpForLevel.toLocaleString('en-US'), locale)}</span>
                </div>
                <div className="hh-bento-xp-bar">
                  <span style={{ width: `${(HH_USER.xpInLevel / HH_USER.xpForLevel) * 100}%` }}></span>
                </div>
              </div>
              <div className="hh-bento-tile hh-bento-tile--rank">
                <div className="hh-bento-rank-head">{ll.statRank}</div>
                <div className="hh-bento-rank-num tabular-nums">
                  #{(window.toLocaleDigits || ((x)=>x))(HH_USER.globalRank, locale)}
                </div>
                <div className="hh-bento-rank-delta hh-bento-rank-delta--up">
                  ▲ {(window.toLocaleDigits || ((x)=>x))(HH_USER.rankDelta, locale)}
                </div>
              </div>

              {/* ── Row 4: Quick Actions (3 tiles) ── */}
              <div className="hh-bento-tile hh-bento-tile--qa-predict">
                <QuickActionCard icon="predict" label={ll.qaPredict} sub={ll.qaPredictSub}
                                 accent="var(--info)" tile={true} locale={locale}
                                 onClick={onAllMatches}/>
              </div>
              <div className="hh-bento-tile hh-bento-tile--qa-pack">
                <QuickActionCard icon="gift" label={ll.qaOpenPack} sub={ll.qaOpenPackSub}
                                 accent="var(--accent-primary)" tile={true} locale={locale}
                                 onClick={onShop}/>
              </div>
              <div className="hh-bento-tile hh-bento-tile--qa-invite">
                <QuickActionCard icon="users" label={ll.qaInvite} sub={ll.qaInviteSub}
                                 accent="var(--success)" tile={true} locale={locale}/>
              </div>

              {/* ── Row 4: Sponsor ad placement — Blubank (above Featured) ── */}
              <div className="hh-bento-tile hh-bento-tile--sponsor-mid">
                <SponsorSkyscraper locale={locale} sponsorId="blu"/>
              </div>

              {/* ── Row 5: Featured cards (collection nudge) ── */}
              <div className="hh-bento-tile hh-bento-tile--featured">
                <SectionHead title={ll.featuredTitle} action={ll.featuredAll}/>
                <FeaturedRail locale={locale} items={featured} onPick={onCardPick}/>
              </div>

              {/* ── Row 5: Golden mission ── */}
              <div className="hh-bento-tile hh-bento-tile--mission">
                <GoldenMissionCard locale={locale}/>
              </div>

              {/* ── Row 6: Sponsored daily + regular daily ── */}
              <div className="hh-bento-tile hh-bento-tile--sponsor-mission">
                <DailyMissionRow locale={locale} mission={HH_MISSIONS.daily[0]}/>
              </div>
              <div className="hh-bento-tile hh-bento-tile--daily">
                <DailyMissionRow locale={locale} mission={HH_MISSIONS.daily[1]}/>
              </div>

              {/* ── Row 7: Win-rate stat + My Cards entry ── */}
              <div className="hh-bento-tile hh-bento-tile--winrate">
                <div className="hh-bento-winrate-num tabular-nums">
                  {(window.toLocaleDigits || ((x)=>x))(Math.round(HH_USER.winRate * 100), locale)}%
                </div>
                <div className="hh-bento-winrate-label">{ll.statWinrate}</div>
                <div className="hh-bento-winrate-sub">{ll.statWinrateHint}{(window.toLocaleDigits || ((x)=>x))(HH_USER.weekAvgScore, locale)}</div>
              </div>
              <div className="hh-bento-tile hh-bento-tile--mycards">
                <QuickActionCard icon="cards" label={ll.navCards}
                                 sub={`${(window.toLocaleDigits || ((x)=>x))(HH_USER.totalCards, locale)} ${locale === 'fa' ? 'کارت' : locale === 'ar' ? 'بطاقة' : 'cards'}`}
                                 accent="var(--tier-platinum)" tile={true} locale={locale}/>
              </div>

              {/* ── Row 8: Sponsor skyscraper ── */}
              <div className="hh-bento-tile hh-bento-tile--sponsor">
                <SponsorSkyscraper locale={locale} sponsorId="mili"/>
              </div>
            </div>

            <div style={{ height: 28 }}></div>
          </div>
        )}
      </div>

      <BottomNav locale={locale} activeTab="home"
                 shrunk={scrollAware && shrunk}
                 fiveTabs={fiveTabs}
                 scrollAware={scrollAware}/>
    </div>
  );
}

// ─── DesktopBento ──────────────────────────────────────────────────────────
function DesktopBento({
  locale = 'fa',
  fiveTabs = false,
  showEmpty = false,
  dateMode = 'hybrid',
  notifications = 3,
  onCardPick, onPredict, onAllMatches, onSubmit, onShop,
}) {
  const ll = HH_I18N[locale];
  const featured = useMemo(() => hhFeatured(locale), [locale]);

  return (
    <div className="hh-desk">
      <DesktopTopbar locale={locale} user={HH_USER} activeTab="home"
                     notifications={notifications} fiveTabs={fiveTabs}/>
      {showEmpty ? (
        <div className="hh-desk-body">
          <HHEmptyState locale={locale}/>
        </div>
      ) : (
        <div className="hh-desk-body">
          {/* Greeting band */}
          <div className="hh-desk-greet">
            <div>
              <div className="hh-desk-greet-line1">{hhGreeting(locale, 11)} {HH_USER.shortName[locale]} 👋</div>
              <div className="hh-desk-greet-line2">
                {ll.predictHeadline((window.toLocaleDigits || ((x)=>x))(HH_PREDICTIONS.matches.length, locale))}
              </div>
            </div>
            <div className="hh-desk-greet-meta">
              <button className="hh-btn hh-btn--primary hh-btn--lg" style={{ flex: '0 0 auto' }}
                      onClick={onAllMatches}>
                {ll.predictAllCta}
                <HHIcon name="chevron" size={14}/>
              </button>
            </div>
          </div>

          {/* Bento grid */}
          <div className="hh-desk-bento">
            {/* Row 1: Prediction slider (8, 2 cards/view) + Coin/Submit/Sponsor stack (4) */}
            <div className="hh-desk-tile hh-desk-tile--hero">
              <PredictionSlider locale={locale}
                                matches={HH_PREDICTIONS.matches}
                                sponsorId="mci"
                                dateMode={dateMode}
                                nextLock={HH_PREDICTIONS.nextLock}
                                rewardTotal={HH_PREDICTIONS.rewardTotal}
                                cardsPerView={2}
                                onPredict={onPredict}
                                onAllMatches={onAllMatches}/>
            </div>
            <div className="hh-desk-tile hh-desk-tile--side">
              <div className="hh-desk-side-stack">
                <div className="hh-desk-side-row">
                  <CoinPackTile locale={locale}
                                coinBalance={HH_USER.coinBalance}
                                freePacks={1} onCta={onShop}/>
                  <SubmitStatusTile locale={locale} deck={HH_DECK} onCta={onSubmit}/>
                </div>
                <SponsorMiniGrid locale={locale}
                                 sponsorIds={['mci', 'blu', 'mili']}/>
              </div>
            </div>

            {/* Row 2: Stats grid (12 cols, 4 tiles) */}
            <div className="hh-desk-tile hh-desk-tile--stats">
              <div className="hh-desk-stats">
                <StatTile locale={locale} mode="progress" icon="xp"
                          label={ll.statXP}
                          value={`${(window.toLocaleDigits || ((x)=>x))(HH_USER.level, locale)}`}
                          sub={ll.statXPNext((window.toLocaleDigits || ((x)=>x))((HH_USER.xpForLevel - HH_USER.xpInLevel).toLocaleString('en-US'), locale))}
                          progress={HH_USER.xpInLevel / HH_USER.xpForLevel}
                          tone="accent" accent="var(--accent-primary)"/>
                <StatTile locale={locale} mode="rank" icon="rank"
                          label={ll.statRank}
                          value={`#${(window.toLocaleDigits || ((x)=>x))(HH_USER.globalRank, locale)}`}
                          delta={HH_USER.rankDelta}
                          tone="glass" accent="var(--info)"/>
                <StatTile locale={locale} mode="plain" icon="flame"
                          label={ll.statStreak}
                          value={(window.toLocaleDigits || ((x)=>x))(HH_USER.streak, locale)}
                          sub={ll.statStreakHint}
                          tone="accent" accent="var(--warning)"/>
                <StatTile locale={locale} mode="plain" icon="trophy"
                          label={ll.statWinrate}
                          value={`${(window.toLocaleDigits || ((x)=>x))(Math.round(HH_USER.winRate * 100), locale)}%`}
                          sub={`${ll.statWinrateHint}${(window.toLocaleDigits || ((x)=>x))(HH_USER.weekAvgScore, locale)}`}
                          tone="glass" accent="var(--success)"/>
              </div>
            </div>

            {/* Row 3: Featured rail (12) */}
            <div className="hh-desk-tile hh-desk-tile--featured">
              <SectionHead title={ll.featuredTitle} sub={ll.featuredSub} action={ll.featuredAll}/>
              <FeaturedRail locale={locale} items={featured} onPick={onCardPick}/>
            </div>

            {/* Row 4: Mission (7) + QA stack (5) */}
            <div className="hh-desk-tile hh-desk-tile--mission">
              <GoldenMissionCard locale={locale}/>
            </div>
            <div className="hh-desk-tile hh-desk-tile--qa">
              <SectionHead title={ll.quickTitle}/>
              <div className="hh-desk-qa-stack">
                <QuickActionCard icon="predict" label={ll.qaPredict} sub={ll.qaPredictSub}
                                 accent="var(--info)" locale={locale} onClick={onAllMatches}/>
                <QuickActionCard icon="gift" label={ll.qaOpenPack} sub={ll.qaOpenPackSub}
                                 accent="var(--accent-primary)" locale={locale} onClick={onShop}/>
                <QuickActionCard icon="users" label={ll.qaInvite} sub={ll.qaInviteSub}
                                 accent="var(--success)" locale={locale}/>
              </div>
            </div>

            {/* Row 5: Dailies (7) + Pack callout (5) */}
            <div className="hh-desk-tile hh-desk-tile--dailies">
              <SectionHead title={ll.missionsTitle} action={ll.missionsAll}/>
              <div className="hh-desk-dailies">
                {HH_MISSIONS.daily.map((m) => (
                  <DailyMissionRow key={m.id} locale={locale} mission={m}/>
                ))}
              </div>
            </div>
            <div className="hh-desk-tile hh-desk-tile--pack">
              <PackCallout locale={locale} onCta={onShop}/>
            </div>

            {/* Row 6: Sponsor (12) */}
            <div className="hh-desk-tile hh-desk-tile--sponsor">
              <SponsorSkyscraper locale={locale} sponsorId="mili"/>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MobileBento, DesktopBento });