/* global React */
(function(){
const { useState, useEffect } = React;

// stable lorem placeholder (shared helper from cards.jsx, with fallback)
const bImg = (seed, w = 300, h = 300) =>
  (window.kdImgFor ? window.kdImgFor(seed, w, h)
    : `https://picsum.photos/seed/kd-${encodeURIComponent(seed)}/${w}/${h}`);

/* =============================================================
   BentoHome.jsx — landing screen
   Tiles are content-rich: thumbnails, post previews, podium,
   waveforms. Stream tile sits side-by-side with the trending
   hero so personal feed is never buried.
   ============================================================= */

const fmtFa = (n) => String(n).replace(/\d/g, d => "۰۱۲۳۴۵۶۷۸۹"[d]);
const fmtCount = (n) => {
  if (n < 1000) return fmtFa(n);
  if (n < 1000000) return fmtFa((n/1000).toFixed(1).replace(/\.0$/, "")) + " هزار";
  return fmtFa((n/1000000).toFixed(1).replace(/\.0$/, "")) + " م";
};

/* ---- Trending thumbnails (4-up grid on Hero tile) ---- */
const TREND_THUMBS = [
  { bg: "radial-gradient(120% 90% at 25% 22%, #ff6ab8, transparent 60%), radial-gradient(110% 80% at 80% 90%, #5a1228, transparent 60%), linear-gradient(140deg, #ff4ea8, #2a0a1f)", dur: "۰:۴۸", title: "رقص گیلان" },
  { bg: "radial-gradient(120% 90% at 25% 22%, #ffd16a, transparent 58%), radial-gradient(100% 80% at 80% 90%, #6b3010, transparent 62%), linear-gradient(140deg, #ff8a3d, #2a1408)", dur: "۲:۱۴", title: "صبحانه بندری" },
  { bg: "radial-gradient(120% 90% at 25% 22%, #6affd0, transparent 58%), radial-gradient(110% 80% at 80% 90%, #08584a, transparent 65%), linear-gradient(140deg, #44e3b8, #08231e)", dur: "۱:۳۲", title: "بازی محلی" },
  { bg: "radial-gradient(120% 90% at 25% 22%, #b48aff, transparent 58%), radial-gradient(100% 80% at 80% 90%, #2a0e5e, transparent 65%), linear-gradient(140deg, #9a6cff, #1a0440)", dur: "۰:۵۸", title: "خط نستعلیق" },
];

/* ---- Stream-tile mini-posts (2 koshvardoost + 1 external each refresh) ---- */
const STREAM_PEEK = [
  { type: "ks", author: "نگار", avatar_ring: "#ff4ea8", text: "رقص محلی توی کوچهٔ سنگ‌فرش رشت — صبح بازار…", time: "۲ ساعت" },
  { type: "ext", network: "telegram", color: "#229ED9", glyph: "✈", title: "رادیو مرز", text: "اپیزود جدید: «صدای جاده‌های شمال»…", time: "۳ ساعت" },
  { type: "ks", author: "مهسا", avatar_ring: "#9a6cff", text: "پنجره خانهٔ مادربزرگ، که هنوز هر صبح کفترها…", time: "دیروز" },
];
const STREAM_NETS = [
  { color: "#229ED9", glyph: "✈" },
  { color: "#101418", glyph: "𝕏" },
  { color: "#2C7DFA", glyph: "B" },
  { color: "#E1306C", glyph: "◯" },
  { color: "#FFA300", glyph: "E" },
];

/* ---- Talent podium ---- */
const PODIUM = [
  { rank: 2, name: "آرمان احمدی", score: 17680, color: "#b6c2d6" },
  { rank: 1, name: "نگار رستمی",  score: 18420, color: "#f5d589" },
  { rank: 3, name: "مهسا کریمی",  score: 16240, color: "#ff8a3d" },
];

/* ---- Humor reel thumbs ---- */
const HUMOR_THUMBS = [
  { bg: "radial-gradient(120% 90% at 25% 22%, #ff6ab8, transparent 60%), linear-gradient(140deg, #ff4ea8, #2a0a1f)", dur: "۰:۳۲" },
  { bg: "radial-gradient(120% 90% at 25% 22%, #ffd16a, transparent 58%), linear-gradient(140deg, #ff8a3d, #2a1408)", dur: "۰:۱۸" },
  { bg: "radial-gradient(120% 90% at 25% 22%, #b48aff, transparent 58%), linear-gradient(140deg, #9a6cff, #1a0440)", dur: "۰:۵۱" },
];

/* ---- Streak week ---- */
const STREAK_WEEK = [
  { d: "ش", on: true },
  { d: "ی", on: true },
  { d: "د", on: true },
  { d: "س", on: true },
  { d: "چ", on: true },
  { d: "پ", on: true },
  { d: "ج", on: true, today: true },
];

window.BentoHome = function BentoHome({ onUpload, onRoute }) {
  return (
    <div className="kd-bento-page">
      <header className="kd-bento-page__hero">
        <span className="kd-bento-page__eyebrow">جشنواره کشوردوست</span>
        <h1 className="kd-bento-page__title">امروز چی برای کشورت داری؟</h1>
        <p className="kd-bento-page__sub">یه روایت، یه آهنگ، یه طنز، یه طرح. هر چی هست بفرست — می‌بریمش روی صحنه.</p>
      </header>

      <div className="kd-bento">
        {/* ====== HERO — Trending ====== */}
        <article className="kd-bento__tile kd-bento__tile--hero" onClick={() => onRoute("feed")}>
          <div className="kd-bento__hero-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="trending" size={13} stroke={2} /> ترند ماه</span>
            <span className="kd-bento__live"><span className="kd-bento__livedot" />زنده</span>
          </header>
          <div className="kd-bento__hero-thumbs">
            {TREND_THUMBS.map((t, i) => (
              <div key={i} className="kd-bento__hero-thumb" style={{ backgroundImage: `linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,.05) 60%), url(${bImg("trend" + i, 320, 320)})`, backgroundSize: "cover", backgroundPosition: "center" }}>
                <span className="kd-bento__hero-thumb-play"><Icon name="video" size={14} stroke={2.2} /></span>
                <span className="kd-bento__hero-thumb-dur">{t.dur}</span>
                <span className="kd-bento__hero-thumb-title">{t.title}</span>
              </div>
            ))}
          </div>
          <footer className="kd-bento__tf">
            <div>
              <h2 className="kd-bento__h kd-bento__h--xl">برترین‌های ماه</h2>
              <p className="kd-bento__p">{fmtFa(24)} ویدیو وایرال — سوایپ بزن، رای بده.</p>
            </div>
            <div className="kd-bento__avatars">
              <Avatar name="مهسا" size={28} />
              <Avatar name="علی" size={28} />
              <Avatar name="نگار" size={28} />
              <span className="kd-bento__more">+{fmtFa(82)}</span>
            </div>
          </footer>
        </article>

        {/* ====== STREAM — Personal feed (now priority, beside hero) ====== */}
        <article className="kd-bento__tile kd-bento__tile--stream" onClick={() => onRoute("stream")}>
          <div className="kd-bento__stream-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="share" size={13} stroke={2} /> استریم تو</span>
            <span className="kd-bento__th-meta">{fmtFa(9)} منبع · {fmtFa(24)} پست تازه</span>
          </header>

          <ul className="kd-bento__stream-list">
            {STREAM_PEEK.map((it, i) => (
              <li key={i} className={`kd-bento__stream-row kd-bento__stream-row--${it.type}`}>
                {it.type === "ks"
                  ? <Avatar name={it.author} size={30} ring={it.avatar_ring} />
                  : <span className="kd-bento__chan-mini" style={{ background: it.color }}>{it.glyph}</span>}
                <div className="kd-bento__stream-mid">
                  <strong>{it.type === "ks" ? it.author : it.title}</strong>
                  <span className="kd-bento__stream-text">{it.text}</span>
                </div>
                <span className="kd-bento__stream-time">{it.time}</span>
              </li>
            ))}
          </ul>

          <footer className="kd-bento__tf kd-bento__tf--stream">
            <div className="kd-bento__chan-row">
              {STREAM_NETS.map((n, i) => (
                <span key={i} className="kd-bento__chan-mini" style={{ background: n.color }}>{n.glyph}</span>
              ))}
              <span className="kd-bento__more">+{fmtFa(4)}</span>
            </div>
            <button className="kd-bento__cta" onClick={(e) => { e.stopPropagation(); onRoute("stream"); }}>
              باز کن <Icon name="back" size={14} stroke={2.4} />
            </button>
          </footer>
        </article>

        {/* ====== CHALLENGE OF DAY ====== */}
        <article className="kd-bento__tile kd-bento__tile--challenge">
          <div className="kd-bento__challenge-bg" />
          <div className="kd-bento__challenge-overlay" />
          <header className="kd-bento__th kd-bento__th--on-image">
            <span className="kd-bento__badge"><Icon name="target" size={13} stroke={2} /> چالش امروز</span>
            <span className="kd-bento__pin">شهر تو</span>
          </header>
          <div className="kd-bento__challenge-mid">
            <h2 className="kd-bento__h">یه عکس از پنجره‌ت</h2>
            <p className="kd-bento__p">منظره صبحت، نه فیلتر، نه تنظیم — همون که هست.</p>
            <div className="kd-bento__ch-thumbs">
              <div className="kd-bento__ch-thumb" style={{ backgroundImage: `url(${bImg("win1", 200, 200)})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div className="kd-bento__ch-thumb" style={{ backgroundImage: `url(${bImg("win2", 200, 200)})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div className="kd-bento__ch-thumb" style={{ backgroundImage: `url(${bImg("win3", 200, 200)})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div className="kd-bento__ch-thumb" style={{ backgroundImage: `url(${bImg("win4", 200, 200)})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div className="kd-bento__ch-thumb" style={{ backgroundImage: `url(${bImg("win5", 200, 200)})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div className="kd-bento__ch-thumb kd-bento__ch-thumb--more">+{fmtCount(1240)}</div>
            </div>
            <div className="kd-bento__ch-prize">
              <Icon name="trophy" size={12} stroke={2.2} />
              <span>جایزه: <strong>اکران شهری</strong> تصویر برنده روی ۱۰ بیلبورد</span>
            </div>
          </div>
          <footer className="kd-bento__tf kd-bento__tf--challenge">
            <div className="kd-bento__chstat">
              <strong>{fmtFa(18)}</strong><span>ساعت باقی</span>
            </div>
            <div className="kd-bento__chstat">
              <strong>{fmtCount(1240)}</strong><span>شرکت‌کننده</span>
            </div>
            <div className="kd-bento__chstat">
              <strong>{fmtFa(42)}</strong><span>شهر</span>
            </div>
            <button className="kd-bento__cta kd-bento__cta--solid" onClick={(e) => { e.stopPropagation(); onUpload(); }}>
              بفرست <Icon name="upload" size={14} stroke={2.4} />
            </button>
          </footer>
        </article>

        {/* ====== TALENT — Podium ====== */}
        <article className="kd-bento__tile kd-bento__tile--talent" onClick={() => onRoute("feed")}>
          <div className="kd-bento__talent-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="trophy" size={13} stroke={2} /> تالار افتخارات</span>
            <span className="kd-bento__th-meta">این هفته · {fmtFa(36)} برگزیده</span>
          </header>
          <div className="kd-bento__podium">
            {PODIUM.map(p => (
              <div key={p.rank} className={`kd-bento__pod kd-bento__pod--${p.rank}`}>
                <span className="kd-bento__pod-rank" style={{ background: p.color }}>{p.rank === 1 ? <Icon name="trophy" size={14} stroke={2.2} /> : <span>{fmtFa(p.rank)}</span>}</span>
                <Avatar name={p.name} size={p.rank === 1 ? 56 : 42} ring={p.color} />
                <strong className="kd-bento__pod-name">{p.name.split(" ")[0]}</strong>
                <span className="kd-bento__pod-score"><Icon name="star" size={10} stroke={0} style={{ fill: p.color }} /> {fmtFa(p.score)}</span>
                <span className="kd-bento__pod-step" style={{ background: `linear-gradient(180deg, ${p.color}55, ${p.color}11)`, borderColor: `${p.color}55`, height: p.rank === 1 ? 28 : p.rank === 2 ? 20 : 14 }} />
              </div>
            ))}
          </div>
          <div className="kd-bento__talent-cats">
            <span className="kd-bento__talent-cat" style={{ borderColor: "rgba(255,78,168,.4)", color: "#ffb1d4" }}>
              <Icon name="video" size={10} stroke={2.2} /> ویدیو
            </span>
            <span className="kd-bento__talent-cat" style={{ borderColor: "rgba(154,108,255,.4)", color: "#bda0ff" }}>
              <Icon name="text" size={10} stroke={2.2} /> داستانک
            </span>
            <span className="kd-bento__talent-cat" style={{ borderColor: "rgba(68,227,184,.4)", color: "#7ff0d2" }}>
              <Icon name="audio" size={10} stroke={2.2} /> پادکست
            </span>
            <span className="kd-bento__talent-cat" style={{ borderColor: "rgba(255,138,61,.4)", color: "#ffb27a" }}>
              <Icon name="image" size={10} stroke={2.2} /> تصویر
            </span>
          </div>
        </article>

        {/* ====== HUMOR ====== */}
        <article className="kd-bento__tile kd-bento__tile--humor">
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="comment" size={13} stroke={2} /> طنز</span>
            <span className="kd-bento__th-meta">{fmtFa(82)} پست تازه</span>
          </header>
          <div className="kd-bento__humor-mid">
            <h2 className="kd-bento__h">ببین چی طنز فرستادن</h2>
            <p className="kd-bento__p kd-bento__p--clip">جوابشو بده — یه نسخهٔ خودت بساز و بفرست.</p>
          </div>
          <div className="kd-bento__humor-row">
            {HUMOR_THUMBS.map((t, i) => (
              <div key={i} className="kd-bento__humor-thumb" style={{ backgroundImage: `linear-gradient(to top, rgba(0,0,0,.45), transparent 60%), url(${bImg("humor" + i, 240, 360)})`, backgroundSize: "cover", backgroundPosition: "center" }}>
                <Icon name="video" size={14} stroke={2.2} />
                <span>{t.dur}</span>
              </div>
            ))}
            <button className="kd-bento__humor-add" onClick={(e) => { e.stopPropagation(); onUpload(); }}>
              <Icon name="plus" size={18} stroke={2.4} />
            </button>
          </div>
        </article>

        {/* ====== FACT-CHECK ====== */}
        <article className="kd-bento__tile kd-bento__tile--news" onClick={() => onRoute("factcheck")}>
          <div className="kd-bento__news-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="microscope" size={13} stroke={2} /> راست‌سنجی</span>
          </header>
          <div className="kd-bento__news-mid">
            <h2 className="kd-bento__h">واقعی یا ساختگی؟</h2>
            <p className="kd-bento__quote">«زعفران ایران ۹۰٪ تولید جهانی این محصول رو تشکیل می‌ده.»</p>
          </div>
          <div className="kd-bento__news-actions">
            <button className="kd-bento__news-btn kd-bento__news-btn--fake"><Icon name="close" size={14} stroke={2.4} /></button>
            <button className="kd-bento__news-btn kd-bento__news-btn--real"><Icon name="check" size={14} stroke={2.4} /></button>
          </div>
        </article>

        {/* ====== GAME ZONE ====== */}
        <article className="kd-bento__tile kd-bento__tile--game" onClick={() => onRoute("games")}>
          <div className="kd-bento__game-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="controller" size={13} stroke={2} /> گیم‌زون</span>
          </header>
          <div className="kd-bento__game-mid">
            <h2 className="kd-bento__h">بازی این هفته</h2>
            <p className="kd-bento__p kd-bento__p--clip">«ضرب‌المثل گمشده» — قبل از تمومی وقت پُرش کن.</p>
          </div>
          <footer className="kd-bento__tf">
            <span className="kd-bento__chstat-inline">
              <Icon name="profile" size={11} stroke={2.2} /> {fmtCount(4180)} بازیکن
            </span>
            <Icon name="back" size={16} stroke={2.4} className="kd-bento__arrow" />
          </footer>
        </article>

        {/* ====== STREAK ====== */}
        <article className="kd-bento__tile kd-bento__tile--streak">
          <div className="kd-bento__streak-bg" />
          <header className="kd-bento__th">
            <span className="kd-bento__badge"><Icon name="flame" size={13} stroke={2} /> استریک</span>
          </header>
          <div className="kd-bento__streak-num">
            <span>{fmtFa(7)}</span>
            <Icon name="flame" size={36} stroke={1.6} />
          </div>
          <div className="kd-bento__streak-week">
            {STREAK_WEEK.map((d, i) => (
              <span key={i} className={`kd-bento__streak-day ${d.on ? "is-on" : ""} ${d.today ? "is-today" : ""}`}>{d.d}</span>
            ))}
          </div>
          <p className="kd-bento__p kd-bento__p--center">شعله‌ت روشنه — ادامه بده.</p>
        </article>
      </div>
    </div>
  );
};
})();