// RsvpForm.jsx — RSVP form with localStorage persistence

function RsvpForm() {
  const { t, lang } = useT();
  const [submitted, setSubmitted] = React.useState(() => {
    try {
      return !!localStorage.getItem("sl-rsvp");
    } catch (e) {
      return false;
    }
  });

  const [form, setForm] = React.useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("sl-rsvp-draft") || "null");
      if (saved) return saved;
    } catch (e) {}
    return { name: "", attending: "", diet: "", message: "" };
  });

  const set = (k, v) => {
    const next = { ...form, [k]: v };
    setForm(next);
    try {
      localStorage.setItem("sl-rsvp-draft", JSON.stringify(next));
    } catch (e) {}
  };

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.attending) return;
    try {
      localStorage.setItem(
        "sl-rsvp",
        JSON.stringify({ ...form, when: new Date().toISOString(), lang }),
      );
      localStorage.removeItem("sl-rsvp-draft");
    } catch (e) {}
    setSubmitted(true);
  };

  const reset = () => {
    try {
      localStorage.removeItem("sl-rsvp");
    } catch (e) {}
    setForm({ name: "", attending: "", diet: "", message: "" });
    setSubmitted(false);
  };

  if (submitted) {
    return (
      <div className="thanks">
        <h3 className="title">{t("rsvp.thanksTitle")}</h3>
        <p className="body">{t("rsvp.thanksBody")}</p>
        <div style={{ marginTop: 22 }}>
          <button type="button" className="btn btn-ghost" onClick={reset}>
            {t("rsvp.thanksBtn")}
          </button>
        </div>
      </div>
    );
  }

  return (
    <form
      className="form"
      onSubmit={submit}
      noValidate
      style={{ fontWeight: 700, padding: "0 28px" }}
    >
      <div className="row">
        <label htmlFor="rsvp-name">{t("rsvp.nameLabel")}</label>
        <input
          id="rsvp-name"
          type="text"
          value={form.name}
          onChange={(e) => set("name", e.target.value)}
          placeholder={t("rsvp.namePlaceholder")}
          required
        />
      </div>

      <div className="row">
        <label>{t("rsvp.attendingLabel")}</label>
        <div className="radio-row">
          <label
            className={
              "radio-pill" + (form.attending === "yes" ? " selected" : "")
            }
            style={{ padding: "auto" }}
          >
            <input
              type="radio"
              name="attending"
              value="yes"
              checked={form.attending === "yes"}
              onChange={() => set("attending", "yes")}
            />
            <div>{t("rsvp.attendingYes")}</div>
          </label>
          <label
            className={
              "radio-pill" + (form.attending === "no" ? " selected" : "")
            }
          >
            <input
              type="radio"
              name="attending"
              value="no"
              checked={form.attending === "no"}
              onChange={() => set("attending", "no")}
            />
            {t("rsvp.attendingNo")}
          </label>
        </div>
      </div>

      <div className="row">
        <label htmlFor="rsvp-diet">{t("rsvp.dietLabel")}</label>
        <input
          id="rsvp-diet"
          type="text"
          value={form.diet}
          onChange={(e) => set("diet", e.target.value)}
          placeholder={t("rsvp.dietPlaceholder")}
        />
      </div>

      <div className="row">
        <label htmlFor="rsvp-message">{t("rsvp.messageLabel")}</label>
        <textarea
          id="rsvp-message"
          rows="3"
          value={form.message}
          onChange={(e) => set("message", e.target.value)}
          placeholder={t("rsvp.messagePlaceholder")}
        />
      </div>

      <div className="form-actions">
        <button
          type="submit"
          className="btn"
          disabled={!form.name.trim() || !form.attending}
        >
          {t("rsvp.submit")} →
        </button>
      </div>
    </form>
  );
}

window.RsvpForm = RsvpForm;