// Aperçu avant impression / export PDF d'une fiche plante.
// S'ouvre depuis Fiche.jsx via le bouton "Imprimer".
// window.print() déclenche le PDF via le dialogue navigateur.

function FichePrint({ plant, onClose }) {
  const p = plant;
  const photos = p.photos || {};
  const wiki = p.wikipedia;
  const photoSrc = photos.p1 || (wiki && wiki.thumb) || null;

  const MONTHS = ["Janvier","Février","Mars","Avril","Mai","Juin",
                  "Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
  const MONTHS_SHORT = ["J","F","M","A","M","J","J","A","S","O","N","D"];
  const floraison = Array.isArray(p.floraison) ? p.floraison : [];

  const hasMorphologie = !!p.morphologie;
  const hasHabitat     = !!p.habitat || !!p.repartition;
  const hasComestible  = !!(p.comestibilite && p.comestibilite.detail);
  const hasMedicinal   = !!(p.medicinal && p.medicinal.detail);
  const hasBioindic    = !!p.bioindication;
  const hasPrecautions = !!p.precautions;
  const hasUsages      = hasComestible || hasMedicinal || hasBioindic || hasPrecautions;
  const hasHistoire    = !!p.histoire;
  const hasSymbolique  = !!p.symbolique;
  const tags           = (Array.isArray(p.usage) ? p.usage : []).filter(u => u !== "Symbolique" && u !== "Ornemental");

  // Fermeture sur Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const handlePrint = () => {
    document.body.classList.add("printing-mode");
    window.print();
    setTimeout(() => document.body.classList.remove("printing-mode"), 800);
  };

  // Styles fixes (blanc/vert, indépendants du thème nocturne/éditorial)
  const INK     = "#1c241b";
  const MOSS    = "#2d4329";
  const MUTED   = "#6a7164";
  const CREAM   = "#faf6ea";
  const LINE    = "#d9cfa8";
  const RUST    = "#8b4a2b";
  const SERIF   = "'Cormorant Garamond', 'EB Garamond', Georgia, serif";
  const DISPLAY = "'Instrument Serif', 'Cormorant Garamond', serif";
  const MONO    = "'JetBrains Mono', 'Courier New', monospace";

  return ReactDOM.createPortal(
    <div
      className="fiche-print-modal"
      style={{
        position: "fixed", inset: 0,
        background: "#e8e2d4",
        zIndex: 1100,
        overflowY: "auto",
      }}
    >
      {/* ── Barre d'outils (masquée à l'impression) ── */}
      <div
        className="print-toolbar"
        style={{
          position: "sticky", top: 0, zIndex: 1101,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "12px 24px",
          background: "white",
          borderBottom: `1px solid ${LINE}`,
        }}
      >
        <span style={{ fontFamily: MONO, fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: MUTED }}>
          Aperçu avant impression
        </span>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn" onClick={onClose}>
            <IconClose size={13} /> Fermer
          </button>
          <button className="btn btn-solid" onClick={handlePrint}>
            <IconPrint size={13} /> Lancer l'impression
          </button>
        </div>
      </div>

      {/* ── Zone A4 centrée ── */}
      <div className="print-outer-wrap" style={{ padding: "40px 24px", display: "flex", justifyContent: "center" }}>
        <div
          className="print-page"
          style={{
            width: "min(210mm, 100%)",
            background: "white",
            padding: "14mm 18mm",
            boxShadow: "0 8px 60px rgba(0,0,0,0.18)",
            color: INK,
          }}
        >

          {/* ── Kicker ── */}
          <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: ".22em", textTransform: "uppercase", color: MUTED, marginBottom: "6mm", borderBottom: `1px solid ${LINE}`, paddingBottom: "4mm", display: "flex", justifyContent: "space-between" }}>
            <span>Herbarium · Recueil botanique</span>
            <span>{p.famille || ""}</span>
          </div>

          {/* ── En-tête : titre + photo ── */}
          <div className="print-section" style={{ display: "grid", gridTemplateColumns: photoSrc ? "1fr 110px" : "1fr", gap: "8mm", marginBottom: "7mm", alignItems: "start" }}>
            <div>
              <h1 style={{ fontFamily: DISPLAY, fontSize: 36, lineHeight: 1, margin: "0 0 3mm", letterSpacing: "-0.01em", color: INK }}>
                {p.nom}
              </h1>
              <div style={{ fontFamily: SERIF, fontSize: 18, fontStyle: "italic", color: MOSS, marginBottom: "4mm" }}>
                {p.latin}{p.auteur ? <span style={{ fontFamily: MONO, fontSize: 10, fontStyle: "normal", color: MUTED, marginLeft: 8 }}>{p.auteur}</span> : null}
              </div>

              {/* Séparateur */}
              <div style={{ height: 1, background: LINE, marginBottom: "4mm" }} />

              {/* Métadonnées */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1mm 6mm" }}>
                {[
                  ["Famille", p.famille],
                  ["Statut", p.statut],
                  ["Hauteur", p.hauteur],
                  ["Altitude", p.altitude],
                  ["Couleur", p.couleurFleur || p.couleur],
                  ["Floraison", floraison.length ? `${floraison[0]}–${floraison[floraison.length - 1]}` : null],
                ].filter(([, v]) => v).map(([k, v]) => (
                  <div key={k} style={{ display: "flex", gap: "3mm", alignItems: "baseline" }}>
                    <span style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".14em", textTransform: "uppercase", color: MUTED, flexShrink: 0 }}>{k}</span>
                    <span style={{ fontFamily: SERIF, fontSize: 12, color: INK }}>{v}</span>
                  </div>
                ))}
              </div>

              {/* Tags usage */}
              {tags.length > 0 && (
                <div style={{ display: "flex", gap: "2mm", flexWrap: "wrap", marginTop: "4mm" }}>
                  {tags.map(t => (
                    <span key={t} style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".12em", textTransform: "uppercase", padding: "2px 7px", border: `1px solid ${LINE}`, color: MUTED }}>
                      {t}
                    </span>
                  ))}
                </div>
              )}
            </div>

            {/* Photo principale */}
            {photoSrc && (
              <div style={{ border: `1px solid ${LINE}`, overflow: "hidden", background: CREAM }}>
                <img
                  src={photoSrc}
                  alt={p.nom}
                  className="print-photo"
                  style={{ width: "100%", maxHeight: 130, objectFit: "contain", display: "block" }}
                />
              </div>
            )}
          </div>

          {/* ── Calendrier de floraison ── */}
          {floraison.length > 0 && (
            <div className="print-section" style={{ marginBottom: "7mm" }}>
              <div style={{ display: "flex", border: `1px solid ${LINE}` }}>
                {MONTHS.map((m, i) => {
                  const active = floraison.includes(m);
                  return (
                    <div
                      key={m}
                      style={{
                        flex: 1,
                        textAlign: "center",
                        padding: "3mm 0",
                        background: active ? MOSS : "transparent",
                        borderRight: i < 11 ? `1px solid ${LINE}` : "none",
                      }}
                    >
                      <div style={{ fontFamily: MONO, fontSize: 7, letterSpacing: ".06em", textTransform: "uppercase", color: active ? "white" : MUTED }}>
                        {MONTHS_SHORT[i]}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* ── I. Morphologie ── */}
          {hasMorphologie && (
            <div className="print-section" style={{ marginBottom: "6mm", paddingTop: "5mm", borderTop: `1px solid ${LINE}` }}>
              <PrintSectionTitle num="I." title="Description morphologique" MONO={MONO} DISPLAY={DISPLAY} MOSS={MOSS} INK={INK} />
              <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.6, color: INK, margin: 0 }}>{p.morphologie}</p>
            </div>
          )}

          {/* ── II. Habitat & Répartition ── */}
          {hasHabitat && (
            <div className="print-section" style={{ marginBottom: "6mm", paddingTop: "5mm", borderTop: `1px solid ${LINE}` }}>
              <PrintSectionTitle num="II." title="Habitat & Répartition" MONO={MONO} DISPLAY={DISPLAY} MOSS={MOSS} INK={INK} />
              {p.habitat && <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.6, color: INK, margin: "0 0 4mm" }}>{p.habitat}</p>}
              {p.repartition && <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.6, color: INK, margin: 0, fontStyle: "italic" }}>{p.repartition}</p>}
            </div>
          )}

          {/* ── III. Usages ── */}
          {hasUsages && (
            <div className="print-section" style={{ marginBottom: "6mm", paddingTop: "5mm", borderTop: `1px solid ${LINE}` }}>
              <PrintSectionTitle num="III." title="Usages" MONO={MONO} DISPLAY={DISPLAY} MOSS={MOSS} INK={INK} />

              {hasComestible && (
                <div style={{ marginBottom: "4mm" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "2mm" }}>
                    <span style={{ fontFamily: DISPLAY, fontSize: 15, color: INK }}>Comestibilité</span>
                    <span style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".12em", textTransform: "uppercase", color: "#6b7649" }}>{p.comestibilite.niveau}</span>
                  </div>
                  <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.55, color: INK, margin: 0 }}>{p.comestibilite.detail}</p>
                </div>
              )}

              {hasMedicinal && (
                <div style={{ marginBottom: "4mm" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "2mm" }}>
                    <span style={{ fontFamily: DISPLAY, fontSize: 15, color: INK }}>Vertus médicinales</span>
                    <span style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".12em", textTransform: "uppercase", color: MOSS }}>{p.medicinal.niveau}</span>
                  </div>
                  <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.55, color: INK, margin: "0 0 2mm" }}>{p.medicinal.detail}</p>
                  {Array.isArray(p.medicinal.composes) && p.medicinal.composes.length > 0 && (
                    <p style={{ fontFamily: MONO, fontSize: 9, letterSpacing: ".1em", color: MUTED, margin: 0 }}>
                      Composés : {p.medicinal.composes.join(" · ")}
                    </p>
                  )}
                </div>
              )}

              {hasBioindic && (
                <div style={{ marginBottom: "4mm" }}>
                  <span style={{ fontFamily: DISPLAY, fontSize: 15, color: INK, display: "block", marginBottom: "2mm" }}>Bio-indication</span>
                  <p style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.55, color: INK, margin: 0 }}>{p.bioindication}</p>
                </div>
              )}

              {hasPrecautions && (
                <div style={{ padding: "4mm 5mm", background: "rgba(139,74,43,0.06)", border: `1px solid rgba(139,74,43,0.25)`, borderLeft: `3px solid ${RUST}` }}>
                  <span style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".14em", textTransform: "uppercase", color: RUST, display: "block", marginBottom: "2mm" }}>Précautions</span>
                  <p style={{ fontFamily: SERIF, fontSize: 12, lineHeight: 1.55, color: INK, margin: 0 }}>{p.precautions}</p>
                </div>
              )}
            </div>
          )}

          {/* ── IV. Histoire & Symbolique ── */}
          {(hasHistoire || hasSymbolique) && (
            <div className="print-section" style={{ marginBottom: "6mm", paddingTop: "5mm", borderTop: `1px solid ${LINE}` }}>
              <PrintSectionTitle num="IV." title="Histoire & Symbolique" MONO={MONO} DISPLAY={DISPLAY} MOSS={MOSS} INK={INK} />
              {hasHistoire && p.histoire.split("\n\n").map((para, idx) => (
                <p key={idx} style={{ fontFamily: SERIF, fontSize: 13, lineHeight: 1.65, color: INK, margin: "0 0 3mm", whiteSpace: "pre-line" }}>{renderEmphasis(para)}</p>
              ))}
              {hasSymbolique && (
                <p style={{ fontFamily: SERIF, fontSize: 13, fontStyle: "italic", color: MUTED, margin: 0 }}>
                  Symbolique : {p.symbolique}
                </p>
              )}
            </div>
          )}

          {/* ── Pied de page ── */}
          <div style={{ borderTop: `1px solid ${LINE}`, paddingTop: "4mm", marginTop: "4mm" }}>
            <span style={{ fontFamily: MONO, fontSize: 8, letterSpacing: ".14em", textTransform: "uppercase", color: MUTED }}>
              Herbarium · Recueil botanique collaboratif · {new Date().getFullYear()}
            </span>
          </div>

        </div>
      </div>
    </div>,
    document.body
  );
}

function PrintSectionTitle({ num, title, MONO, DISPLAY, MOSS, INK }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: "3mm", marginBottom: "3mm" }}>
      <span style={{ fontFamily: DISPLAY, fontStyle: "italic", fontSize: 16, color: MOSS }}>{num}</span>
      <span style={{ fontFamily: DISPLAY, fontSize: 18, color: INK }}>{title}</span>
    </div>
  );
}

Object.assign(window, { FichePrint });