const { useState, useMemo, useEffect } = React;

// ---------- Language switcher ----------
function LangSwitch({ langs, current, onChange }) {
  return (
    <div className="lang">
      {langs.map((l) => (
        <button
          key={l.id}
          onClick={() => onChange(l.id)}
          className={"lang__btn" + (l.id === current ? " lang__btn--on" : "")}
        >
          {l.label}
        </button>
      ))}
    </div>
  );
}

// ---------- Pills ----------
function Pills({ items, current, available, onChange, t }) {
  return (
    <div className="pills" role="tablist">
      {items.map((it) => {
        const isActive = it.id === current;
        const hasData  = available.has(it.id);
        return (
          <button
            key={it.id}
            role="tab"
            aria-selected={isActive}
            disabled={!hasData}
            onClick={() => hasData && onChange(it.id)}
            className={"pill" + (isActive ? " pill--on" : "") + (!hasData ? " pill--disabled" : "")}
          >
            <span>{it.label}</span>
            {!hasData && <span className="pill__soon">{t("soon")}</span>}
          </button>
        );
      })}
    </div>
  );
}

// ---------- Tier helper ----------
function tierFor(pts, scoring) {
  if (!pts) return null;
  if (pts >= scoring.champions)        return "champ";
  if (pts >= scoring.finalists)        return "fin";
  if (pts >= scoring.semifinalists)    return "sf";
  if (pts >= scoring.quarterfinalists) return "qf";
  return "g";
}

// ---------- Stage trail (one row's per-stage chips) ----------
function StageTrail({ stages, byStage, scoring }) {
  return (
    <div className="trail" aria-label="Per-stage results">
      {stages.map(s => {
        const pts = byStage[s.id] || 0;
        const tier = tierFor(pts, scoring);
        return (
          <span
            key={s.id}
            className={"trail__dot" + (tier ? " trail__dot--" + tier : " trail__dot--none")}
            title={s.label + ": " + (pts ? "+" + pts + " pts" : "—")}
            aria-label={s.label + (pts ? " +" + pts : " no points")}
          >
            <span className="trail__id">{s.id}</span>
          </span>
        );
      })}
    </div>
  );
}

// ---------- Classification table ----------
function ClassificationTable({ rows, search, latestStageShort, stages, scoring, t, circuit, category }) {
  const [open, setOpen] = useState(null);

  // Scope the tournament list to the current (circuit, category) so the
  // profile only counts matches the user is actually looking at.
  const scopedTournaments = useMemo(() => {
    const all = (window.RANK_DATA && window.RANK_DATA.tournaments) || [];
    return window.scopeTournaments
      ? window.scopeTournaments(all, circuit, category)
      : all.filter(t => t.circuit === circuit && t.category === category);
  }, [circuit, category]);

  // Close the profile if the underlying scope changes out from under it
  // (e.g. user flips circuit while a profile is open).
  useEffect(() => { setOpen(null); }, [circuit, category]);

  const filtered = useMemo(() => {
    if (!search) return rows;
    const q = search.toLowerCase();
    return rows.filter(r => r.name.toLowerCase().includes(q));
  }, [rows, search]);

  if (rows.length === 0) {
    return (
      <div className="empty">
        <div className="empty__icon">⌛</div>
        <div className="empty__title">{t("emptyTitle")}</div>
        <div className="empty__sub">{t("emptySub")}</div>
      </div>
    );
  }

  return (
    <div className="ctable">
      <div className="ctable__head">
        <div className="ctable__col ctable__col--rank">#</div>
        <div className="ctable__col ctable__col--player">{t("player")}</div>
        <div className="ctable__col ctable__col--delta">Δ {latestStageShort}</div>
        <div className="ctable__col ctable__col--points">{t("pts")}</div>
      </div>
      <div className="ctable__body">
        {filtered.map((row, i) => {
          const isOpen = open === row.name;
          return (
            <StaggerIn key={row.name} delay={Math.min(i, 12) * 18} className="ctable__row-wrap">
              <button
                type="button"
                className={"ctable__row" + (isOpen ? " ctable__row--open" : "")}
                onClick={() => setOpen(isOpen ? null : row.name)}
                aria-expanded={isOpen}
              >
                <div className="ctable__col ctable__col--rank">
                  <span className={row.rank <= 3 ? "rank rank--" + row.rank : "rank"}>{row.rank}</span>
                </div>
                <div className="ctable__col ctable__col--player">
                  <div className="player">{row.name}</div>
                  <StageTrail stages={stages} byStage={row.byStage} scoring={scoring} />
                </div>
                <div className="ctable__col ctable__col--delta">
                  {row.latestDelta > 0
                    ? <span className="delta">+{row.latestDelta.toLocaleString()}</span>
                    : <span className="delta delta--zero">—</span>}
                </div>
                <div className="ctable__col ctable__col--points">
                  <span className="pts">{row.total.toLocaleString()}</span>
                </div>
              </button>
            </StaggerIn>
          );
        })}
        {filtered.length === 0 && (
          <div className="empty" style={{ border: 0 }}>
            <div className="empty__sub">{t("emptyMatch", search)}</div>
          </div>
        )}
      </div>
      {open && (
        <PlayerProfile
          playerName={open}
          tournaments={scopedTournaments}
          scopeKey={circuit + "|" + category}
          stages={stages}
          t={t}
          onClose={() => setOpen(null)}
        />
      )}
    </div>
  );
}

// ---------- Scoring disclosure ----------
function ScoringDisclose({ scoring, t }) {
  const [open, setOpen] = useState(false);
  const tiers = t.dict.tiers;
  const rows = [
    { pts: scoring.champions,        lbl: tiers.champ },
    { pts: scoring.finalists,        lbl: tiers.fin   },
    { pts: scoring.semifinalists,    lbl: tiers.sf    },
    { pts: scoring.quarterfinalists, lbl: tiers.qf    },
    { pts: scoring.groupZero,        lbl: tiers.g     },
  ];
  return (
    <div className="disclose">
      <button
        className="disclose__btn"
        aria-expanded={open}
        onClick={() => setOpen(o => !o)}
      >
        {t("howPoints")}
        <span className="disclose__chev">▾</span>
      </button>
      {open && (
        <div className="disclose__body">
          {rows.map((r, i) => (
            <div key={i} className="rule-row">
              <span className="rule-row__pts">{r.pts}</span>
              <span className="rule-row__lbl">{r.lbl}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { LangSwitch, Pills, StageTrail, ClassificationTable, ScoringDisclose });