function ProfilePage({ playerId, onBack }) {
  const player = byId(playerId);
  if (!player) return null;

  const total = player.wins + player.losses;
  const wr    = winRate(player);
  const rank  = [...DB.players].sort((a,b) => b.wins - a.wins).findIndex(p => p.id === player.id);

  // Real partner stats from computed data
  const ps       = player.partnerStats || {};
  const bestId   = player.bestPartner;
  const worstId  = player.worstPartner;
  const best     = byId(bestId);
  const worst    = byId(worstId);
  const bestWins = bestId  && ps[bestId]  ? ps[bestId].wins   : 0;
  const worstL   = worstId && ps[worstId] ? ps[worstId].losses : 0;

  const myBadges  = badgesFor(player.id);
  const myMatches = DB.matches.filter(m => [...m.teamA, ...m.teamB].includes(player.id));

  const tarneebTotal = player.tarneeb + (player.tarneebLosses || 0);
  const trixTotal    = player.trix    + (player.trixLosses    || 0);

  return (
    <div className="screen" data-screen-label="profile">
      <div className="admin-step-head">
        <button className="back" onClick={onBack}>← رجوع</button>
        <div className="step-title" style={{ marginInlineStart: "auto" }}>بروفايل اللاعب</div>
      </div>

      {/* Hero */}
      <div className="profile-hero" style={{ background: player.palette.bg }}>
        <span className="big-wm">{rank + 1}</span>
        <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 14, padding: "10px 0 4px" }}>
          <Avatar player={player} size={120} />
          <div>
            <div className="profile-name">{player.name}</div>
            <div className="profile-rank" style={{ marginTop: 8 }}>الترتيب رقم {rank + 1}</div>
          </div>
        </div>
      </div>

      {/* Stat grid */}
      <div className="stat-grid">
        <div className="stat-card"><div className="v">{player.wins}</div><div className="k">فوزات</div></div>
        <div className="stat-card red"><div className="v">{player.losses}</div><div className="k">خسارات</div></div>
        <div className="stat-card cyan"><div className="v">{total}</div><div className="k">مباريات</div></div>
        <div className="stat-card mag"><div className="v">{wr}٪</div><div className="k">نسبة الفوز</div></div>
      </div>

      {/* Badges */}
      {myBadges.length > 0 && <>
        <div className="section-title">الأوسمة</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 16 }}>
          {myBadges.map(b => (
            <div key={b.id} style={{ background: b.color, color: "#000", border: "3px solid #000", borderRadius: 16, padding: "10px 14px", boxShadow: "4px 4px 0 #000", display: "flex", alignItems: "center", gap: 10, flex: "1 1 46%" }}>
              <span style={{ fontFamily: "Rakkas", fontSize: 32, lineHeight: 1, background: "#000", color: b.color, width: 40, height: 40, borderRadius: 10, display: "grid", placeItems: "center", filter: `drop-shadow(0 0 6px ${b.color})` }}>{b.icon}</span>
              <div>
                <div style={{ fontFamily: "Lalezar", fontSize: 18, lineHeight: 1 }}>{b.label}</div>
                <div style={{ fontSize: 11, fontWeight: 800, opacity: 0.75 }}>{b.flavor}</div>
              </div>
            </div>
          ))}
        </div>
      </>}

      {/* Game breakdown */}
      <div className="section-title">تفصيل الألعاب</div>
      <div className="breakdown">
        <div className="breakdown-row">
          <span className="name">طرنيب</span>
          <div className="bar"><div className="fill" style={{ width: `${tarneebTotal ? (player.tarneeb / tarneebTotal) * 100 : 0}%`, background: "var(--gold)" }} /></div>
          <span className="nums">{player.tarneeb}<small>/{tarneebTotal}</small></span>
        </div>
        <div className="breakdown-row">
          <span className="name">تركس</span>
          <div className="bar"><div className="fill" style={{ width: `${trixTotal ? (player.trix / trixTotal) * 100 : 0}%`, background: "var(--neon-cyan)" }} /></div>
          <span className="nums">{player.trix}<small>/{trixTotal}</small></span>
        </div>
      </div>

      {/* Partners */}
      {(best || worst) && <>
        <div className="section-title">الشريك الذهبي والسمّ</div>
        <div className="partner-row">
          {best && (
            <div className="partner-card best" style={{ background: best.palette.bg }}>
              <span className="label">أفضل شريك</span>
              <div className="pname">{best.name}</div>
              <div className="pstat">{bestWins}<small> فوز سوا</small></div>
            </div>
          )}
          {worst && (
            <div className="partner-card worst" style={{ background: worst.palette.bg }}>
              <span className="label">شريك الكارثة</span>
              <div className="pname">{worst.name}</div>
              <div className="pstat">{worstL}<small> خسارة سوا</small></div>
            </div>
          )}
        </div>
      </>}

      {/* Personal history */}
      <div className="section-title">آخر مبارياتي</div>
      {myMatches.length === 0 && (
        <div style={{ textAlign: "center", opacity: 0.5, marginTop: 20, fontFamily: "Lalezar,serif", fontSize: 20 }}>لا توجد مباريات بعد</div>
      )}
      {myMatches.slice(0, 8).map((m, i) => {
        const myTeam    = m.teamA.includes(player.id) ? "A" : "B";
        const won       = m.winner === myTeam;
        const partnerId = myTeam === "A" ? m.teamA.find(x => x !== player.id) : m.teamB.find(x => x !== player.id);
        const partner   = byId(partnerId);
        return (
          <div key={m.id} className={`match-card d${Math.min(i,9)}`}>
            <span className="date-chip">{arabicDateLabel(m.date)}</span>
            <span className="game-chip">{m.game}</span>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
              <span style={{ background: won ? "var(--gold)" : "var(--red)", color: won ? "#000" : "#fff", border: "2.5px solid #000", borderRadius: 10, padding: "6px 12px", fontFamily: "Lalezar", fontSize: 20, lineHeight: 1, boxShadow: "2px 2px 0 #000" }}>{won ? "فوز ✓" : "خسارة ✗"}</span>
              {partner && <span style={{ fontWeight: 800, opacity: 0.85, fontSize: 13 }}>مع {partner.name}</span>}
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { ProfilePage });