/* boosters-app.jsx — main React app for the Boosters roster page.
   Reads data from window.BOOSTERS, renders hero + filter + cards. */

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

/* ───────── tweaks defaults ───────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "violet",
  "density": "comfortable",
  "showReviews": true,
  "animateOnEnter": true
}/*EDITMODE-END*/;

/* ───────── small helpers ───────── */
const fmtNum = n => Number(n || 0).toLocaleString("ru-RU");
const cls = (...xs) => xs.filter(Boolean).join(" ");

/* ───────── Hero ───────── */
function pluralRu(n, forms) {
  // forms = [for 1, for 2-4, for many]; e.g. ['бустер', 'бустера', 'бустеров']
  var mod10 = n % 10, mod100 = n % 100;
  if (mod10 === 1 && mod100 !== 11) return forms[0];
  if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return forms[1];
  return forms[2];
}

// Подписка на глобальный счётчик «бустеров на связи» из boosters-online.js,
// чтобы KPI «сейчас онлайн» совпадал с числом в шапке.
function useBoostersOnline(fallback) {
  const initial = (() => {
    if (window.BoostersOnline && typeof window.BoostersOnline.getValue === 'function') {
      const v = window.BoostersOnline.getValue();
      if (typeof v === 'number' && v > 0) return v;
    }
    return fallback;
  })();
  const [val, setVal] = useState(initial);
  useEffect(() => {
    if (!window.BoostersOnline || typeof window.BoostersOnline.onChange !== 'function') return;
    window.BoostersOnline.onChange(setVal);
  }, []);
  return val;
}

// Витринное число бустеров в составе — статичное, не зависит от загруженных данных.
const TOTAL_BOOSTERS = 148;

function Hero({ boosters }) {
  const safeTotal = TOTAL_BOOSTERS;
  const online = useBoostersOnline(null);
  const avgMmr = boosters.length ? Math.round(boosters.reduce((s, b) => s + (b.mmr || 0), 0) / boosters.length) : 0;
  const totalOrders = boosters.reduce((s, b) => s + (b.completed || 0), 0);
  const avgWr = boosters.length ? Math.round(boosters.reduce((s, b) => s + (b.winrate || 0), 0) / boosters.length) : 0;
  const avgRating = boosters.length ? (boosters.reduce((s, b) => s + (b.rating || 0), 0) / boosters.length).toFixed(2) : '—';
  const proWord = pluralRu(safeTotal, ['верифицированный профессионал', 'верифицированных профессионала', 'верифицированных профессионалов']);

  return (
    <section className="b-hero">
      <div className="b-hero-grid-bg" aria-hidden="true" />
      <div className="b-hero-orb" aria-hidden="true" />
      <div className="b-hero-inner">
        <div className="b-hero-eyebrow">
          <span className="b-hero-eyebrow-dot" />
          <span>ROSTER · NEZNAKOV BOOST</span>
        </div>

        <h1 className="b-hero-title">
          <span className="b-hero-title-line">Команда</span>
          <span className="b-hero-title-line b-hero-title-em">бустеров</span>
        </h1>

        <p className="b-hero-sub">
          <strong>{safeTotal}</strong> {proWord}. Подтверждённый MMR Immortal,
          7+ лет на сцене, средняя оценка <strong>{avgRating}</strong> из 5
          по {fmtNum(totalOrders)} выполненным заказам.
        </p>

        <div className="b-hero-kpis">
          <div className="kpi">
            <div className="kpi-val">{safeTotal}</div>
            <div className="kpi-lbl">бустеров<br/>в составе</div>
          </div>
          <div className="kpi kpi-pulse">
            <div className="kpi-val">
              <span className="kpi-dot" /> {online != null ? online : '—'}
            </div>
            <div className="kpi-lbl">сейчас<br/>онлайн</div>
          </div>
          <div className="kpi">
            <div className="kpi-val">{fmtNum(avgMmr)}</div>
            <div className="kpi-lbl">средний<br/>MMR</div>
          </div>
          <div className="kpi">
            <div className="kpi-val">{avgWr}<span className="kpi-unit">%</span></div>
            <div className="kpi-lbl">средний<br/>винрейт</div>
          </div>
          <div className="kpi">
            <div className="kpi-val">{fmtNum(totalOrders)}</div>
            <div className="kpi-lbl">бустов<br/>выполнено</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Filters ───────── */
const FILTERS = [
  { id: "all",     label: "Все" },
  { id: "online",  label: "Онлайн", dot: true },
  { id: "15k",     label: "15 000+ MMR" },
  { id: "14k",     label: "14 000+ MMR" },
  { id: "carry",   label: "Керри" },
  { id: "mid",     label: "Мидер" },
  { id: "offlane", label: "Оффлейн" },
  { id: "support", label: "Саппорт" }
];

function countFor(id, boosters) {
  if (id === "all") return boosters.length;
  if (id === "online") return boosters.filter(b => b.isOnline).length;
  if (id === "15k") return boosters.filter(b => b.mmr >= 15000).length;
  if (id === "14k") return boosters.filter(b => b.mmr >= 14000).length;
  if (id === "carry") return boosters.filter(b => b.role === "Carry").length;
  if (id === "mid") return boosters.filter(b => b.role === "Mid").length;
  if (id === "offlane") return boosters.filter(b => b.role === "Offlane").length;
  if (id === "support") return boosters.filter(b => b.role === "Support").length;
  return 0;
}

function FilterBar({ value, onChange, boosters }) {
  return (
    <div className="filter-bar" role="tablist" aria-label="Фильтры бустеров">
      {FILTERS.map(f => {
        const c = countFor(f.id, boosters);
        const active = value === f.id;
        return (
          <button
            key={f.id}
            role="tab"
            aria-selected={active}
            className={cls("fb-chip", active && "is-active")}
            onClick={() => onChange(f.id)}
            disabled={c === 0}
          >
            {f.dot && <span className="fb-dot" />}
            <span className="fb-label">{f.label}</span>
            <span className="fb-count">{c}</span>
          </button>
        );
      })}
    </div>
  );
}

/* ───────── Sort menu ───────── */
const SORTS = [
  { id: "mmr",    label: "MMR" },
  { id: "wr",     label: "Винрейт" },
  { id: "orders", label: "Заказов" },
  { id: "rating", label: "Рейтинг" }
];

function SortBar({ value, onChange }) {
  return (
    <div className="sort-bar">
      <span className="sort-label">Сортировка</span>
      <div className="sort-chips">
        {SORTS.map(s => (
          <button
            key={s.id}
            className={cls("sort-chip", value === s.id && "is-active")}
            onClick={() => onChange(s.id)}
          >
            {s.label}
          </button>
        ))}
      </div>
    </div>
  );
}

/* ───────── Card ───────── */
function StatPill({ label, value, accent }) {
  return (
    <div className={cls("stat-pill", accent && `stat-pill-${accent}`)}>
      <div className="sp-val">{value}</div>
      <div className="sp-lbl">{label}</div>
    </div>
  );
}

function Stars({ rating }) {
  const full = Math.round(rating);
  return (
    <span className="stars" aria-label={`${rating} из 5`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <span key={i} className={cls("star", i < full && "is-on")}>★</span>
      ))}
    </span>
  );
}

function heroImgSrc(name){
  // Files in assets/heroes are named exactly like the in-game hero: "Shadow Fiend.webp", "Anti-Mage.webp", ...
  return `./assets/heroes/${name}.webp`;
}

function HeroTile({ hero, index }) {
  const [imgOk, setImgOk] = useState(true);
  return (
    <div
      className="hero-tile"
      title={hero.name}
      style={{
        '--h': hero.hue,
        animationDelay: `${index * 40}ms`
      }}
    >
      {imgOk ? (
        <img
          className="hero-tile-img"
          src={heroImgSrc(hero.name)}
          alt={hero.name}
          loading="lazy"
          decoding="async"
          onError={() => setImgOk(false)}
        />
      ) : (
        <div className="hero-tile-glyph">{hero.glyph || "★"}</div>
      )}
      <div className="hero-tile-name">{hero.name}</div>
    </div>
  );
}

function PositionBar({ positions }) {
  const labels = ["Pos 1", "Pos 2", "Pos 3", "Pos 4", "Pos 5"];
  return (
    <div className="pos-bar">
      {[1, 2, 3, 4, 5].map((p, i) => {
        const pct = positions[p] || 0;
        return (
          <div className={cls("pos-row", pct === 0 && "pos-row-empty")} key={p}>
            <div className="pos-lbl">{labels[i]}</div>
            <div className="pos-track">
              <div className="pos-fill" style={{ width: `${pct}%` }} />
            </div>
            <div className="pos-pct">{pct}%</div>
          </div>
        );
      })}
    </div>
  );
}

function BoosterCard({ b, rank, total, showReviews }) {
  const ringStyle = {
    '--hue': b.bannerHue,
    '--avatar-color': b.avatarColor
  };

  return (
    <article className="card" id={`booster-${b.slug}`} style={ringStyle}>
      {/* top banner strip */}
      <div className="card-banner" aria-hidden="true">
        <div className="card-banner-gradient" />
        <div className="card-banner-grid" />
        <div className="card-banner-rays" />
      </div>

      {/* rank corner */}
      <div className="card-rank">
        <span className="card-rank-hash">N°</span>
        <span className="card-rank-num">{String(rank).padStart(2, "0")}</span>
        <span className="card-rank-tot">/ {String(total).padStart(2, "0")}</span>
      </div>

      {/* tier ribbon */}
      <div className={cls("card-tier", `card-tier-${b.tier.toLowerCase()}`)}>{b.tier}</div>

      {/* top zone: avatar + identity + headline stats */}
      <header className="card-head">
        <div className="card-avatar-wrap">
          <div className="card-avatar-ring" />
          <div className="card-avatar">
            {b.avatarUrl ? (
              <img
                className="card-avatar-img"
                src={b.avatarUrl}
                alt={b.nickname}
                loading="lazy"
                decoding="async"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
              />
            ) : null}
            <span className="card-avatar-glyph">{b.initials}</span>
            <span className="card-avatar-check" aria-label="verified">✓</span>
          </div>
        </div>

        <div className="card-identity">
          <div className="card-meta-top">
            <span className={cls("status", b.isOnline ? "status-on" : "status-off")}>
              <span className="status-dot" />
              {b.isOnline ? "Сейчас онлайн" : b.lastSeen}
            </span>
            <span className="card-role-pill">{b.rolePill} · {b.roleRu}</span>
          </div>
          <h2 className="card-nickname">{b.nickname}</h2>
          <div className="card-realname">{b.realName}</div>
          <div className="card-meta-bot">
            <span className="rating-block">
              <Stars rating={b.rating} />
              <span className="rating-num">{b.rating.toFixed(2)}</span>
              <span className="rating-count">({b.reviewsCount} {pluralRu(b.reviewsCount, ['отзыв', 'отзыва', 'отзывов'])})</span>
            </span>
            <span className="meta-sep" />
            <span className="meta-chip">{b.languages.join(" · ")}</span>
            <span className="meta-sep" />
            <span className="meta-chip">{b.years} {pluralRu(b.years, ['год', 'года', 'лет'])} на сцене</span>
            <span className="meta-sep" />
            <span className="meta-chip">Ответ {b.response}</span>
          </div>
        </div>

        <div className="card-headstats">
          <div className="hs-cell">
            <div className="hs-val hs-val-accent">{fmtNum(b.mmr)}</div>
            <div className="hs-lbl">текущий MMR</div>
            <div className="hs-sub">пик: {fmtNum(b.peakMmr)}</div>
          </div>
          <div className="hs-divider" />
          <div className="hs-cell">
            <div className="hs-val hs-val-green">{b.winrate}<span className="hs-unit">%</span></div>
            <div className="hs-lbl">винрейт бустов</div>
            <div className="hs-sub">{fmtNum(b.games)} матчей</div>
          </div>
          <div className="hs-divider" />
          <div className="hs-cell">
            <div className="hs-val hs-val-violet">{b.mmrPerWeek}</div>
            <div className="hs-lbl">MMR / неделю</div>
            <div className="hs-sub">темп: {b.avgTime}</div>
          </div>
        </div>
      </header>

      {/* body */}
      <div className="card-body">
        {/* left col: bio + heroes + position */}
        <div className="card-col-main">
          <div className="card-bio">{b.bio}</div>

          {b.heroes && b.heroes.length > 0 && (
            <>
              <div className="block-label">
                <span>Pool · {b.heroes.length} героев</span>
                <span className="block-label-meta">Сигнатур-пик: {b.heroes[0].name}</span>
              </div>
              <div className="hero-pool">
                {b.heroes.map((h, i) => <HeroTile key={h.name} hero={h} index={i} />)}
              </div>
            </>
          )}

          <div className="card-grid-2">
            <div>
              <div className="block-label">Распределение по позициям</div>
              <PositionBar positions={b.positions} />
            </div>
            <div>
              <div className="block-label">Бейджи</div>
              <div className="badges">
                {b.badges.map((bg, i) => (
                  <span key={i} className={cls("badge", `badge-${bg.type}`)}>
                    {bg.text}
                  </span>
                ))}
              </div>

              {showReviews && b.reviews && b.reviews.length > 0 && (
                <>
                  <div className="block-label" style={{ marginTop: 18 }}>
                    Отзывы клиентов
                  </div>
                  <div className="reviews">
                    {b.reviews.slice(0, 2).map((r, i) => (
                      <div className="review" key={i}>
                        <div className="review-head">
                          <Stars rating={r.rating} />
                          <span className="review-date">{r.date}</span>
                        </div>
                        <div className="review-text">«{r.text}»</div>
                        <div className="review-author">— {r.author}</div>
                      </div>
                    ))}
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        {/* right col: CTA + extra info */}
        <aside className="card-col-side">
          <div className="side-card">
            <div className="side-card-title">
              <span>Заказать буст</span>
              <span className="side-card-availability">
                {b.isOnline ? "доступен сейчас" : "ответит позже"}
              </span>
            </div>

            <div className="side-card-progress">
              <div className="scp-row">
                <span>Винрейт</span>
                <span className="scp-num">{b.winrate}%</span>
              </div>
              <div className="scp-track">
                <div className="scp-fill" style={{ width: `${b.winrate}%` }} />
              </div>
            </div>

            <div className="side-info">
              <div className="si-row">
                <span className="si-key">Завершено бустов</span>
                <span className="si-val">{fmtNum(b.completed)}</span>
              </div>
              <div className="si-row">
                <span className="si-key">Среднее время ответа</span>
                <span className="si-val">{b.response}</span>
              </div>
              <div className="si-row">
                <span className="si-key">Языки</span>
                <span className="si-val">{b.languages.join(" / ")}</span>
              </div>
              <div className="si-row">
                <span className="si-key">Опыт</span>
                <span className="si-val">{b.years} {pluralRu(b.years, ['год', 'года', 'лет'])}</span>
              </div>
            </div>

            <a className="cta cta-primary" href={`/services.html?booster=${encodeURIComponent(b.slug)}`}>
              <span>Заказать у {b.nickname.split(/[._-]/)[0]}</span>
              <span className="cta-arrow">→</span>
            </a>
            {b.history ? (
              <a className="cta cta-ghost" href={b.history} target="_blank" rel="noopener nofollow">
                История бустов
              </a>
            ) : (
              <button className="cta cta-ghost" type="button" disabled>
                История бустов
              </button>
            )}
          </div>
        </aside>
      </div>
    </article>
  );
}

/* ───────── App ───────── */
function App() {
  const [filter, setFilter] = useState("all");
  const [sort, setSort] = useState("mmr");
  const [boosters, setBoosters] = useState(() => Array.isArray(window.BOOSTERS) ? window.BOOSTERS : []);
  const [loadState, setLoadState] = useState("loading"); // loading | ready | error
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    let cancelled = false;
    if (!window.NeznakovBoostersAdapter) { setLoadState("ready"); return; }
    window.NeznakovBoostersAdapter.fetch()
      .then(arr => {
        if (cancelled) return;
        if (Array.isArray(arr) && arr.length) {
          setBoosters(arr);
          setLoadState("ready");
        } else {
          setLoadState(boosters.length ? "ready" : "error");
        }
      })
      .catch(() => {
        if (!cancelled) setLoadState(boosters.length ? "ready" : "error");
      });
    return () => { cancelled = true; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Apply theme CSS variables based on accent tweak. Violet matches the site palette (#8B5CF6/#A78BFA).
  useEffect(() => {
    const root = document.documentElement;
    const themes = {
      violet: { h: "295", accent: "#8B5CF6", accent2: "#A78BFA", dim: "rgba(139,92,246,.14)", glow: "rgba(139,92,246,.45)" },
      teal:   { h: "168", accent: "oklch(0.84 0.13 168)", accent2: "oklch(0.92 0.10 188)", dim: "oklch(0.84 0.13 168 / 0.14)", glow: "oklch(0.84 0.13 168 / 0.45)" },
      amber:  { h: "55",  accent: "oklch(0.80 0.16 55)",  accent2: "oklch(0.90 0.14 70)",  dim: "oklch(0.80 0.16 55 / 0.14)",  glow: "oklch(0.80 0.16 55 / 0.45)" },
      crimson:{ h: "20",  accent: "oklch(0.72 0.18 20)",  accent2: "oklch(0.84 0.16 30)",  dim: "oklch(0.72 0.18 20 / 0.14)",  glow: "oklch(0.72 0.18 20 / 0.45)" }
    };
    const t = themes[tweaks.accent] || themes.violet;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-2", t.accent2);
    root.style.setProperty("--accent-dim", t.dim);
    root.style.setProperty("--accent-glow", t.glow);
    root.style.setProperty("--accent-h", t.h);
  }, [tweaks.accent]);

  useEffect(() => {
    document.documentElement.dataset.density = tweaks.density;
    document.documentElement.dataset.animate = tweaks.animateOnEnter ? "yes" : "no";
  }, [tweaks.density, tweaks.animateOnEnter]);

  const filtered = useMemo(() => {
    let arr = boosters.slice();
    if (filter === "online") arr = arr.filter(b => b.isOnline);
    else if (filter === "15k") arr = arr.filter(b => b.mmr >= 15000);
    else if (filter === "14k") arr = arr.filter(b => b.mmr >= 14000);
    else if (filter === "carry") arr = arr.filter(b => b.role === "Carry");
    else if (filter === "mid") arr = arr.filter(b => b.role === "Mid");
    else if (filter === "offlane") arr = arr.filter(b => b.role === "Offlane");
    else if (filter === "support") arr = arr.filter(b => b.role === "Support");

    if (sort === "mmr") arr.sort((a, b) => b.mmr - a.mmr);
    else if (sort === "wr") arr.sort((a, b) => b.winrate - a.winrate);
    else if (sort === "orders") arr.sort((a, b) => b.completed - a.completed);
    else if (sort === "rating") arr.sort((a, b) => b.rating - a.rating);

    return arr;
  }, [filter, sort, boosters]);

  return (
    <>
      <Hero boosters={boosters} />

      <section className="toolbar-section">
        <div className="container">
          <FilterBar value={filter} onChange={setFilter} boosters={boosters} />
          <SortBar value={sort} onChange={setSort} />
        </div>
      </section>

      <section className="roster">
        <div className="container">
          {loadState === "loading" && boosters.length === 0 ? (
            <div className="empty">Загружаем команду…</div>
          ) : loadState === "error" && boosters.length === 0 ? (
            <div className="empty">Не удалось загрузить состав. Попробуйте обновить страницу.</div>
          ) : filtered.length === 0 ? (
            <div className="empty">Никого не найдено по выбранному фильтру.</div>
          ) : (
            <>
              <div className="card-stack">
                {filtered.map((b, i) => (
                  <BoosterCard
                    key={b.slug}
                    b={b}
                    rank={i + 1}
                    total={filtered.length}
                    showReviews={tweaks.showReviews}
                  />
                ))}
              </div>
              <nav className="b-pages" aria-label="Страницы">
                {Array.from({ length: 8 }, (_, i) => (
                  <button key={i} type="button" className="b-page-btn">{i + 1}</button>
                ))}
              </nav>
            </>
          )}
        </div>
      </section>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          {window.TweakSection && (
            <window.TweakSection title="Тема">
              <window.TweakRadio
                label="Акцент"
                value={tweaks.accent}
                onChange={v => setTweak("accent", v)}
                options={[
                  { value: "teal",    label: "Teal" },
                  { value: "violet",  label: "Violet" },
                  { value: "amber",   label: "Amber" },
                  { value: "crimson", label: "Crimson" }
                ]}
              />
              <window.TweakRadio
                label="Плотность"
                value={tweaks.density}
                onChange={v => setTweak("density", v)}
                options={[
                  { value: "compact",     label: "Compact" },
                  { value: "comfortable", label: "Comfort" },
                  { value: "spacious",    label: "Spacious" }
                ]}
              />
            </window.TweakSection>
          )}
          {window.TweakSection && (
            <window.TweakSection title="Карточки">
              <window.TweakToggle
                label="Показывать отзывы"
                value={tweaks.showReviews}
                onChange={v => setTweak("showReviews", v)}
              />
              <window.TweakToggle
                label="Анимации появления"
                value={tweaks.animateOnEnter}
                onChange={v => setTweak("animateOnEnter", v)}
              />
            </window.TweakSection>
          )}
        </window.TweaksPanel>
      )}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);