/* global React, Icon, Button, Modal, useToast, formatDateLong */

// ===========================================================
// Área 7 — Booking flow (3 steps)
// ===========================================================

const { useState: useSB, useEffect: useEB } = React;

function genReservationCode() {
  const now = Date.now().toString(36).slice(-4).toUpperCase();
  const rand = Math.floor(Math.random() * 46656).toString(36).toUpperCase().padStart(3, '0');
  return `SC-${now}${rand}`;
}

function BookingFlow({
  open, onClose, onConfirm,
  courts, prices,
  prefill,         // { courtId, date, hour }
  bookings,
}) {
  const [step, setStep] = useSB(1);
  const [data, setData] = useSB({
    courtId: prefill?.courtId || courts[0]?.id,
    date: prefill?.date || null,
    hour: prefill?.hour || null,
    nombre: '',
    telefono: '',
    email: '',
    grabacion: false,        // false | 'completo' | 'clips'
    notas: '',
  });
  const [code, setCode] = useSB(null);
  const [errors, setErrors] = useSB({});

  // Re-prefill when reopened
  useEB(() => {
    if (open) {
      setStep(1);
      setCode(null);
      setData(d => ({
        ...d,
        courtId: prefill?.courtId || d.courtId,
        date: prefill?.date || d.date,
        hour: prefill?.hour || d.hour,
      }));
    }
  }, [open, prefill?.courtId, prefill?.date, prefill?.hour]);

  const court = courts.find(c => c.id === data.courtId);
  const price = prices[data.courtId] ?? court?.price ?? 0;
  const grabPrice = data.grabacion === 'completo' ? 8000 : data.grabacion === 'clips' ? 4500 : 0;
  const total = price + grabPrice;

  const toast = useToast();

  function validateStep1() {
    if (!data.courtId || !data.date || !data.hour) return 'Elegí cancha, fecha y horario.';
    // re-check the slot isn't taken (race condition)
    const key = `${data.courtId}|${data.date}|${data.hour}`;
    if (bookings[key] === 'reservado') return 'Ese turno ya fue tomado. Elegí otro.';
    return null;
  }
  function validateStep2() {
    const e = {};
    if (!data.nombre.trim() || data.nombre.trim().length < 3) e.nombre = 'Necesitamos tu nombre completo.';
    if (!/^[\d +()-]{8,}$/.test(data.telefono.trim())) e.telefono = 'Teléfono inválido.';
    if (data.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email.trim())) e.email = 'Email inválido.';
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function next() {
    if (step === 1) {
      const err = validateStep1();
      if (err) { toast(err, 'error'); return; }
      setStep(2);
    } else if (step === 2) {
      if (!validateStep2()) return;
      // Confirm
      const c = genReservationCode();
      setCode(c);
      onConfirm({ ...data, code: c, total });
      setStep(3);
    }
  }

  function close() {
    onClose();
    setTimeout(() => { setStep(1); setCode(null); setErrors({}); }, 250);
  }

  function goToCalendar() {
    close();
    setTimeout(() => {
      document.getElementById('reservar')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 300);
  }

  return (
    <Modal open={open} onClose={close} maxWidth={560}>
      {/* Header */}
      <div style={{
        padding: '20px 24px',
        borderBottom: '1px solid var(--hair-2)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div className="eyebrow">Reserva</div>
          <div style={{ fontWeight: 800, fontSize: 22, marginTop: 6 }}>
            {step === 1 && 'Elegí tu turno'}
            {step === 2 && 'Tus datos'}
            {step === 3 && '¡Listo!'}
          </div>
        </div>
        <button
          onClick={close}
          style={{
            width: 36, height: 36, borderRadius: 999, background: 'var(--surface-2)',
            boxShadow: 'inset 0 0 0 1px var(--hair-3)', display: 'inline-flex',
            alignItems: 'center', justifyContent: 'center',
          }}
          aria-label="Cerrar"
        ><Icon name="close" size={16}/></button>
      </div>

      {/* Stepper */}
      {step < 3 && (
        <div style={{ display: 'flex', gap: 8, padding: '16px 24px 0' }}>
          {[1, 2, 3].map(n => (
            <div key={n} style={{
              flex: 1, height: 4, borderRadius: 99,
              background: n <= step ? 'var(--accent)' : 'var(--hair-2)',
              transition: 'background 250ms ease',
            }}/>
          ))}
        </div>
      )}

      {/* Body */}
      <div style={{ padding: 24 }}>
        {step === 1 && (
          <Step1
            data={data} setData={setData}
            courts={courts} prices={prices} court={court}
            bookings={bookings}
            onGoToCalendar={goToCalendar}
          />
        )}
        {step === 2 && (
          <Step2 data={data} setData={setData} errors={errors}/>
        )}
        {step === 3 && (
          <Step3 data={data} code={code} court={court} total={total} grabPrice={grabPrice}/>
        )}
      </div>

      {/* Footer */}
      <div style={{
        padding: '16px 24px 24px',
        display: 'flex', gap: 12, alignItems: 'center', justifyContent: 'space-between',
        borderTop: '1px solid var(--hair-2)',
      }}>
        {step === 1 && (
          <>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.1em', color: 'var(--fill-tertiary)' }}>TOTAL</span>
              <span className="num" style={{ fontSize: 24, fontWeight: 900, color: 'var(--accent)' }}>
                ${total.toLocaleString('es-AR')}
              </span>
            </div>
            <Button onClick={next} iconAfter="arrow-right" disabled={!data.date || !data.hour}>Siguiente</Button>
          </>
        )}
        {step === 2 && (
          <>
            <Button variant="ghost" icon="arrow-left" onClick={() => setStep(1)}>Atrás</Button>
            <Button onClick={next} iconAfter="arrow-right">Confirmar reserva</Button>
          </>
        )}
        {step === 3 && (
          <>
            <Button variant="ghost" onClick={close}>Cerrar</Button>
            <Button icon="whatsapp" onClick={() => {
              const clipboard = String.fromCodePoint(0x1F4CB);
              const calendar = String.fromCodePoint(0x1F4C5);
              const clock = String.fromCodePoint(0x1F552);
              const person = String.fromCodePoint(0x1F464);
              const soccer = String.fromCodePoint(0x26BD);
              const msg = encodeURIComponent(
                `${soccer} Hola! Reservé la cancha de Fútbol 7.\n` +
                `${clipboard} Código: ${code}\n` +
                `${calendar} Fecha: ${formatDateLong(data.date)}\n` +
                `${clock} Hora: ${data.hour} hs\n` +
                `${person} Nombre: ${data.nombre}\n` +
                `Quedo a la espera de confirmación. ¡Gracias!`
              );
              window.open(`https://api.whatsapp.com/send?phone=542617747501&text=${msg}`, '_blank');
            }}>Avisarnos por WhatsApp</Button>
          </>
        )}
      </div>
    </Modal>
  );
}

// ---------- Step 1: cancha + fecha + horario ----------
function Step1({ data, setData, courts, prices, court, bookings, onGoToCalendar }) {
  return (
    <div className="col gap-20">
      <div>
        <Label>Cancha</Label>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {courts.map(c => {
            const active = c.id === data.courtId;
            return (
              <button
                key={c.id}
                onClick={() => setData(d => ({ ...d, courtId: c.id, hour: null }))}
                style={{
                  padding: '14px 18px', borderRadius: 14, flex: '1 1 auto',
                  background: active ? 'var(--accent-soft)' : 'var(--surface-2)',
                  boxShadow: `inset 0 0 0 1.5px ${active ? 'var(--accent)' : 'var(--hair-3)'}`,
                  display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4, minWidth: 130,
                  transition: 'all 150ms ease',
                }}
              >
                <span style={{
                  fontSize: 10, fontWeight: 900, letterSpacing: '0.1em',
                  color: active ? 'var(--accent)' : 'var(--fill-tertiary)',
                }}>{c.type || 'CANCHA'}</span>
                <span style={{ fontWeight: 800, fontSize: 18, color: active ? 'var(--fill-primary)' : 'var(--fill-primary)' }}>
                  {c.name}
                </span>
                <span className="num" style={{ fontSize: 13, color: 'var(--fill-secondary)' }}>
                  ${(prices[c.id] ?? c.price).toLocaleString('es-AR')} / hora
                </span>
              </button>
            );
          })}
        </div>
      </div>

      <Summary
        items={[
          { label: 'Fecha', value: data.date ? formatDateLong(data.date) : 'Elegí en el calendario →', muted: !data.date, onClick: !data.date ? onGoToCalendar : undefined },
          { label: 'Hora', value: data.hour ? `${data.hour} hs · ${court?.name || ''}` : 'Elegí en el calendario →', muted: !data.hour, onClick: !data.hour ? onGoToCalendar : undefined },
        ]}
      />

      <div className="card" style={{ padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 900, letterSpacing: '0.12em', color: 'var(--accent)', marginBottom: 6 }}>
              EXTRA · GRABACIÓN
            </div>
            <div style={{ fontWeight: 800, fontSize: 16 }}>Quiero que graben mi partido</div>
            <div style={{ fontSize: 13, color: 'var(--fill-secondary)', marginTop: 4 }}>
              Vivilo de nuevo. Te lo mandamos por WhatsApp.
            </div>
          </div>
          <Toggle
            checked={!!data.grabacion}
            onChange={v => setData(d => ({ ...d, grabacion: v ? 'completo' : false }))}
          />
        </div>
        {data.grabacion && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 14 }}>
            {[
              { v: 'completo', label: 'Partido completo', price: 8000, sub: 'HD · 60 min' },
              { v: 'clips', label: 'Mis mejores jugadas', price: 4500, sub: 'Clips editados' },
            ].map(o => {
              const active = data.grabacion === o.v;
              return (
                <button
                  key={o.v}
                  onClick={() => setData(d => ({ ...d, grabacion: o.v }))}
                  style={{
                    padding: 12, borderRadius: 12, textAlign: 'left',
                    background: active ? 'var(--accent-soft)' : 'transparent',
                    boxShadow: `inset 0 0 0 1.5px ${active ? 'var(--accent)' : 'var(--hair-3)'}`,
                  }}
                >
                  <div style={{ fontWeight: 800, fontSize: 13 }}>{o.label}</div>
                  <div style={{ fontSize: 11, color: 'var(--fill-tertiary)', marginTop: 2 }}>{o.sub}</div>
                  <div className="num" style={{ fontSize: 13, fontWeight: 800, color: 'var(--accent)', marginTop: 4 }}>
                    +${o.price.toLocaleString('es-AR')}
                  </div>
                </button>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// ---------- Step 2: datos ----------
function Step2({ data, setData, errors }) {
  return (
    <div className="col gap-16">
      <Summary
        items={[
          { label: 'Reservás', value: `${data.date ? formatDateLong(data.date) : ''} · ${data.hour} hs` },
        ]}
      />
      <Field label="Nombre completo" error={errors.nombre}>
        <input
          value={data.nombre}
          onChange={e => setData(d => ({ ...d, nombre: e.target.value }))}
          placeholder="Lionel Messi"
          autoComplete="name"
        />
      </Field>
      <Field label="WhatsApp" hint="Te mandamos la confirmación acá" error={errors.telefono}>
        <input
          value={data.telefono}
          onChange={e => setData(d => ({ ...d, telefono: e.target.value }))}
          placeholder="+54 2622 12 3456"
          inputMode="tel"
        />
      </Field>
      <Field label="Email (opcional)" error={errors.email}>
        <input
          value={data.email}
          onChange={e => setData(d => ({ ...d, email: e.target.value }))}
          placeholder="tu@email.com"
          autoComplete="email"
          inputMode="email"
        />
      </Field>
      <Field label="Notas (opcional)" hint="Cumpleaños, torneo, lo que necesites">
        <textarea
          value={data.notas}
          onChange={e => setData(d => ({ ...d, notas: e.target.value }))}
          placeholder="Festejamos un cumpleaños, ¿se puede usar el quincho después?"
          rows={2}
        />
      </Field>
      <div style={{
        padding: 12, background: 'rgba(90,247,169,0.06)',
        borderRadius: 12, boxShadow: 'inset 0 0 0 1px rgba(90,247,169,0.18)',
        fontSize: 13, color: 'var(--fill-secondary)', display: 'flex', gap: 10,
      }}>
        <Icon name="info" size={16} color="var(--accent)"/>
        <span>Reservás sin tarjeta. Pagás <b style={{ color: 'var(--fill-primary)' }}>al llegar</b> a la cancha (efectivo o transferencia).</span>
      </div>
    </div>
  );
}

// ---------- Step 3: confirmación ----------
function Step3({ data, code, court, total, grabPrice }) {
  return (
    <div className="col gap-20" style={{ alignItems: 'center', textAlign: 'center' }}>
      <div style={{
        width: 88, height: 88, borderRadius: '50%',
        background: 'var(--accent)', color: 'var(--accent-ink)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 0 60px var(--accent-glow)',
      }}>
        <Icon name="check" size={44} stroke={3} color="currentColor"/>
      </div>
      <div>
        <div className="h-display" style={{ fontSize: 40 }}>Cancha reservada</div>
        <div style={{ marginTop: 8, color: 'var(--fill-secondary)' }}>
          Te mandamos la confirmación por WhatsApp al <b style={{ color: 'var(--fill-primary)' }}>{data.telefono}</b>.
        </div>
      </div>
      <div style={{
        width: '100%', padding: 16, borderRadius: 14,
        background: 'var(--surface-1)', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="eyebrow eyebrow-muted">Código de reserva</span>
          <span className="num" style={{ fontWeight: 900, fontSize: 20, color: 'var(--accent)', letterSpacing: '0.04em' }}>
            {code}
          </span>
        </div>
        <div className="hr"/>
        <Row k="Cancha" v={court?.name}/>
        <Row k="Cuándo" v={`${formatDateLong(data.date)} · ${data.hour} hs`}/>
        <Row k="A nombre de" v={data.nombre}/>
        {data.grabacion && <Row k="Grabación" v={data.grabacion === 'completo' ? 'Partido completo' : 'Mis jugadas (clips)'} accent/>}
        <div className="hr"/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--fill-secondary)' }}>Total a pagar</span>
          <span className="num" style={{ fontWeight: 900, fontSize: 28, color: 'var(--accent)' }}>
            ${total.toLocaleString('es-AR')}
          </span>
        </div>
      </div>
    </div>
  );
}

// ---------- helpers ----------
function Label({ children }) {
  return (
    <div className="eyebrow eyebrow-muted" style={{ marginBottom: 10 }}>{children}</div>
  );
}

function Field({ label, hint, error, children }) {
  return (
    <div>
      <div className="eyebrow eyebrow-muted" style={{ marginBottom: 8, color: error ? '#f87171' : 'var(--fill-tertiary)' }}>
        {label}
      </div>
      <div style={{
        background: 'var(--surface-2)',
        borderRadius: 14,
        boxShadow: `inset 0 0 0 1.5px ${error ? 'rgba(244,63,94,0.5)' : 'var(--hair-3)'}`,
        padding: '14px 16px',
        transition: 'box-shadow 150ms ease',
      }}
      className="a7-field"
      >
        {React.cloneElement(children, {
          style: {
            width: '100%', background: 'transparent', border: 0, outline: 0,
            color: 'var(--fill-primary)', fontSize: 16, fontWeight: 500,
            resize: 'none',
            ...children.props.style,
          },
        })}
      </div>
      {(hint || error) && (
        <div style={{ fontSize: 12, marginTop: 6, color: error ? '#f87171' : 'var(--fill-tertiary)' }}>
          {error || hint}
        </div>
      )}
    </div>
  );
}

function Toggle({ checked, onChange }) {
  return (
    <button
      onClick={() => onChange(!checked)}
      style={{
        width: 52, height: 30, borderRadius: 999,
        background: checked ? 'var(--accent)' : 'var(--surface-3)',
        position: 'relative', transition: 'background 200ms ease',
        flexShrink: 0,
      }}
      aria-pressed={checked}
    >
      <span style={{
        position: 'absolute', top: 3, left: checked ? 25 : 3,
        width: 24, height: 24, borderRadius: '50%',
        background: checked ? 'var(--accent-ink)' : '#fbfbfb',
        transition: 'left 200ms cubic-bezier(0.2,0.8,0.2,1)',
        boxShadow: '0 2px 6px rgba(0,0,0,0.4)',
      }}/>
    </button>
  );
}

function Summary({ items }) {
  return (
    <div style={{
      padding: 14, borderRadius: 14,
      background: 'var(--surface-1)', boxShadow: 'inset 0 0 0 1px var(--hair-3)',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {items.map((it, i) => (
        <div
          key={i}
          onClick={it.onClick}
          style={it.onClick ? { cursor: 'pointer' } : undefined}
        >
          <Row k={it.label} v={it.value} muted={it.muted} accent={it.onClick}/>
        </div>
      ))}
    </div>
  );
}

function Row({ k, v, muted, accent }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
      <span style={{ fontSize: 13, color: 'var(--fill-tertiary)', textTransform: 'uppercase', fontWeight: 700, letterSpacing: '0.04em' }}>{k}</span>
      <span style={{
        fontSize: 14, fontWeight: 700, textAlign: 'right',
        color: muted ? 'var(--fill-tertiary)' : accent ? 'var(--accent)' : 'var(--fill-primary)',
      }}>{v}</span>
    </div>
  );
}

Object.assign(window, { BookingFlow, genReservationCode });