/* ============================================================
   CanchApp UI Kit — content cards
   ============================================================ */

const cardBase = {
  background: 'var(--surface)', border: '1px solid var(--border)',
  borderRadius: 'var(--radius-card)', boxShadow: 'var(--shadow-card)', overflow: 'hidden',
};

// Full court card with photo (used in lists)
function CourtCard({ court, onOpen }) {
  const sold = court.slotsLeft === 0;
  return (
    <div style={{ ...cardBase, cursor: sold ? 'default' : 'pointer', opacity: sold ? 0.72 : 1 }}
      onClick={() => !sold && onOpen(court)}>
      <CourtPhoto tint={court.tint}>
        <span style={pinTag}>{court.type}</span>
        <span style={priceTag}>{fmtCOP(court.price)} / hora</span>
      </CourtPhoto>
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span className="cc-h3" style={{ font: 'var(--text-h3)', letterSpacing: 'var(--tracking-tight)' }}>{court.name}</span>
        <div style={metaRow}>
          <span style={metaItem}><Icon name="mapPin" size={14} color="var(--muted)" />{court.barrio}</span>
          <span>· a {court.dist}</span>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Badge tone="teal" icon="star">{court.rating.toFixed(1).replace('.', ',')}</Badge>
          {sold
            ? <Badge tone="error">Sin horarios hoy</Badge>
            : court.slotsLeft <= 2
              ? <Badge tone="amber" dot>Quedan {court.slotsLeft} horarios</Badge>
              : <Badge tone="success" dot>Disponible</Badge>}
        </div>
      </div>
    </div>
  );
}

// Compact court tile for horizontal "destacadas" rail
function CourtTile({ court, onOpen }) {
  return (
    <div style={{ ...cardBase, width: 200, flex: '0 0 auto', cursor: 'pointer' }} onClick={() => onOpen(court)}>
      <CourtPhoto tint={court.tint} height={92}>
        <span style={priceTag}>{fmtCOP(court.price)}</span>
      </CourtPhoto>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 5 }}>
        <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{court.name}</span>
        <div style={metaRow}><Icon name="star" size={13} color="var(--accent)" fill="var(--accent)" /><span style={{ color: 'var(--ink)' }}>{court.rating.toFixed(1).replace('.', ',')}</span><span>· {court.barrio}</span></div>
      </div>
    </div>
  );
}

function PickupCard({ game, onJoin }) {
  const pct = Math.round((game.filled / game.total) * 100);
  const almostFull = game.total - game.filled <= 2;
  return (
    <div style={{ ...cardBase, padding: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{ width: 46, height: 46, borderRadius: 12, background: game.tint, flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="zap" size={20} color="#fff" fill="#fff" />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
            <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)' }}>{game.court}</span>
            <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)', color: 'var(--primary)', whiteSpace: 'nowrap' }}>{fmtCOP(game.price)}</span>
          </div>
          <div style={metaRow}><Icon name="clock" size={13} color="var(--muted)" />{game.time}<span>· {game.type}</span></div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
        <Badge tone="neutral">{game.level}</Badge>
        <Badge tone="neutral" icon="user">{game.host}</Badge>
        {almostFull && <Badge tone="amber" dot>Quedan {game.total - game.filled} cupos</Badge>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ height: 6, borderRadius: 999, background: 'var(--surface-sunk)', overflow: 'hidden' }}>
            <div style={{ width: pct + '%', height: '100%', background: almostFull ? 'var(--accent)' : 'var(--primary)' }} />
          </div>
          <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)', marginTop: 4, display: 'block' }}>{game.filled}/{game.total} jugadores</span>
        </div>
        <Button variant={almostFull ? 'accent' : 'primary'} size="sm" onClick={() => onJoin(game)}>Unirme</Button>
      </div>
    </div>
  );
}

const RES_STATUS = {
  confirmed: { tone: 'success', label: 'Confirmado' },
  pending: { tone: 'amber', label: 'Pendiente de pago' },
  cancelled: { tone: 'error', label: 'Cancelado' },
};
function ReservationCard({ res }) {
  const s = RES_STATUS[res.status];
  return (
    <div style={{ ...cardBase, padding: 12, display: 'flex', gap: 12, alignItems: 'center', opacity: res.status === 'cancelled' ? 0.66 : 1 }}>
      <div style={{ width: 52, height: 52, borderRadius: 12, background: res.tint, flex: '0 0 auto' }} />
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{res.court}</span>
        <div style={metaRow}><Icon name="calendar" size={13} color="var(--muted)" />{res.when}</div>
        <Badge tone={s.tone} dot style={{ alignSelf: 'flex-start' }}>{s.label}</Badge>
      </div>
      <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)', whiteSpace: 'nowrap' }}>{fmtCOP(res.price)}</span>
    </div>
  );
}

function TournamentCard({ t }) {
  return (
    <div style={{ ...cardBase, flex: '0 0 auto', width: 240, cursor: 'pointer' }}>
      <CourtPhoto tint={t.tint} height={70}>
        <Badge tone="amber" icon="trophy" style={{ background: 'rgba(255,255,255,0.92)' }}>{t.prize}</Badge>
      </CourtPhoto>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 5 }}>
        <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)' }}>{t.name}</span>
        <div style={metaRow}><Icon name="users" size={13} color="var(--muted)" />{t.teams} equipos<span>· inicia {t.starts}</span></div>
      </div>
    </div>
  );
}

// Shared inline styles
const pinTag = { position: 'absolute', top: 10, left: 10, background: 'rgba(17,24,39,0.55)', color: '#fff', font: 'var(--text-micro)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', padding: '4px 9px', borderRadius: 999, whiteSpace: 'nowrap' };
const priceTag = { background: 'var(--accent)', color: 'var(--ink)', font: 'var(--text-label)', padding: '5px 11px', borderRadius: 999, whiteSpace: 'nowrap' };
const metaRow = { display: 'flex', alignItems: 'center', gap: 6, font: 'var(--text-caption)', color: 'var(--muted)' };
const metaItem = { display: 'inline-flex', alignItems: 'center', gap: 4 };

Object.assign(window, { CourtCard, CourtTile, PickupCard, ReservationCard, TournamentCard, cardBase });