// SMASH mobile — composite parts used inside screens.
// (Player rows, match invite tile, chat bubbles, score keypad, court line decor.)

function PlayerRow({ player, onTap }) {
  return (
    <div onClick={onTap} style={{
      display: 'flex', alignItems: 'center', gap: 14,
      padding: '14px 20px', cursor: 'pointer',
    }}>
      <Avatar name={player.name} size={48} tone={player.tone || 'green'} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 3 }}>
        <div style={{ fontSize: 16, fontWeight: 500, color: SMASH.black, letterSpacing: '-0.01em' }}>
          {player.name}
        </div>
        <div style={{ fontSize: 13, color: SMASH.slate, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span>{player.area}</span>
          <span style={{ width: 3, height: 3, borderRadius: '50%', background: SMASH.mist }} />
          <span style={{ fontFamily: SMASH.fontMono }}>{player.distance}</span>
          {player.lastSeen && (<>
            <span style={{ width: 3, height: 3, borderRadius: '50%', background: SMASH.mist }} />
            <span>{player.lastSeen}</span>
          </>)}
        </div>
      </div>
      <NTRPBadge value={player.ntrp} />
    </div>
  );
}

function CourtBackdrop({ height = 160, color = SMASH.green, line = SMASH.green200 }) {
  // Decorative court lines as a hero band.
  return (
    <div style={{
      height, background: color, position: 'relative', overflow: 'hidden',
    }}>
      <svg width="100%" height={height} viewBox="0 0 360 160" preserveAspectRatio="none"
           style={{ position: 'absolute', inset: 0, opacity: 0.35 }}>
        <g fill="none" stroke={line} strokeWidth="1.2">
          <rect x="36" y="22" width="288" height="116" />
          <line x1="36" y1="80" x2="324" y2="80" />
          <line x1="180" y1="22" x2="180" y2="138" />
          <line x1="84" y1="56" x2="276" y2="56" />
          <line x1="84" y1="104" x2="276" y2="104" />
        </g>
      </svg>
    </div>
  );
}

function MatchInviteTile({ when, where, duration, status = 'pending' }) {
  return (
    <Card style={{ background: SMASH.green, border: 'none' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <Label color={SMASH.green200}>Match invite</Label>
        <StatusPill tone={status}>{status === 'pending' ? 'Жду ответа' : 'Подтверждено'}</StatusPill>
      </div>
      <div style={{
        fontFamily: SMASH.fontDisplay, fontWeight: 700,
        fontSize: 40, lineHeight: 1, letterSpacing: '-1px',
        color: SMASH.yellow, marginBottom: 12,
      }}>{when}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 14, color: SMASH.off }}>{where}</div>
        <div style={{ fontFamily: SMASH.fontMono, fontSize: 13, color: SMASH.green200 }}>{duration}</div>
      </div>
    </Card>
  );
}

function Bubble({ them, time, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: them ? 'flex-start' : 'flex-end', gap: 2 }}>
      <div style={{
        maxWidth: '78%', padding: '10px 14px', borderRadius: 16,
        background: them ? SMASH.cream : SMASH.green,
        color: them ? SMASH.ink : SMASH.off,
        borderBottomLeftRadius: them ? 4 : 16,
        borderBottomRightRadius: them ? 16 : 4,
        fontSize: 14.5, lineHeight: 1.4,
      }}>{children}</div>
      {time && <div style={{ fontFamily: SMASH.fontMono, fontSize: 10.5, color: SMASH.stone, margin: '0 4px' }}>{time}</div>}
    </div>
  );
}

function ScoreCell({ value, onClick, active, dim }) {
  return (
    <div onClick={onClick} style={{
      flex: 1, height: 56,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: active ? SMASH.green : SMASH.cream,
      color: active ? SMASH.yellow : (dim ? SMASH.stone : SMASH.black),
      fontFamily: SMASH.fontMono, fontSize: 22, fontWeight: 500,
      borderRadius: 12, cursor: 'pointer', letterSpacing: '-0.5px',
    }}>{value}</div>
  );
}

function StatRow({ label, value, mono, color = SMASH.black }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: '12px 0', borderBottom: `1px solid ${SMASH.mist}`,
    }}>
      <span style={{ fontSize: 13.5, color: SMASH.slate }}>{label}</span>
      <span style={{
        fontFamily: mono ? SMASH.fontMono : SMASH.fontBody,
        fontWeight: 500, fontSize: 15, color,
      }}>{value}</span>
    </div>
  );
}

Object.assign(window, {
  PlayerRow, CourtBackdrop, MatchInviteTile, Bubble, ScoreCell, StatRow,
});