// =====================================================
// PAGE — Inspirations & itinéraires
// =====================================================

const InspirationsPage = ({ navigate }) => {
  const [activeTheme, setActiveTheme] = React.useState(null);

  // Map theme -> escales that have at least one matching excursion
  const themeEscales = React.useMemo(() => {
    const map = {};
    THEMES.forEach(t => {
      const list = ESCALES.filter(e => {
        if (t.id === "expedition") return e.tags.includes("expedition") || e.tags.includes("petite-unite") || e.tags.includes("exploratoire");
        if (t.id === "baleines") return e.tags.includes("baleines");
        if (t.id === "vanille") return e.tags.includes("vanille");
        if (t.id === "baobabs") return e.tags.includes("baobabs");
        if (!t.tag) return false;
        return e.excursions.some(ex => ex.theme === t.tag);
      });
      map[t.id] = list;
    });
    return map;
  }, []);

  return (
    <main className="app-main">
      <section className="section">
        <div className="container container-wide">
          <div className="section-head">
            <span className="h-eyebrow">Pour les passagers et les opérateurs</span>
            <h1 className="h-section">Inspirations <em>&amp; itinéraires</em></h1>
            <p className="lede">
              Découvrir Madagascar par grands thèmes d'expérience, puis composer
              des itinéraires éditoriaux à partir des dix escales du catalogue.
              Suggestions non contractuelles, à valider opérationnellement.
            </p>
          </div>

          {/* THEMES */}
          <div style={{ marginBottom: 64 }}>
            <h3 className="h-card" style={{ fontSize: 26, marginBottom: 16 }}>Expériences par thème</h3>
            <div className="theme-grid">
              {THEMES.map(th => (
                <ThemeCard
                  key={th.id}
                  theme={th}
                  escales={themeEscales[th.id]}
                  onClick={() => setActiveTheme(th.id === activeTheme ? null : th.id)}
                  active={activeTheme === th.id}
                />
              ))}
            </div>
            {activeTheme && <ThemePanel themeId={activeTheme} escales={themeEscales[activeTheme]} navigate={navigate}/>}
          </div>

          {/* ITINERAIRES */}
          <div>
            <div className="section-head" style={{ marginBottom: 24 }}>
              <span className="h-eyebrow">Suggestions éditoriales</span>
              <h2 className="h-section">Idées d'itinéraires <em>croisière</em></h2>
              <p className="lede">
                Propositions construites uniquement à partir des escales du catalogue.
                Ces routes sont des suggestions éditoriales non contractuelles.
              </p>
            </div>

            <div className="itin-grid">
              {ITINERAIRES.map(it => (
                <ItinCard key={it.id} itin={it} navigate={navigate}/>
              ))}
            </div>

            <div className="card" style={{ marginTop: 24, background: "var(--c-bone-warm)", borderColor: "rgba(232,90,31,.25)" }}>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <div style={{ color: "var(--c-terra)", flexShrink: 0, marginTop: 2 }}>
                  <Icon name="info" size={22} stroke={2}/>
                </div>
                <p style={{ margin: 0, fontSize: 14, color: "var(--c-ink-soft)" }}>
                  Ces suggestions ne constituent pas des itinéraires validés.
                  Toute programmation doit être confirmée auprès des autorités
                  portuaires compétentes (APMF, capitainerie) et des partenaires
                  locaux selon les conditions opérationnelles, météorologiques
                  et la disponibilité des infrastructures.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const ThemeCard = ({ theme, escales, onClick, active }) => (
  <div className="theme-card" onClick={onClick} style={active ? { borderColor: theme.couleur, boxShadow: "var(--shadow-md)" } : null}>
    <div className="t-ico" style={{ background: `${theme.couleur}22`, color: theme.couleur }}>
      <Icon name={iconForTheme(theme.id)} size={22} stroke={1.8}/>
    </div>
    <h3>{theme.nom}</h3>
    <p>{descForTheme(theme.id)}</p>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span className="t-count" style={{ color: theme.couleur }}>{escales.length} {escales.length > 1 ? "escales" : "escale"}</span>
      <Icon name={active ? "x" : "chevron-right"} size={14} stroke={2}/>
    </div>
  </div>
);

function iconForTheme(id) {
  return {
    "nature": "leaf", "plage": "wave", "patrimoine": "shield",
    "culture": "user-group", "expedition": "compass",
    "baleines": "whale", "baobabs": "tree", "vanille": "flower"
  }[id] || "compass";
}
function descForTheme(id) {
  return {
    "nature":     "Parcs nationaux, forêt primaire, lémuriens, oiseaux endémiques, biodiversité de classe mondiale.",
    "plage":      "Lagons coralliens, plages préservées, snorkeling et plongée tropicale.",
    "patrimoine": "Fortifications, architecture coloniale, sites historiques et patrimoine corsaire.",
    "culture":    "Marchés, traditions, artisanat, communautés Betsimisaraka, Vezo, Mahafaly.",
    "expedition": "Escales d'exploration pour petites unités, yachts privés et croisières d'expédition.",
    "baleines":   "Sites mondiaux d'observation des baleines à bosse en migration (juin–septembre).",
    "baobabs":    "Allée des baobabs, sanctuaires Reniala, paysages iconiques du Grand Sud-Ouest.",
    "vanille":    "Plantations de vanille Bourbon, séchage et savoir-faire de la région SAVA."
  }[id] || "";
}

const ThemePanel = ({ themeId, escales, navigate }) => {
  const theme = THEMES.find(t => t.id === themeId);
  return (
    <div className="card fade-in" style={{ marginTop: 24, padding: 0, overflow: "hidden" }}>
      <div style={{ padding: "20px 28px", borderBottom: "1px solid var(--c-line)", background: "var(--c-bone)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div className="h-eyebrow" style={{ color: theme.couleur }}>Thème sélectionné</div>
          <h3 className="h-card" style={{ fontSize: 26, marginTop: 4 }}>{theme.nom}</h3>
        </div>
        <span className="badge" style={{ borderColor: theme.couleur, color: theme.couleur, background: "#fff" }}>
          {escales.length} {escales.length > 1 ? "escales concernées" : "escale concernée"}
        </span>
      </div>
      <div style={{ padding: 24 }}>
        <div className="grid grid-3">
          {escales.map(e => (
            <div className="escale-card" key={e.id} onClick={() => navigate(`#/escale/${e.id}`)}>
              <div className="ec-visual">
                <EscaleVisual escale={e} placeholderText={null}/>
                <div className="ec-num">{String(e.num).padStart(2,"0")}</div>
              </div>
              <div className="ec-body">
                <div className="ec-title">
                  <h3>{e.nom}</h3>
                  <span className="ec-alt">{e.nomAlt}</span>
                </div>
                <div className="ec-tags"><FacadeBadge facade={e.facade}/></div>
                <div className="ec-desc">{e.accroche}</div>
              </div>
            </div>
          ))}
        </div>
        {escales.length === 0 && (
          <p className="note" style={{ textAlign: "center", padding: 40 }}>Aucune escale du catalogue n'est rattachée à ce thème.</p>
        )}
      </div>
    </div>
  );
};

const ItinCard = ({ itin, navigate }) => {
  const stops = itin.escales.map(id => ESCALES.find(e => e.id === id)).filter(Boolean);
  return (
    <div className="itin-card" style={{ borderTop: `3px solid ${itin.couleur}` }}>
      <div>
        <div className="h-eyebrow" style={{ color: itin.couleur }}>{stops.length} escales</div>
        <h3 style={{ marginTop: 6 }}>{itin.nom}</h3>
      </div>
      <p className="itin-desc">{itin.desc}</p>
      <div className="itin-stops">
        {stops.map((e, i) => (
          <div className="itin-stop" key={e.id} onClick={() => navigate(`#/escale/${e.id}`)}>
            <span className="is-num">{String(i + 1).padStart(2,"0")}</span>
            <span className="is-name">{e.nom} · {e.nomAlt}</span>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", gap: 8, paddingTop: 4 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => navigate(`#/explorer?itin=${itin.escales.join(',')}`)}>
          <Icon name="map" size={13}/>Voir sur la carte
        </button>
        <button className="btn btn-link btn-sm" onClick={() => navigate("#/operateurs")}>
          <Icon name="briefcase" size={13}/>Faisabilité opérationnelle
        </button>
      </div>
    </div>
  );
};

window.InspirationsPage = InspirationsPage;