// ===== RIVAMAR Group — Formulario de Reservas Inteligente (v1.1) =====
const { useState, useEffect } = React;

function Field({ label, children, hint, required }) {
  return (
    <label className="block">
      <span className="block text-sm font-medium text-gray-300 mb-1.5">
        {label} {required && <span className="text-copper">*</span>}
      </span>
      {children}
      {hint && <span className="block text-xs text-gray-500 mt-1.5">{hint}</span>}
    </label>
  );
}

const inputCls = "w-full min-h-[44px] px-3.5 rounded-md bg-carbon border border-white/10 text-gray-100 text-sm placeholder-gray-600 focus:border-gold focus:ring-1 focus:ring-gold outline-none transition-colors";

function ReservaForm({ prefill, onSubmit }) {
  const [local, setLocal] = useState(prefill.local || '');
  const [form, setForm] = useState({ nombre: '', empresa: '', correo: '', telefono: '', fecha: '', hora: '', comentarios: '' });
  const [pax, setPax] = useState(2);
  const [exponorChecked, setExponorChecked] = useState(!!prefill.exponor);
  const [credencial, setCredencial] = useState('');
  const [submitting, setSubmitting] = useState(false);

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

  const localObj = local ? LOCAL_MAP[local] : null;
  const maxPax = local ? CAPACIDAD[local] : 20;
  const minPax = local ? MINIMO[local] : 1;
  const overCapacity = local && pax > maxPax;
  const underMin = local && pax < minPax;
  const credValida = credencial.trim().length >= 5;
  const exponorAplicado = exponorChecked && credValida;

  useEffect(() => {
    if (!local) return;
    setPax((p) => Math.min(Math.max(p, MINIMO[local]), CAPACIDAD[local]));
  }, [local]);

  const valid = local && form.nombre && form.correo && form.telefono && form.fecha && form.hora && !overCapacity && !underMin && (!exponorChecked || credValida);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!valid || submitting) return;
    setSubmitting(true);
    // El folio se pide al servidor (correlativo central y atómico). Si no hay
    // servidor, nextReservaIdAsync entrega un folio provisional único.
    const pedirId = window.nextReservaIdAsync
      ? window.nextReservaIdAsync()
      : Promise.resolve({ id: nextReservaId(), source: 'local' });
    pedirId.then((res) => {
      onSubmit({
        ...form, local, pax,
        exponor: exponorAplicado,
        credencial: exponorAplicado ? credencial.trim() : '',
        id: res.id,
        _idSource: res.source,
        estado: 'pendiente',
      });
      setSubmitting(false);
    });
  };

  return (
    <form onSubmit={handleSubmit} className="grid lg:grid-cols-[1fr_360px] gap-8 items-start">
      <div className="space-y-6">
        {/* Paso 1 — contacto */}
        <div className="bg-iron border border-white/10 rounded-xl p-6 space-y-5">
          <h3 className="font-display font-bold text-gray-50 flex items-center gap-2">
            <span className="grid place-items-center w-6 h-6 rounded-full bg-gold text-carbon text-xs font-bold">1</span>
            Datos de contacto
          </h3>
          <div className="grid sm:grid-cols-2 gap-4">
            <Field label="Nombre completo" required>
              <input className={inputCls} value={form.nombre} onChange={set('nombre')} placeholder="Ej. Carolina Méndez" />
            </Field>
            <Field label="Empresa" hint="Opcional — para convenios corporativos">
              <input className={inputCls} value={form.empresa} onChange={set('empresa')} placeholder="Ej. Codelco Norte" />
            </Field>
            <Field label="Correo electrónico" required>
              <input type="email" className={inputCls} value={form.correo} onChange={set('correo')} placeholder="correo@empresa.cl" />
            </Field>
            <Field label="Teléfono de contacto" required>
              <input className={inputCls} value={form.telefono} onChange={set('telefono')} placeholder="+56 9 …" />
            </Field>
          </div>
        </div>

        {/* Paso 2 — detalle */}
        <div className="bg-iron border border-white/10 rounded-xl p-6 space-y-5">
          <h3 className="font-display font-bold text-gray-50 flex items-center gap-2">
            <span className="grid place-items-center w-6 h-6 rounded-full bg-gold text-carbon text-xs font-bold">2</span>
            Detalle de la reserva
          </h3>
          <Field label="Local" required hint={localObj ? localObj.capacidadLabel : 'Cada local tiene un aforo máximo por mesa'}>
            <div className="grid sm:grid-cols-3 gap-2.5">
              {LOCALES.map((l) => (
                <button type="button" key={l.id} onClick={() => setLocal(l.id)}
                  className={`text-left p-3 rounded-md border transition-all min-h-[44px] ${
                    local === l.id ? 'border-gold bg-gold/10' : 'border-white/10 bg-carbon hover:border-white/25'
                  }`}>
                  <span className="block text-sm font-semibold text-gray-100">{l.nombre}</span>
                  <span className="block text-[11px] text-gray-500 mt-0.5">{l.capacidadLabel}</span>
                </button>
              ))}
            </div>
          </Field>

          <div className="grid sm:grid-cols-3 gap-4">
            <Field label="Fecha" required>
              <input type="date" className={inputCls} value={form.fecha} onChange={set('fecha')} min="2026-05-29" />
            </Field>
            <Field label="Hora" required>
              <select className={inputCls} value={form.hora} onChange={set('hora')}>
                <option value="">Seleccionar…</option>
                {HORARIOS.map((h) => <option key={h} value={h}>{h} hrs</option>)}
              </select>
            </Field>
            <Field label="N° de personas" required>
              <div className="flex items-center gap-2">
                <button type="button" onClick={() => setPax(Math.max(minPax, pax - 1))} className="w-10 h-11 rounded-md bg-carbon border border-white/10 text-gray-200 hover:border-gold text-lg leading-none">−</button>
                <span className={`flex-1 text-center h-11 leading-[44px] rounded-md border font-display font-bold text-lg ${overCapacity || underMin ? 'border-orange-500 text-orange-400 bg-orange-500/10' : 'border-white/10 text-gray-50 bg-carbon'}`}>{pax}</span>
                <button type="button" onClick={() => setPax(pax + 1)} className="w-10 h-11 rounded-md bg-carbon border border-white/10 text-gray-200 hover:border-gold text-lg leading-none">+</button>
              </div>
            </Field>
          </div>

          {overCapacity && (
            <div className="flex items-start gap-2.5 p-3 rounded-md bg-orange-500/10 border border-orange-500/30 text-sm text-orange-300">
              <WarnIcon />
              <span><strong>{localObj.nombre}</strong> admite un máximo de <strong>{maxPax} pax por mesa</strong>.{local === 'rivamar' ? '' : ' Para grupos mayores, use Rivamar (10+ pax) o solicite un convenio B2B.'}</span>
            </div>
          )}
          {underMin && (
            <div className="flex items-start gap-2.5 p-3 rounded-md bg-orange-500/10 border border-orange-500/30 text-sm text-orange-300">
              <WarnIcon />
              <span><strong>{localObj.nombre}</strong> habilita reservas grupales desde <strong>{minPax} pax</strong>. Activa flujos especiales de atención.</span>
            </div>
          )}

          <Field label="Comentarios o requerimientos especiales" hint="Alergias, dietas, accesibilidad, distribución de salón, etc.">
            <textarea className={inputCls + ' !h-20 py-2.5 resize-none'} value={form.comentarios} onChange={set('comentarios')} placeholder="Cuéntanos si necesitas algo especial…" />
          </Field>
        </div>

        {/* EXPONOR */}
        <div className="bg-iron border border-white/10 rounded-xl p-6 space-y-4">
          <label className="flex items-center gap-3 cursor-pointer select-none">
            <input type="checkbox" checked={exponorChecked} onChange={(e) => setExponorChecked(e.target.checked)}
              className="w-5 h-5 rounded border-white/20 bg-carbon accent-[#D4A52C]" />
            <span className="text-sm font-medium text-gray-200">¿Tiene Credencial EXPONOR 2026?</span>
            <ExponorPill className="ml-auto" />
          </label>
          {exponorChecked && (
            <div className="pl-8 space-y-2">
              <input className={inputCls + (credencial && !credValida ? ' !border-orange-500' : '')} value={credencial}
                onChange={(e) => setCredencial(e.target.value)} placeholder="N° de credencial — ej. EXP-44192 o EXPONOR15" />
              {credencial && !credValida && <p className="text-xs text-orange-400">Ingresa un número de credencial válido (mín. 5 caracteres).</p>}
              {credValida && <p className="text-xs text-emerald-400 flex items-center gap-1.5"><CheckIcon /> Credencial registrada — descuento del 15% aplicado.</p>}
              <p className="text-xs text-gray-500">Debes presentar tu credencial oficial (física o digital) del evento al solicitar la cuenta.</p>
            </div>
          )}
        </div>
      </div>

      {/* Resumen sticky */}
      <aside className="lg:sticky lg:top-24 bg-iron border border-white/10 rounded-xl overflow-hidden">
        <div className="p-6 border-b border-white/10">
          <h3 className="font-display font-bold text-gray-50">Resumen de reserva</h3>
        </div>
        <div className="p-6 space-y-3 text-sm">
          <SummaryRow label="Local" value={localObj ? localObj.nombre : '—'} />
          <SummaryRow label="Fecha" value={form.fecha || '—'} />
          <SummaryRow label="Hora" value={form.hora ? form.hora + ' hrs' : '—'} />
          <SummaryRow label="Personas" value={pax + ' pax'} />
          <SummaryRow label="A nombre de" value={form.nombre || '—'} />

          {exponorAplicado && (
            <div className="mt-4 flex items-center gap-2 p-3 rounded-lg bg-gold/15 border border-gold/40 animate-pulse-soft">
              <span className="grid place-items-center w-8 h-8 rounded-full bg-gold text-carbon font-bold text-xs">15%</span>
              <div>
                <div className="text-sm font-bold text-gold leading-tight">Descuento aplicado</div>
                <div className="text-[11px] text-gold/80">Credencial {credencial.trim()}</div>
              </div>
            </div>
          )}

          <div className="pt-4 mt-2 border-t border-white/10">
            <Btn type="submit" variant="gold" disabled={!valid || submitting} className="w-full">
              {submitting ? 'Procesando…' : 'Confirmar Reserva'}
            </Btn>
            <p className="text-[11px] text-gray-500 mt-3 text-center leading-relaxed">
              Toda reserva ingresa en estado <span className="text-orange-400 font-medium">Pendiente</span> y se confirma por correo o teléfono del local.
            </p>
          </div>
        </div>
      </aside>
    </form>
  );
}

function SummaryRow({ label, value }) {
  return (
    <div className="flex justify-between gap-3">
      <span className="text-gray-500">{label}</span>
      <span className="text-gray-200 font-medium text-right">{value}</span>
    </div>
  );
}

function WarnIcon() {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="shrink-0 mt-0.5"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>;
}
function CheckIcon() {
  return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>;
}

function ReservaExito({ data, onNueva, go }) {
  const localObj = LOCAL_MAP[data.local];
  const site = (typeof window !== 'undefined' && window.SITE) || {};
  const wa = site.whatsapp || '56964979087';
  const correoLocal = site.contacto_correo || 'contacto@rivamar.cl';
  const resumen = [
    `*Nueva reserva ${data.id}*`,
    `Local: ${localObj.nombre}`,
    `Nombre: ${data.nombre}`,
    data.empresa ? `Empresa: ${data.empresa}` : '',
    `Fecha: ${data.fecha} ${data.hora} hrs`,
    `Personas: ${data.pax}`,
    `Teléfono: ${data.telefono}`,
    `Correo: ${data.correo}`,
    data.exponor ? `Beneficio: EXPONOR 15%` : '',
    data.comentarios ? `Comentarios: ${data.comentarios}` : '',
  ].filter(Boolean).join('\n');
  const waUrl = `https://wa.me/${wa}?text=${encodeURIComponent(resumen)}`;
  const mailUrl = `mailto:${correoLocal}?subject=${encodeURIComponent('Reserva ' + data.id + ' — ' + localObj.nombre)}&body=${encodeURIComponent(resumen.replace(/\*/g, ''))}`;
  return (
    <div className="max-w-lg mx-auto text-center py-12">
      <div className="grid place-items-center w-20 h-20 rounded-full bg-emerald-500/15 border border-emerald-500/30 mx-auto mb-6">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#10B981" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
      </div>
      <h2 className="font-display text-3xl font-bold text-gray-50">¡Reserva recibida!</h2>
      <p className="mt-3 text-gray-400">
        Gracias, <span className="text-gray-200">{data.nombre}</span>. Tu solicitud
        <span className="font-mono text-gold"> {data.id}</span> fue registrada correctamente.
      </p>
      <div className="mt-8 bg-iron border border-white/10 rounded-xl p-6 text-left space-y-3 text-sm">
        <div className="flex items-center justify-between">
          <span className="text-gray-500">Estado</span>
          <EstadoBadge estado="pendiente" />
        </div>
        <SummaryRow label="Local" value={localObj.nombre} />
        <SummaryRow label="Fecha y hora" value={`${data.fecha} · ${data.hora} hrs`} />
        <SummaryRow label="Personas" value={data.pax + ' pax'} />
        {data.exponor && (
          <div className="flex justify-between items-center">
            <span className="text-gray-500">Beneficio</span>
            <ExponorPill />
          </div>
        )}
        {data.comentarios && <SummaryRow label="Comentarios" value={data.comentarios} />}
      </div>

      {/* Aviso de entrega: si la reserva NO llegó al panel automáticamente,
          el cliente debe activarla por WhatsApp/correo (canal garantizado). */}
      {data._entregado === false && (
        <div className="mt-6 flex items-start gap-2.5 p-4 rounded-xl bg-orange-500/10 border border-orange-500/30 text-left">
          <WarnIcon />
          <p className="text-xs text-orange-200 leading-relaxed">
            Guardamos tu reserva <span className="font-mono text-orange-100">{data.id}</span>, pero no pudimos
            confirmar su llegada al panel en este momento (sin conexión con el servidor).
            <span className="font-semibold text-orange-100"> Por favor actívala ahora por WhatsApp o correo</span> para
            asegurar que el local la reciba.
          </p>
        </div>
      )}

      {/* Activación de la reserva */}
      <div className="mt-6 bg-steel/40 border border-gold/20 rounded-xl p-5 text-left">
        <p className="text-sm font-semibold text-gray-100 flex items-center gap-2">
          <span className="grid place-items-center w-6 h-6 rounded-full bg-gold/20 text-gold text-xs font-bold">!</span>
          Activa tu reserva ahora
        </p>
        <p className="text-xs text-gray-400 mt-1.5 leading-relaxed">Para confirmarla de inmediato, envíanosla por WhatsApp o correo. El local te responde para validar la disponibilidad.</p>
        <div className="mt-4 flex flex-col sm:flex-row gap-2.5">
          <a href={waUrl} target="_blank" rel="noopener" className="flex-1 inline-flex items-center justify-center gap-2 min-h-[44px] px-4 rounded-lg bg-[#25D366] text-white font-semibold text-sm hover:brightness-110 transition-all">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.2-.2.3-.7.9-.8 1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.5-.8-2-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1.1 2.7c.1.2 1.8 2.7 4.3 3.8.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.2-.3-.2-.6-.4M12 2a10 10 0 0 0-8.6 15l-1.4 5.1 5.2-1.4A10 10 0 1 0 12 2"/></svg>
            Confirmar por WhatsApp
          </a>
          <a href={mailUrl} className="flex-1 inline-flex items-center justify-center gap-2 min-h-[44px] px-4 rounded-lg bg-white/5 border border-white/10 text-gray-100 font-semibold text-sm hover:bg-white/10 transition-all">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            Enviar por correo
          </a>
        </div>
      </div>

      {data._entregado !== false && (
        <p className="text-xs text-gray-500 mt-4">También quedó registrada en nuestro panel. El local validará tu reserva a la brevedad.</p>
      )}
      <div className="mt-6 flex gap-3 justify-center">
        <Btn variant="ghost" onClick={onNueva}>Nueva reserva</Btn>
        <Btn variant="primary" onClick={() => go('home')}>Volver al inicio</Btn>
      </div>
    </div>
  );
}

function Reservas({ prefill, go, onConfirm }) {
  const [exito, setExito] = useState(null);
  const handleSubmit = (data) => {
    // onConfirm guarda en el store local y devuelve la promesa de entrega al
    // panel (api/inbox.php). Esperamos su resultado para avisar al usuario si
    // NO llegó automáticamente (antes esto fallaba en silencio).
    let entrega;
    try { entrega = onConfirm && onConfirm(data); } catch (e) {}
    try { enviarCorreoReserva(data); } catch (e) {}
    Promise.resolve(entrega)
      .then((r) => setExito({ ...data, _entregado: !!(r && r.ok) }))
      .catch(() => setExito({ ...data, _entregado: false }));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <main className="max-w-6xl mx-auto px-5 lg:px-8 py-14">
      {!exito && (
        <div className="mb-10 max-w-2xl">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-copper mb-3">Reserva online</p>
          <h1 className="font-display text-3xl md:text-4xl font-bold text-gray-50 tracking-tight">Reserva tu mesa</h1>
          <p className="mt-3 text-gray-400">Formulario con validación de aforo por local. Reserva rápida, confirmación automatizada.</p>
        </div>
      )}
      {exito
        ? <ReservaExito data={exito} go={go} onNueva={() => setExito(null)} />
        : <ReservaForm prefill={prefill} onSubmit={handleSubmit} />}
    </main>
  );
}

Object.assign(window, { Reservas, Field, inputCls, CheckIcon });