// RSVP form — POSTs to Google Apps Script (saves to Sheet + emails the novios)

// Pega aquí la URL del web app de Google Apps Script (paso 6 de rsvp-apps-script.js).
// Si la dejas vacía, el formulario hace fallback a mailto.
const RSVP_ENDPOINT = 'https://script.google.com/macros/s/AKfycbxllg0IHUELnGMDFDMtQlRM0F67GZn1JJmq4gOT_1fXYobblPgpi_q1N2dHgPvHhe-cHw/exec';
const FALLBACK_EMAIL = 'aroabarrio@gmail.com';

const RSVP = () => {
  const [form, setForm] = React.useState({
    nombre: '',
    asiste: null,
    adultos: 1,
    ninos: 0,
    bebes: 0,
    comentariosNinos: '',
    autobusIda: null,
    pasajerosIda: 1,
    autobusVuelta: null,
    pasajerosVuelta: 1,
    alergias: null,
    alergiasDetalle: '',
    mesaNinos: null,            // 'monitora' | 'padres'
    preboda: null,
    prebodaNum: 1,
    mensaje: '',
  });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const buildMessage = () => {
    const lines = [
      `Confirmación boda Aroa & Daniel`,
      `──────────────────────`,
      `Nombre: ${form.nombre}`,
      `Asistencia: ${form.asiste ? 'SÍ' : 'NO'}`,
    ];
    if (form.asiste) {
      lines.push(`Adultos: ${form.adultos}`);
      lines.push(`Niños (2-12): ${form.ninos}`);
      lines.push(`Bebés (0-2): ${form.bebes}`);
      if (form.comentariosNinos) lines.push(`Comentarios niños: ${form.comentariosNinos}`);
      lines.push(`Autobús ida: ${form.autobusIda ? `SÍ (${form.pasajerosIda} pax)` : 'NO'}`);
      lines.push(`Autobús vuelta: ${form.autobusVuelta ? `SÍ (${form.pasajerosVuelta} pax)` : 'NO'}`);
      lines.push(`Alergias: ${form.alergias ? `SÍ — ${form.alergiasDetalle}` : 'NO'}`);
      if (form.ninos > 0) {
        lines.push(`Mesa niños: ${form.mesaNinos === 'monitora' ? 'Mesa infantil con monitora' : form.mesaNinos === 'padres' ? 'Mesa de padres' : '-'}`);
      }
      lines.push(`Preboda 5 junio: ${form.preboda ? `SÍ (${form.prebodaNum} pax)` : 'NO'}`);
    }
    if (form.mensaje) lines.push(`Mensaje: ${form.mensaje}`);
    return lines.join('\n');
  };

  const submit = async () => {
    if (!RSVP_ENDPOINT) { sendEmailFallback(); return; }
    setStatus('sending');
    try {
      // Apps Script web apps no devuelven CORS para application/json,
      // así que mandamos como text/plain con el JSON dentro.
      await fetch(RSVP_ENDPOINT, {
        method: 'POST',
        mode: 'no-cors',
        headers: { 'Content-Type': 'text/plain;charset=utf-8' },
        body: JSON.stringify(form),
      });
      // Con no-cors no podemos leer la respuesta — asumimos OK si fetch no lanzó.
      setStatus('sent');
    } catch (e) {
      setStatus('error');
    }
  };

  const sendEmailFallback = () => {
    const body = encodeURIComponent(buildMessage());
    const subj = encodeURIComponent(`RSVP Boda — ${form.nombre || 'Invitado'}`);
    window.location.href = `mailto:${FALLBACK_EMAIL}?subject=${subj}&body=${body}`;
    setStatus('sent');
  };

  const canSubmit = form.nombre.trim().length > 1 && form.asiste !== null &&
    (!form.asiste || (
      form.autobusIda !== null && form.autobusVuelta !== null &&
      form.alergias !== null && form.preboda !== null &&
      (form.ninos === 0 || form.mesaNinos !== null)
    ));

  if (status === 'sent') {
    return (
      <section className="rsvp" id="rsvp">
        <div className="rsvp-inner success">
          <div className="success-icon">✓</div>
          <h3>¡Gracias!</h3>
          <p style={{ fontFamily: 'var(--f-display)', fontSize: 18, fontStyle: 'italic', marginTop: 10, opacity: 0.8 }}>
            Tu confirmación se ha enviado correctamente.
          </p>
          <button
            className="venue-link"
            style={{ marginTop: 28, cursor: 'pointer' }}
            onClick={() => setStatus('idle')}
          >
            Volver al formulario
          </button>
        </div>
      </section>
    );
  }

  return (
    <section className="rsvp" id="rsvp">
      <div className="section-label">07 · Confirmación</div>
      <h2 className="section-title">Confírmanos <em>tu asistencia</em></h2>
      <Divider />
      <p className="section-sub">
        Os pedimos que rellenéis este pequeño formulario para tenerlo todo preparado.
        Al enviarlo, los novios recibirán vuestra confirmación al instante.
      </p>

      <div className="rsvp-inner">
        <div className="field">
          <label>Tu nombre (y el de tu acompañante)</label>
          <input type="text" value={form.nombre} onChange={e => upd('nombre', e.target.value)} placeholder="Ej: Laura y Marcos" />
        </div>

        <div className="field">
          <label>¿Nos acompañas?</label>
          <div className="toggle">
            <button className={form.asiste === true ? 'active' : ''} onClick={() => upd('asiste', true)}>Sí</button>
            <button className={form.asiste === false ? 'active' : ''} onClick={() => upd('asiste', false)}>No</button>
          </div>
        </div>

        {form.asiste === false && (
          <div className="field">
            <label>Un mensaje para los novios (opcional)</label>
            <textarea value={form.mensaje} onChange={e => upd('mensaje', e.target.value)} placeholder="Os deseamos..." />
          </div>
        )}

        {form.asiste === true && (
          <>
            <div className="field">
              <label>Número de asistentes</label>
              <div className="count-row">
                <div className="count-row-label">
                  Adultos
                  <small>a partir de 13 años</small>
                </div>
                <Counter value={form.adultos} min={0} onChange={v => upd('adultos', v)} />
              </div>
              <div className="count-row">
                <div className="count-row-label">
                  Niños
                  <small>de 2 a 12 años</small>
                </div>
                <Counter value={form.ninos} min={0} onChange={v => upd('ninos', v)} />
              </div>
              <div className="count-row">
                <div className="count-row-label">
                  Bebés
                  <small>de 0 a 2 años</small>
                </div>
                <Counter value={form.bebes} min={0} onChange={v => upd('bebes', v)} />
              </div>
            </div>

            {(form.ninos > 0 || form.bebes > 0) && (
              <div className="field">
                <label>Comentarios sobre los peques</label>
                <textarea
                  value={form.comentariosNinos}
                  onChange={e => upd('comentariosNinos', e.target.value)}
                  placeholder="Edades, intolerancias, necesidades..."
                />
              </div>
            )}

            {form.ninos > 0 && (
              <div className="field">
                <label>Mesa infantil</label>
                <p style={{ fontSize: 13, opacity: 0.75, marginTop: -4, marginBottom: 12, fontStyle: 'italic', lineHeight: 1.5 }}>
                  Se valora poner una mesa infantil con monitora para que los niños coman juntos.
                  ¿Preferís que coman en esa mesa o en la mesa de padres con el horario del comedor?
                </p>
                <div className="toggle">
                  <button className={form.mesaNinos === 'monitora' ? 'active' : ''} onClick={() => upd('mesaNinos', 'monitora')}>Mesa con monitora</button>
                  <button className={form.mesaNinos === 'padres' ? 'active' : ''} onClick={() => upd('mesaNinos', 'padres')}>Mesa de padres</button>
                </div>
              </div>
            )}

            <div className="field">
              <label>Autobús — Ida (12:30 desde El Corte Inglés)</label>
              <div className="toggle">
                <button className={form.autobusIda === true ? 'active' : ''} onClick={() => upd('autobusIda', true)}>Sí</button>
                <button className={form.autobusIda === false ? 'active' : ''} onClick={() => upd('autobusIda', false)}>No</button>
              </div>
              {form.autobusIda && (
                <div className="subgroup">
                  <div className="count-row" style={{ padding: 0, borderBottom: 'none' }}>
                    <div className="count-row-label">Número de pasajeros ida</div>
                    <Counter value={form.pasajerosIda} min={1} onChange={v => upd('pasajerosIda', v)} />
                  </div>
                </div>
              )}
            </div>

            <div className="field">
              <label>Autobús — Vuelta (fin de fiesta)</label>
              <div className="toggle">
                <button className={form.autobusVuelta === true ? 'active' : ''} onClick={() => upd('autobusVuelta', true)}>Sí</button>
                <button className={form.autobusVuelta === false ? 'active' : ''} onClick={() => upd('autobusVuelta', false)}>No</button>
              </div>
              {form.autobusVuelta && (
                <div className="subgroup">
                  <div className="count-row" style={{ padding: 0, borderBottom: 'none' }}>
                    <div className="count-row-label">Número de pasajeros vuelta</div>
                    <Counter value={form.pasajerosVuelta} min={1} onChange={v => upd('pasajerosVuelta', v)} />
                  </div>
                </div>
              )}
            </div>

            <div className="field">
              <label>Alergias alimentarias</label>
              <div className="toggle">
                <button className={form.alergias === true ? 'active' : ''} onClick={() => upd('alergias', true)}>Sí</button>
                <button className={form.alergias === false ? 'active' : ''} onClick={() => upd('alergias', false)}>No</button>
              </div>
              {form.alergias && (
                <div className="subgroup">
                  <input
                    type="text"
                    value={form.alergiasDetalle}
                    onChange={e => upd('alergiasDetalle', e.target.value)}
                    placeholder="¿A qué? (gluten, frutos secos, lactosa...)"
                    style={{ width: '100%', padding: '10px 12px', border: '1px solid var(--c-accent-soft)', background: 'var(--c-paper)', fontFamily: 'var(--f-body)', fontSize: 14 }}
                  />
                </div>
              )}
            </div>

            <div className="field">
              <label>Preboda viernes 5 de junio</label>
              <div className="toggle">
                <button className={form.preboda === true ? 'active' : ''} onClick={() => upd('preboda', true)}>Sí</button>
                <button className={form.preboda === false ? 'active' : ''} onClick={() => upd('preboda', false)}>No</button>
              </div>
              {form.preboda && (
                <div className="subgroup">
                  <div className="count-row" style={{ padding: 0, borderBottom: 'none' }}>
                    <div className="count-row-label">Número de personas</div>
                    <Counter value={form.prebodaNum} min={1} onChange={v => upd('prebodaNum', v)} />
                  </div>
                </div>
              )}
            </div>

            <div className="field">
              <label>Mensaje para los novios (opcional)</label>
              <textarea value={form.mensaje} onChange={e => upd('mensaje', e.target.value)} placeholder="¡Qué ganas!" />
            </div>
          </>
        )}

        <div style={{ marginTop: 20 }}>
          <button
            className="send-btn"
            disabled={!canSubmit || status === 'sending'}
            onClick={submit}
            style={{ width: '100%' }}
          >
            {status === 'sending' ? 'Enviando…' : 'Enviar confirmación'}
          </button>
          {!canSubmit && (
            <p style={{ fontSize: 12, opacity: 0.6, textAlign: 'center', marginTop: 12, fontStyle: 'italic' }}>
              Completa los campos obligatorios para continuar.
            </p>
          )}
          {status === 'error' && (
            <p style={{ fontSize: 13, color: '#b85a5a', textAlign: 'center', marginTop: 14, fontStyle: 'italic' }}>
              No se pudo enviar. <a href="#" onClick={(e) => { e.preventDefault(); sendEmailFallback(); }} style={{ borderBottom: '1px solid currentColor' }}>Enviar por email</a>.
            </p>
          )}
        </div>
      </div>
    </section>
  );
};

const Counter = ({ value, onChange, min = 0, max = 20 }) => (
  <div className="counter">
    <button onClick={() => onChange(Math.max(min, value - 1))} disabled={value <= min}>−</button>
    <div className="val">{value}</div>
    <button onClick={() => onChange(Math.min(max, value + 1))} disabled={value >= max}>+</button>
  </div>
);

Object.assign(window, { RSVP, Counter });