// ============================================================
// REPLAYS LANDING — Plateforme de replays vidéos pour les inscrits Bac Maths
// Routes : /replays/login (form email) · /replays (liste + player)
// ============================================================

const { useState: useSr, useEffect: useEr, useRef: useRr } = React;

function RpHeader({ email, onLogout }) {
  return (
    <header className="rp-header">
      <div className="wrap rp-header-wrap">
        <div className="rp-brand">
          <span className="rp-brand-eyebrow">Cours Edgar</span>
          <span className="rp-brand-title">Replays · Stage Bac Maths 2026</span>
        </div>
        {email && (
          <div className="rp-header-right">
            <span className="rp-user">{email}</span>
            <button className="rp-logout-btn" onClick={onLogout}>Déconnexion</button>
          </div>
        )}
      </div>
    </header>
  );
}

// ============================================================
// PAGE LOGIN — magic link
// ============================================================
function RpLogin() {
  const [email, setEmail] = useSr("");
  const [status, setStatus] = useSr("idle"); // idle | sending | sent | error
  const [errMsg, setErrMsg] = useSr("");

  useEr(() => {
    try {
      const m = document.createElement("meta");
      m.name = "robots";
      m.content = "noindex, nofollow";
      document.head.appendChild(m);
    } catch (_) {}
    // Si query error= existe, afficher message
    try {
      const p = new URLSearchParams(window.location.search);
      const err = p.get("error");
      if (err === "invalid_token") setErrMsg("Lien invalide. Demande un nouveau lien ci-dessous.");
      else if (err === "token_expired") setErrMsg("Lien expiré (durée de vie : 30 min). Demande un nouveau lien ci-dessous.");
      else if (err === "token_used") setErrMsg("Lien déjà utilisé. Demande un nouveau lien ci-dessous.");
      else if (err === "internal") setErrMsg("Erreur serveur. Réessaye dans un instant.");
    } catch (_) {}
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setStatus("error");
      setErrMsg("Email invalide.");
      return;
    }
    setStatus("sending");
    setErrMsg("");
    try {
      const res = await fetch("/api/replays/request-magic-link", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim() }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.ok === false) {
        setStatus("error");
        setErrMsg((json && json.error) || "Erreur. Réessaye.");
        return;
      }
      setStatus("sent");
    } catch (_) {
      setStatus("error");
      setErrMsg("Connexion impossible. Réessaye.");
    }
  };

  return (
    <div className="rp-page">
      <RpHeader />
      <main className="rp-main">
        <div className="wrap rp-login-wrap">
          <div className="rp-login-card">
            <div className="rp-login-eyebrow">🎥 Accès aux replays</div>
            <h1 className="rp-login-title">Tape ton email pour recevoir ton lien d'accès.</h1>
            <p className="rp-login-sub">
              On t'envoie un lien d'accès sur l'email avec lequel tu t'es inscrit au stage.
              Le lien est valable <strong>30 minutes</strong> et te connecte directement, sans mot de passe.
            </p>

            {status === "sent" ? (
              <div className="rp-login-success">
                <div className="rp-login-success-emoji">✉️</div>
                <h2>Lien envoyé.</h2>
                <p>Si <strong>{email}</strong> est inscrit au stage, tu vas recevoir un email avec ton lien d'accès dans la minute. Pense à vérifier ton dossier <em>Promotions</em> ou <em>Spams</em>.</p>
                <button className="rp-login-back" onClick={() => { setStatus("idle"); setEmail(""); }}>Renvoyer un lien</button>
              </div>
            ) : (
              <form className="rp-login-form" onSubmit={submit} noValidate>
                <input
                  type="email"
                  placeholder="ton.email@exemple.fr"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={status === "sending"}
                  autoFocus
                />
                <button type="submit" className="btn btn-guide btn-lg" disabled={status === "sending"}>
                  {status === "sending" ? "Envoi en cours…" : "🎥 Recevoir mon lien"}
                </button>
                {errMsg && <p className="rp-err">{errMsg}</p>}
              </form>
            )}

            <p className="rp-login-help">
              Tu n'es pas encore inscrit ? <a href="/bac">Découvrir le stage</a>
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}

// ============================================================
// PAGE REPLAYS — liste + player
// ============================================================
function RpReplays() {
  const [me, setMe] = useSr(null);          // { email } ou null
  const [videos, setVideos] = useSr(null);  // [] ou null
  const [loading, setLoading] = useSr(true);
  const [selected, setSelected] = useSr(null);
  const [streamUrl, setStreamUrl] = useSr("");
  const [streamErr, setStreamErr] = useSr("");
  const videoRef = useRr(null);

  useEr(() => {
    try {
      const m = document.createElement("meta");
      m.name = "robots";
      m.content = "noindex, nofollow";
      document.head.appendChild(m);
    } catch (_) {}

    (async () => {
      try {
        const meRes = await fetch("/api/replays/me");
        if (!meRes.ok) {
          window.location.href = "/replays/login";
          return;
        }
        const meJson = await meRes.json();
        setMe(meJson);

        const vRes = await fetch("/api/replays/videos");
        if (!vRes.ok) {
          if (vRes.status === 401) {
            window.location.href = "/replays/login";
            return;
          }
          setVideos([]);
        } else {
          const vJson = await vRes.json();
          setVideos(vJson.videos || []);
        }
      } catch (_) {
        setVideos([]);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const onLogout = async () => {
    try {
      await fetch("/api/replays/logout", { method: "POST" });
    } catch (_) {}
    window.location.href = "/replays/login";
  };

  const selectVideo = async (v) => {
    setSelected(v);
    setStreamUrl("");
    setStreamErr("");
    try {
      const res = await fetch(`/api/replays/stream/${v.id}`);
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.ok) {
        if (res.status === 401) {
          window.location.href = "/replays/login";
          return;
        }
        setStreamErr(json.error || "Impossible de charger la vidéo. Réessaye.");
        return;
      }
      setStreamUrl(json.url);
    } catch (_) {
      setStreamErr("Connexion impossible. Réessaye.");
    }
  };

  return (
    <div className="rp-page">
      <RpHeader email={me?.email} onLogout={onLogout} />
      <main className="rp-main">
        <div className="wrap rp-replays-wrap">
          {loading ? (
            <p className="rp-loading">Chargement…</p>
          ) : (
            <>
              <div className="rp-section-eyebrow">Stage Bac Maths 2026 · Replays</div>
              <h1 className="rp-section-title">Tes replays.</h1>
              <p className="rp-section-sub">
                Chaque séance du stage est mise à disposition dès le lendemain matin. Tu peux les revoir autant de fois que tu veux pendant toutes tes révisions.
              </p>

              {selected && (
                <section className="rp-player-section">
                  <div className="rp-player-header">
                    <div>
                      <h2 className="rp-player-title">{selected.title}</h2>
                      {selected.description && <p className="rp-player-desc">{selected.description}</p>}
                    </div>
                    <button className="rp-player-close" onClick={() => { setSelected(null); setStreamUrl(""); }} aria-label="Fermer">×</button>
                  </div>
                  {streamErr ? (
                    <div className="rp-player-error">{streamErr}</div>
                  ) : streamUrl ? (
                    <video
                      ref={videoRef}
                      key={selected.id}
                      src={streamUrl}
                      controls
                      controlsList="nodownload"
                      preload="metadata"
                      className="rp-player-video"
                    />
                  ) : (
                    <p className="rp-loading">Chargement de la vidéo…</p>
                  )}
                </section>
              )}

              <div className="rp-videos-grid">
                {(!videos || videos.length === 0) ? (
                  <div className="rp-empty">
                    <p>Aucun replay disponible pour l'instant.</p>
                    <p className="rp-empty-sub">Le premier replay sera mis en ligne le lendemain de la première séance live.</p>
                  </div>
                ) : (
                  videos.map((v) => (
                    <button key={v.id} className={`rp-video-card ${selected?.id === v.id ? "is-active" : ""}`} onClick={() => selectVideo(v)}>
                      <div className="rp-video-num">{(v.ordering || 0).toString().padStart(2, "0")}</div>
                      <div className="rp-video-body">
                        <div className="rp-video-title">{v.title}</div>
                        {v.description && <div className="rp-video-desc">{v.description}</div>}
                        <div className="rp-video-meta">
                          {v.duration_sec ? `${Math.round(v.duration_sec / 60)} min` : ""}
                          {v.created_at && <span className="rp-video-date"> · {new Date(v.created_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "short" })}</span>}
                        </div>
                      </div>
                      <div className="rp-video-play">▶</div>
                    </button>
                  ))
                )}
              </div>

              <p className="rp-disclaimer">
                ⚠️ Une seule session active à la fois par compte. Si tu te connectes ailleurs, cette session se fermera automatiquement.
              </p>
            </>
          )}
        </div>
      </main>
    </div>
  );
}