// The waitlist form. Ledger-style: mono labels, hairline rules between rows,
// no decorative chrome. Submits to an inline success state.
//
// Props:
//   variant — "card" (linen card on Oat) | "bare" (no card, just hairlines)
//   inverse — boolean, dark mode (cacao bg)

function WaitlistForm({ variant = "card", inverse = false }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [submittedData, setSubmittedData] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);
  const [form, setForm] = React.useState({
    name: "",
    email: "",
    company: "",
    role: "",
    audience: "",
    volume: "",
    notes: "",
  });

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitError(null);
    if (typeof window.amosOpenPanelTrack === "function") {
      window.amosOpenPanelTrack("waitlist_form_submit", {
        has_company: Boolean(form.company && form.company.trim()),
        has_role: Boolean(form.role && form.role.trim()),
        has_audience: Boolean(form.audience),
        has_volume: Boolean(form.volume),
        has_notes: Boolean(form.notes && form.notes.trim()),
      });
    }
    setSubmitting(true);
    try {
      const res = await fetch("/api/waitlist", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      let payload = {};
      try {
        payload = await res.json();
      } catch {
        /* ignore */
      }
      if (!res.ok) {
        let msg =
          typeof payload.error === "string" && payload.error.trim()
            ? payload.error.trim()
            : "";
        if (typeof payload.hint === "string" && payload.hint.trim()) {
          msg = msg ? `${msg}\n\n${payload.hint.trim()}` : payload.hint.trim();
        }
        if (!msg) {
          msg = "Something went wrong. Please try again.";
        }
        setSubmitError(msg);
        return;
      }
      const id = "wl_" + Math.random().toString(36).slice(2, 8);
      setSubmittedData({ id, ts: new Date().toISOString().slice(0, 19).replace("T", " ") + "Z", ...form });
      setSubmitted(true);
      if (typeof window.amosOpenPanelTrack === "function") {
        window.amosOpenPanelTrack("waitlist_form_submit_ok", { id });
      }
    } catch {
      setSubmitError("Network error. Check your connection and try again.");
    } finally {
      setSubmitting(false);
    }
  };

  // Color tokens that flip with inverse mode
  const c = inverse
    ? {
        bg: "transparent",
        cardBg: "rgba(247,239,226,0.04)",
        fg: "var(--linen)",
        muted: "rgba(239,227,209,0.78)",
        label: "rgba(239,227,209,0.82)",
        border: "rgba(239,227,209,0.28)",
        borderStrong: "rgba(239,227,209,0.4)",
        inputBg: "transparent",
        inputFg: "var(--linen)",
        chipBg: "rgba(239,227,209,0.1)",
        chipBorder: "rgba(239,227,209,0.38)",
        chipFg: "var(--linen)",
        chipActiveBg: "var(--saffron)",
        chipActiveFg: "var(--cacao)",
        primaryBg: "var(--saffron)",
        primaryFg: "var(--cacao)",
      }
    : {
        bg: "transparent",
        cardBg: "var(--paper)",
        fg: "var(--cacao)",
        muted: "var(--walnut)",
        label: "var(--walnut)",
        border: "var(--border-soft)",
        borderStrong: "var(--border-base)",
        inputBg: "transparent",
        inputFg: "var(--cacao)",
        chipBg: "transparent",
        chipBorder: "var(--border-base)",
        chipFg: "var(--cacao)",
        chipActiveBg: "var(--cacao)",
        chipActiveFg: "var(--linen)",
        primaryBg: "var(--cacao)",
        primaryFg: "var(--linen)",
      };

  const cardStyle = variant === "card"
    ? {
        background: c.cardBg,
        border: `1px solid ${c.border}`,
        borderRadius: 22,
        padding: "28px 30px 26px",
        boxShadow: inverse ? "none" : "var(--shadow-md)",
      }
    : { padding: 0, background: "transparent" };

  // ── Success state ────────────────────────────────────────────
  if (submitted && submittedData) {
    return (
      <div
        id="waitlist"
        className={"waitlist-form" + (inverse ? " waitlist-form--inverse" : "")}
        style={{ ...cardStyle, position: "relative" }}
      >
        <div style={waitlistStyles.headerRow}>
          <div style={{ ...waitlistStyles.crumb, color: c.label }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--kelp)", boxShadow: "0 0 0 4px rgba(47,74,62,0.18)" }} />
            <span>{submittedData.id} · received</span>
          </div>
          <div style={{ ...waitlistStyles.crumb, color: c.muted }}>{submittedData.ts}</div>
        </div>

        <div style={{ height: 8 }} />
        <div style={{ ...waitlistStyles.successHead, color: c.fg }}>
          You're on the list.
        </div>
        <div style={{ ...waitlistStyles.successLede, color: c.muted }}>
          We review every request by hand. If your work fits the mission economy, we'll reach out from <span style={{ fontFamily: "var(--font-mono)", color: c.fg }}>waitlist@amos.com</span> within five business days.
        </div>

        <hr style={{ ...waitlistStyles.hr, borderColor: c.border, margin: "22px 0 14px" }} />

        <div style={waitlistStyles.recapGrid}>
          <RecapRow label="Name" value={submittedData.name || "—"} c={c} />
          <RecapRow label="Email" value={submittedData.email || "—"} c={c} mono />
          {submittedData.company && <RecapRow label="Organization" value={submittedData.company} c={c} />}
          {submittedData.audience && <RecapRow label="Segment" value={submittedData.audience} c={c} />}
          {submittedData.volume && <RecapRow label="Monthly volume" value={submittedData.volume} c={c} mono />}
        </div>

        <div style={{ ...waitlistStyles.successFoot, borderTop: `1px solid ${c.border}`, marginTop: 22, paddingTop: 16 }}>
          <span style={{ ...waitlistStyles.footMono, color: c.muted }}>NEXT · UNDERWRITING REVIEW</span>
          <button
            type="button"
            onClick={() => { setSubmitted(false); }}
            style={{ ...waitlistStyles.linkBtn, color: c.fg }}
          >
            Submit another →
          </button>
        </div>
      </div>
    );
  }

  // ── Form state ───────────────────────────────────────────────
  return (
    <form
      id="waitlist"
      className={"waitlist-form" + (inverse ? " waitlist-form--inverse" : "")}
      onSubmit={onSubmit}
      style={cardStyle}
    >
      <div style={waitlistStyles.headerRow}>
        <div style={{ ...waitlistStyles.crumb, color: c.label }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--saffron)" }} />
          <span>JOIN THE WAITLIST</span>
        </div>
      </div>

      <div style={{ height: 14 }} />

      <Field label="Name" required c={c}>
        <input type="text" name="name" autoComplete="name" required value={form.name} onChange={set("name")} placeholder="First and last"
               style={inputStyle(c)} />
      </Field>
      <Field label="Work email" required c={c}>
        <input type="email" name="email" autoComplete="email" required value={form.email} onChange={set("email")} placeholder="you@org.com"
               style={{ ...inputStyle(c), fontFamily: "var(--font-mono)", fontSize: 14 }} />
      </Field>
      <Field label="Organization" c={c}>
        <input type="text" name="organization" autoComplete="organization" value={form.company} onChange={set("company")} placeholder="Company, platform, or nonprofit"
               style={inputStyle(c)} />
      </Field>
      <Field label="Role" c={c}>
        <input type="text" name="job-title" autoComplete="organization-title" value={form.role} onChange={set("role")} placeholder="CTO, Head of Payments, ED…"
               style={inputStyle(c)} />
      </Field>

      <Field label="Segment" group c={c}>
        <ChipGroup
          value={form.audience}
          onChange={(v) => setForm({ ...form, audience: v })}
          options={["Mission-driven platform", "Mission-driven business", "Enterprise nonprofit"]}
          c={c}
        />
      </Field>

      <Field label="Estimated monthly volume" group c={c}>
        <ChipGroup
          value={form.volume}
          onChange={(v) => setForm({ ...form, volume: v })}
          options={["< $1M", "$1–25M", "$25–50M", "$50–100M", "$100M+"]}
          c={c}
          mono
        />
      </Field>

      <Field label="What are you building?" c={c} last>
        <textarea name="notes" value={form.notes} onChange={set("notes")} rows={3}
                  placeholder="One or two lines. We read every word."
                  style={{ ...inputStyle(c), resize: "vertical", minHeight: 64, paddingTop: 10, paddingBottom: 10 }} />
      </Field>

      {submitError && (
        <div
          role="alert"
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: 14,
            color: "var(--saffron-deep)",
            paddingTop: 12,
            lineHeight: 1.45,
          }}
        >
          {submitError}
        </div>
      )}

      <div style={{ ...waitlistStyles.submitRow, borderTop: `1px solid ${c.border}`, marginTop: 8, paddingTop: 18 }}>
        <span style={{ ...waitlistStyles.footMono, color: c.muted }}>
          REVIEWED BY HUMANS
        </span>
        <button
          type="submit"
          disabled={submitting}
          style={{
          fontFamily: "var(--font-sans)",
          fontSize: 14,
          fontWeight: 500,
          padding: "12px 20px",
          borderRadius: 12,
          background: c.primaryBg,
          color: c.primaryFg,
          border: 0,
          cursor: submitting ? "wait" : "pointer",
          opacity: submitting ? 0.72 : 1,
          boxShadow: "var(--shadow-inset)",
          transition: "filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)",
        }}
        >
          {submitting ? "Sending…" : "Join the waitlist"}
        </button>
      </div>
    </form>
  );
}

// ── Sub-components ─────────────────────────────────────────────
function Field({ label, required, last, c, children, group }) {
  const labelId = React.useId();
  const controlId = React.useId();
  const child = React.Children.only(children);
  const control =
    !group && React.isValidElement(child)
      ? React.cloneElement(child, { id: child.props.id ?? controlId })
      : child;
  const controlIdForLabel =
    !group && React.isValidElement(child) ? (child.props.id ?? controlId) : controlId;
  const labelStyle = {
    fontFamily: "var(--font-mono)",
    fontSize: 12,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    color: c.label,
    paddingTop: 10,
  };
  const labelText = (
    <>
      {label}{required && <span style={{ color: "var(--saffron-deep)", marginLeft: 4 }} aria-hidden="true">·</span>}
      {required && <span className="visually-hidden"> (required)</span>}
    </>
  );
  return (
    <div className="form-row" style={{
      borderBottom: last ? "none" : `1px solid ${c.border}`,
      padding: "12px 0",
      display: "grid",
      gridTemplateColumns: "150px 1fr",
      alignItems: "start",
      gap: 16,
    }}>
      {group ? (
        <div id={labelId} style={labelStyle}>
          {labelText}
        </div>
      ) : (
        <label htmlFor={controlIdForLabel} style={labelStyle}>
          {labelText}
        </label>
      )}
      <div {...(group ? { role: "group", "aria-labelledby": labelId } : {})}>
        {control}
      </div>
    </div>
  );
}

function inputStyle(c) {
  return {
    width: "100%",
    boxSizing: "border-box",
    background: c.inputBg,
    color: c.inputFg,
    border: 0,
    outline: 0,
    padding: "10px 0",
    fontFamily: "var(--font-sans)",
    fontSize: 16,
    lineHeight: 1.4,
  };
}

function ChipGroup({ value, onChange, options, c, mono }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, paddingTop: 6, paddingBottom: 4 }}>
      {options.map((opt) => {
        const active = value === opt;
        return (
          <button
            key={opt}
            type="button"
            aria-pressed={active}
            onClick={() => onChange(active ? "" : opt)}
            style={{
              fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
              fontSize: 13,
              fontWeight: mono ? 500 : 500,
              padding: "7px 12px",
              borderRadius: 999,
              border: `1px solid ${active ? "transparent" : c.chipBorder}`,
              background: active ? c.chipActiveBg : c.chipBg,
              color: active ? c.chipActiveFg : c.chipFg,
              cursor: "pointer",
              transition: "background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)",
            }}
          >
            {opt}
          </button>
        );
      })}
    </div>
  );
}

function RecapRow({ label, value, c, mono }) {
  return (
    <div className="form-row" style={{
      display: "grid",
      gridTemplateColumns: "150px 1fr",
      gap: 16,
      padding: "6px 0",
    }}>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 12,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        color: c.label,
      }}>{label}</div>
      <div style={{
        fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)",
        fontSize: mono ? 14 : 15,
        color: c.fg,
      }}>{value}</div>
    </div>
  );
}

const waitlistStyles = {
  headerRow: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  crumb: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase" },
  hr: { border: 0, borderTop: "1px solid", margin: 0 },
  successHead: { fontFamily: "var(--font-display)", fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "8px 0 12px", textWrap: "balance" },
  successLede: { fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.55, textWrap: "pretty" },
  recapGrid: { display: "flex", flexDirection: "column" },
  successFoot: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  submitRow: { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 },
  footMono: { fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase" },
  linkBtn: { background: "transparent", border: 0, fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 500, cursor: "pointer", padding: 0 },
};

window.WaitlistForm = WaitlistForm;