const { Card, Button, Badge, Divider, Field, Input, Checkbox, Textarea, Tabs, ScheduleRow, Radio, SectionLabel } = window.PilatesLifeStudioDesignSystem_f49721;

const MODES = [
  ['grupal', 'Clase grupal', 'Máximo seis personas, una camilla por persona.', 'reformer'],
  ['privada', 'Clase privada', 'Camilla individual, horario a convenir.', 'private'],
  ['valoracion', 'Valoración (primera vez)', 'Sesión individual de evaluación para quienes empiezan.', 'private'],
];

const FORM_INICIAL = { notas: '', acepta: true };

function BookingPage({ onSubmit, onGoToPrecios, onNavigate, sesion, refreshSignal, resetSignal }) {
  const dias = React.useMemo(() => proximosDias(7), []);
  const [mode, setMode] = React.useState('grupal');
  const [fecha, setFecha] = React.useState(dias[0].id);
  const [horarios, setHorarios] = React.useState([]);
  const [cerradoNocturno, setCerradoNocturno] = React.useState(false);
  const [esDomingo, setEsDomingo] = React.useState(false);
  const [motivoBloqueo, setMotivoBloqueo] = React.useState(null);
  const [cargando, setCargando] = React.useState(false);
  const [errorCarga, setErrorCarga] = React.useState('');
  const [selected, setSelected] = React.useState(null);
  const [form, setForm] = React.useState(FORM_INICIAL);
  const [errorForm, setErrorForm] = React.useState('');
  const [esperaBusy, setEsperaBusy] = React.useState(null);
  const [esperaMsg, setEsperaMsg] = React.useState(null);

  React.useEffect(() => { setSelected(null); setEsperaMsg(null); }, [mode, fecha]);

  React.useEffect(() => {
    let vigente = true;
    setCargando(true);
    setErrorCarga('');
    fetchDisponibilidad(fecha, mode)
      .then(datos => {
        if (vigente) {
          setHorarios(datos.horarios);
          setCerradoNocturno(Boolean(datos.cerrado_nocturno));
          setEsDomingo(Boolean(datos.es_domingo));
          setMotivoBloqueo(datos.motivo_bloqueo ?? null);
        }
      })
      .catch(err => { if (vigente) setErrorCarga(err.message); })
      .finally(() => { if (vigente) setCargando(false); });
    return () => { vigente = false; };
  }, [fecha, mode, refreshSignal]);

  React.useEffect(() => {
    if (resetSignal) {
      setSelected(null);
      setForm(FORM_INICIAL);
    }
  }, [resetSignal]);

  const campo = (clave) => (e) => setForm({ ...form, [clave]: e.target.value });

  // Anotarse a la lista de espera de un horario lleno (ver ScheduleRow: cuando spots=0 y
  // hay onAction, el botón ya se llama "Esperar" por diseño). No hace falta refetch: se
  // marca en_lista_espera=true localmente para que el botón deje de ofrecerse dos veces.
  const anotarseListaEspera = (hora) => {
    if (esperaBusy) return;
    setEsperaBusy(hora);
    setEsperaMsg(null);
    unirseListaEspera({ fecha, hora, tipo: mode })
      .then(() => {
        setHorarios(prev => prev.map(x => x.hora === hora ? { ...x, en_lista_espera: true } : x));
        setEsperaMsg({ tono: 'ok', texto: 'Listo, te avisaremos por WhatsApp si se libera un cupo.' });
      })
      .catch(err => setEsperaMsg({ tono: 'error', texto: err.message }))
      .finally(() => setEsperaBusy(null));
  };

  const confirmar = () => {
    if (!selected) return setErrorForm('Elige un horario disponible.');
    if (!form.acepta) return setErrorForm('Acepta la política de cancelación para continuar.');

    setErrorForm('');
    onSubmit({
      fecha: selected.fecha,
      hora: selected.hora,
      etiqueta: selected.etiqueta,
      tipo: mode,
      notas: form.notas.trim(),
    });
  };

  // Reservar ya no es anónimo: hace falta cuenta y al menos un crédito disponible.
  // `sesion` llega desde Site.jsx: null mientras se consulta, false si no hay sesión,
  // o el objeto de mi_cuenta.php si el cliente está logueado.
  if (sesion === null) {
    return (
      <section className="section">
        <div className="wrap">
          <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>Cargando…</p>
        </div>
      </section>
    );
  }
  if (sesion === false) {
    return (
      <section className="section">
        <div className="wrap" style={{ maxWidth: 480 }}>
          <div className="eyebrow">Reservar</div>
          <h2 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>Inicia sesión para reservar</h2>
          <Card padding="var(--space-6)">
            <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginBottom: 'var(--space-5)' }}>
              Solo clientes registrados con créditos en su tiquetera pueden reservar. Si ya tienes cuenta, inicia sesión; si no, créala en un minuto.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
              <Button onClick={() => onNavigate('login')}>Iniciar sesión</Button>
              <Button variant="ghost" onClick={() => onNavigate('registro')}>Crear cuenta</Button>
            </div>
          </Card>
        </div>
      </section>
    );
  }
  if ((sesion.cliente?.saldo_tiquetera ?? 0) < 1) {
    return (
      <section className="section">
        <div className="wrap" style={{ maxWidth: 480 }}>
          <div className="eyebrow">Reservar</div>
          <h2 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>No te quedan créditos</h2>
          <Card padding="var(--space-6)">
            <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginBottom: 'var(--space-5)' }}>
              Tu tiquetera está en 0. Escríbenos para recargarla y poder reservar tu próxima clase.
            </p>
            <Button variant="inverse" onClick={() => window.open(WHATSAPP, '_blank')}>Escríbenos en WhatsApp</Button>
          </Card>
        </div>
      </section>
    );
  }

  return (
    <section className="section">
      <div className="wrap">
        <div className="eyebrow">Reservar</div>
        <h2 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>Compra tu clase y reserva en línea</h2>
        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 300px', gap: 'var(--space-6)', alignItems: 'start' }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>1 · Modalidad</div>
            <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-4)', margin: 'var(--space-4) 0 var(--space-7)' }}>
              {MODES.map(([id, t, d]) => (
                <Card key={id} tone={mode === id ? 'ink' : 'surface'} interactive onClick={() => setMode(id)} padding="var(--space-5)">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Radio checked={mode === id} onChange={() => setMode(id)} />
                    <span style={{ fontSize: 'var(--size-body)', color: mode === id ? 'var(--white)' : 'var(--ink)' }}>{t}</span>
                  </div>
                  <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 10, color: mode === id ? 'var(--bone)' : 'var(--text-body)' }}>{d}</p>
                </Card>
              ))}
            </div>
            <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: -12, marginBottom: 'var(--space-6)' }}>
              ¿Solo quieres ver precios? <a href="#" onClick={(e) => { e.preventDefault(); onGoToPrecios(); }}>Consulta los planes</a>.
            </p>

            <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>2 · Horario</div>
            <div style={{ margin: 'var(--space-4) 0 var(--space-7)' }}>
              <Tabs items={dias} active={fecha} onChange={setFecha} />
              <div style={{ marginTop: 'var(--space-4)' }}>
                {cargando && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>Cargando horarios…</p>}
                {!cargando && errorCarga && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{errorCarga}</p>}
                {!cargando && !errorCarga && cerradoNocturno && (
                  <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>Las reservas para este día están cerradas de 9:00 pm a 8:00 am. Vuelve a intentarlo después de las 8:00 am.</p>
                )}
                {!cargando && !errorCarga && !cerradoNocturno && horarios.length === 0 && (
                  <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>
                    {esDomingo
                      ? 'El estudio no abre los domingos. Elige otro día.'
                      : motivoBloqueo
                        ? `Este día no está disponible: ${motivoBloqueo}`
                        : 'Este día no está disponible para reservas. Elige otro día.'}
                  </p>
                )}
                {!cargando && !errorCarga && !cerradoNocturno && esperaMsg && (
                  <p style={{ fontSize: 'var(--size-body-sm)', color: esperaMsg.tono === 'ok' ? 'var(--moss)' : 'var(--coral)', margin: '0 0 var(--space-3)' }}>
                    {esperaMsg.texto}
                  </p>
                )}
                {!cargando && !errorCarga && !cerradoNocturno && horarios.map(h => {
                  const lleno = !h.pasado && !h.cierra_pronto && !h.bloqueado && !h.disponible;
                  const titulo = h.pasado ? 'Ya pasó' : (h.cierra_pronto || h.bloqueado) ? 'Cerrado'
                    : h.disponible ? 'Disponible' : (h.en_lista_espera ? 'Sin cupo · ya estás en la lista de espera' : 'Sin cupo');
                  return (
                    <ScheduleRow key={h.hora} time={h.hora} title={titulo}
                      family={mode === 'grupal' ? 'reformer' : 'private'} instructor={null} duration="60 min"
                      spots={(h.pasado || h.cierra_pronto || h.bloqueado) ? undefined : (mode === 'grupal' ? h.cupos_libres : (h.disponible ? 1 : 0))}
                      selected={Boolean(selected && selected.hora === h.hora)}
                      onAction={
                        (h.pasado || h.cierra_pronto || h.bloqueado) ? undefined
                          : h.disponible ? () => {
                            const yaEstaSeleccionado = selected && selected.hora === h.hora;
                            setSelected(yaEstaSeleccionado ? null : { fecha, hora: h.hora, etiqueta: h.etiqueta });
                          }
                          : (lleno && !h.en_lista_espera) ? () => anotarseListaEspera(h.hora)
                          : undefined
                      }
                      style={selected && selected.hora === h.hora ? { background: 'var(--surface-page-alt)', boxShadow: 'inset 3px 0 0 var(--blue)' } : undefined} />
                  );
                })}
              </div>
            </div>

            <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>3 · Detalles adicionales</div>
            <div style={{ marginTop: 'var(--space-4)' }}>
              <Field label="¿Alguna lesión o molestia que debamos saber?" htmlFor="bnote">
                <Textarea id="bnote" rows={3} placeholder="Cuéntanos brevemente." value={form.notas} onChange={campo('notas')} />
              </Field>
            </div>

            {selected && (
              <p style={{ marginTop: 'var(--space-4)', fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>
                Elegiste: {MODES.find(m => m[0] === mode)[1]} · {selected.fecha} · {selected.etiqueta}
              </p>
            )}
            {errorForm && <p style={{ marginTop: 'var(--space-2)', fontSize: 'var(--size-body-sm)', color: 'var(--coral)' }}>{errorForm}</p>}

            <div style={{ marginTop: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Checkbox checked={form.acepta} onChange={(e) => setForm({ ...form, acepta: e.target.checked })}
                label="Acepto la política de cancelación (mínimo 6 horas antes, entre 8am y 9pm)" />
              <Button size="lg" onClick={confirmar} style={{ alignSelf: 'flex-start' }}>Confirmar reserva</Button>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Card tone="ink" padding="var(--space-6)">
              <Badge tone="accent">Más rápido</Badge>
              <h3 style={{ color: 'var(--white)', fontSize: 22, margin: '16px 0 10px' }}>Reserva por WhatsApp</h3>
              <p style={{ color: 'var(--bone)', fontSize: 'var(--size-body-sm)' }}>
                Escríbenos y {CONTACT.person.split(' ')[0]} te confirma el cupo y el pago del paquete el mismo día.
              </p>
              <Divider tone="inverse" style={{ margin: 'var(--space-5) 0' }} />
              <div style={{ color: 'var(--aqua)', fontSize: 'var(--size-body)' }}>{CONTACT.phone}</div>
              <Button variant="inverse" fullWidth onClick={() => window.open(WHATSAPP, '_blank')} style={{ marginTop: 'var(--space-4)' }}>
                Escríbenos en WhatsApp
              </Button>
            </Card>
            <Card tone="mist" padding="var(--space-6)">
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Antes de tu primera clase</div>
              <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {['Llega diez minutos antes.', 'Ropa ajustada y calcetines antideslizantes.', 'Cancela con al menos 6 horas de anticipación, entre 8am y 9pm.'].map(t => (
                  <li key={t} style={{ fontSize: 'var(--size-body-sm)', display: 'flex', gap: 10 }}>
                    <span style={{ color: 'var(--steel)' }}>&mdash;</span>{t}
                  </li>
                ))}
              </ul>
            </Card>
            <Card padding="var(--space-6)">
              <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Dónde estamos</div>
              <p style={{ marginTop: 10, color: 'var(--ink)' }}>{CONTACT.building}</p>
              <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 4 }}>{CONTACT.address}<br />{CONTACT.city}</p>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BookingPage });