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

/* =============================================================
   Search.jsx — full-screen search
   Tabs: همه / مردم / پست / کانال / بازی / چالش
   Recent queries · trending · result rows.
   ============================================================= */

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 TABS = [
  { id: "all",       label: "همه" },
  { id: "people",    label: "مردم" },
  { id: "posts",     label: "پست" },
  { id: "channels",  label: "کانال" },
  { id: "games",     label: "بازی" },
  { id: "challenges",label: "چالش" },
];

const TRENDING = [
  { q: "چالش پنجره",     hot: true },
  { q: "صبحانه بندری",   hot: true },
  { q: "نگار رستمی" },
  { q: "ضرب‌المثل گمشده" },
  { q: "زعفران" },
  { q: "رقص محلی گیلان", hot: true },
  { q: "تهران امروز" },
  { q: "شعر فارسی" },
];

const RECENT = ["داستانک کوتاه", "تالار افتخارات", "@radiomarz"];

const DATA = {
  people: [
    { id: "u1", name: "نگار رستمی",  handle: "negar.r", city: "رشت",    followers: 12480, badge: "برندهٔ مرداد", ring: "#ff4ea8" },
    { id: "u2", name: "آرمان احمدی", handle: "armana",  city: "تبریز",  followers: 9320,  ring: "#9a6cff" },
    { id: "u3", name: "مهسا کریمی",  handle: "mahsa.k", city: "اصفهان", followers: 7140,  badge: "تالار افتخار", ring: "#f5d589" },
  ],
  posts: [
    { id: "p1", kind: "video", title: "چالش رقص محلی گیلان", author: "نگار رستمی", views: 12430, rating: 4.7, bg: "radial-gradient(120% 90% at 25% 22%, #ff6ab8, transparent 60%), linear-gradient(140deg, #ff4ea8, #2a0a1f)", dur: "۲:۱۴" },
    { id: "p2", kind: "image", title: "پنجره خانهٔ مادربزرگ", author: "مهسا کریمی", views: 8420,  rating: 4.9, bg: "radial-gradient(120% 90% at 25% 22%, #ffd16a, transparent 60%), linear-gradient(140deg, #ff8a3d, #2a1408)" },
    { id: "p3", kind: "audio", title: "پادکست: قصه‌های جاده چالوس", author: "سعید نوری", views: 3120, rating: 4.4, bg: "radial-gradient(120% 90% at 25% 22%, #6affd0, transparent 60%), linear-gradient(140deg, #44e3b8, #08231e)", dur: "۸:۱۲" },
  ],
  channels: [
    { id: "c1", network: "telegram",  glyph: "✈", color: "#229ED9", title: "رادیو مرز",   handle: "@radiomarz",        followers: 84200, posts_week: 24 },
    { id: "c2", network: "twitter",   glyph: "𝕏", color: "#101418", title: "شعر فارسی",   handle: "@persianpoetry",    followers: 240000, posts_week: 86 },
    { id: "c3", network: "bale",      glyph: "B",  color: "#2C7DFA", title: "اقتصاد روز", handle: "@khabar_eqtesadi",  followers: 56200,  posts_week: 38 },
  ],
  games: [
    { id: "g1", title: "واقعی یا ساختگی؟", players: 8421, icon: "microscope", diff: "متوسط", route: "factcheck" },
    { id: "g2", title: "ضرب‌المثل گمشده",  players: 4180, icon: "text",       diff: "متوسط" },
    { id: "g3", title: "بزن، نزن!",         players: 9120, icon: "target",     diff: "آسان" },
  ],
  challenges: [
    { id: "ch1", title: "یه عکس از پنجره‌ت", hours_left: 18, participants: 1240, prize: "اکران شهری" },
    { id: "ch2", title: "صبحانهٔ شهرت",       hours_left: 42, participants: 320,  prize: "رسانهٔ ملی" },
  ],
};

window.Search = function Search({ onBack, onRoute, onOpenPost }) {
  const [q, setQ] = useState("");
  const [tab, setTab] = useState("all");
  const inputRef = useRef(null);

  useEffect(() => { inputRef.current?.focus(); }, []);

  const trimmed = q.trim();

  const counts = useMemo(() => ({
    people: DATA.people.length,
    posts: DATA.posts.length,
    channels: DATA.channels.length,
    games: DATA.games.length,
    challenges: DATA.challenges.length,
  }), []);
  const total = counts.people + counts.posts + counts.channels + counts.games + counts.challenges;

  const empty = !trimmed;

  return (
    <div className="kd-search-page">
      {/* ---- Search bar ---- */}
      <header className="kd-search-bar">
        <button className="kd-fh-back" onClick={onBack} aria-label="برگشت">
          <Icon name="back" size={20} stroke={2.2} />
        </button>
        <div className="kd-search-input">
          <Icon name="search" size={18} stroke={2.2} />
          <input ref={inputRef} placeholder="جستجو در کشوردوست…" value={q} onChange={e => setQ(e.target.value)} />
          {q && (
            <button className="kd-search-clear" onClick={() => setQ("")} aria-label="پاک کن">
              <Icon name="close" size={14} stroke={2.4} />
            </button>
          )}
        </div>
      </header>

      {empty ? (
        /* ---------- Empty state: recent + trending ---------- */
        <div className="kd-search-empty">
          {RECENT.length > 0 && (
            <section className="kd-search-section">
              <header className="kd-search-section__h">
                <h2><Icon name="bookmark" size={14} stroke={2.2} /> اخیر</h2>
                <button>پاک‌کن همه</button>
              </header>
              <div className="kd-search-chips">
                {RECENT.map(r => (
                  <button key={r} className="kd-search-chip" onClick={() => setQ(r)}>
                    {r}
                    <Icon name="close" size={11} stroke={2.4} />
                  </button>
                ))}
              </div>
            </section>
          )}

          <section className="kd-search-section">
            <header className="kd-search-section__h">
              <h2><Icon name="trending" size={14} stroke={2.2} /> داغ این هفته</h2>
            </header>
            <div className="kd-search-trending">
              {TRENDING.map((t, i) => (
                <button key={i} className="kd-search-trend" onClick={() => setQ(t.q)}>
                  <span className="kd-search-trend__num">{fmtFa(i + 1)}</span>
                  <span className="kd-search-trend__q">
                    {t.q}
                    {t.hot && <span className="kd-search-trend__hot"><Icon name="flame" size={10} stroke={2.4} /> داغ</span>}
                  </span>
                </button>
              ))}
            </div>
          </section>

          <section className="kd-search-section">
            <header className="kd-search-section__h">
              <h2>دسته‌های پیشنهادی</h2>
            </header>
            <div className="kd-search-quick">
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#ff4ea8' }} onClick={() => { setQ("ویدیو"); setTab("posts"); }}>
                <Icon name="video" size={20} stroke={2} /> ویدیو
              </button>
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#ff8a3d' }} onClick={() => { setQ("تصویر"); setTab("posts"); }}>
                <Icon name="image" size={20} stroke={2} /> تصویر
              </button>
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#44e3b8' }} onClick={() => { setQ("پادکست"); setTab("posts"); }}>
                <Icon name="audio" size={20} stroke={2} /> صوت
              </button>
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#9a6cff' }} onClick={() => { setQ("داستانک"); setTab("posts"); }}>
                <Icon name="text" size={20} stroke={2} /> داستانک
              </button>
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#4be3ff' }} onClick={() => onRoute?.("factcheck")}>
                <Icon name="microscope" size={20} stroke={2} /> راست‌سنجی
              </button>
              <button className="kd-search-quick__btn" style={{ ['--accent']: '#f5d589' }} onClick={() => onRoute?.("reward")}>
                <Icon name="trophy" size={20} stroke={2} /> پاداش
              </button>
            </div>
          </section>
        </div>
      ) : (
        /* ---------- Results state ---------- */
        <div className="kd-search-results">
          <div className="kd-search-tabs">
            <button className={`kd-search-tab ${tab === "all" ? "is-on" : ""}`} onClick={() => setTab("all")}>
              همه <em>{fmtFa(total)}</em>
            </button>
            {TABS.slice(1).map(t => (
              <button key={t.id} className={`kd-search-tab ${tab === t.id ? "is-on" : ""}`} onClick={() => setTab(t.id)}>
                {t.label} <em>{fmtFa(counts[t.id] || 0)}</em>
              </button>
            ))}
          </div>

          <p className="kd-search-meta">
            <strong>{fmtFa(total)} نتیجه</strong> برای «{trimmed}»
          </p>

          {(tab === "all" || tab === "people") && (
            <section className="kd-search-result-group">
              <h3>مردم</h3>
              <ul className="kd-search-rows">
                {DATA.people.map(p => (
                  <li key={p.id} className="kd-search-row kd-search-row--person">
                    <Avatar name={p.name} size={42} ring={p.ring} />
                    <div className="kd-search-row__mid">
                      <strong>{p.name}</strong>
                      <span>@{p.handle} · {p.city} · {fmtCount(p.followers)} دنبال‌کننده</span>
                      {p.badge && <span className="kd-search-badge"><Icon name="trophy" size={10} stroke={2.2} /> {p.badge}</span>}
                    </div>
                    <button className="kd-search-row__cta">دنبال کن</button>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {(tab === "all" || tab === "posts") && (
            <section className="kd-search-result-group">
              <h3>پست‌ها</h3>
              <div className="kd-search-postgrid">
                {DATA.posts.map(p => (
                  <article key={p.id} className="kd-search-post" onClick={onOpenPost}>
                    <div className="kd-search-post__media" style={{ background: p.bg }}>
                      <span className="kd-search-post__chip"><Icon name={p.kind} size={11} stroke={2.2} /> {p.kind === "video" ? "ویدیو" : p.kind === "audio" ? "صوت" : "تصویر"}</span>
                      {p.dur && <span className="kd-search-post__dur">{p.dur}</span>}
                    </div>
                    <div className="kd-search-post__body">
                      <strong>{p.title}</strong>
                      <span>{p.author} · {fmtCount(p.views)} بازدید · ★ {p.rating}</span>
                    </div>
                  </article>
                ))}
              </div>
            </section>
          )}

          {(tab === "all" || tab === "channels") && (
            <section className="kd-search-result-group">
              <h3>کانال‌ها</h3>
              <ul className="kd-search-rows">
                {DATA.channels.map(c => (
                  <li key={c.id} className="kd-search-row kd-search-row--channel">
                    <span className="kd-search-row__glyph" style={{ background: c.color }}>{c.glyph}</span>
                    <div className="kd-search-row__mid">
                      <strong>{c.title}</strong>
                      <span dir="ltr">{c.handle} · {fmtCount(c.followers)} دنبال‌کننده · {fmtFa(c.posts_week)} پست/هفته</span>
                    </div>
                    <button className="kd-search-row__cta">اضافه کن</button>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {(tab === "all" || tab === "games") && (
            <section className="kd-search-result-group">
              <h3>بازی‌ها</h3>
              <ul className="kd-search-rows">
                {DATA.games.map(g => (
                  <li key={g.id} className="kd-search-row" onClick={() => g.route && onRoute?.(g.route)}>
                    <span className="kd-search-row__icon"><Icon name={g.icon} size={20} stroke={1.7} /></span>
                    <div className="kd-search-row__mid">
                      <strong>{g.title}</strong>
                      <span>{fmtCount(g.players)} بازیکن · سختی {g.diff}</span>
                    </div>
                    <button className="kd-search-row__cta kd-search-row__cta--ghost">
                      بازی <Icon name="back" size={11} stroke={2.4} />
                    </button>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {(tab === "all" || tab === "challenges") && (
            <section className="kd-search-result-group">
              <h3>چالش‌ها</h3>
              <ul className="kd-search-rows">
                {DATA.challenges.map(c => (
                  <li key={c.id} className="kd-search-row">
                    <span className="kd-search-row__icon kd-search-row__icon--target"><Icon name="target" size={20} stroke={2} /></span>
                    <div className="kd-search-row__mid">
                      <strong>{c.title}</strong>
                      <span>{fmtFa(c.hours_left)} ساعت باقی · {fmtCount(c.participants)} شرکت‌کننده · {c.prize}</span>
                    </div>
                    <button className="kd-search-row__cta">شرکت کن</button>
                  </li>
                ))}
              </ul>
            </section>
          )}
        </div>
      )}
    </div>
  );
};
})();