// PAGE RECETTES — rassemble toutes les recettes (data.recettes) du recueil,
// groupées par type (Remède / Cuisine / Beauté). Le contenu des recettes n'est
// PAS dans window.PLANTS (qui ne porte qu'un flag hasRecettes) : on le charge via
// la vue dédiée api/list?view=recipes (même esprit que searchindex/history).
//
// Page volontairement ABSENTE de la barre de nav — on y accède par la carte
// « Recettes » de l'Accueil. Réutilise RecetteCard (déclaré dans Fiche.jsx, au
// scope global partagé des scripts Babel), exactement comme Poles réutilise CatCard.
(function () {
  const ORDER = ["Remède", "Cuisine", "Beauté"];
  // Tout type hors Remède/Beauté (condiment, liqueur, confiserie, confiture…) est
  // culinaire → rangé sous « Cuisine ». La carte garde son propre libellé en badge.
  const bucketOf = (type) => (type === "Remède" || type === "Beauté" ? type : "Cuisine");

  const SECTION_INTRO = {
    "Remède": "Tisanes, sirops, baumes et préparations de la pharmacopée du jardin.",
    "Cuisine": "De la table sauvage aux confitures, liqueurs et condiments.",
    "Beauté": "Soins, masques et cosmétiques tirés des plantes.",
  };

  // Renvoi cliquable vers la fiche dont la recette est tirée (au-dessus de la carte).
  function SourceLink({ nom, onClick }) {
    const [hover, setHover] = React.useState(false);
    return (
      <div
        onClick={onClick}
        role="button"
        tabIndex={0}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}
        aria-label={`Ouvrir la fiche : ${nom}`}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ display: "inline-flex", alignItems: "center", gap: 6, marginBottom: 8, cursor: "pointer", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: hover ? "var(--moss-deep)" : "var(--ink-mute)", transition: "color 240ms var(--ease)" }}
      >
        {nom} <IconArrow size={10} />
      </div>
    );
  }

  function Recettes({ setRoute, setPlantId }) {
    const isMobile = useMobile();
    const pad = isMobile ? "0 20px" : "0 40px";
    const [items, setItems] = React.useState(null); // null = en cours de chargement
    const [filter, setFilter] = React.useState(null); // null = tous les types

    // Chargement des recettes via la vue dédiée (repli silencieux → liste vide).
    React.useEffect(() => {
      let alive = true;
      fetch("/api/list?view=recipes", { cache: "no-store" })
        .then((r) => (r.ok ? r.json() : Promise.reject(r)))
        .then((d) => {
          if (!alive) return;
          const flat = [];
          for (const p of Array.isArray(d.recipes) ? d.recipes : []) {
            for (const r of Array.isArray(p.recettes) ? p.recettes : []) {
              flat.push({ ...r, plantId: p.id, plantNom: p.nom, plantLatin: p.latin });
            }
          }
          setItems(flat);
        })
        .catch(() => { if (alive) setItems([]); });
      return () => { alive = false; };
    }, []);

    const goFiche = (id) => { setPlantId(id); setRoute("fiche"); };

    // Groupement par bucket de type (Cuisine absorbe les types atypiques).
    const groups = React.useMemo(() => {
      const g = { "Remède": [], "Cuisine": [], "Beauté": [] };
      for (const it of items || []) g[bucketOf(it.type)].push(it);
      return g;
    }, [items]);

    const total = items ? items.length : 0;
    const visibleTypes = ORDER.filter((t) => groups[t].length && (!filter || filter === t));

    return (
      <main className="page-enter">
        {/* En-tête */}
        <section style={{ padding: isMobile ? "44px 0 24px" : "80px 0 36px" }}>
          <div style={{ maxWidth: 1400, margin: "0 auto", padding: pad }}>
            <div className="kicker" style={{ marginBottom: 18 }}>
              Recettes · {total} préparation{total > 1 ? "s" : ""} du recueil
            </div>
            <h1 className="h-display" style={{ fontSize: isMobile ? "clamp(40px, 9vw, 64px)" : "clamp(60px, 8vw, 100px)", lineHeight: 0.95, margin: isMobile ? "0 0 16px" : "0 0 24px", letterSpacing: "-0.02em" }}>
              Le carnet de <span className="h-italic">préparations</span>.
            </h1>
            {!isMobile && (
              <p style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.5, color: "var(--ink-soft)", maxWidth: 720, margin: 0 }}>
                Toutes les recettes glanées au fil des fiches — remèdes, cuisine et beauté — réunies en un seul carnet. Chaque préparation renvoie à la plante dont elle est tirée.
              </p>
            )}
          </div>
        </section>

        {/* Filtre par type */}
        {total > 0 && (
          <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: isMobile ? "14px 0" : "20px 0", background: "var(--tint)" }}>
            <div style={{ maxWidth: 1400, margin: "0 auto", padding: isMobile ? "0 16px" : "0 40px", display: "flex", gap: 10, alignItems: "center", overflowX: isMobile ? "auto" : "visible", scrollbarWidth: "none" }}>
              <span className="kicker" style={{ marginRight: 6, flexShrink: 0 }}>Type</span>
              <button className={`tag ${filter === null ? "tag-active" : ""}`} style={{ flexShrink: 0 }} onClick={() => setFilter(null)}>Toutes</button>
              {ORDER.filter((t) => groups[t].length).map((t) => (
                <button key={t} className={`tag ${filter === t ? "tag-active" : ""}`} style={{ flexShrink: 0 }} onClick={() => setFilter(t === filter ? null : t)}>
                  {t} · {groups[t].length}
                </button>
              ))}
            </div>
          </section>
        )}

        {/* Contenu */}
        <section style={{ maxWidth: 1400, margin: "40px auto 0", padding: pad, paddingBottom: isMobile ? 64 : 100 }}>
          {items === null ? (
            <p style={{ fontFamily: "var(--serif)", fontSize: 17, fontStyle: "italic", color: "var(--ink-mute)" }}>Chargement des recettes…</p>
          ) : total === 0 ? (
            <p style={{ fontFamily: "var(--serif)", fontSize: 17, fontStyle: "italic", color: "var(--ink-mute)" }}>Aucune recette pour le moment.</p>
          ) : (
            visibleTypes.map((t) => (
              <div key={t} style={{ marginBottom: isMobile ? 44 : 72 }}>
                <div style={{ marginBottom: isMobile ? 18 : 28 }}>
                  <h2 className="h-display" style={{ fontSize: isMobile ? 30 : 44, lineHeight: 1, margin: "0 0 6px" }}>{t}</h2>
                  <p style={{ fontFamily: "var(--serif)", fontSize: isMobile ? 15 : 17, fontStyle: "italic", color: "var(--ink-mute)", margin: 0 }}>{SECTION_INTRO[t]}</p>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 16 : 24 }}>
                  {groups[t].map((it, i) => (
                    <div key={`${it.plantId}-${i}`}>
                      <SourceLink nom={it.plantNom} onClick={() => goFiche(it.plantId)} />
                      <RecetteCard recette={it} isMobile={isMobile} />
                    </div>
                  ))}
                </div>
              </div>
            ))
          )}
        </section>
      </main>
    );
  }

  window.Recettes = Recettes;
})();