/* stage1/Stage1Form.jsx — the 90-second qualifier.
   Fields come from tenant config (Portal.cfg.stage1Fields). Email is
   field 0 → captured first for recovery. Inline validation on blur,
   localStorage draft, Supabase insert (anon auth) with demo fallback. */
/* eslint-disable */
const { useState: useS1, useEffect: useE1 } = React;
const S1_DRAFT_KEY = "portal_stage1_draft_" + (Portal.cfg.id || "default");

function Stage1Form({ slug, onSubmitted }) {
  const fields = Portal.cfg.stage1Fields || [];
  const copy = Portal.c("stage1", {});

  const [values, setValues] = useS1(() => {
    try { const d = localStorage.getItem(S1_DRAFT_KEY); if (d) return JSON.parse(d); } catch (e) {}
    const init = {}; fields.forEach((f) => { init[f.name] = f.type === "checkbox" ? false : ""; });
    init.property_slug = slug || Portal.property.slug;
    return init;
  });
  const [touched, setTouched] = useS1({});
  const [errors, setErrors] = useS1({});
  const [submitting, setSubmitting] = useS1(false);
  const [submitErr, setSubmitErr] = useS1(null);

  useE1(() => { try { localStorage.setItem(S1_DRAFT_KEY, JSON.stringify(values)); } catch (e) {} }, [values]);
  useE1(() => { window.portalAnalytics && window.portalAnalytics.log("step_view", { step: "stage1" }); }, []);

  function validateOne(f, val) {
    let err = null;
    if (f.name === "email") err = Portal.validators.email(val);
    else if (f.name === "phone") err = Portal.validators.phone(val);
    else if (f.required) err = Portal.validators.required(val);
    return err;
  }

  function setField(name, val) {
    const f = fields.find((x) => x.name === name);
    if (f && f.type === "tel") val = Portal.formatPhone(val);
    setValues((v) => Object.assign({}, v, { [name]: val }));
  }
  function onBlur(name) {
    setTouched((t) => Object.assign({}, t, { [name]: true }));
    const f = fields.find((x) => x.name === name);
    const err = validateOne(f, values[name]);
    setErrors((e) => Object.assign({}, e, { [name]: err }));
    window.portalAnalytics && window.portalAnalytics.log("field_blur", { step: "stage1", field: name });
    if (err) window.portalAnalytics && window.portalAnalytics.log("field_error", { step: "stage1", field: name, metadata: { error: err } });
  }
  function onFocus(name) { window.portalAnalytics && window.portalAnalytics.log("field_focus", { step: "stage1", field: name }); }

  function validateAll() {
    const ne = {}; let first = null;
    fields.forEach((f) => { const err = validateOne(f, values[f.name]); if (err) { ne[f.name] = err; first = first || f.name; } });
    setErrors(ne);
    const t = {}; fields.forEach((f) => { t[f.name] = true; }); setTouched(t);
    return { ok: !first, first };
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setSubmitErr(null);
    const { ok, first } = validateAll();
    if (!ok) { const el = document.querySelector(`[name="${first}"]`); if (el) el.focus(); return; }
    setSubmitting(true);
    try {
      await submitStage1(values);
      window.portalAnalytics && window.portalAnalytics.log("submission", { step: "stage1" });
      try { localStorage.removeItem(S1_DRAFT_KEY); } catch (e) {}
      onSubmitted({ email: values.email, full_name: values.full_name });
    } catch (err) {
      console.error("[portal] Stage 1 submit failed", err);
      setSubmitErr(err.message || "Something went wrong saving your application. Your work is preserved — try again, or call " + (Portal.brand.contact && Portal.brand.contact.phone) + ".");
    } finally { setSubmitting(false); }
  }

  async function submitStage1(v) {
    const sb = window.portalSupabase;
    if (!sb) { await new Promise((r) => setTimeout(r, 650)); console.warn("[portal] DEMO — Stage 1 simulated", v); return; }

    // Lead capture runs server-side (service-role edge function) — no anonymous
    // auth, and it creates the email-keyed identity the Stage-2 magic link reuses.
    const { data, error } = await sb.functions.invoke("submit-stage1", { body: v });
    if (error) throw error;
    if (data && data.error) throw new Error(data.detail || data.error);
    if (data && data.application_id) window.__portalAppId = data.application_id;

    // Best-effort confirmation email (no-op until that function + mail key exist).
    try { await sb.functions.invoke("send-stage1-confirmation", { body: { application_id: data && data.application_id } }); }
    catch (e) { /* optional */ }
  }

  return (
    <div className="form-stage">
      <div className="wrap">
        <div className="form-card">
          <div className="form-head">
            <h2 className="form-title" dangerouslySetInnerHTML={{ __html: (copy.title || "Apply for space").replace(/505 Rose/, "505 <em>Rose</em>") }} />
            <p className="form-sub">{copy.subtitle}</p>
          </div>

          {submitErr && <div className="form-error-banner">{submitErr}</div>}

          <form onSubmit={handleSubmit} noValidate>
            {fields.map((f) => (
              <Field key={f.name}
                name={f.name} label={f.label} type={f.type} required={f.required}
                value={values[f.name]} error={errors[f.name]} touched={touched[f.name]}
                options={f.options} placeholder={f.placeholder} autocomplete={f.autocomplete}
                inputmode={f.inputmode} maxLength={f.maxLength}
                help={f.helpKey ? copy[f.helpKey] : undefined}
                showOk={f.name === "email"}
                onChange={setField} onBlur={onBlur} onFocus={onFocus} />
            ))}

            <div className="form-actions">
              <button type="submit" className="btn block" disabled={submitting}>
                {submitting ? "Sending…" : (copy.submit || "Send application")}
                {!submitting && <span className="arr"><Icon name="arrow" size={15} /></span>}
              </button>
              <p className="form-legal">{copy.legal}</p>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}