// Encarts posés sur le globe : barre de couches, overlays, repères (frise+risques), légende, zoom
function BarreHaut({ filtres, setFiltres, overlays, setOverlays, api, accent }) {
  const toggleCouche = (id) => setFiltres((f) => ({
    ...f, couches: f.couches.includes(id) ? f.couches.filter((x) => x !== id) : [...f.couches, id],
  }));
  const REGIONS = [
    { label: "AMÉRIQUES", lon: -98, lat: 38 },
    { label: "EUROPE", lon: 8, lat: 50 },
    { label: "ASIE", lon: 120, lat: 30 },
  ];
  return (
    <div style={{
      position: "absolute", top: 14, right: 14, zIndex: 30,
      display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8,
    }}>
      <div style={panelStyle()}>
        {window.MAP_LAYERS.map((l) => {
          const hue = window.LAYER_HUES[l.id];
          const on = filtres.couches.includes(l.id);
          return (
            <button key={l.id} onClick={() => toggleCouche(l.id)} title={l.nom + " — " + l.goulet} style={{
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.06em",
              padding: "5px 8px", borderRadius: 3, cursor: "pointer",
              border: `1px solid ${on ? `oklch(0.7 0.13 ${hue})` : "oklch(0.32 0.05 248)"}`,
              background: on ? `oklch(0.32 0.08 ${hue} / 0.55)` : "none",
              color: `oklch(${on ? 0.85 : 0.62} 0.1 ${hue})`,
            }}>{l.id}</button>
          );
        })}
      </div>
      <div style={panelStyle()}>
        {REGIONS.map((r) => (
          <button key={r.label} onClick={() => api.current && api.current.flyToRegion(r.lon, r.lat, 2.4)} style={{
            fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.12em",
            padding: "5px 9px", borderRadius: 3, cursor: "pointer",
            border: "1px solid oklch(0.32 0.05 248)", background: "none", color: "oklch(0.72 0.03 240)",
          }}>{r.label}</button>
        ))}
      </div>
      <div style={panelStyle()}>
        <button onClick={() => setOverlays((o) => ({ ...o, signal: !o.signal }))} style={togStyle(overlays.signal, accent)}>
          ⌁ CHEMIN DU SIGNAL
        </button>
        <button onClick={() => setOverlays((o) => ({ ...o, nvidia: !o.nvidia }))} style={togStyle(overlays.nvidia, "oklch(0.78 0.14 65)")}>
          ◎ INVESTISSEMENTS NVIDIA
        </button>
      </div>
    </div>
  );
}

function ZoomControles({ api, rotation, setRotation, accent }) {
  const b = {
    fontFamily: "var(--mono)", fontSize: 15, width: 34, height: 34, cursor: "pointer",
    background: "oklch(0.18 0.04 258 / 0.9)", color: "var(--ink)",
    border: "1px solid oklch(0.34 0.05 245)", borderRadius: 4, backdropFilter: "blur(8px)",
  };
  return (
    <div style={{ position: "absolute", right: 14, bottom: 14, zIndex: 30, display: "flex", flexDirection: "column", gap: 6 }}>
      <button style={b} onClick={() => api.current && api.current.zoomBy(1.45)}>+</button>
      <button style={b} onClick={() => api.current && api.current.zoomBy(1 / 1.45)}>−</button>
      <button style={{ ...b, fontSize: 11 }} title="Recentrer" onClick={() => api.current && api.current.reset()}>⌂</button>
      <button
        style={{
          ...b, fontSize: 13,
          color: rotation ? accent : "oklch(0.55 0.03 240)",
          border: `1px solid ${rotation ? accent + "88" : "oklch(0.34 0.05 245)"}`,
          background: rotation ? "oklch(0.22 0.05 252 / 0.95)" : b.background,
        }}
        title={rotation ? "Rotation auto : activée" : "Rotation auto : désactivée"}
        aria-pressed={rotation}
        onClick={() => setRotation(!rotation)}
      >⟳</button>
    </div>
  );
}

function Legende({ accent }) {
  return (
    <div style={{
      position: "absolute", left: 14, bottom: 14, zIndex: 25,
      ...panelBase(), padding: "10px 14px",
      display: "flex", flexDirection: "column", gap: 6,
      fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.06em", color: "oklch(0.68 0.03 240)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
        {[9, 6.5, 4.6, 3.2].map((r, i) => (
          <span key={i} style={{ width: r * 2, height: r * 2, borderRadius: "50%", background: "oklch(0.7 0.06 240)", display: "inline-block" }}></span>
        ))}
        <span style={{ marginLeft: 4 }}>MÉGA → SMALL (capitalisation)</span>
      </div>
      <div style={{ display: "flex", gap: 14 }}>
        <span><span style={{ color: accent }}>◌</span> pointillé = spéculatif</span>
        <span style={{ color: "oklch(0.62 0.12 25)" }}>● rouge = disrupté</span>
      </div>
      <div style={{ color: "oklch(0.55 0.03 240)" }}>glisser = tourner · molette = zoom · clic sur un foyer chiffré = zoom dessus</div>
    </div>
  );
}

// Encart « Repères » : frise 2023→2026 + risques + signaux, dans un volet
function EncartReperes({ accent, open, setOpen }) {
  const [onglet, setOnglet] = React.useState("frise");
  if (!open) {
    return (
      <button onClick={() => setOpen(true)} style={{
        position: "absolute", top: 14, left: "50%", transform: "translateX(-50%)", zIndex: 30,
        fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", padding: "9px 16px",
        borderRadius: 999, cursor: "pointer", backdropFilter: "blur(8px)",
        background: "oklch(0.18 0.04 258 / 0.9)", color: accent, border: `1px solid ${accent}66`,
      }}>REPÈRES — 2023→2026 · RISQUES</button>
    );
  }
  return (
    <div style={{
      position: "absolute", top: 14, left: "50%", transform: "translateX(-50%)", zIndex: 35,
      width: "min(680px, 92vw)", maxHeight: "72vh", overflowY: "auto",
      ...panelBase(), padding: 0,
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 4, padding: "10px 14px",
        borderBottom: "1px solid oklch(0.28 0.05 250)", position: "sticky", top: 0,
        background: "oklch(0.16 0.04 257 / 0.97)",
      }}>
        {[["frise", "2023 → 2026"], ["risques", "6 risques"], ["signaux", "Signaux S2"]].map(([id, lab]) => (
          <button key={id} onClick={() => setOnglet(id)} style={{
            fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.1em", padding: "6px 12px",
            borderRadius: 3, border: "none", cursor: "pointer",
            background: onglet === id ? accent + "26" : "none",
            color: onglet === id ? accent : "oklch(0.65 0.03 240)",
          }}>{lab.toUpperCase()}</button>
        ))}
        <button onClick={() => setOpen(false)} style={{
          marginLeft: "auto", background: "none", border: "none", color: "oklch(0.6 0.03 240)",
          cursor: "pointer", fontSize: 14, fontFamily: "var(--mono)",
        }}>✕</button>
      </div>
      <div style={{ padding: "16px 20px 20px" }}>
        {onglet === "frise" ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {window.MAP_TIMELINE.map((t, i) => (
              <div key={t.annee} style={{ display: "grid", gridTemplateColumns: "58px 1fr", gap: 14 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 18, fontWeight: 300, color: i === 3 ? accent : "oklch(0.7 0.04 240)" }}>{t.annee}</div>
                <div>
                  <div style={{ fontFamily: "var(--sans)", fontSize: 13.5, fontWeight: 620, marginBottom: 3 }}>
                    {t.titre} <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, color: "oklch(0.6 0.03 240)", letterSpacing: "0.1em" }}> — GOULET : {t.goulet.toUpperCase()}</span>
                  </div>
                  <p style={{ fontFamily: "var(--sans)", fontSize: 12, lineHeight: 1.55, color: "oklch(0.74 0.02 240)", margin: 0, textWrap: "pretty" }}>{t.texte}</p>
                </div>
              </div>
            ))}
          </div>
        ) : onglet === "risques" ? (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {window.MAP_RISQUES.map((r, i) => (
              <div key={r.titre}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: accent, marginBottom: 3 }}>R{i + 1} · <span style={{ color: "var(--ink)", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 620, letterSpacing: 0 }}>{r.titre}</span></div>
                <p style={{ fontFamily: "var(--sans)", fontSize: 11.5, lineHeight: 1.55, color: "oklch(0.72 0.02 240)", margin: 0, textWrap: "pretty" }}>{r.texte}</p>
              </div>
            ))}
          </div>
        ) : (
          <ol style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
            {window.MAP_SIGNAUX.map((s, i) => (
              <li key={i} style={{ display: "grid", gridTemplateColumns: "26px 1fr", gap: 8, fontFamily: "var(--sans)", fontSize: 12.5, lineHeight: 1.5, color: "oklch(0.78 0.02 240)" }}>
                <span style={{ fontFamily: "var(--mono)", color: "oklch(0.55 0.03 240)" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ textWrap: "pretty" }}>{s}</span>
              </li>
            ))}
          </ol>
        )}
      </div>
    </div>
  );
}

function panelBase() {
  return {
    background: "oklch(0.16 0.04 257 / 0.92)", backdropFilter: "blur(10px)",
    border: "1px solid oklch(0.3 0.05 248)", borderRadius: 6,
  };
}
function panelStyle() {
  return { ...panelBase(), display: "flex", gap: 4, padding: 6, flexWrap: "wrap", justifyContent: "flex-end" };
}
function togStyle(on, color) {
  return {
    fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.1em",
    padding: "6px 10px", borderRadius: 3, cursor: "pointer",
    border: `1px solid ${on ? color : "oklch(0.32 0.05 248)"}`,
    background: on ? "oklch(0.25 0.05 250 / 0.6)" : "none",
    color: on ? color : "oklch(0.62 0.03 240)",
  };
}

Object.assign(window, { BarreHaut, ZoomControles, Legende, EncartReperes });