// PAGE COMPOSÉ — plantes partageant un composé médicinal donné (« Plantes riches
// en Tanins »). On y arrive UNIQUEMENT en cliquant une pastille de composé sur une
// fiche (composé partagé par ≥2 fiches) : pas de porte d'entrée accueil/nav.
// Index pur : components/composes.js. Cartes réutilisées : CatCard (Catalogue.jsx).
(function () {
  function Composes({ composeSlug, setRoute, setPlantId }) {
    const isMobile = useMobile();
    const pad = isMobile ? "0 20px" : "0 40px";
    const index = React.useMemo(() => window.buildComposesIndex(window.PLANTS || []), []);
    const entry = composeSlug ? index.bySlug.get(composeSlug) : null;

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

    // Résout les ids de l'entrée en fiches (window.PLANTS), ordre de l'index.
    const byId = React.useMemo(() => {
      const m = {};
      for (const p of (window.PLANTS || [])) m[p.id] = p;
      return m;
    }, []);
    const plantes = entry ? entry.plantIds.map((id) => byId[id]).filter(Boolean) : [];

    return (
      <main className="page-enter">
        {/* En-tête */}
        <section style={{ padding: isMobile ? "44px 0 20px" : "80px 0 32px" }}>
          <div style={{ maxWidth: 1400, margin: "0 auto", padding: pad }}>
            <div className="kicker" style={{ marginBottom: 18 }}>Composé médicinal partagé</div>
            {entry ? (
              <React.Fragment>
                <h1 className="h-display" style={{ fontSize: isMobile ? "clamp(36px, 8vw, 60px)" : "clamp(52px, 7vw, 88px)", lineHeight: 0.98, margin: isMobile ? "0 0 16px" : "0 0 20px", letterSpacing: "-0.02em" }}>
                  Plantes riches en <span className="h-italic">{entry.compose.toLowerCase()}</span>.
                </h1>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--moss-deep)" }}>
                  {entry.count} fiche{entry.count > 1 ? "s" : ""} au recueil
                </div>
              </React.Fragment>
            ) : (
              <h1 className="h-display" style={{ fontSize: isMobile ? 34 : 52, lineHeight: 1, margin: 0 }}>
                Composé <span className="h-italic">inconnu</span>.
              </h1>
            )}
          </div>
        </section>

        {/* Grille des fiches (réutilise CatCard) */}
        <section style={{ maxWidth: 1400, margin: "24px auto 0", padding: pad, paddingBottom: isMobile ? 64 : 100 }}>
          {entry ? (
            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: isMobile ? 12 : 20 }}>
              {plantes.map((p, i) => (
                <CatCard key={p.id} p={p} idx={i + 1} onClick={() => goFiche(p.id)} isMobile={isMobile} />
              ))}
            </div>
          ) : (
            <p style={{ fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic", color: "var(--ink-mute)" }}>
              Ce composé n'est partagé par aucune fiche du recueil — ou son lien a expiré.
            </p>
          )}
        </section>
      </main>
    );
  }

  window.Composes = Composes;
})();