const { Card, Button, Badge, Field, Input, Avatar, StatBlock, ScheduleRow, Dialog, Toast } = window.PilatesLifeStudioDesignSystem_f49721;

const TIPO_LABEL_CUENTA = { grupal: 'Clase grupal', privada: 'Clase privada', valoracion: 'Valoración' };
const ESTADO_BADGE = { confirmada: 'info', completada: 'success', cancelada: 'neutral' };
const ESTADO_LABEL = { confirmada: 'Confirmada', completada: 'Asistida', cancelada: 'Cancelada' };

const TABS_CUENTA = [
  { id: 'resumen', label: 'Resumen' },
  { id: 'reservas', label: 'Mis reservas' },
  { id: 'plan', label: 'Mi tiquetera' },
  { id: 'datos', label: 'Mis datos' },
];

// Mismo criterio que motivo_no_cancelable() en reservas/lib/helpers.php: solo entre
// 8:00 am y 9:00 pm, y con al menos 6 horas de anticipación a la clase. Es una
// verificación de UI (para no mostrar un botón que el servidor va a rechazar) — la
// regla real que manda siempre es la del backend.
function puedeCancelarAhora(reserva) {
  const ahora = new Date();
  const minutosDelDia = ahora.getHours() * 60 + ahora.getMinutes();
  if (minutosDelDia < 8 * 60 || minutosDelDia >= 21 * 60) return false;
  const inicioClase = new Date(`${reserva.fecha}T${reserva.hora}:00`);
  const limite = new Date(inicioClase.getTime() - 6 * 60 * 60 * 1000);
  return ahora <= limite;
}

function formatearMiembroDesde(fechaSql) {
  const d = new Date(String(fechaSql || '').replace(' ', 'T'));
  if (Number.isNaN(d.getTime())) return '';
  const texto = d.toLocaleDateString('es-CO', { month: 'long', year: 'numeric' });
  return 'Cliente desde ' + texto;
}

function formatearFechaVencimiento(fechaSql) {
  const d = new Date(String(fechaSql || '').replace(' ', 'T'));
  if (Number.isNaN(d.getTime())) return '';
  return d.toLocaleDateString('es-CO', { day: 'numeric', month: 'long', year: 'numeric' });
}

function MiCuentaPage({ sesion, onNavigate, onCambio, onLogout }) {
  const cliente = sesion.cliente;
  const proximas = sesion.proximas_reservas || [];
  const historial = sesion.historial_reservas || [];
  const movimientos = sesion.movimientos || [];
  const listaEspera = sesion.lista_espera || [];
  const creditosPorVencer = sesion.creditos_por_vencer || [];

  const [tab, setTab] = React.useState('resumen');
  const [reservaACancelar, setReservaACancelar] = React.useState(null);
  const [cancelando, setCancelando] = React.useState(false);
  const [saliendoEsperaId, setSaliendoEsperaId] = React.useState(null);
  const [toast, setToast] = React.useState(null);

  const [nombre, setNombre] = React.useState(cliente.nombre);
  const [telefonoLocal, setTelefonoLocal] = React.useState(telefonoSinIndicativo(cliente.telefono));
  const [correo, setCorreo] = React.useState(cliente.correo || '');
  const [errorDatos, setErrorDatos] = React.useState('');
  const [guardandoDatos, setGuardandoDatos] = React.useState(false);

  const [passwordActual, setPasswordActual] = React.useState('');
  const [passwordNueva, setPasswordNueva] = React.useState('');
  const [passwordConfirmacion, setPasswordConfirmacion] = React.useState('');
  const [errorPassword, setErrorPassword] = React.useState('');
  const [cambiandoPassword, setCambiandoPassword] = React.useState(false);

  React.useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 4000);
    return () => clearTimeout(t);
  }, [toast]);

  const confirmarCancelacion = async () => {
    if (!reservaACancelar) return;
    setCancelando(true);
    try {
      const datos = await cancelarReservaPropia(reservaACancelar.id);
      setToast({ tone: 'success', message: `Reserva cancelada · te quedan ${datos.saldo_tiquetera} tiquete(s)` });
      setReservaACancelar(null);
      onCambio();
    } catch (err) {
      setToast({ tone: 'danger', message: err.message });
    } finally {
      setCancelando(false);
    }
  };

  const salirDeEspera = async (esperaId) => {
    setSaliendoEsperaId(esperaId);
    try {
      await salirListaEspera(esperaId);
      setToast({ tone: 'success', message: 'Saliste de la lista de espera.' });
      onCambio();
    } catch (err) {
      setToast({ tone: 'danger', message: err.message });
    } finally {
      setSaliendoEsperaId(null);
    }
  };

  const guardarDatos = async (e) => {
    e.preventDefault();
    setErrorDatos('');
    if (!nombre.trim()) return setErrorDatos('Escribe tu nombre.');
    if (!telefonoLocalValido(telefonoLocal)) return setErrorDatos('Ingresa un teléfono de 10 dígitos, sin el indicativo.');
    if (correo.trim() && !/^\S+@\S+\.\S+$/.test(correo.trim())) return setErrorDatos('El correo no es válido.');
    setGuardandoDatos(true);
    try {
      await actualizarDatosCliente({ nombre: nombre.trim(), telefono: telefonoE164(telefonoLocal), correo: correo.trim() });
      setToast({ tone: 'success', message: 'Tus datos quedaron actualizados.' });
      onCambio();
    } catch (err) {
      setErrorDatos(err.message);
    } finally {
      setGuardandoDatos(false);
    }
  };

  const cambiarPassword = async (e) => {
    e.preventDefault();
    setErrorPassword('');
    if (passwordNueva.length < 8) return setErrorPassword('La nueva contraseña debe tener al menos 8 caracteres.');
    if (passwordNueva !== passwordConfirmacion) return setErrorPassword('Las contraseñas nuevas no coinciden.');
    setCambiandoPassword(true);
    try {
      await cambiarPasswordCliente({ passwordActual, passwordNueva, passwordConfirmacion });
      setToast({ tone: 'success', message: 'Tu contraseña quedó actualizada.' });
      setPasswordActual('');
      setPasswordNueva('');
      setPasswordConfirmacion('');
    } catch (err) {
      setErrorPassword(err.message);
    } finally {
      setCambiandoPassword(false);
    }
  };

  return (
    <section className="section">
      <div className="wrap">
        <div className="eyebrow">Cuenta</div>
        <h1 style={{ fontSize: 'var(--size-display-lg)', margin: '16px 0 var(--space-6)' }}>
          Hola, {cliente.nombre.split(' ')[0]}
        </h1>

        <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 'var(--space-7)', alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <Card padding="var(--space-5)">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <Avatar name={cliente.nombre} size={54} tone="var(--mauve)" />
                <div>
                  <div style={{ fontSize: 'var(--size-body)', color: 'var(--ink)' }}>{cliente.nombre}</div>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)', marginTop: 4 }}>
                    {formatearMiembroDesde(cliente.creado_en)}
                  </div>
                </div>
              </div>
            </Card>
            <nav style={{ display: 'flex', flexDirection: 'column' }}>
              {TABS_CUENTA.map(t => (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  textAlign: 'left', padding: '13px 0', background: 'none', cursor: 'pointer',
                  border: 'none', borderBottom: '1px solid var(--border-subtle)',
                  fontFamily: 'var(--font-ui)', fontSize: 'var(--size-label)', letterSpacing: 'var(--tracking-label)',
                  textTransform: 'uppercase', color: tab === t.id ? 'var(--ink)' : 'var(--text-muted)'
                }}>{t.label}</button>
              ))}
            </nav>
            <Button variant="ghost" style={{ alignSelf: 'flex-start' }} onClick={onLogout}>Cerrar sesión</Button>
          </div>

          <div>
            {tab === 'resumen' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
                <Card tone="ink" padding="var(--space-6)" className="mob-stack" style={{ display: 'flex', gap: 'var(--space-8)', alignItems: 'center' }}>
                  <StatBlock tone="dark" value={String(cliente.saldo_tiquetera)} label="Créditos disponibles" />
                  <StatBlock tone="dark" value={String(proximas.length)} label="Reservas activas" />
                </Card>
                <div>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Tus próximas clases</div>
                  <p style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)', margin: 'var(--space-2) 0 0' }}>
                    Se puede cancelar entre las 8:00 am y las 9:00 pm, con al menos 6 horas de anticipación.
                  </p>
                  <div style={{ marginTop: 'var(--space-4)' }}>
                    {proximas.map(r => (
                      <ScheduleRow key={r.id} time={r.hora} title={`${TIPO_LABEL_CUENTA[r.tipo] || r.tipo} · ${r.fecha}`}
                        family={r.tipo === 'grupal' ? 'reformer' : 'private'} instructor={null} duration="60 min"
                        booked onAction={puedeCancelarAhora(r) ? () => setReservaACancelar(r) : undefined} />
                    ))}
                    {proximas.length === 0 && (
                      <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', padding: '20px 0' }}>
                        No tienes clases próximas todavía.
                      </p>
                    )}
                  </div>
                  <Button style={{ marginTop: 'var(--space-4)' }} onClick={() => onNavigate('reservar')}>Reservar otra clase</Button>
                </div>
                {listaEspera.length > 0 && (
                  <div>
                    <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Tu lista de espera</div>
                    <p style={{ fontSize: 'var(--size-micro)', color: 'var(--text-muted)', margin: 'var(--space-2) 0 0' }}>
                      Te avisamos por WhatsApp si se libera un cupo en alguno de estos horarios — es por orden de llegada.
                    </p>
                    <div style={{ marginTop: 'var(--space-4)' }}>
                      {listaEspera.map(le => (
                        <div key={le.id} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', flexWrap: 'wrap' }}>
                          <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--size-body-sm)', color: 'var(--ink)', minWidth: 96 }}>{le.fecha}</span>
                          <span style={{ fontSize: 'var(--size-body-sm)', color: 'var(--ink)' }}>{TIPO_LABEL_CUENTA[le.tipo] || le.tipo} · {le.etiqueta}</span>
                          <Badge tone={le.estado === 'notificado' ? 'success' : 'neutral'} style={{ marginLeft: 'auto' }}>
                            {le.estado === 'notificado' ? '¡Se liberó un cupo!' : 'En espera'}
                          </Badge>
                          <Button size="sm" variant="ghost" disabled={saliendoEsperaId === le.id} onClick={() => salirDeEspera(le.id)}>
                            {saliendoEsperaId === le.id ? 'Saliendo…' : 'Salir'}
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}

            {tab === 'reservas' && (
              <div>
                <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Historial de reservas</div>
                <div style={{ marginTop: 'var(--space-4)' }}>
                  {historial.map(r => (
                    <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 0', borderBottom: '1px solid var(--border-subtle)', flexWrap: 'wrap' }}>
                      <span style={{ fontFamily: 'var(--font-ui)', fontSize: 'var(--size-body-sm)', color: 'var(--ink)', minWidth: 96 }}>{r.fecha}</span>
                      <span style={{ fontSize: 'var(--size-body-sm)', color: 'var(--ink)' }}>{TIPO_LABEL_CUENTA[r.tipo] || r.tipo} · {r.etiqueta}</span>
                      <Badge tone={ESTADO_BADGE[r.estado] || 'neutral'} style={{ marginLeft: 'auto' }}>{ESTADO_LABEL[r.estado] || r.estado}</Badge>
                    </div>
                  ))}
                  {historial.length === 0 && (
                    <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', padding: '20px 0' }}>Sin reservas todavía.</p>
                  )}
                </div>
              </div>
            )}

            {tab === 'plan' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
                <Card padding="var(--space-6)">
                  <StatBlock value={String(cliente.saldo_tiquetera)} label="Créditos disponibles en tu tiquetera" />
                  <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 'var(--space-4)' }}>
                    Cada clase reservada descuenta un crédito; cancelar a tiempo (hasta 6 horas antes, entre las
                    8:00 am y las 9:00 pm) lo devuelve. Cada carga de créditos vale por 30 días desde que se
                    hace. Para cargar más créditos, paga en efectivo o por transferencia a {CONTACT.bank} y
                    avísanos por WhatsApp.
                  </p>
                  <Button size="sm" variant="outline" style={{ marginTop: 'var(--space-4)' }} onClick={() => window.open(WHATSAPP, '_blank')}>
                    Comprar más créditos
                  </Button>
                  {creditosPorVencer.length > 0 && (
                    <div style={{ marginTop: 'var(--space-5)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
                      {creditosPorVencer.map((v, i) => (
                        <p key={i} style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)', margin: i === 0 ? 0 : '4px 0 0' }}>
                          {v.cantidad} {v.cantidad === 1 ? 'crédito vence' : 'créditos vencen'} el {formatearFechaVencimiento(v.fecha)}
                        </p>
                      ))}
                    </div>
                  )}
                </Card>
                <div>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Movimientos de tu tiquetera</div>
                  <div style={{ marginTop: 'var(--space-4)' }}>
                    {movimientos.map((m, i) => (
                      <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--size-body-sm)', padding: '10px 0', borderBottom: '1px solid var(--border-subtle)' }}>
                        <span>{m.creado_en} · {m.nota || m.tipo}</span>
                        <span style={{ color: m.cantidad > 0 ? 'var(--moss)' : 'var(--coral)' }}>{m.cantidad > 0 ? '+' : ''}{m.cantidad}</span>
                      </div>
                    ))}
                    {movimientos.length === 0 && (
                      <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)' }}>Sin movimientos todavía.</p>
                    )}
                  </div>
                </div>
              </div>
            )}

            {tab === 'datos' && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
                <form onSubmit={guardarDatos}>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Tus datos</div>
                  <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginTop: 'var(--space-4)', maxWidth: 560 }}>
                    <Field label="Nombre" htmlFor="mc-nombre">
                      <Input id="mc-nombre" value={nombre} onChange={(e) => setNombre(e.target.value)} />
                    </Field>
                    <Field label="Teléfono" htmlFor="mc-telefono" hint={`Se guarda como ${PHONE_COUNTRY_CODE} ${telefonoLocal || '...'}`}>
                      <Input id="mc-telefono" value={telefonoLocal} onChange={(e) => setTelefonoLocal(e.target.value)} />
                    </Field>
                    <Field label="Correo" htmlFor="mc-correo" style={{ gridColumn: '1 / -1' }}>
                      <Input id="mc-correo" value={correo} onChange={(e) => setCorreo(e.target.value)} />
                    </Field>
                  </div>
                  {errorDatos && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)', marginTop: 'var(--space-3)' }}>{errorDatos}</p>}
                  <Button type="submit" disabled={guardandoDatos} style={{ marginTop: 'var(--space-4)' }}>
                    {guardandoDatos ? 'Guardando…' : 'Guardar cambios'}
                  </Button>
                </form>

                <form onSubmit={cambiarPassword}>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Contraseña</div>
                  <div className="mob-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)', marginTop: 'var(--space-4)', maxWidth: 560 }}>
                    <Field label="Contraseña actual" htmlFor="mc-pw0" style={{ gridColumn: '1 / -1' }}>
                      <Input id="mc-pw0" type="password" placeholder="••••••••" value={passwordActual} onChange={(e) => setPasswordActual(e.target.value)} />
                    </Field>
                    <Field label="Nueva contraseña" htmlFor="mc-pw1">
                      <Input id="mc-pw1" type="password" placeholder="••••••••" value={passwordNueva} onChange={(e) => setPasswordNueva(e.target.value)} />
                    </Field>
                    <Field label="Confirmar nueva" htmlFor="mc-pw2">
                      <Input id="mc-pw2" type="password" placeholder="••••••••" value={passwordConfirmacion} onChange={(e) => setPasswordConfirmacion(e.target.value)} />
                    </Field>
                  </div>
                  {errorPassword && <p style={{ fontSize: 'var(--size-body-sm)', color: 'var(--coral)', marginTop: 'var(--space-3)' }}>{errorPassword}</p>}
                  <Button type="submit" variant="outline" disabled={cambiandoPassword} style={{ marginTop: 'var(--space-4)' }}>
                    {cambiandoPassword ? 'Cambiando…' : 'Cambiar contraseña'}
                  </Button>
                </form>

                <div>
                  <div className="eyebrow" style={{ fontSize: 'var(--size-micro)' }}>Recordatorio</div>
                  <p style={{ fontSize: 'var(--size-body-sm)', marginTop: 12, maxWidth: 560, color: 'var(--text-muted)' }}>
                    Las cancelaciones deben hacerse entre las 8:00 am y las 9:00 pm, con al menos 6 horas de
                    anticipación a la clase.
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      <Dialog open={Boolean(reservaACancelar)} title="¿Cancelar esta clase?"
        onClose={() => (cancelando ? null : setReservaACancelar(null))}
        footer={<>
          <Button variant="ghost" disabled={cancelando} onClick={() => setReservaACancelar(null)}>Volver</Button>
          <Button disabled={cancelando} onClick={confirmarCancelacion}>{cancelando ? 'Cancelando…' : 'Sí, cancelar'}</Button>
        </>}>
        {reservaACancelar && `${TIPO_LABEL_CUENTA[reservaACancelar.tipo] || reservaACancelar.tipo} · ${reservaACancelar.fecha} · ${reservaACancelar.etiqueta}`}
        <div style={{ fontSize: 'var(--size-body-sm)', color: 'var(--text-muted)', marginTop: 10 }}>
          El crédito se devuelve a tu tiquetera.
        </div>
      </Dialog>

      {toast && (
        <div style={{ position: 'fixed', left: 32, bottom: 32, zIndex: 70 }}>
          <Toast tone={toast.tone} message={toast.message} onDismiss={() => setToast(null)} />
        </div>
      )}
    </section>
  );
}

Object.assign(window, { MiCuentaPage });