/* ============================================================
   CanchApp UI Kit — court detail + booking flow + bottom sheet
   ============================================================ */

function BottomSheet({ open, onClose, children }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, zIndex: 20, background: 'rgba(17,24,39,0.40)',
      display: 'flex', alignItems: 'flex-end', animation: 'ccFade 200ms ease',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', background: 'var(--surface)', borderRadius: '20px 20px 0 0',
        boxShadow: 'var(--shadow-sheet)', padding: 18, paddingBottom: 22,
        animation: 'ccSlideUp 240ms cubic-bezier(0.2,0.8,0.2,1)',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: 'var(--border)', margin: '0 auto 14px' }} />
        {children}
      </div>
    </div>
  );
}

function CourtDetailScreen({ court, onBook }) {
  const [slot, setSlot] = React.useState(null);
  const fee = 3000;
  return (
    <>
      <div style={{ flex: 1, overflowY: 'auto' }}>
        <CourtPhoto tint={court.tint} height={184}>
          <span style={{ position: 'absolute', top: 12, left: 12, 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' }}>{court.type}</span>
        </CourtPhoto>
        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <h1 className="cc-h1" style={{ font: 'var(--text-h1)', letterSpacing: 'var(--tracking-display)' }}>{court.name}</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, font: 'var(--text-caption)', color: 'var(--muted)' }}>
              <Icon name="mapPin" size={14} color="var(--muted)" />{court.barrio} · a {court.dist}
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Badge tone="teal" icon="star">{court.rating.toFixed(1).replace('.', ',')}</Badge>
            <Badge tone="neutral">{court.surface}</Badge>
            <Badge tone="success" dot>Abierta</Badge>
          </div>

          <div style={{ ...cardBase, padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, font: 'var(--text-caption)', color: 'var(--muted)' }}>
              <Icon name="clock" size={15} color="var(--muted)" />Horario: {court.open}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, font: 'var(--text-caption)', color: 'var(--muted)' }}>
              <Icon name="navigation" size={15} color="var(--muted)" />Cra. 52 #84-120, {court.barrio}
            </div>
          </div>

          <div>
            <SectionHeader title="Elige tu horario · hoy" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 8 }}>
              {SLOTS.map(s => {
                const state = SLOT_STATE[s];
                const taken = state === 'taken';
                const on = slot === s;
                return (
                  <button key={s} disabled={taken} onClick={() => setSlot(s)} style={{
                    minHeight: 44, borderRadius: 10, cursor: taken ? 'not-allowed' : 'pointer',
                    border: '1px solid ' + (on ? 'var(--primary)' : 'var(--border)'),
                    background: on ? 'var(--primary)' : taken ? 'var(--surface-sunk)' : 'var(--surface)',
                    color: on ? '#fff' : taken ? '#B6BCC6' : 'var(--ink)',
                    font: 'var(--text-label)', position: 'relative',
                    textDecoration: taken ? 'line-through' : 'none',
                  }}>
                    {s}
                    {state === 'low' && !on && <span style={{ position: 'absolute', top: -5, right: -5, width: 9, height: 9, borderRadius: 999, background: 'var(--accent)', border: '2px solid var(--surface)' }} />}
                  </button>
                );
              })}
            </div>
            <div style={{ display: 'flex', gap: 14, marginTop: 10, font: 'var(--text-caption)', color: 'var(--muted)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--accent)' }} />Pocos cupos</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--surface-sunk)', border: '1px solid var(--border)' }} />Ocupado</span>
            </div>
          </div>
        </div>
      </div>

      {/* Sticky booking bar */}
      <div style={{ flex: '0 0 auto', borderTop: '1px solid var(--border)', background: 'var(--surface)', padding: 14, display: 'flex', alignItems: 'center', gap: 14 }}>
        <div>
          <span className="cc-h3" style={{ font: 'var(--text-h3)' }}>{fmtCOP(court.price)}</span>
          <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)' }}> / hora</span>
        </div>
        <div style={{ flex: 1 }}>
          <Button variant="accent" full onClick={() => slot && onBook(court, slot, fee)} style={{ opacity: slot ? 1 : 0.5, pointerEvents: slot ? 'auto' : 'none' }}>
            {slot ? `Reservar · ${slot}` : 'Elige un horario'}
          </Button>
        </div>
      </div>
    </>
  );
}

function ConfirmSheet({ data, onConfirm }) {
  if (!data) return null;
  const { court, slot, fee } = data;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <span className="cc-h2" style={{ font: 'var(--text-h2)', letterSpacing: 'var(--tracking-tight)' }}>Confirma tu reserva</span>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ width: 48, height: 48, borderRadius: 12, background: court.tint, flex: '0 0 auto' }} />
        <div>
          <span className="cc-body-strong" style={{ font: 'var(--text-body-strong)' }}>{court.name}</span>
          <div style={{ font: 'var(--text-caption)', color: 'var(--muted)' }}>Hoy · {slot} · {court.type}</div>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', padding: '12px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Row label="Cancha (1 hora)" value={fmtCOP(court.price)} />
        <Row label="Servicio CanchApp" value={fmtCOP(fee)} />
        <Row label="Total" value={fmtCOP(court.price + fee)} strong />
      </div>
      <Button variant="primary" full leftIcon="check" onClick={onConfirm}>Confirmar y pagar</Button>
      <span className="cc-caption" style={{ font: 'var(--text-caption)', color: 'var(--muted)', textAlign: 'center' }}>Puedes cancelar gratis hasta 4 horas antes.</span>
    </div>
  );
}

function SuccessSheet({ court, slot, onClose }) {
  return (
    <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: '8px 0' }}>
      <span style={{ width: 60, height: 60, borderRadius: 999, background: 'var(--success-050)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="check" size={30} color="var(--success)" />
      </span>
      <span className="cc-h2" style={{ font: 'var(--text-h2)', letterSpacing: 'var(--tracking-tight)' }}>¡Reserva confirmada!</span>
      <span className="cc-body" style={{ font: 'var(--text-body)', color: 'var(--muted)' }}>{court.name} · Hoy {slot}. Te esperamos en la cancha.</span>
      <Button variant="primary" full onClick={onClose} style={{ marginTop: 6 }}>Ver mis reservas</Button>
    </div>
  );
}

function Row({ label, value, strong }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <span style={{ font: strong ? 'var(--text-body-strong)' : 'var(--text-body)', color: strong ? 'var(--ink)' : 'var(--muted)' }}>{label}</span>
      <span style={{ font: 'var(--text-body-strong)', color: strong ? 'var(--primary)' : 'var(--ink)' }}>{value}</span>
    </div>
  );
}

Object.assign(window, { BottomSheet, CourtDetailScreen, ConfirmSheet, SuccessSheet });