const { useState: rUseState } = React;

function RsvpCard({ onConfirm }) {
  const [step, setStep] = rUseState(1);
  const [data, setData] = rUseState({ name: '', email: '', firm: '', role: '', tier: '', referral: '', dietary: '' });
  const [errors, setErrors] = rUseState({});

  const update = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const validate = () => {
    const e = {};
    if (step === 1) {
      if (!data.name.trim()) e.name = 'Required';
      if (!data.email.trim()) e.email = 'Required';
      else if (!/^\S+@\S+\.\S+$/.test(data.email)) e.email = 'Invalid email';
    }
    if (step === 2) {
      if (!data.role) e.role = 'Pick one';
      if (!data.tier) e.tier = 'Pick one';
    }
    if (step === 3) {
      if (!data.referral.trim()) e.referral = 'Required';
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!validate()) return;

    if (step < 3) {
      setStep(step + 1);
      return;
    }

    // Step 3 — native form post to hidden iframe (same pattern as sponsor form)
    e.currentTarget.submit();
    onConfirm({ ...data, ts: new Date().toISOString() });
  };

  const totalSteps = 3;
  const pct = (step / totalSteps) * 100;

  return (
    <div className="rsvp-card">
      <div className="rsvp-card-head">
        <div>
          <div className="rsvp-card-eyebrow">Confirm Attendance</div>
          <h3 className="rsvp-card-title">Reserve your seat</h3>
        </div>
      </div>

      <div className="rsvp-progress">
        <span>Step {step} / {totalSteps}</span>
        <div className="rsvp-progress-track">
          <div className="rsvp-progress-fill" style={{ width: `${pct}%` }}></div>
        </div>
      </div>

      <form action={ZAPIER_WEBHOOK_RSVP} method="POST" target="wb-zapier-iframe" onSubmit={handleSubmit} noValidate>
        {/* Hidden fields for Zapier — always present so Step 3 submits all data */}
        <input type="hidden" name="timestamp" value={new Date().toISOString()} />
        <input type="hidden" name="formType" value="RSVP" />
        <input type="hidden" name="name" value={data.name} />
        <input type="hidden" name="email" value={data.email} />
        <input type="hidden" name="firm" value={data.firm} />
        <input type="hidden" name="role" value={data.role} />
        <input type="hidden" name="tier" value={data.tier} />
        <input type="hidden" name="referral" value={data.referral} />
        {/* dietary is sent by the visible input on Step 3 */}

        {step === 1 && (
          <>
            <div className={`field ${errors.name ? 'error' : ''}`}>
              <label htmlFor="rsvp-name">Full name</label>
              <input id="rsvp-name" type="text" autoComplete="name"
                value={data.name} onChange={(e) => update('name', e.target.value)} placeholder="Full name" />
              {errors.name && <div className="field-error">{errors.name}</div>}
            </div>
            <div className={`field ${errors.email ? 'error' : ''}`}>
              <label htmlFor="rsvp-email">Email</label>
              <input id="rsvp-email" type="email" autoComplete="email" inputMode="email"
                value={data.email} onChange={(e) => update('email', e.target.value)} placeholder="you@firm.com" />
              {errors.email && <div className="field-error">{errors.email}</div>}
            </div>
            <div className="field">
              <label htmlFor="rsvp-firm">Firm or company</label>
              <input id="rsvp-firm" type="text" autoComplete="organization"
                value={data.firm} onChange={(e) => update('firm', e.target.value)} placeholder="Optional" />
            </div>
            <button type="submit" className="btn">Continue <span className="arrow">→</span></button>
          </>
        )}

        {step === 2 && (
          <>
            <div className={`field ${errors.role ? 'error' : ''}`}>
              <label>I am attending as</label>
              <div className="choice-grid">
                {[{ v: 'owner', t: 'Business Owner' }, { v: 'client', t: 'Existing Client' }, { v: 'partner', t: 'Professional Partner' }].map((o) => (
                  <button key={o.v} type="button" className="choice" aria-pressed={data.role === o.v} onClick={() => update('role', o.v)}>{o.t}</button>
                ))}
              </div>
              {errors.role && <div className="field-error">{errors.role}</div>}
            </div>
            <div className={`field ${errors.tier ? 'error' : ''}`} style={{ marginTop: 18 }}>
              <label>Joining for</label>
              <div className="choice-grid">
                {[{ v: 'full', t: 'Full Day', tag: 'Summit + Golf + Reception' }, { v: 'summit', t: 'Summit Only', tag: 'AM Sessions' }, { v: 'golf', t: 'Golf + Reception', tag: 'PM Only' }].map((o) => (
                  <button key={o.v} type="button" className="choice" aria-pressed={data.tier === o.v} onClick={() => update('tier', o.v)}>
                    <span className="mono-tag">{o.tag}</span>{o.t}
                  </button>
                ))}
              </div>
              {errors.tier && <div className="field-error">{errors.tier}</div>}
            </div>
            <div className="btn-row" style={{ marginTop: 22 }}>
              <button type="button" className="btn btn-ghost" onClick={() => setStep(1)} style={{ flex: '0 0 auto', padding: '14px 18px' }}>← Back</button>
              <button type="submit" className="btn" style={{ flex: 1 }}>Continue <span className="arrow">→</span></button>
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <div className={`field ${errors.referral ? 'error' : ''}`}>
              <label htmlFor="rsvp-referral">How did you hear about us?</label>
              <input id="rsvp-referral" type="text" name="referral"
                value={data.referral} onChange={(e) => update('referral', e.target.value)} placeholder="Referral source" />
              {errors.referral && <div className="field-error">{errors.referral}</div>}
            </div>
            <div className="field" style={{ marginTop: 18 }}>
              <label htmlFor="rsvp-dietary">Dietary or accessibility notes</label>
              <input id="rsvp-dietary" type="text" name="dietary"
                value={data.dietary} onChange={(e) => update('dietary', e.target.value)} placeholder="Optional" />
            </div>
            <div style={{ fontSize: 12, color: 'var(--forest-500)', fontFamily: 'var(--mono)', letterSpacing: '0.08em', marginTop: 14, marginBottom: 18, lineHeight: 1.6 }}>
              By confirming, you agree to our event terms. We will follow up via email with venue details and your personal calendar invite.
            </div>
            <div className="btn-row">
              <button type="button" className="btn btn-ghost" onClick={() => setStep(2)} style={{ flex: '0 0 auto', padding: '14px 18px' }}>← Back</button>
              <button type="submit" className="btn" style={{ flex: 1 }}>Confirm RSVP <span className="arrow">→</span></button>
            </div>
          </>
        )}
      </form>
    </div>
  );
}

Object.assign(window, { RsvpCard });