/* global React */

function Shield({ size = 'md', children = 'MB' }) {
  return <div className={'shield' + (size === 'lg' ? ' lg' : '')} aria-hidden="true">{children}</div>;
}

function Button({ kind = 'primary', children, onClick, disabled, style }) {
  return (
    <button
      type="button"
      className={'btn btn-' + kind + (disabled ? ' disabled' : '')}
      onClick={disabled ? undefined : onClick}
      style={style}
      disabled={disabled}
    >
      {children}
    </button>
  );
}

function Chip({ on, children, onClick }) {
  return <button type="button" className={'chip' + (on ? ' on' : '')} onClick={onClick}>{children}</button>;
}

function Field({ label, value, onChange, readOnly, type = 'text', placeholder, maxLength }) {
  return (
    <label className="field">
      <span className="label">{label}</span>
      <input
        type={type}
        value={value}
        readOnly={readOnly}
        placeholder={placeholder}
        maxLength={maxLength}
        onChange={onChange ? (e) => onChange(e.target.value) : undefined}
      />
    </label>
  );
}

function ModeSelector({ value, onChange }) {
  const modes = [
    { rounds: 4, label: 'Kurz‑Race' },
    { rounds: 8, label: 'Lounge‑Match' },
    { rounds: 10, label: 'Executive‑Run' },
  ];
  return (
    <div className="modes" role="group" aria-label="Rundenzahl">
      {modes.map((m) => (
        <button
          key={m.rounds}
          type="button"
          className={'mode' + (value === m.rounds ? ' active' : '')}
          onClick={() => onChange(m.rounds)}
        >
          <b>{m.rounds}</b>
          <span>{m.label}</span>
        </button>
      ))}
    </div>
  );
}

function PlayerRow({ name, online, tier, lastSeen, onInvite, invited }) {
  return (
    <div className={'player-row' + (online ? ' online' : '')}>
      <div className="left">
        <div className="avatar">{online ? name[0] : '·'}</div>
        <div>
          <b style={{ color: online ? 'var(--fg-1)' : 'var(--fg-2)' }}>{name}</b>
          <small>{online ? `● online · Tier ${tier}` : `○ offline · zuletzt ${lastSeen}`}</small>
        </div>
      </div>
      {online ? (
        <Chip on={invited} onClick={onInvite}>{invited ? 'Eingeladen' : 'Einladen'}</Chip>
      ) : (
        <button type="button" className="chip" style={{ opacity: .5, cursor: 'not-allowed' }}>Offline</button>
      )}
    </div>
  );
}

function HUDPill({ label, value, lead, quiet }) {
  return (
    <div className={'hud-pill' + (lead ? ' lead' : '') + (quiet ? ' quiet' : '')}>
      <span className="lbl">{label}</span>
      <b className="val">{value}</b>
    </div>
  );
}

function MetricStrip({ items }) {
  return (
    <div className="metric-strip">
      {items.map((it) => (
        <div key={it.label} className="cell">
          <small>{it.label}</small>
          <b style={it.color ? { color: it.color } : null}>{it.value}</b>
        </div>
      ))}
    </div>
  );
}

const SUITS = { '♠': 'black', '♣': 'black', '♥': 'red', '♦': 'red' };

function PlayingCard({ rank, suit, faceDown, playable }) {
  if (faceDown) return <div className="pcard back" aria-hidden="true" />;
  const isRed = SUITS[suit] === 'red';
  return (
    <div className={'pcard face' + (isRed ? ' red' : '') + (playable ? ' playable' : '')} aria-label={rank + ' ' + suit}>
      <div className="corner-tl">{rank}<span>{suit}</span></div>
      <div className="pip">{suit}</div>
      <div className="corner-br">{rank}</div>
    </div>
  );
}

function UserPill({ name, tier }) {
  return (
    <div className="user-pill">
      <div className="avatar">{name ? name[0].toUpperCase() : '?'}</div>
      <div>
        <b>{name || '—'}</b>
        <small>Tier · {tier}</small>
      </div>
    </div>
  );
}

Object.assign(window, {
  Shield, Button, Chip, Field, ModeSelector, PlayerRow, HUDPill, MetricStrip, PlayingCard, UserPill,
});