// =====================================================
// PAGE — Fiche escale détaillée
// =====================================================

const FichePage = ({ escaleId, navigate }) => {
  const escale = ESCALES.find(e => e.id === escaleId);
  const [tab, setTab] = React.useState("decouvrir");

  if (!escale) {
    return (
      <main className="app-main">
        <div className="container" style={{ padding: "120px 0", textAlign: "center" }}>
          <h1 className="h-section">Fiche introuvable</h1>
          <p className="lede" style={{ margin: "16px auto 24px" }}>L'escale demandée n'existe pas dans le catalogue.</p>
          <button className="btn btn-primary" onClick={() => navigate("#/explorer")}>Retour à la carte</button>
        </div>
      </main>
    );
  }

  const themedExcursions = escale.excursions;

  return (
    <main className="app-main">
      {/* HERO */}
      <section className="fiche-hero">
        <div className="container container-wide" style={{ position: "relative", zIndex: 2 }}>
          <a className="fiche-back" onClick={() => navigate("#/explorer")}>
            <Icon name="arrow-left" size={14}/> Retour à la carte
          </a>
          <div className="fiche-hero-row">
            <div>
              <span className="h-eyebrow">Fiche N°{String(escale.num).padStart(2,"0")} · {escale.facade}</span>
              <h1>{escale.nom}</h1>
              <div className="h-alt">{escale.nomAlt}</div>
              <p className="h-accroche">{escale.accroche}</p>
              <div className="h-meta">
                <FiabilityBadge niveau={escale.fiabilite}/>
                <span className="badge"><Icon name="pin" size={10} stroke={2}/> {Math.abs(escale.lat).toFixed(4)}°{escale.lat < 0 ? "S" : "N"} / {escale.lng.toFixed(4)}°E</span>
                <span className="badge"><Icon name="plane" size={10} stroke={2}/> {escale.aeroport}</span>
                {escale.unlocode && <span className="badge">UN/LOCODE · {escale.unlocode}</span>}
              </div>
            </div>
            <div className="fiche-hero-visual">
              <EscaleVisual escale={escale} placeholderText="Photo officielle en cours de sélection"/>
            </div>
          </div>
        </div>
      </section>

      {/* OPERATOR QUICK SUMMARY */}
      <section className="op-summary">
        <div className="container container-wide">
          <div className="op-summary-row">
            <SummaryCell label="Type d'accueil"        value={escale.typeAccueil.split("·")[0].trim()}/>
            <SummaryCell label="Segment recommandé"    value={escale.segment.split("·")[0].trim()}/>
            <SummaryCell label="Terminal passagers"    value={escale.terminal}/>
            <SummaryCell label="Aéroport"              value={escale.aeroport.split("·")[0].trim()}/>
            <SummaryCell label="Saisonnalité"          value={escale.saisonnalite.split("·")[0].trim()}/>
            <SummaryCell label="Contrainte principale" value={escale.contrainte.split("·")[0].trim()}/>
          </div>
        </div>
      </section>

      {/* BODY */}
      <section className="fiche-body">
        <div className="container container-wide">
          <div className="tabs" style={{ marginBottom: 32 }}>
            <button className={`tab ${tab === "decouvrir" ? "active" : ""}`} onClick={() => setTab("decouvrir")}>Découvrir l'escale</button>
            <button className={`tab ${tab === "operateurs" ? "active" : ""}`} onClick={() => setTab("operateurs")}>Infos opérateurs</button>
          </div>

          <div className="fiche-grid">
            <div>
              <div key={tab} className="tab-content">
                {tab === "decouvrir" && <ContentDecouvrir escale={escale} excursions={themedExcursions}/>}
                {tab === "operateurs" && <ContentOperateurs escale={escale}/>}
              </div>

              {/* Valeur commerciale — always visible (key B2B section) */}
              <div className="fiche-section" style={{ marginTop: 48 }}>
                <div className="value-card">
                  <div className="vc-eyebrow">Valeur commerciale de l'escale</div>
                  <div className="vc-title">Pourquoi inscrire {escale.nom} à un itinéraire</div>
                  <p className="vc-body">{escale.valeurCommerciale}</p>
                </div>
              </div>

              {/* Contraintes */}
              <div className="fiche-section">
                <h2>Contraintes &amp; vigilance</h2>
                <div className="contraintes-card">
                  <h3 style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Icon name="alert" size={20} stroke={2}/>Points de vigilance opérationnelle
                  </h3>
                  <p>{escale.contrainte}</p>
                </div>
              </div>

              {/* A confirmer */}
              <div className="fiche-section">
                <h2>À confirmer avant programmation</h2>
                <div className="aconfirmer-card">
                  <h3 style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Icon name="info" size={20} stroke={2}/>Validations préalables auprès des autorités compétentes
                  </h3>
                  <ul>
                    {escale.pointsAConfirmer.map((p,i) => <li key={i}>{p}</li>)}
                    <li>Coordination avec l'APMF, la capitainerie et les autorités locales selon le calendrier d'escale.</li>
                  </ul>
                </div>
                <p className="note" style={{ marginTop: 12 }}>
                  Les données techniques présentées dans cette fiche sont issues du catalogue
                  croisières Madagascar 2026. Elles constituent une aide à la décision et doivent
                  être validées opérationnellement avant programmation.
                </p>
              </div>
            </div>

            <aside className="fiche-side">
              <SidebarFacts escale={escale}/>

              <div className="fact-block" style={{ background: "var(--c-bone)" }}>
                <h4>Saisonnalité</h4>
                <SeasonBar months={escale.saisonOpti}/>
                <p className="note" style={{ marginTop: 6 }}>{escale.saisonnalite}</p>
              </div>

              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={() => navigate("#/contact")}>
                <Icon name="mail" size={14}/>Demande institutionnelle
              </button>
              <button className="btn btn-ghost" style={{ width: "100%", justifyContent: "center" }} onClick={() => navigate("#/operateurs")}>
                <Icon name="briefcase" size={14}/>Tableau comparatif B2B
              </button>
            </aside>
          </div>
        </div>
      </section>

      {/* Other escales suggestion */}
      <section className="section-tight" style={{ background: "var(--c-bone)", borderTop: "1px solid var(--c-line)" }}>
        <div className="container container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 24, flexWrap: "wrap", gap: 16 }}>
            <h3 className="h-card" style={{ fontSize: 28 }}>Continuer l'exploration</h3>
            <button className="btn btn-ghost" onClick={() => navigate("#/explorer")}>Voir toutes les escales <Icon name="arrow-right" size={14}/></button>
          </div>
          <div className="grid grid-3">
            {ESCALES.filter(e => e.id !== escale.id).slice(0, 3).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 className="ec-fiab"><FiabilityBadge niveau={e.fiabilite} small/></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>
        </div>
      </section>
    </main>
  );
};

const SummaryCell = ({ label, value }) => (
  <div className="os-cell">
    <span className="os-lbl">{label}</span>
    <span className="os-val">{value}</span>
  </div>
);

const SidebarFacts = ({ escale }) => (
  <div className="fact-block">
    <h4>Données techniques</h4>
    <div className="fb-row"><span className="fb-l">Mode d'accueil</span><span className="fb-r">{escale.typeAccueil.split("·")[0].trim()}</span></div>
    <div className="fb-row"><span className="fb-l">Quai / mouillage</span><span className="fb-r">{escale.quai}</span></div>
    <div className="fb-row"><span className="fb-l">Profondeur</span><span className="fb-r">{escale.profondeur}</span></div>
    {escale.loaMax && <div className="fb-row"><span className="fb-l">LOA maximale</span><span className="fb-r">{escale.loaMax}</span></div>}
    <div className="fb-row"><span className="fb-l">Pilotage</span><span className="fb-r">{escale.pilotage}</span></div>
    <div className="fb-row"><span className="fb-l">Remorqueurs</span><span className="fb-r">{escale.remorqueurs}</span></div>
    <div className="fb-row"><span className="fb-l">Terminal passagers</span><span className="fb-r">{escale.terminal}</span></div>
    <div className="fb-row"><span className="fb-l">Aéroport</span><span className="fb-r">{escale.aeroport}</span></div>
    {escale.unlocode && <div className="fb-row"><span className="fb-l">UN/LOCODE</span><span className="fb-r tnum">{escale.unlocode}</span></div>}
    <div className="fb-row"><span className="fb-l">Coordonnées</span><span className="fb-r tnum">{Math.abs(escale.lat).toFixed(3)}°{escale.lat<0?"S":"N"} · {escale.lng.toFixed(3)}°E</span></div>
  </div>
);

// ===== Tab content =====
const ContentDecouvrir = ({ escale, excursions }) => {
  const photos = window.PHOTOS && window.PHOTOS[escale.id];
  const hasPhotos = !!photos;
  const galleryItems = hasPhotos ? [null, ...(photos.gallery || []).map((_, index) => index)] : [null, 0, 1];
  return (
  <div className="col" style={{ gap: 32 }}>
    <div className="fiche-section">
      <span className="h-eyebrow">L'escale en bref</span>
      <h2 style={{ marginTop: 8 }}>Une escale, une <em style={{ fontStyle: "italic", color: "var(--c-terra)" }}>expérience</em>.</h2>
      <p className="lede">{escale.description}</p>
    </div>

    <div className="fiche-section">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 16 }}>
        <h2 style={{ fontSize: 28, margin: 0 }}>Galerie</h2>
        <span className="note">{hasPhotos ? "Photos disponibles dans les assets du site" : "Visuels à intégrer prochainement"}</span>
      </div>
      <div className="fiche-photo-grid">
        {galleryItems.map((photoIndex, index) => (
          <div className={`fiche-photo-item ${index === 0 ? "featured" : ""}`} key={index}>
            <EscaleVisual
              escale={escale}
              placeholderText={null}
              showLabel={index === 0}
              photoIndex={photoIndex}
            />
          </div>
        ))}
      </div>
    </div>

    <div className="fiche-section">
      <h2 style={{ fontSize: 28 }}>Expériences emblématiques</h2>
      <p className="lede" style={{ marginBottom: 24 }}>Sélection issue du catalogue croisières 2026. Excursions à organiser via les agences réceptives locales.</p>
      <div className="excu-grid">
        {excursions.map((ex, i) => (
          <div className="excu-item" key={i}>
            <div className="ex-vis">
              <EscaleVisual escale={escale} placeholderText={null} showLabel={false}/>
            </div>
            <div>
              <div className="ex-theme">{ex.theme}</div>
              <h4 className="ex-name">{ex.nom}</h4>
              <p className="ex-desc">{ex.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
  );
};

const ContentOperateurs = ({ escale }) => (
  <div className="col" style={{ gap: 32 }}>
    <div className="fiche-section">
      <span className="h-eyebrow">Faisabilité opérationnelle</span>
      <h2 style={{ marginTop: 8 }}>Conditions <em style={{ color: "var(--c-terra)" }}>d'accueil</em></h2>
      <p className="lede">Toutes les données ci-dessous sont issues du catalogue. Elles constituent des éléments d'aide à la décision et doivent être validées auprès des autorités portuaires avant programmation.</p>
    </div>

    <div className="fact-block" style={{ background: "#fff" }}>
      <h4>Manœuvres &amp; services</h4>
      <div className="fb-row"><span className="fb-l">Pilotage</span><span className="fb-r">{escale.pilotage}</span></div>
      <div className="fb-row"><span className="fb-l">Remorqueurs</span><span className="fb-r">{escale.remorqueurs}</span></div>
      <div className="fb-row"><span className="fb-l">Terminal passagers</span><span className="fb-r">{escale.terminal}</span></div>
      <div className="fb-row"><span className="fb-l">Aéroport</span><span className="fb-r">{escale.aeroport}</span></div>
      <div className="fb-row"><span className="fb-l">Saisonnalité</span><span className="fb-r" style={{ maxWidth: 280, whiteSpace: "normal" }}>{escale.saisonnalite}</span></div>
    </div>

    <div className="fact-block" style={{ background: "#fff" }}>
      <h4>Segments &amp; capacité</h4>
      <p style={{ fontSize: 13.5, color: "var(--c-ink-soft)", margin: "0 0 8px" }}><strong style={{ color: "var(--c-navy)" }}>Segment recommandé&nbsp;:</strong> {escale.segment}</p>
      <p style={{ fontSize: 13.5, color: "var(--c-ink-soft)", margin: 0 }}>{escale.capacite}</p>
    </div>
  </div>
);

window.FichePage = FichePage;