// Reusable UI chunks: avatar, badge pill, bottom nav, player card

const { useState } = React;

function Avatar({ player, size = 68, showTag = true }) {
  const s = size;
  return (
    <div className="avatar" style={{
      width: s, height: s,
      background: `linear-gradient(135deg, ${player.palette.bg}, ${shade(player.palette.bg, -25)})`,
      backgroundImage: `repeating-linear-gradient(45deg, rgba(0,0,0,0.35) 0 ${s*0.08}px, rgba(255,255,255,0.22) ${s*0.08}px ${s*0.16}px)`,
      backgroundColor: player.palette.bg,
    }}>
      <span className="initials" style={{ fontSize: s * 0.44 }}>{player.nick}</span>
      {showTag && s >= 60 && <span className="photo-tag">PHOTO</span>}
    </div>
  );
}

// darken/lighten hex
function shade(hex, pct) {
  const h = hex.replace('#','');
  const n = parseInt(h, 16);
  let r = (n >> 16) + Math.round(255 * pct/100);
  let g = ((n >> 8) & 0xff) + Math.round(255 * pct/100);
  let b = (n & 0xff) + Math.round(255 * pct/100);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return '#' + ((r<<16) | (g<<8) | b).toString(16).padStart(6,'0');
}

function MiniAvatar({ player, size = 26 }) {
  return (
    <span className="mini-ava" style={{
      width: size, height: size,
      backgroundColor: player.palette.bg,
      backgroundImage: `repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0 4px, rgba(255,255,255,0.25) 4px 8px)`,
    }}>{player.nick}</span>
  );
}

function BadgePill({ badge }) {
  return (
    <span className="badge-pill" style={{ background: badge.color, color: "#000" }}>
      <span className="ico" style={{ color: badge.color }}>{badge.icon}</span>
      <span>{badge.label}</span>
    </span>
  );
}

function BottomNav({ page, onNav }) {
  const items = [
    { id: "leaderboard", label: "الأبطال",  ico: "♛" },
    { id: "history",     label: "المباريات", ico: "♦" },
    { id: "profile",     label: "البروفايل", ico: "♥" },
    { id: "admin",       label: "إدارة",     ico: "♠" },
  ];
  return (
    <nav className="bottom-nav" aria-label="التنقل">
      {items.map(it => (
        <button
          key={it.id}
          className={`nav-btn ${page === it.id ? 'active' : ''}`}
          onClick={() => onNav(it.id)}
          data-screen-label={`nav-${it.id}`}
        >
          <span className="ico">{it.ico}</span>
          <span>{it.label}</span>
        </button>
      ))}
    </nav>
  );
}

function PlayerCard({ player, rank, onClick, dealIndex = 0 }) {
  const tiltClass = `tilt-${(rank % 4) + 1}`;
  const isTop = rank === 0;
  const crown = rank === 0 ? "المتصدّر" : rank === 1 ? "الثاني" : rank === 2 ? "الثالث" : null;
  const total = player.wins + player.losses;
  const wr = total ? Math.round((player.wins / total) * 100) : 0;
  const myBadges = badgesFor(player.id);
  return (
    <div
      className={`player-card d${Math.min(dealIndex, 9)} ${tiltClass}`}
      style={{
        background: player.palette.bg,
        boxShadow: isTop ? `5px 5px 0 #000, 0 0 30px ${player.palette.glow}55` : "5px 5px 0 #000",
      }}
      onClick={onClick}
      data-screen-label={`player-card-${player.id}`}
    >
      <span className="rank-wm">{rank + 1}</span>
      {crown && <span className="pc-crown">{crown}</span>}
      <Avatar player={player} size={68} />
      <div className="pc-body">
        <div className="pc-name">{player.name}</div>
        <div className="pc-stats">
          <span className="pc-stat"><span className="v">{player.wins}</span><span className="k">فوز</span></span>
          <span className="pc-stat"><span className="v">{player.losses}</span><span className="k">خسارة</span></span>
          <span className="pc-stat"><span className="v">{wr}٪</span><span className="k">نسبة</span></span>
        </div>
        <div className="pc-winrate"><div className="fill" style={{ width: `${wr}%` }} /></div>
        {myBadges.length > 0 && (
          <div className="pc-badges">
            {myBadges.slice(0,2).map(b => (
              <span key={b.id} className="mini">
                <span className="dot" style={{ color: b.color }}>{b.icon}</span>
                {b.label}
              </span>
            ))}
          </div>
        )}
      </div>
      <div className="pc-rank-badge">
        <span className="r">{rank + 1}</span>
        <span className="label">RANK</span>
      </div>
    </div>
  );
}

Object.assign(window, { Avatar, MiniAvatar, BadgePill, BottomNav, PlayerCard, shade });