// ─────────────────────────────────────────────────────────────────
// rsvp.jsx — closed RSVP with guest-list lookup via API
// ─────────────────────────────────────────────────────────────────
const { useState: useStateR, useRef: useRefR, useEffect: useEffectR } = React;

const RSVP = React.forwardRef(function RSVP({ t, lang }, ref) {
  const [query, setQuery] = useStateR('');
  const [open, setOpen] = useStateR(false);
  const [matches, setMatches] = useStateR([]);
  const [searching, setSearching] = useStateR(false);
  const [guest, setGuest] = useStateR(null); // selected guest
  const [responses, setResponses] = useStateR({}); // name -> 'yes' | 'no'
  const [submitting, setSubmitting] = useStateR(false);
  const [submitted, setSubmitted] = useStateR(false);
  const [error, setError] = useStateR('');
  const inputRef = useRefR(null);

  React.useImperativeHandle(ref, () => ({
    focus: () => { inputRef.current?.focus(); }
  }));

  // debounce search
  useEffectR(() => {
    if (guest) return;
    if (query.length < 2) { setMatches([]); return; }
    let alive = true;
    setSearching(true);
    const handle = setTimeout(async () => {
      try {
        const { matches: r } = await API.searchGuests(query);
        if (alive) setMatches(r || []);
      } catch {
        if (alive) setMatches([]);
      } finally {
        if (alive) setSearching(false);
      }
    }, 220);
    return () => { alive = false; clearTimeout(handle); };
  }, [query, guest]);

  const selectGuest = (g) => {
    setGuest(g);
    setQuery(g.name);
    setOpen(false);
    const initial = { [g.name]: null };
    (g.companions || []).forEach(c => { initial[c] = null; });
    setResponses(initial);
  };

  const reset = () => {
    setQuery('');
    setGuest(null);
    setResponses({});
    setSubmitted(false);
    setError('');
    setMatches([]);
  };

  const setResp = (name, value) => {
    setResponses(r => ({ ...r, [name]: value }));
  };

  const allAnswered = guest && Object.values(responses).every(v => v !== null);

  const submit = async () => {
    if (!allAnswered || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      await API.rsvp({
        guestId: guest.id,
        responses: Object.entries(responses).map(([name, response]) => ({ name, response }))
      });
      setSubmitted(true);
    } catch (e) {
      setError(e.message || 'erro');
    } finally {
      setSubmitting(false);
    }
  };

  const notFound = query.length >= 2 && !searching && matches.length === 0 && !guest;

  return (
    <section className="section" id="rsvp" data-screen-label="03 RSVP">
      <div className="container">
        <div className="rsvp">
          <div className="rsvp__intro">
            <div className="sec-head sec-head--left" style={{ marginBottom: 22 }}>
              <span className="sec-head__num">{t('rsvp.eyebrow')}</span>
              <h2 className="sec-head__title" dangerouslySetInnerHTML={{ __html: t('rsvp.title') }} />
            </div>
            <p>{t('rsvp.sub')}</p>
            <div style={{ marginTop: 30, display: 'flex', alignItems: 'center', gap: 14, color: 'var(--accent-ink)' }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                <circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/>
              </svg>
              <span style={{ fontFamily: 'var(--display)', fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase' }}>
                Lista fechada · apenas convidados cadastrados
              </span>
            </div>
          </div>

          <div className="rsvp__form">
            {!submitted ? (
              <>
                <div className="field">
                  <label>{t('rsvp.label')}</label>
                  <input
                    ref={inputRef}
                    type="text"
                    value={query}
                    placeholder={t('rsvp.placeholder')}
                    onChange={(e) => {
                      setQuery(e.target.value);
                      setOpen(true);
                      if (guest && e.target.value !== guest.name) {
                        setGuest(null);
                        setResponses({});
                      }
                    }}
                    onFocus={() => setOpen(true)}
                    onBlur={() => setTimeout(() => setOpen(false), 200)}
                  />
                  {open && matches.length > 0 && !guest && (
                    <div className="lookup-list">
                      {matches.map(m => (
                        <div key={m.id} className="lookup-item" onMouseDown={() => selectGuest(m)}>
                          <span>{m.name}</span>
                          <small>{m.role}</small>
                        </div>
                      ))}
                    </div>
                  )}
                  {notFound && (
                    <div style={{ marginTop: 10, padding: 14, border: '1px solid var(--line)', background: 'var(--surface-2)', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.4" style={{ flexShrink: 0, marginTop: 2 }}>
                        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r=".5" fill="currentColor"/>
                      </svg>
                      <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--ink-2)', fontSize: 15 }}>{t('rsvp.notFound')}</span>
                    </div>
                  )}
                </div>

                {guest && (
                  <div className="guest-card reveal">
                    <div className="guest-card__head">
                      <h3 className="guest-card__name">{guest.name}</h3>
                      <span className="guest-card__role">{guest.role}</span>
                    </div>
                    <ul className="guest-card__list">
                      <li>
                        <span>{guest.name}</span>
                        <Choice value={responses[guest.name]} onChange={(v) => setResp(guest.name, v)} t={t} />
                      </li>
                      {(guest.companions || []).length > 0 && (
                        <>
                          <li style={{ borderTop: '1px solid var(--line)', padding: '14px 0 6px', justifyContent: 'flex-start' }}>
                            <span style={{ fontFamily: 'var(--display)', fontSize: 9, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--muted)' }}>
                              {t('rsvp.companions')}
                            </span>
                          </li>
                          {(guest.companions || []).map(c => (
                            <li key={c}>
                              <span>{c}</span>
                              <Choice value={responses[c]} onChange={(v) => setResp(c, v)} t={t} />
                            </li>
                          ))}
                        </>
                      )}
                    </ul>
                    {error && <p style={{ color: '#c33', fontSize: 13, marginBottom: 8 }}>{error}</p>}
                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
                      <button className="btn btn--gold btn--sm" onClick={submit} disabled={!allAnswered || submitting} style={{ opacity: allAnswered && !submitting ? 1 : 0.45 }}>
                        {submitting ? '...' : t('rsvp.confirm')}
                      </button>
                    </div>
                  </div>
                )}
              </>
            ) : (
              <div className="rsvp-success reveal">
                <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1" style={{ margin: '0 auto 16px', display: 'block' }}>
                  <circle cx="12" cy="12" r="11"/><path d="M7 12l3.5 3.5L17 9"/>
                </svg>
                <h3>{t('rsvp.success')}</h3>
                <p>{t('rsvp.successMsg')}</p>
                <button className="btn btn--ghost btn--sm" style={{ marginTop: 24 }} onClick={reset}>{t('rsvp.again')}</button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
});

function Choice({ value, onChange, t }) {
  return (
    <div className="choice">
      <button className={value === 'yes' ? 'is-active yes' : ''} onClick={() => onChange('yes')}>{t('rsvp.yes')}</button>
      <button className={value === 'no'  ? 'is-active no'  : ''} onClick={() => onChange('no')}>{t('rsvp.no')}</button>
    </div>
  );
}

Object.assign(window, { RSVP });