// Seção de Confirmação de Presença — acesso por link personalizado ou telefone
window.Rsvp = function Rsvp() {
  const C = window.CONFIG;
  const [step, setStep]               = React.useState('search');
  const [term, setTerm]               = React.useState('');
  const [loading, setLoading]         = React.useState(false);
  const [codeChecked, setCodeChecked] = React.useState(false); // URL já foi verificada
  const [error, setError]             = React.useState('');
  const [familia, setFamilia]         = React.useState([]);
  const [familiaLabel, setFamiliaLabel] = React.useState('');
  const [form, setForm]               = React.useState({});
  const [submitting, setSubmitting]   = React.useState(false);
  const [telefone,   setTelefone]     = React.useState('');

  // ── checar código ?c= na URL ao montar ─────────────────────
  React.useEffect(() => {
    const code = new URLSearchParams(window.location.search).get('c');
    if (code) {
      loadByCode(code.toUpperCase().trim());
    } else {
      setCodeChecked(true);
    }
  }, []);

  // ── utilitários ────────────────────────────────────────────
  const normPhone = s => (s || '').replace(/\D/g, '');

  const openFamilia = (membros) => {
    setFamilia(membros);
    setFamiliaLabel(membros[0]?.familia || '');
    const init = {};
    membros.forEach(m => {
      init[m.id] = {
        nomeCompleto: m.nomeCompleto || '',
        confirmado:   m.confirmadoSite !== undefined ? m.confirmadoSite : null
      };
    });
    setForm(init);
    // pré-popula telefone se já existir no Firestore
    setTelefone(membros[0]?.telefone || '');
    // Se já confirmou (qualquer membro tem confirmedAt), bloqueia edição
    const jaConfirmou = membros.some(m => m.confirmedAt);
    setStep(jaConfirmou ? 'done' : 'confirm');
  };

  // ── acesso por código (link personalizado) ──────────────────
  const loadByCode = async (code) => {
    setLoading(true); setError('');
    try {
      const snap = await window.db.collection('convidados')
        .where('codigoFamilia', '==', code).get();
      if (snap.empty) {
        setError('Link inválido ou expirado. Use seu telefone abaixo ou fale conosco.');
        setCodeChecked(true); setLoading(false); return;
      }
      openFamilia(snap.docs.map(d => ({ id: d.id, ...d.data() })));
    } catch {
      setError('Erro ao verificar o link. Busque pelo seu telefone abaixo.');
      setCodeChecked(true);
    }
    setLoading(false);
  };

  // ── busca por telefone (fallback) ───────────────────────────
  const handleSearch = async () => {
    const digits = normPhone(term);
    if (digits.length < 8) { setError('Digite seu telefone com DDD (mínimo 8 dígitos).'); return; }
    setLoading(true); setError('');
    try {
      const snap    = await window.db.collection('convidados').get();
      const all     = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      const matched = all.filter(g =>
        g.telefoneNormalizado && g.telefoneNormalizado.includes(digits));
      if (!matched.length) {
        setError('Telefone não encontrado. Verifique o número ou fale conosco pelo WhatsApp.');
        setLoading(false); return;
      }
      openFamilia(all.filter(g => g.familia === matched[0].familia));
    } catch { setError('Erro ao buscar. Tente novamente.'); }
    setLoading(false);
  };

  // ── form ────────────────────────────────────────────────────
  const updateForm = (id, field, value) =>
    setForm(prev => ({ ...prev, [id]: { ...prev[id], [field]: value } }));

  const canSubmit = normPhone(telefone).length >= 8 && familia.every(m => {
    const f = form[m.id] || {};
    return f.nomeCompleto && f.nomeCompleto.trim().length > 1 && f.confirmado !== null;
  });

  const handleSubmit = async () => {
    if (!canSubmit || submitting) return;
    setSubmitting(true);
    try {
      const telNorm = normPhone(telefone);
      const batch = window.db.batch();
      familia.forEach(m => {
        const f = form[m.id];
        batch.update(window.db.collection('convidados').doc(m.id), {
          nomeCompleto:         f.nomeCompleto.trim(),
          confirmadoSite:       f.confirmado,
          confirmedAt:          firebase.firestore.FieldValue.serverTimestamp(),
          telefone:             telefone.trim(),
          telefoneNormalizado:  telNorm
        });
      });
      await batch.commit();
      setStep('success');
    } catch { setError('Erro ao salvar. Tente novamente.'); }
    setSubmitting(false);
  };

  const reset = () => { setStep('search'); setTerm(''); setError(''); setTelefone(''); };

  // ── render ─────────────────────────────────────────────────
  return (
    <section id="rsvp" className="rsvp-section">
      <div className="container">
        <header className="section-header" data-animate>
          <h2>Confirme sua Presença</h2>
          <Ornament width={140} color="#ffffff" />
          <p className="rsvp-section-intro">
            Você já está na nossa lista!<br/>Preencha com os dados abaixo para garantirmos tudo certinho no grande dia.
          </p>
        </header>

        <div className="rsvp-card" data-animate>

          {/* ── Verificando código da URL ── */}
          {loading && !codeChecked && (
            <div className="rsvp-step rsvp-step--center">
              <span className="rsvp-spinner rsvp-spinner--lg" />
              <p className="rsvp-loading-text">Abrindo seu convite…</p>
            </div>
          )}

          {/* ── Busca por telefone (fallback) ── */}
          {step === 'search' && codeChecked && (
            <div className="rsvp-step">
              <div className="rsvp-lock-wrap">
                <span className="rsvp-lock-icon">
                  <svg width="18" height="20" viewBox="0 0 18 20" fill="none" aria-hidden="true">
                    <rect x="1" y="9" width="16" height="11" rx="3" stroke="#ADADAD" strokeWidth="1.2" fill="none"/>
                    <path d="M5 9V6a4 4 0 0 1 8 0v3" stroke="#ADADAD" strokeWidth="1.2" strokeLinecap="round"/>
                    <circle cx="9" cy="14.5" r="1.5" fill="#ADADAD"/>
                    <line x1="9" y1="14.5" x2="9" y2="17" stroke="#ADADAD" strokeWidth="1.2" strokeLinecap="round"/>
                  </svg>
                </span>
                <p className="rsvp-lock-text">
                  Cada convite tem um link individual e privado.<br />
                  Não está com o link? Digite seu telefone:
                </p>
              </div>
              <div className="rsvp-search-row">
                <input
                  className="rsvp-input"
                  type="tel"
                  value={term}
                  onChange={e => { setTerm(e.target.value); setError(''); }}
                  onKeyDown={e => e.key === 'Enter' && handleSearch()}
                  placeholder="(21) 99999-9999"
                />
                <button className="rsvp-btn-primary" onClick={handleSearch}
                        disabled={normPhone(term).length < 8 || loading}>
                  {loading ? <span className="rsvp-spinner" /> : 'Buscar'}
                </button>
              </div>
              {error && <p className="rsvp-error">{error}</p>}
              <p className="rsvp-fallback">
                Dificuldades?{' '}
                <a href={C.rsvpWhatsapp} target="_blank" rel="noopener noreferrer"
                   className="rsvp-link">Fale conosco pelo WhatsApp →</a>
              </p>
            </div>
          )}

          {/* ── Confirmação ── */}
          {step === 'confirm' && (
            <div className="rsvp-step">
              <p className="rsvp-step-title">
                Confirme a presença e informe o nome completo de cada pessoa.
              </p>

              {/* ── Telefone para contato (um por família) ── */}
              <div className="rsvp-phone-box">
                <label className="rsvp-phone-label" htmlFor="rsvp-tel">
                  📱 Telefone para contato
                </label>
                <p className="rsvp-phone-hint">
                  Um número da família — para avisos de última hora.
                </p>
                <input
                  id="rsvp-tel"
                  className="rsvp-input"
                  type="tel"
                  placeholder="(21) 99999-9999"
                  value={telefone}
                  onChange={e => setTelefone(e.target.value)}
                />
              </div>

              <div className="rsvp-membros">
                {familia.map(m => {
                  const f = form[m.id] || {};
                  return (
                    <div key={m.id} className="rsvp-membro">
                      <div className="rsvp-membro-info">
                        <span className="rsvp-membro-nome">{m.nome}</span>
                        <span className={`rsvp-membro-tipo ${m.tipo === 'Criança' ? 'crianca' : ''}`}>
                          {m.tipo}
                        </span>
                      </div>
                      <div className="rsvp-membro-fields">
                        <input
                          className="rsvp-input rsvp-input--sm"
                          placeholder="Nome completo"
                          value={f.nomeCompleto || ''}
                          onChange={e => updateForm(m.id, 'nomeCompleto', e.target.value)}
                        />
                        <div className="rsvp-toggle">
                          <button
                            className={`rsvp-toggle-btn rsvp-toggle-yes ${f.confirmado === true ? 'active' : ''}`}
                            onClick={() => updateForm(m.id, 'confirmado', true)}>
                            ✓ Vou
                          </button>
                          <button
                            className={`rsvp-toggle-btn rsvp-toggle-no ${f.confirmado === false ? 'active' : ''}`}
                            onClick={() => updateForm(m.id, 'confirmado', false)}>
                            ✕ Não vou
                          </button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
              {error && <p className="rsvp-error">{error}</p>}
              <button className="rsvp-btn-primary rsvp-btn-full" onClick={handleSubmit}
                      disabled={!canSubmit || submitting}>
                {submitting
                  ? <><span className="rsvp-spinner" /> Salvando…</>
                  : 'Confirmar presença'}
              </button>
              <button className="rsvp-back" onClick={reset}>← Buscar por telefone</button>
            </div>
          )}

          {/* ── Já confirmado (somente leitura) ── */}
          {step === 'done' && (() => {
            const sim = familia.filter(m => form[m.id]?.confirmado === true);
            const nao = familia.filter(m => form[m.id]?.confirmado === false);
            return (
              <div className="rsvp-step rsvp-success">
                <div className="rsvp-success-ring">
                  <Icon name="check" size={24} color="#711312" />
                </div>
                <Ornament width={120} color="#ffffff" />
                <h3 className="rsvp-success-title">Já confirmado!</h3>
                <p className="rsvp-success-sub">
                  Sua presença já foi registrada. Caso precise alterar algo,
                  entre em contato conosco.
                </p>
                {sim.length > 0 && (
                  <div className="rsvp-result-list rsvp-result-list--sim">
                    <p className="rsvp-result-label">Confirmados ✓</p>
                    {sim.map(m => (
                      <p key={m.id} className="rsvp-result-nome">
                        {form[m.id]?.nomeCompleto || m.nome}
                      </p>
                    ))}
                  </div>
                )}
                {nao.length > 0 && (
                  <div className="rsvp-result-list rsvp-result-list--nao">
                    <p className="rsvp-result-label">Não vão</p>
                    {nao.map(m => (
                      <p key={m.id} className="rsvp-result-nome">
                        {form[m.id]?.nomeCompleto || m.nome}
                      </p>
                    ))}
                  </div>
                )}
                <p className="rsvp-fallback" style={{marginTop: 4}}>
                  Precisa corrigir algo?{' '}
                  <a href={C.rsvpWhatsapp} target="_blank" rel="noopener noreferrer"
                     className="rsvp-link">Fale conosco →</a>
                </p>
              </div>
            );
          })()}

          {/* ── Sucesso ── */}
          {step === 'success' && (() => {
            const sim = familia.filter(m => form[m.id]?.confirmado === true);
            const nao = familia.filter(m => form[m.id]?.confirmado === false);
            return (
              <div className="rsvp-step rsvp-success">
                <div className="rsvp-success-ring">
                  <Icon name="heart" size={28} color="#711312" />
                </div>
                <Ornament width={120} color="#ffffff" />
                <h3 className="rsvp-success-title">Presença confirmada!</h3>
                <p className="rsvp-success-sub">
                  Obrigado por responder. Mal podemos esperar para celebrar com vocês.
                </p>
                {sim.length > 0 && (
                  <div className="rsvp-result-list rsvp-result-list--sim">
                    <p className="rsvp-result-label">Confirmados ✓</p>
                    {sim.map(m => (
                      <p key={m.id} className="rsvp-result-nome">
                        {form[m.id]?.nomeCompleto || m.nome}
                      </p>
                    ))}
                  </div>
                )}
                {nao.length > 0 && (
                  <div className="rsvp-result-list rsvp-result-list--nao">
                    <p className="rsvp-result-label">Não vão</p>
                    {nao.map(m => (
                      <p key={m.id} className="rsvp-result-nome">
                        {form[m.id]?.nomeCompleto || m.nome}
                      </p>
                    ))}
                  </div>
                )}
              </div>
            );
          })()}

        </div>
      </div>

      <style>{`
        .rsvp-section {
          background: #711312;
          padding: 96px 0 88px;
        }
        .rsvp-section .section-header h2 { color: #ffffff; }
        .rsvp-section .section-header .sub { color: rgba(255,255,255,0.7); }
        .rsvp-section-intro {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 17px;
          color: #ffffff; max-width: 500px;
          margin: 14px auto 0; line-height: 1.6;
        }
        .rsvp-card {
          max-width: 580px; margin: 40px auto 0;
          background: #fff;
          border: 0.5px solid rgba(139,38,53,0.2);
          border-radius: 16px;
          padding: 36px 32px;
          box-shadow: 0 24px 48px -28px rgba(139,38,53,0.2);
        }
        .rsvp-step { display: flex; flex-direction: column; gap: 16px; }
        .rsvp-step--center { align-items: center; text-align: center; gap: 14px; padding: 16px 0; }
        .rsvp-loading-text {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 16px; color: #711312;
        }
        .rsvp-step-title {
          font-family: 'Cormorant Garamond', serif;
          font-style: italic; font-size: 16px; color: #5C3D2E;
        }

        /* Lock / intro */
        .rsvp-lock-wrap {
          display: flex; align-items: flex-start; gap: 12px;
          background: #FBF6EE; border: 0.5px solid rgba(184,134,11,0.3);
          border-radius: 10px; padding: 14px 16px;
        }
        .rsvp-lock-icon { flex-shrink: 0; margin-top: 2px; display: flex; }
        .rsvp-lock-text {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #5C3D2E; line-height: 1.55;
        }

        /* Busca */
        .rsvp-search-row { display: flex; gap: 10px; }
        .rsvp-input {
          flex: 1; padding: 13px 14px;
          border: 0.5px solid #C0455A; border-radius: 8px;
          background: #fff; font-family: 'Lato', sans-serif;
          font-size: 14px; color: #5C3D2E;
          transition: border-color 0.2s, box-shadow 0.2s;
        }
        .rsvp-input:focus {
          outline: none; border-color: #ADADAD;
          box-shadow: 0 0 0 3px rgba(184,134,11,0.15);
        }
        .rsvp-input--sm { flex: 1; min-width: 0; }
        .rsvp-btn-primary {
          padding: 13px 22px; border-radius: 8px;
          background: #711312; color: #ffffff;
          font-family: 'Lato', sans-serif; font-size: 13px;
          letter-spacing: 1px; white-space: nowrap;
          display: inline-flex; align-items: center; gap: 8px;
          transition: background 0.2s;
        }
        .rsvp-btn-primary:hover:not(:disabled) { background: #711312; }
        .rsvp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
        .rsvp-btn-full {
          width: 100%; justify-content: center;
          font-size: 17px; padding: 15px;
          font-family: 'Cormorant Garamond', serif; letter-spacing: 0.5px;
        }
        .rsvp-error {
          font-family: 'Lato', sans-serif; font-size: 13px;
          color: #711312; background: #FBEAF0;
          border: 0.5px solid #C0455A; border-radius: 8px;
          padding: 10px 14px;
        }
        .rsvp-fallback {
          font-family: 'Lato', sans-serif; font-size: 12px;
          color: #888780; text-align: center;
        }
        .rsvp-link {
          color: #ADADAD; border-bottom: 1px solid #ADADAD;
          padding-bottom: 1px;
        }
        .rsvp-back {
          font-family: 'Lato', sans-serif; font-size: 11px;
          letter-spacing: 2px; text-transform: uppercase;
          color: #711312; border-bottom: 1px solid #ADADAD;
          padding: 3px 2px; align-self: flex-start;
          background: none; cursor: pointer;
        }

        /* Telefone de contato */
        .rsvp-phone-box {
          background: #FBF6EE; border: 0.5px solid rgba(184,134,11,0.3);
          border-radius: 10px; padding: 14px 16px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .rsvp-phone-label {
          font-family: 'Lato', sans-serif; font-size: 12px;
          font-weight: 700; letter-spacing: 1px; color: #5C3D2E;
        }
        .rsvp-phone-hint {
          font-family: 'Lato', sans-serif; font-size: 12px;
          color: #888780; line-height: 1.4; margin-bottom: 4px;
        }

        /* Família / membros */
        .rsvp-familia-tag {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 3px; text-transform: uppercase;
          color: #ADADAD; text-align: center;
        }
        .rsvp-membros { display: flex; flex-direction: column; gap: 12px; }
        .rsvp-membro {
          border: 0.5px solid rgba(139,38,53,0.15);
          border-radius: 10px; padding: 14px 16px;
          display: flex; flex-direction: column; gap: 10px;
        }
        .rsvp-membro-info { display: flex; align-items: baseline; gap: 8px; }
        .rsvp-membro-nome {
          font-family: 'Cormorant Garamond', serif;
          font-size: 17px; font-weight: 600; color: #5C3D2E;
        }
        .rsvp-membro-tipo {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 1.5px; text-transform: uppercase; color: #888780;
        }
        .rsvp-membro-tipo.crianca { color: #ADADAD; }
        .rsvp-membro-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .rsvp-toggle { display: flex; gap: 6px; flex-shrink: 0; }
        .rsvp-toggle-btn {
          padding: 7px 13px; border-radius: 999px; font-size: 12px;
          border: 1px solid transparent; transition: all 0.2s; cursor: pointer;
        }
        .rsvp-toggle-yes { border-color: #27500A; color: #27500A; background: #EAF3DE; }
        .rsvp-toggle-yes.active { background: #27500A; color: #fff; font-weight: 700; }
        .rsvp-toggle-no  { border-color: #791F1F; color: #791F1F; background: #FCEBEB; }
        .rsvp-toggle-no.active  { background: #791F1F; color: #fff; font-weight: 700; }

        /* Sucesso */
        .rsvp-success { align-items: center; text-align: center; }
        .rsvp-success-ring {
          width: 64px; height: 64px; border-radius: 50%;
          border: 1.5px solid #ADADAD; background: #FBF6EE;
          display: flex; align-items: center; justify-content: center;
        }
        .rsvp-success-title {
          font-family: 'Great Vibes', cursive;
          font-size: 34px; color: #711312; font-weight: 400;
        }
        .rsvp-success-sub {
          font-family: 'Cormorant Garamond', serif; font-style: italic;
          font-size: 15px; color: #711312; max-width: 360px;
        }
        .rsvp-result-list {
          width: 100%; border-radius: 8px; padding: 12px 16px; text-align: left;
        }
        .rsvp-result-list--sim { background: #EAF3DE; border: 0.5px solid #97C459; }
        .rsvp-result-list--nao { background: #FCEBEB; border: 0.5px solid #F09595; }
        .rsvp-result-label {
          font-family: 'Lato', sans-serif; font-size: 10px;
          letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
          color: #27500A;
        }
        .rsvp-result-list--nao .rsvp-result-label { color: #791F1F; }
        .rsvp-result-nome {
          font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #5C3D2E;
        }

        /* Spinner */
        .rsvp-spinner {
          width: 15px; height: 15px; border-radius: 50%; display: inline-block;
          border: 2px solid rgba(250,243,232,0.35); border-top-color: #ffffff;
          animation: rsvpspin 0.8s linear infinite;
        }
        .rsvp-spinner--lg {
          width: 32px; height: 32px;
          border-color: rgba(139,38,53,0.15); border-top-color: #711312;
        }
        @keyframes rsvpspin { to { transform: rotate(360deg); } }

        @media (max-width: 560px) {
          .rsvp-section { padding: 72px 0 64px; }
          .rsvp-card { padding: 24px 18px; }
          .rsvp-search-row { flex-direction: column; }
          .rsvp-membro-fields { flex-direction: column; align-items: stretch; }
          .rsvp-toggle { align-self: flex-start; }
        }
      `}</style>
    </section>
  );
};