// rsvp.jsx — RSVP form, supports both single-page and multi-step variants

const { useState } = React;

function Field({ label, optional, children }) {
  return (
    <div className="form-row">
      <label className="field-lbl">
        {label}
        {optional && <span className="opt">— optional</span>}
      </label>
      {children}
    </div>
  );
}

function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2 7l3.5 3.5L12 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Stepper({ value, onChange, min = 1, max = 12, suffix }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <div className="stepper">
        <button type="button" onClick={() => onChange(Math.max(min, value - 1))} aria-label="−">−</button>
        <span className="stepper-val">{value}</span>
        <button type="button" onClick={() => onChange(Math.min(max, value + 1))} aria-label="+">+</button>
      </div>
      {suffix && <span className="stepper-suffix">{suffix}</span>}
    </div>
  );
}

function Segments({ options, value, onChange, cols, lang }) {
  const colsClass = cols === 3 ? 'three' : cols === 4 ? 'four' : '';
  const isZh = lang !== 'en';
  return (
    <div className={`seg-group ${colsClass}`}>
      {options.map(o => (
        <button
          key={o.v}
          type="button"
          className={`seg-btn ${value === o.v ? 'active' : ''}`}
          onClick={() => onChange(o.v)}
        >
          <span className="han">{isZh ? o.han : o.en}</span>
          <span className="en">{isZh ? o.en : o.han}</span>
        </button>
      ))}
    </div>
  );
}

function CheckRow({ checked, onChange, label, han, sub }) {
  return (
    <label className={`check-row ${checked ? 'checked' : ''}`}>
      <input
        type="checkbox"
        checked={checked}
        onChange={e => onChange(e.target.checked)}
        style={{ position: 'absolute', opacity: 0, pointerEvents: 'none' }}
      />
      <span className="check-box"><CheckIcon /></span>
      <span className="check-lbl">
        {han && <span className="check-han">{han}　</span>}
        {label}
      </span>
      {sub && <span className="check-sub">{sub}</span>}
    </label>
  );
}

const COUNTRY_CODES_FALLBACK = [
  { code: '+886', en: 'Taiwan', zh: '台灣' },
];

function PhoneField({ value, dial, onChange, onDial, placeholder, lang }) {
  const list = window.COUNTRY_CODES || COUNTRY_CODES_FALLBACK;
  // Group: Taiwan default first, then alphabetical by chosen-language name
  const [first, ...rest] = list;
  const sorted = [...rest].sort((a, b) => {
    const ak = (lang === 'zh' ? a.zh : a.en) || '';
    const bk = (lang === 'zh' ? b.zh : b.en) || '';
    return ak.localeCompare(bk, lang === 'zh' ? 'zh-Hant' : 'en');
  });
  const ordered = [first, ...sorted];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '128px 1fr', gap: 12, alignItems: 'end' }}>
      <select
        className="field-input"
        value={dial}
        onChange={(e) => onDial(e.target.value)}
        style={{
          paddingRight: 22,
          appearance: 'none',
          backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23b89968' d='M0 0h10L5 6z'/></svg>\")",
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'right 4px center',
          cursor: 'pointer',
          fontFamily: "var(--f-body)",
        }}
      >
        {ordered.map((c, i) => (
          <option key={`${c.code}-${i}`} value={c.code}>
            {c.code} · {lang === 'zh' ? c.zh : c.en}
          </option>
        ))}
      </select>
      <input
        className="field-input"
        type="tel"
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

const INITIAL_FORM = {
  name: '',
  phone: '',
  dial: '+886',
  email: '',
  relation: '',
  attendance: 'yes',
  guests: 1,
  meal: 'meat',
  childSeat: false,
  allergy: '',
  message: '',
};

function RSVPForm({ tr, variant, lang }) {
  const [form, setForm] = useState(INITIAL_FORM);
  const [step, setStep] = useState(0);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [errors, setErrors] = useState({});
  const f = tr.fields;

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

  const validate = (stepToCheck) => {
    const e = {};
    if (stepToCheck === 0 || stepToCheck === 'all') {
      if (!form.name.trim()) e.name = true;
      if (!form.phone.trim()) e.phone = true;
      if (!form.relation) e.relation = true;
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSubmit = async () => {
    if (!validate('all')) {
      setStep(0);
      return;
    }
    setSubmitting(true);

    const callRpc = (confirmUpdate) => window.supabaseClient.rpc('submit_rsvp', {
      p_name: form.name,
      p_phone: form.phone,
      p_dial: form.dial,
      p_email: form.email || null,
      p_relation: form.relation || null,
      p_attendance: form.attendance,
      p_guests: form.guests,
      p_meal: form.meal,
      p_child_seat: form.childSeat,
      p_allergy: form.allergy || null,
      p_message: form.message || null,
      p_language: lang,
      p_user_agent: navigator.userAgent.slice(0, 200),
      p_confirm_update: confirmUpdate,
    });

    try {
      let { data, error } = await callRpc(false);
      if (error) throw error;

      if (data?.status === 'duplicate') {
        const msg = lang === 'zh'
          ? '此手機號碼已經提交過表單。\n按「確定」會以這次填寫的內容覆蓋舊資料；按「取消」則不送出。'
          : 'This phone number has already submitted.\nClick OK to overwrite the previous submission, or Cancel to keep it.';
        if (!window.confirm(msg)) {
          return;
        }
        ({ data, error } = await callRpc(true));
        if (error) throw error;
      }

      if (data?.status === 'ok') {
        setSubmitted(true);
      }
    } catch (err) {
      console.error('RSVP submit failed:', err);
      if (err.message?.includes('rate_limited')) {
        alert(lang === 'zh' ? '剛剛已收到您的回覆，請稍候再試' : 'Just received your RSVP, please wait a moment');
        return;
      }
      alert(lang === 'zh'
        ? '送出失敗，請稍後再試或聯絡新人'
        : 'Submission failed, please try again or contact the couple'
      );
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="check-ring">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M9 16l5 5 9-11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
        <h3>{tr.success}</h3>
        <p>{tr.successMsg}</p>
      </div>
    );
  }

  // Section 1 — basic info
  const sec1 = (
    <React.Fragment>
      <div className="form-row two">
        <Field label={f.name}>
          <input
            className="field-input"
            placeholder={f.namePh}
            value={form.name}
            onChange={e => set('name', e.target.value)}
            style={errors.name ? { borderBottomColor: '#a93232' } : {}}
          />
        </Field>
        <Field label={f.phone}>
          <PhoneField
            value={form.phone}
            dial={form.dial}
            onChange={v => set('phone', v)}
            onDial={v => set('dial', v)}
            placeholder={f.phonePh}
            lang={lang}
          />
        </Field>
      </div>

      <Field label={f.email} optional>
        <input
          className="field-input"
          type="email"
          placeholder={f.emailPh}
          value={form.email}
          onChange={e => set('email', e.target.value)}
        />
      </Field>

      <Field label={f.relation}>
        <Segments
          options={f.relations}
          value={form.relation}
          onChange={v => set('relation', v)}
          cols={2}
          lang={lang}
        />
      </Field>
    </React.Fragment>
  );

  // Section 2 — attendance + meals
  const sec2 = (
    <React.Fragment>
      <Field label={f.attendance}>
        <Segments
          options={f.attendanceOpts}
          value={form.attendance}
          onChange={v => set('attendance', v)}
          lang={lang}
        />
      </Field>

      {form.attendance === 'yes' && (
        <React.Fragment>
          <Field label={f.guests}>
            <Stepper
              value={form.guests}
              onChange={v => set('guests', v)}
              suffix={f.guestsSuffix}
            />
          </Field>

          <Field label={f.meal}>
            <Segments
              options={f.meals}
              value={form.meal}
              onChange={v => set('meal', v)}
              lang={lang}
            />
          </Field>

          <CheckRow
            checked={form.childSeat}
            onChange={v => set('childSeat', v)}
            label={f.childSeat}
            sub={f.childSeatSub}
          />

          <Field label={f.allergy} optional>
            <input
              className="field-input"
              placeholder={f.allergyPh}
              value={form.allergy}
              onChange={e => set('allergy', e.target.value)}
            />
          </Field>
        </React.Fragment>
      )}
    </React.Fragment>
  );

  // Section 3 — message
  const sec3 = (
    <Field label={f.message} optional>
      <textarea
        className="field-textarea"
        placeholder={f.messagePh}
        value={form.message}
        onChange={e => set('message', e.target.value)}
      />
    </Field>
  );

  // ─── single-page variant ─────────────────────────────────────────
  if (variant === 'single') {
    return (
      <form onSubmit={e => { e.preventDefault(); handleSubmit(); }}>
        {sec1}
        <div style={{ height: 8 }}></div>
        {sec2}
        <div style={{ height: 8 }}></div>
        {sec3}
        <button
          type="submit"
          className="submit-btn"
          disabled={submitting}
        >
          {submitting ? tr.submitting : tr.submit}
        </button>
      </form>
    );
  }

  // ─── multi-step variant ──────────────────────────────────────────
  const stepLabels = [tr.step1, tr.step2, tr.step3];
  const sections = [sec1, sec2, sec3];

  return (
    <form onSubmit={e => { e.preventDefault(); }}>
      <div className="step-track">
        {stepLabels.map((lbl, i) => (
          <React.Fragment key={i}>
            <div className={`step-dot ${step === i ? 'active' : step > i ? 'done' : ''}`}>
              <span className="num">{i + 1}</span>
              <span>{lbl}</span>
            </div>
            {i < stepLabels.length - 1 && (
              <span className={`step-line ${step > i ? 'done' : ''}`}></span>
            )}
          </React.Fragment>
        ))}
      </div>

      <div style={{ minHeight: 220 }}>
        {sections[step]}
      </div>

      <div className="step-nav">
        {step > 0 ? (
          <button type="button" className="ghost" onClick={() => setStep(step - 1)}>
            ← {tr.back}
          </button>
        ) : <span></span>}
        {step < sections.length - 1 ? (
          <button
            type="button"
            className="submit-btn primary"
            onClick={() => {
              if (step === 0 && !validate(0)) return;
              setStep(step + 1);
            }}
          >
            {tr.next} →
          </button>
        ) : (
          <button
            type="button"
            className="submit-btn primary"
            onClick={handleSubmit}
            disabled={submitting}
          >
            {submitting ? tr.submitting : tr.submit}
          </button>
        )}
      </div>
    </form>
  );
}

window.RSVPForm = RSVPForm;