// ProjectsExpedition — la « découverte des projets » de l'accueil.
// Chaque projet est une « étape d'expédition » : vignette topo + fiche carnet,
// en alternance gauche/droite, avec usage IA, cordée, durée et un CTA.
// Règle du dénivelé : 100 M = 1 techno/outil appris sur le projet.
//
// Les données vivent dans projects-data.js (window.EXPEDITION).
// L'accueil n'affiche que les projets « featured »; la page projets.html
// affiche l'ensemble. Pour ajouter un projet : voir projects-data.js.

// NB : ne jamais nommer cette constante « EXPEDITION ». Babel compile les
// const de ce fichier en `var` au niveau global — `var EXPEDITION` écraserait
// alors window.EXPEDITION avec la liste filtrée, et projets.html (chargé
// après ce fichier) n'y verrait plus que les projets « featured ».
const FEATURED_STEPS = (window.EXPEDITION || []).filter(p => p.featured);

// little topo-rings vignette behind each photo
function TopoRings({ seed }) {
  const rings = [];
  const n = 6;
  const cx = 50 + (seed % 3) * 6;
  const cy = 50 + (seed % 5) * 4;
  for (let i = 0; i < n; i++) {
    const r = 12 + i * 9;
    rings.push(<circle key={i} cx={cx} cy={cy} r={r} />);
  }
  return (
    <svg className="vme-topo" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
      {rings}
    </svg>
  );
}

function AiUsage({ level }) {
  return (
    <div className="vme-diff" title={`Usage IA ${level}/5`}>
      <span className="vme-diff-label">USAGE IA</span>
      <span className="vme-diff-pips">
        {[1,2,3,4,5].map(i => (
          <span key={i} className={i <= level ? "on" : ""} />
        ))}
      </span>
    </div>
  );
}

function ExpeditionCard({ e, i, onOpen }) {
  const side = i % 2 === 0 ? "left" : "right";

  // Ouverture de la fiche — partagée entre la photo et le bouton "Explorer"
  const open = () => onOpen({
    id: e.id, title: e.title, img: e.img, video: e.video,
    date: e.subtitle.split(' · ')[1] || '',
    stamp: e.n, role: e.subtitle, desc: e.desc, tags: e.tags, url: e.url || '#',
  });

  return (
    <article className={`vme-card vme-${side}`} data-idx={i}>
      {/* Connector dot anchored to the central trail */}
      <span className="vme-dot" aria-hidden="true"></span>
      <span className="vme-dot-line" aria-hidden="true"></span>

      <div className="vme-photo">
        <TopoRings seed={i} />
        <div
          className="vme-photo-frame is-clickable"
          role="button"
          tabIndex={0}
          aria-label={`Explorer l'étape : ${e.title}`}
          onClick={open}
          onKeyDown={(ev) => {
            if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); open(); }
          }}
        >
          {e.video
            ? <video src={e.video} poster={e.img} autoPlay loop muted playsInline />
            : <img src={e.img} alt={e.title} />}
          <span className="vme-biome">{e.biome}</span>
          <span className="vme-coord">{e.coord}</span>
        </div>
      </div>

      <div className="vme-body">
        <header className="vme-head">
          <span className="vme-step">{e.n}</span>
          <span className="vme-divider" aria-hidden="true"></span>
          <span className="vme-sub">{e.subtitle}</span>
        </header>

        <h3 className="vme-title">{e.title}</h3>

        <div className="vme-stats">
          <div><dt>CORDÉE</dt><dd>{e.cordée}</dd></div>
          <div><dt>DURÉE</dt><dd>{e.durée}</dd></div>
          <div><dt>DÉNIVELÉ</dt><dd>{e.alt}</dd></div>
          <AiUsage level={e.ia} />
        </div>

        <p className="vme-desc">{e.desc}</p>

        <div className="vme-foot">
          <ul className="vme-tags">
            {e.tags.map(t => <li key={t}>{t}</li>)}
          </ul>
          <button className="vme-cta" onClick={open}>
            EXPLORER L'ÉTAPE <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </article>
  );
}

function ProjectsExpedition({ onOpen }) {
  const count = FEATURED_STEPS.length;
  return (
    <section className="vm-projects-exp" id="projets" data-screen-label="04 Projets">
      <div className="vm-section-head">
        <div className="vm-section-km"><span className="vm-section-num">03</span>KM 03 · SÉLECTION</div>
        <div className="vm-section-meta">
          <span>EXPÉDITION 2024 — 2026</span>
          <span>{count} ÉTAPES EN VEDETTE</span>
          <span>BOUCLE COMPLÈTE</span>
        </div>
      </div>

      <h2 className="vm-section-title">Decouvre <em>mes aventures.</em></h2>

      <div className="vme-intro">
        <p>
          Trois ans de projets menés en entreprise, en cours
          et en autonomie.<br></br>Chaque fiche présente le projet, la technique et le contexte.<br></br>
          <strong>Ouvrez une étape</strong> pour découvrir le projet en détail.
        </p>
        <div className="vme-legend">
          <div><span className="vme-leg-dot vme-leg-start"></span>DÉPART</div>
          <div><span className="vme-leg-dot vme-leg-step"></span>ÉTAPE</div>
          <div><span className="vme-leg-dot vme-leg-summit"></span>SOMMET</div>
        </div>
      </div>

      <div className="vme-route">
        {/* central dashed trail spine */}
        <div className="vme-spine" aria-hidden="true">
          <svg viewBox="0 0 12 1000" preserveAspectRatio="none">
            <path d="M 6 0 Q 0 250 6 500 T 6 1000" />
          </svg>
        </div>

        {FEATURED_STEPS.map((e, i) => (
          <ExpeditionCard key={e.id} e={e} i={i} onOpen={onOpen} />
        ))}

        {/* Le badge "sommet" devient un bouton vers la page de tous les projets */}
        <a className="vme-summit vme-summit-link" href="projets.html">
          <span className="vme-summit-stamp">ON N'EST PAS ENCORE AU SOMMET !</span>
          <span className="vme-summit-coord">Voir tous les projets <span aria-hidden="true">→</span></span>
        </a>
      </div>
    </section>
  );
}

function ProjectModal({ project, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Pas d'animation JS sur le contenu : la carte a déjà son entrée en CSS
  // (vm-pop). Un gsap.from + autoAlpha laissait le dernier élément — le
  // bouton "VOIR LE PROJET" — bloqué à visibility:hidden si le tween ne
  // se terminait pas. On garantit ici que tout le contenu reste visible.
  return (
    <div className="vm-modal" onClick={onClose}>
      <div className="vm-modal-card" onClick={e => e.stopPropagation()}>
        <button className="vm-modal-close" onClick={onClose} aria-label="Fermer">×</button>
        <div className="vm-modal-img">
          {project.video
            ? <video src={project.video} poster={project.img} autoPlay loop muted playsInline />
            : <img src={project.img} alt={project.title} />}
        </div>
        <div className="vm-modal-body">
          <h3>{project.title}</h3>
          <div className="vm-modal-meta">{project.role}</div>
          <p>{project.desc}</p>
          <div className="vm-modal-tags">
            {project.tags.map(t => <span key={t}>{t}</span>)}
          </div>
          <a className="vm-modal-cta" href={project.url} target="_blank" rel="noopener noreferrer">VOIR LE PROJET <span>→</span></a>
        </div>
      </div>
    </div>
  );
}

window.ProjectsExpedition = ProjectsExpedition;
window.ProjectModal = ProjectModal;
window.ExpeditionCard = ExpeditionCard;