/* ============================================================
   rappels.jsx — encart « Fête de mes proches » (rétention).
   ------------------------------------------------------------
   L'utilisateur ajoute les prénoms de ses proches + son e-mail.
   On l'inscrit au rappel : la veille de chaque fête, un e-mail
   lui rappelle de la souhaiter, avec la fiche du prénom à partager.

   Trafic récurrent, captif, INDÉPENDANT de Google.

   • POST → window.ORACLE_FICHE_API + "/rappels" (backend serverless).
   • Repli LOCAL si pas de backend : on garde l'inscription dans
     localStorage (oracle_rappels) et on confirme quand même.
   • Confidentialité : e-mail utilisé uniquement pour les rappels,
     désinscription en un clic (lien dans chaque e-mail).
   Exposé sur window.RappelsCard.
   ============================================================ */
(function () {
  const { useState: useStateR } = React;
  const LS_KEY = "oracle_rappels";

  function api() {
    const base = (window.ORACLE_FICHE_API || "").replace(/\/$/, "");
    return base ? base + "/rappels" : "";
  }
  function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test((v || "").trim()); }
  function cap(s) { s = String(s || "").trim(); return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase(); }

  function saveLocal(email, proches) {
    try { localStorage.setItem(LS_KEY, JSON.stringify({ email, proches, at: Date.now() })); } catch (e) {}
  }
  function readLocal() {
    try { return JSON.parse(localStorage.getItem(LS_KEY) || "null"); } catch (e) { return null; }
  }

  function RappelsCard() {
    const existing = readLocal();
    const [open, setOpen] = useStateR(false);
    const [email, setEmail] = useStateR((existing && existing.email) || "");
    const [names, setNames] = useStateR(
      existing && existing.proches && existing.proches.length
        ? existing.proches.map((p) => (typeof p === "string" ? p : p.prenom))
        : ["", ""]
    );
    const [consent, setConsent] = useStateR(false);
    const [busy, setBusy] = useStateR(false);
    const [done, setDone] = useStateR(null);   // { fetes:[…], count }
    const [err, setErr] = useStateR("");

    function setName(i, v) { setNames((arr) => arr.map((n, k) => (k === i ? v : n))); }
    function addRow() { setNames((arr) => arr.concat("")); }
    function removeRow(i) { setNames((arr) => arr.length > 1 ? arr.filter((_, k) => k !== i) : arr); }

    async function submit(e) {
      e.preventDefault();
      setErr("");
      const proches = names.map(cap).filter(Boolean);
      if (!proches.length) { setErr("Ajoute au moins un prénom."); return; }
      if (!validEmail(email)) { setErr("Vérifie ton adresse e-mail."); return; }
      if (!consent) { setErr("Coche la case pour recevoir les rappels."); return; }
      setBusy(true);
      saveLocal(email.trim().toLowerCase(), proches);
      const url = api();
      if (!url) { setBusy(false); setDone({ count: proches.length, fetes: [], local: true }); return; }
      try {
        const r = await fetch(url, {
          method: "POST",
          headers: { "Content-Type": "application/json", "Accept": "application/json" },
          body: JSON.stringify({ email: email.trim().toLowerCase(), proches, consent: true })
        });
        const j = await r.json().catch(() => ({}));
        if (j && j.ok) setDone({ count: j.count, fetes: j.fetes || [] });
        else setDone({ count: proches.length, fetes: [], local: true });
      } catch (e2) {
        setDone({ count: proches.length, fetes: [], local: true });
      } finally { setBusy(false); }
    }

    if (done) {
      return (
        <div className="rappels-card rappels-done">
          <span className="rappels-done-ico">✦</span>
          <h3>C'est noté.</h3>
          <p>
            {done.fetes && done.fetes.length
              ? <span>On te préviendra la veille de chaque fête — la prochaine&nbsp;: <b>{done.fetes[0].prenom}</b>, le {done.fetes[0].date}.</span>
              : <span>On te préviendra la veille de la fête de tes proches, avec leur fiche à partager.</span>}
          </p>
          {done.local && <p className="rappels-fine">Enregistré sur cet appareil. Le rappel par e-mail s'activera une fois le service connecté.</p>}
          <button className="rappels-edit" onClick={() => setDone(null)}>Modifier ma liste</button>
        </div>
      );
    }

    if (!open) {
      return (
        <button className="rappels-teaser" onClick={() => setOpen(true)}>
          <span className="rappels-teaser-k">Pour ne pas oublier</span>
          <span className="rappels-teaser-t">Ne rate plus la fête de tes proches</span>
          <span className="rappels-teaser-d">Ajoute leurs prénoms — on te rappelle la veille, avec leur fiche à leur envoyer.</span>
          <span className="rappels-teaser-go">Activer les rappels →</span>
        </button>
      );
    }

    return (
      <form className="rappels-card" onSubmit={submit}>
        <div className="rappels-head">
          <div className="rappels-k">Fête de mes proches</div>
          <h3 className="rappels-title">On te rappelle la veille</h3>
          <p className="rappels-lead">Les prénoms de ceux que tu aimes. La veille de leur fête, tu reçois un mot — et leur fiche à leur partager.</p>
        </div>
        <div className="rappels-rows">
          {names.map((n, i) =>
            <div className="rappels-row" key={i}>
              <input className="rappels-input" type="text" value={n} placeholder={"Prénom d'un proche"} onChange={(e) => setName(i, e.target.value)} />
              {names.length > 1 &&
                <button type="button" className="rappels-rm" onClick={() => removeRow(i)} aria-label="Retirer">×</button>}
            </div>
          )}
          <button type="button" className="rappels-add" onClick={addRow}>+ un autre prénom</button>
        </div>
        <input className="rappels-input rappels-email" type="email" value={email} placeholder="ton@email.fr" onChange={(e) => setEmail(e.target.value)} />
        <label className="rappels-consent">
          <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
          <span>J'accepte de recevoir un rappel la veille de chaque fête. Désinscription en un clic, e-mail jamais partagé.</span>
        </label>
        {err && <p className="rappels-err">{err}</p>}
        <button className="btn-primary rappels-cta" type="submit" disabled={busy}>{busy ? "Enregistrement…" : "M'envoyer les rappels"}</button>
      </form>
    );
  }

  window.RappelsCard = RappelsCard;
})();