/* global window, React */

window.Leaderboard = function Leaderboard({ ctx }) {
  const Icon = window.Icon;
  const reps = [...window.SALES_REPS].sort((a, b) => b.actual - a.actual);
  const top3 = reps.slice(0, 3);
  const rest = reps.slice(3);
  const meId = window.ME.id;

  return (
    <window.Screen
      title="Leaderboard"
      back={true}
      onBack={() => ctx.go("profile")}
      right={<button className="icon-btn" onClick={() => ctx.notify("Filter periode")}><Icon.Filter size={18} /></button>}
    >
      {/* Me banner */}
      <div className="me-banner">
        <div className="mb-rank">#{window.ME_RANK}</div>
        <div className="mb-body">
          <div className="t">Posisi Anda · {window.ME.name.split(" ")[0]}</div>
          <div className="v">{window.fmtShort(window.ME.actual)} · {((window.ME.actual / window.ME.target) * 100).toFixed(0)}% target</div>
        </div>
        <Icon.Trophy size={32} />
      </div>

      {/* Podium */}
      <div className="podium-h">
        {[1, 0, 2].map(idx => {
          if (!top3[idx]) return <div key={idx}></div>;
          const r = top3[idx];
          const tone = idx === 0 ? "gold" : idx === 1 ? "silver" : "bronze";
          return (
            <div key={r.id} className={`podium-card ${tone}`}>
              <div className="pc-rank">{idx + 1}</div>
              <div className="pc-avatar">
                <window.Avatar tone={r.tone} initials={r.name.split(" ").map(w => w[0]).slice(0, 2).join("")} size={44} />
              </div>
              <div className="pc-name">{r.name.split(" ")[0]}</div>
              <div className="pc-val">{window.fmtShort(r.actual)}</div>
            </div>
          );
        })}
      </div>

      {/* Full list */}
      <window.MSection title="Ranking lengkap" sub={`${reps.length} sales rep`}>
        {reps.map((r, i) => {
          const pct = (r.actual / r.target) * 100;
          const cls = i === 0 ? "top1" : i === 1 ? "top2" : i === 2 ? "top3" : "";
          const me = r.id === meId ? "me" : "";
          return (
            <div key={r.id} className={`lb-row ${cls} ${me}`}>
              <div className="lb-rank">{i + 1}</div>
              <window.Avatar tone={r.tone} initials={r.name.split(" ").map(w => w[0]).slice(0, 2).join("")} />
              <div className="lb-info">
                <div className="nm">{r.name}{me ? " · Anda" : ""}</div>
                <div className="rg">{r.region}</div>
              </div>
              <div className="lb-val">
                <div className="v">{window.fmtShort(r.actual)}</div>
                <div className="p">{pct.toFixed(0)}%</div>
              </div>
            </div>
          );
        })}
      </window.MSection>
    </window.Screen>
  );
};