/* MAKE MEDIA — page service (détail + exemples) */
const { useState: useSS, useEffect: useSE } = React;

// Une page service reste « en travaux » tant que son service n'a pas open: true dans data.jsx
// (c'est-à-dire tant qu'on n'a pas ses vraies photos).

// Image ou vidéo d'un exemple, ou la case grise tant qu'il n'y a pas de fichier.
function ExampleMedia({ m, dark, style }) {
  if (m.src && m.type === "video") return <video src={m.src} poster={m.poster} muted loop playsInline autoPlay preload="metadata" className="pp-media" style={style} />;
  if (m.src) return <img src={m.src} alt={m.cap} loading="lazy" decoding="async" className="pp-media" style={style} />;
  return <Placeholder label={m.cap} dark={dark} style={style} />;
}

function ServiceWip({ svc, prev, next }) {
  const tape = Array.from({ length: 12 }, (_, k) => <span key={k}>{k % 2 ? "Bientôt disponible" : "En travaux"}</span>);
  return (
    <React.Fragment>
      <Header theme="light" />
      <main className="wip" data-screen-label={`Service ${svc.name} (en travaux)`}>
        <div className="wip__tape wip__tape--a" aria-hidden="true"><div className="wip__tape-track">{tape}{tape}</div></div>
        <div className="wip__tape wip__tape--b" aria-hidden="true"><div className="wip__tape-track">{tape}{tape}</div></div>
        <div className="wrap">
          <div className="wip__inner">
            <Reveal as="div" className="wip__rec"><i aria-hidden="true"></i>Page en tournage</Reveal>
            <Reveal><h1 className="wip__title"><DecryptedText text={svc.name} animateOn="view" sequential speed={40} className="dtxt__revealed" encryptedClassName="dtxt__encrypted" /></h1></Reveal>
            <Reveal as="p" className="wip__soon" delay={120}><b>Bientôt disponible.</b> On prépare cette page avec nos meilleures images.</Reveal>
            <Reveal as="div" className="wip__render" delay={200} aria-hidden="true">
              <div className="wip__render-top"><span>Rendu en cours</span><span>{svc.name}.mp4</span></div>
              <div className="wip__bar"></div>
              <div className="wip__frames">{Array.from({ length: 10 }, (_, k) => <i key={k} style={{ animationDelay: `${k * 0.18}s` }}></i>)}</div>
            </Reveal>
            <div className="wip__actions">
              <a href="index.html#contact" className="btn">Un projet en {svc.name} ? <span className="arr">→</span></a>
              <a href="index.html" className="btn btn--ghost">Retour à l'accueil</a>
            </div>
            <nav className="wip__nav">
              <a href={window.MM_serviceHref(prev)}>← {prev.name}</a>
              <a href={window.MM_serviceHref(next)}>{next.name} →</a>
            </nav>
          </div>
        </div>
      </main>
      {svc.id === "photo" && <div className="wrap cg-wip"><ClientGalleries /></div>}
      <Footer />
    </React.Fragment>
  );
}

// Espace client des galeries photo (page Photo) : connexion par code en haut, galeries « visibles sur le site » en dessous.
// Tout passe par /galerie (renvoyé vers l'espace Make Media) : même adresse que le site, donc même connexion.
function ClientGalleries() {
  const KEY = "mm:client";
  const ls = (k, v) => { try { if (v === undefined) return localStorage.getItem(k); if (v === null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch (e) { return null; } };
  const [logged, setLogged] = useSS(() => !!ls(KEY));
  const [code, setCode] = useSS("");
  const [err, setErr] = useSS("");
  const [busy, setBusy] = useSS(false);
  const [list, setList] = useSS(null);
  const MOIS = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
  const dateFr = (d) => { const p = String(d || "").split("-"); return p.length === 3 ? `${MOIS[+p[1] - 1]} ${p[0]}` : ""; };

  useSE(() => {
    fetch("/galerie/api?a=list").then((r) => r.json()).then((d) => setList(d.galleries || [])).catch(() => setList([]));
  }, []);

  const login = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    const r = await fetch("/galerie/api", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ action: "client-login", code }) }).catch(() => null);
    const data = r ? await r.json().catch(() => ({})) : {};
    setBusy(false);
    if (r && r.status === 429) { setErr("Trop d'essais. Réessayez dans 15 minutes."); return; }
    if (!r || !r.ok) { setErr("Code incorrect. Vérifiez le message reçu de Make Media."); return; }
    ls(KEY, data.token); ls(KEY + ":name", data.client);
    window.location.href = "/galerie/client";
  };
  const logout = () => { ls(KEY, null); ls(KEY + ":name", null); setLogged(false); };
  const name = logged ? ls(KEY + ":name") : "";
  // Galeries « à la une » (5 au plus, choisies dans l'espace) au-dessus de la connexion, les autres en dessous.
  const une = (list || []).filter((g) => g.une), rest = (list || []).filter((g) => !g.une);
  const card = (g) => (
    <a key={g.slug} className="cg-card" href={`/galerie/${encodeURIComponent(g.slug)}`}>
      <div className="cg-card__ph">
        {g.cover && <img loading="lazy" alt={g.client} src={`/galerie/api?a=img&g=${encodeURIComponent(g.id)}&p=${encodeURIComponent(g.cover.p)}&k=${encodeURIComponent(g.cover.s)}&z=s`} />}
      </div>
      <b>{g.client}</b>
      <small>{g.titre} · {dateFr(g.date)} · {g.count} photos</small>
    </a>
  );

  return (
    <section className="cg" id="espace-client">
      {une.length > 0 && (
        <React.Fragment>
          <Reveal as="div" className="eyebrow" style={{ marginBottom: "clamp(18px,2.4vh,28px)" }}>À la une</Reveal>
          <div className="cg-grid cg-grid--une">{une.map(card)}</div>
        </React.Fragment>
      )}
      <Reveal as="div" className="cg-login">
        <div>
          <div className="eyebrow">Espace client</div>
          <h2 className="cg-title">Retrouvez toutes vos photos</h2>
          <p className="cg-txt">{logged ? `Vous êtes connecté${name ? ` : ${name}` : ""}.` : "Entrez le code reçu de Make Media pour accéder à toutes vos galeries, les regarder et les télécharger."}</p>
        </div>
        {logged ? (
          <div className="cg-actions">
            <a href="/galerie/client" className="btn">Mon espace <span className="arr">→</span></a>
            <button type="button" className="btn btn--ghost" onClick={logout}>Se déconnecter</button>
          </div>
        ) : (
          <form className="cg-form" onSubmit={login}>
            <div className="field" style={{ marginBottom: 0 }}>
              <label htmlFor="cgCode">Code client</label>
              <input id="cgCode" value={code} onChange={(e) => setCode(e.target.value)} placeholder="Ex. AB12CD34" autoComplete="off" autoCapitalize="characters" />
            </div>
            <button className="btn" type="submit" disabled={busy || !code.trim()}>Accéder à mes photos <span className="arr">→</span></button>
            <div className="cg-err" role="alert">{err}</div>
          </form>
        )}
      </Reveal>

      {rest.length > 0 && (
        <React.Fragment>
          <Reveal as="div" className="eyebrow" style={{ margin: "clamp(36px,5vh,60px) 0 clamp(18px,2.4vh,28px)" }}>{une.length ? "Toutes nos galeries" : "Galeries récentes"}</Reveal>
          <div className="cg-grid">{rest.map(card)}</div>
        </React.Fragment>
      )}
    </section>
  );
}

function ServicePage() {
  const { SERVICES } = window.MM_DATA;
  const params = new URLSearchParams(window.location.search);
  const id = params.get("id") || window.MM_SERVICE_ID || (SERVICES[0] && SERVICES[0].id);
  const svc = window.MM_getService(id);
  // Page ouverte : seuls les exemples qui ont déjà leur image sont montrés (pas de cadres vides).
  const ready = (items) => (svc && svc.open ? (items || []).filter((m) => m.src) : items || []);
  const groups = svc && svc.exampleGroups ? svc.exampleGroups.map((g) => ({ ...g, items: ready(g.items) })).filter((g) => g.items.length) : null;
  const examples = svc ? (groups ? groups.flatMap((g) => g.items) : ready(svc.examples)) : [];
  const [lb, setLb] = useSS(-1);

  useSE(() => {
    const onKey = (e) => {
      if (lb < 0) return;
      if (e.key === "Escape") setLb(-1);
      if (e.key === "ArrowRight") setLb((i) => (i + 1) % examples.length);
      if (e.key === "ArrowLeft") setLb((i) => (i - 1 + examples.length) % examples.length);
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = lb >= 0 ? "hidden" : "";
    return () => window.removeEventListener("keydown", onKey);
  }, [lb, examples.length]);

  useSE(() => {
    // Une page de service dédiée garde le titre écrit dans son HTML (pensé pour Google).
    if (!window.MM_SERVICE_ID) document.title = svc ? `${svc.name} — Make Media` : "Service — Make Media";
  }, [svc]);

  if (!svc) {
    return (
      <React.Fragment>
        <Header theme="light" />
        <main className="wrap" style={{ minHeight: "70vh", display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 140 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Erreur 404</div>
          <h1 className="h-section" style={{ marginBottom: 24 }}>Service introuvable</h1>
          <a href="index.html#services" className="btn btn--ghost" style={{ alignSelf: "flex-start" }}>
            <span className="arr">←</span> Retour aux services
          </a>
        </main>
        <Footer />
      </React.Fragment>
    );
  }

  const i = SERVICES.findIndex((s) => s.id === svc.id);
  const next = SERVICES[(i + 1) % SERVICES.length];
  const prev = SERVICES[(i - 1 + SERVICES.length) % SERVICES.length];
  const cur = lb >= 0 ? examples[lb] : null;

  // Ancienne adresse (service.html?id=…) d'un service qui a maintenant sa propre page : on y renvoie.
  if (svc.open && svc.page && !window.MM_SERVICE_ID) { window.location.replace(svc.page); return null; }
  if (!svc.open) return <ServiceWip svc={svc} prev={prev} next={next} />;

  return (
    <React.Fragment>
      <Header theme="light" />

      <main className="pp" data-screen-label={`Service ${svc.name}`}>
        <div className="wrap">
          <a href="index.html#services" className="pp-back">Tous les services</a>

          <div className="pp-head">
            <div>
              <Reveal as="div" className="pp-eyebrow eyebrow">Service {svc.idx} · Savoir-faire</Reveal>
              <Reveal><h1 className="pp-title">{svc.name}</h1></Reveal>
            </div>
            <Reveal as="p" className="pp-summary" delay={120}>{svc.intro}</Reveal>
          </div>

          {svc.deliverables && <Reveal as="div" className="svc-deliv">
            <div className="k">{svc.deliverablesLabel || "Ce qu'on livre"}</div>
            <div className="svc-deliv__tags">
              {svc.deliverables.map((d, idx) => <span key={idx}>{d}</span>)}
            </div>
            {svc.about && svc.about.map((p, idx) => <p key={idx} className="svc-about">{p}</p>)}
          </Reveal>}

          {groups ? (
            groups.map((group, gi) => {
              const offset = groups.slice(0, gi).reduce((n, g) => n + g.items.length, 0);
              return (
                <React.Fragment key={group.label}>
                  <Reveal as="div" className="eyebrow" style={{ marginBottom: "clamp(16px,2vh,24px)", marginTop: gi === 0 ? 0 : "clamp(32px,4vh,56px)" }}>
                    {group.label}
                  </Reveal>
                  <div className="pp-gallery">
                    {group.items.map((m, idx) => (
                      <Reveal as="div" key={idx} className={`pp-item g-${m.w}`} delay={(idx % 2) * 80} onClick={() => setLb(offset + idx)}>
                        <MaskReveal className="pp-item__media">
                          <ExampleMedia m={m} style={{ aspectRatio: m.ratio }} />
                          {m.type === "video" && !m.src && <span className="play" aria-hidden="true"></span>}
                        </MaskReveal>
                        <div className="pp-item__bar" style={{ justifyContent: "flex-end" }}>
                          <span className={`media-tag ${m.type === "video" ? "media-tag--video" : ""}`}>
                            {m.type === "video" ? "Vidéo" : "Photo"}
                          </span>
                        </div>
                      </Reveal>
                    ))}
                  </div>
                </React.Fragment>
              );
            })
          ) : examples.length > 0 && (
            <React.Fragment>
              <Reveal as="div" className="eyebrow" style={{ marginBottom: "clamp(22px,3vh,34px)" }}>
                Exemples — un aperçu de nos réalisations
              </Reveal>
              <div className="pp-gallery">
                {examples.map((m, idx) => (
                  <Reveal as="div" key={idx} className={`pp-item g-${m.w}`} delay={(idx % 2) * 80} onClick={() => setLb(idx)}>
                    <MaskReveal className="pp-item__media">
                      <ExampleMedia m={m} style={{ aspectRatio: m.ratio }} />
                      {m.type === "video" && !m.src && <span className="play" aria-hidden="true"></span>}
                    </MaskReveal>
                    <div className="pp-item__bar" style={{ justifyContent: "flex-end" }}>
                      <span className={`media-tag ${m.type === "video" ? "media-tag--video" : ""}`}>
                        {m.type === "video" ? "Vidéo" : "Photo"}
                      </span>
                    </div>
                  </Reveal>
                ))}
              </div>
            </React.Fragment>
          )}

          {svc.id === "photo" && <ClientGalleries />}

          <div className="svc-cta">
            <h3>Un projet en {svc.name} ?</h3>
            <div className="svc-cta__btns">
              {svc.id === "studio"
                ? <a href="index.html#studio" className="btn">Réserver le studio <span className="arr">→</span></a>
                : <a href="index.html#contact" className="btn">Parlons de votre projet <span className="arr">→</span></a>}
              {svc.id === "studio" && <a href="index.html#contact" className="btn btn--ghost">Nous écrire</a>}
            </div>
          </div>

          <div className="pp-next">
            <a className="prev-cell" href={window.MM_serviceHref(prev)}>
              <span className="dir">Service précédent</span>
              <span className="ttl">{prev.name}</span>
            </a>
            <a className="next-cell" href={window.MM_serviceHref(next)}>
              <span className="dir">Service suivant</span>
              <span className="ttl">{next.name}</span>
            </a>
          </div>
        </div>
      </main>

      <Footer />

      {/* Lightbox exemples */}
      <div className={`lightbox ${lb >= 0 ? "open" : ""}`} onClick={(e) => { if (e.target === e.currentTarget) setLb(-1); }}>
        {cur && (
          <React.Fragment>
            <button className="lightbox__close" aria-label="Fermer" onClick={() => setLb(-1)}>✕</button>
            <button className="lightbox__nav prev" aria-label="Précédent" onClick={() => setLb((x) => (x - 1 + examples.length) % examples.length)}>←</button>
            <button className="lightbox__nav next" aria-label="Suivant" onClick={() => setLb((x) => (x + 1) % examples.length)}>→</button>
            <div className="lightbox__inner">
              <div className="lightbox__media" style={{ position: "relative" }}>
                <ExampleMedia m={cur} dark style={{ width: "100%", height: "100%", objectFit: "contain" }} />
                {cur.type === "video" && !cur.src && <span className="play" aria-hidden="true"></span>}
              </div>
              <div className="lightbox__bar" style={{ justifyContent: "flex-end" }}>
                <span className="lb-counter">{String(lb + 1).padStart(2, "0")} / {String(examples.length).padStart(2, "0")}</span>
              </div>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ServicePage />);