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

/* =============================================================
   GameZone.jsx — mini-games hub
   Hero featured game · category chips · games grid ·
   weekly leaderboard · friends-now strip.
   ============================================================= */

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$/, "")) + " م";
};

const CATEGORIES = [
  { id: "all",      label: "همه" },
  { id: "knowledge",label: "دانش" },
  { id: "poetry",   label: "شعر و ادب" },
  { id: "guess",    label: "حدس بزن" },
  { id: "memory",   label: "حافظه" },
  { id: "speed",    label: "سرعت" },
];

const GAMES = [
  {
    id: "factcheck",
    title: "واقعی یا ساختگی؟",
    blurb: "خبر رو ببین، تشخیص بده. سوایپ راست = واقعی، چپ = ساختگی.",
    cat: "knowledge",
    bg: `radial-gradient(420px at 30% 30%, rgba(75,227,255,.55), transparent 60%),
         radial-gradient(360px at 80% 80%, rgba(154,108,255,.5), transparent 60%),
         linear-gradient(135deg, #0a1f2e, #0a1018)`,
    icon: "microscope",
    players: 8421,
    duration: "۲ تا ۳ دقیقه",
    difficulty: "متوسط",
    route: "factcheck",
    isHot: true,
  },
  {
    id: "guess-city",
    title: "اینجا کدوم شهره؟",
    blurb: "از روی یه عکس، حدس بزن این شهر ایرانه.",
    cat: "guess",
    bg: `radial-gradient(420px at 70% 30%, rgba(255,138,61,.55), transparent 60%),
         radial-gradient(360px at 25% 80%, rgba(255,78,168,.45), transparent 60%),
         linear-gradient(135deg, #2a1408, #0a1018)`,
    icon: "city",
    players: 6240,
    duration: "۳ دقیقه",
    difficulty: "آسان",
    isNew: true,
  },
  {
    id: "proverb",
    title: "ضرب‌المثل گمشده",
    blurb: "جای خالی ضرب‌المثل رو پر کن — قبل از تموم شدن وقت.",
    cat: "poetry",
    bg: `radial-gradient(420px at 30% 30%, rgba(255,200,90,.55), transparent 60%),
         radial-gradient(360px at 80% 70%, rgba(255,138,61,.45), transparent 60%),
         linear-gradient(135deg, #2a1a06, #0a1018)`,
    icon: "text",
    players: 4180,
    duration: "۹۰ ثانیه",
    difficulty: "متوسط",
  },
  {
    id: "poem",
    title: "بیت بعدی؟",
    blurb: "نیم‌بیت اول از یه شعر مشهور — تو بقیه‌ش رو پیدا کن.",
    cat: "poetry",
    bg: `radial-gradient(420px at 50% 30%, rgba(154,108,255,.55), transparent 60%),
         radial-gradient(360px at 20% 80%, rgba(75,227,255,.35), transparent 60%),
         linear-gradient(135deg, #1a0e2e, #0a1018)`,
    icon: "comment",
    players: 3720,
    duration: "۲ دقیقه",
    difficulty: "سخت",
  },
  {
    id: "memory",
    title: "خاطره‌بازی ۸۰",
    blurb: "آهنگ، فیلم و تبلیغی که قدیمی‌ها یادشونه — تطبیق بده.",
    cat: "memory",
    bg: `radial-gradient(420px at 60% 30%, rgba(68,227,184,.5), transparent 60%),
         radial-gradient(360px at 30% 75%, rgba(75,227,255,.4), transparent 60%),
         linear-gradient(135deg, #08231e, #0a1018)`,
    icon: "story",
    players: 2980,
    duration: "۴ دقیقه",
    difficulty: "متوسط",
  },
  {
    id: "dialect",
    title: "این کجاییه حرف می‌زنه؟",
    blurb: "صدای یه نفر رو بشنو، تشخیص بده اهل کدوم استانه.",
    cat: "guess",
    bg: `radial-gradient(420px at 50% 30%, rgba(255,78,168,.5), transparent 60%),
         radial-gradient(360px at 80% 80%, rgba(68,227,184,.35), transparent 60%),
         linear-gradient(135deg, #2a0a1f, #0a1018)`,
    icon: "audio",
    players: 5410,
    duration: "۹۰ ثانیه",
    difficulty: "سخت",
  },
  {
    id: "tap-rush",
    title: "بزن، نزن!",
    blurb: "تست عکس‌العمل — فقط روی نشان درست بزن.",
    cat: "speed",
    bg: `radial-gradient(420px at 30% 30%, rgba(255,78,168,.55), transparent 60%),
         radial-gradient(360px at 75% 75%, rgba(255,138,61,.4), transparent 60%),
         linear-gradient(135deg, #2a0a1f, #18120a)`,
    icon: "target",
    players: 9120,
    duration: "۳۰ ثانیه",
    difficulty: "آسان",
  },
];

const LEADERBOARD = [
  { rank: 1, name: "نگار رستمی",  score: 18420, city: "رشت",    you: false },
  { rank: 2, name: "آرمان احمدی", score: 17680, city: "تبریز",   you: false },
  { rank: 3, name: "مهسا کریمی",  score: 16240, city: "اصفهان", you: false },
  { rank: 4, name: "تو",          score: 14580, city: "تهران",   you: true  },
  { rank: 5, name: "سعید نوری",   score: 13920, city: "شیراز",   you: false },
];

const FRIENDS_NOW = [
  { name: "علی",   game: "ضرب‌المثل گمشده", color: "#ff8a3d" },
  { name: "زهرا",  game: "خاطره‌بازی ۸۰",   color: "#44e3b8" },
  { name: "رضا",   game: "اینجا کدوم شهره؟", color: "#9a6cff" },
  { name: "فاطمه", game: "بزن، نزن!",        color: "#ff4ea8" },
];

window.GameZone = function GameZone({ onRoute }) {
  const [cat, setCat] = useState("all");

  const filtered = cat === "all" ? GAMES : GAMES.filter(g => g.cat === cat);
  const featured = GAMES[0];

  const launch = (g) => {
    if (g.route) onRoute?.(g.route);
    // else: stub — would open game shell
  };

  return (
    <div className="kd-gz-page">
      {/* ---- Header ---- */}
      <header className="kd-gz-head">
        <span className="kd-gz-head__eyebrow">گیم‌زون کشوردوست</span>
        <h1 className="kd-gz-head__title">یه دور سرگرم شو</h1>
        <p className="kd-gz-head__sub">بازی‌های کوتاه دربارهٔ فرهنگ و دانش ایران. هر برد، امتیاز جشنواره.</p>
        <div className="kd-gz-head__stats">
          <div><strong>{fmtFa(7)}</strong><span>بازی</span></div>
          <div><strong>{fmtCount(40092)}</strong><span>الان فعال</span></div>
          <div><strong>{fmtFa(14580)}</strong><span>امتیاز تو</span></div>
        </div>
      </header>

      {/* ---- Featured hero ---- */}
      <article className="kd-gz-hero" onClick={() => launch(featured)}>
        <div className="kd-gz-hero__bg" style={{ background: featured.bg }} />
        <div className="kd-gz-hero__noise" />
        <div className="kd-gz-hero__body">
          <span className="kd-gz-hero__badge"><Icon name="flame" size={13} stroke={2.2} /> بازی این هفته</span>
          <h2 className="kd-gz-hero__title">{featured.title}</h2>
          <p className="kd-gz-hero__blurb">{featured.blurb}</p>
          <div className="kd-gz-hero__meta">
            <span><Icon name="profile" size={12} stroke={2.2} /> {fmtCount(featured.players)} بازیکن</span>
            <span>·</span>
            <span>{featured.duration}</span>
            <span>·</span>
            <span>{featured.difficulty}</span>
          </div>
          <button className="kd-gz-hero__cta" onClick={(e) => { e.stopPropagation(); launch(featured); }}>
            شروع <Icon name="back" size={16} stroke={2.4} />
          </button>
        </div>
        <span className="kd-gz-hero__icon"><Icon name={featured.icon} size={120} stroke={1.2} /></span>
      </article>

      {/* ---- Friends now (mobile-scrollable strip) ---- */}
      <section className="kd-gz-friends">
        <h3 className="kd-gz-section__h">رفیقات الان</h3>
        <div className="kd-gz-friends__row">
          {FRIENDS_NOW.map((f, i) => (
            <div key={i} className="kd-gz-friend">
              <Avatar name={f.name} size={48} ring={f.color} />
              <span className="kd-gz-friend__pulse" style={{ background: f.color, boxShadow: `0 0 10px ${f.color}` }} />
              <strong>{f.name}</strong>
              <span>{f.game}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ---- Category pills ---- */}
      <div className="kd-gz-cats" role="tablist">
        {CATEGORIES.map(c => (
          <Pill key={c.id} active={cat === c.id} onClick={() => setCat(c.id)}>{c.label}</Pill>
        ))}
      </div>

      {/* ---- Game grid ---- */}
      <section className="kd-gz-grid">
        {filtered.map(g => (
          <article key={g.id} className="kd-gz-card" onClick={() => launch(g)}>
            <div className="kd-gz-card__cover" style={{ background: g.bg }}>
              {g.isHot && <span className="kd-gz-card__flag kd-gz-card__flag--hot"><Icon name="flame" size={11} stroke={2.4} /> داغ</span>}
              {g.isNew && <span className="kd-gz-card__flag kd-gz-card__flag--new">جدید</span>}
              <Icon name={g.icon} size={56} stroke={1.4} className="kd-gz-card__cover-icon" />
            </div>
            <div className="kd-gz-card__body">
              <h4 className="kd-gz-card__title">{g.title}</h4>
              <p className="kd-gz-card__blurb">{g.blurb}</p>
              <div className="kd-gz-card__meta">
                <span><Icon name="profile" size={11} stroke={2.2} /> {fmtCount(g.players)}</span>
                <span>{g.duration}</span>
                <span className={`kd-gz-card__diff kd-gz-card__diff--${g.difficulty === "آسان" ? "easy" : g.difficulty === "متوسط" ? "med" : "hard"}`}>{g.difficulty}</span>
              </div>
              <button className="kd-gz-card__play">
                <Icon name="back" size={14} stroke={2.4} /> بازی کن
              </button>
            </div>
          </article>
        ))}
      </section>

      {/* ---- Weekly leaderboard ---- */}
      <section className="kd-gz-lb">
        <div className="kd-gz-lb__head">
          <h3 className="kd-gz-section__h" style={{ margin: 0 }}>برترین‌های این هفته</h3>
          <button className="kd-gz-lb__filter">این هفته <Icon name="chevron" size={12} stroke={2.4} style={{ transform: "rotate(90deg)" }} /></button>
        </div>
        <ul className="kd-gz-lb__list">
          {LEADERBOARD.map(e => (
            <li key={e.rank} className={`kd-gz-lb__row ${e.you ? "is-you" : ""} ${e.rank <= 3 ? `is-top is-rank-${e.rank}` : ""}`}>
              <span className="kd-gz-lb__rank">
                {e.rank === 1 && <Icon name="trophy" size={18} stroke={1.8} />}
                {e.rank !== 1 && <span>{fmtFa(e.rank)}</span>}
              </span>
              <Avatar name={e.name} size={36} ring={e.rank === 1 ? "#f5d589" : e.rank === 2 ? "#b6c2d6" : e.rank === 3 ? "#ff8a3d" : undefined} />
              <div className="kd-gz-lb__id">
                <strong>{e.name}{e.you && <span className="kd-gz-lb__youtag">تو</span>}</strong>
                <span>{e.city}</span>
              </div>
              <span className="kd-gz-lb__score">{fmtFa(e.score)}</span>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
};
})();