// app/bereal-overlays.jsx — Modales et overlays de la feature Paparazzi
// (Welcome 1er accès · Phila 1er post · Lightbox photo · Carte secret Phila)

// ─────────────────────────────────────────────────────────────────────────
// 1) Welcome overlay — affiché la 1ère fois qu'on ouvre l'onglet
// ─────────────────────────────────────────────────────────────────────────
function BrWelcomeOverlay({ onDismiss }) {
  return (
    <div onClick={onDismiss} style={{
      position: "fixed", inset: 0, zIndex: 200, cursor: "pointer",
      background: "rgba(26,22,18,0.92)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24, animation: "a-fade .3s ease both",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: A.ink, color: A.white,
        border: `1.5px solid ${A.or}`,
        padding: "36px 28px 28px",
        maxWidth: 360, width: "100%", textAlign: "center",
        animation: "a-up .45s cubic-bezier(.2,.7,.3,1) both",
        position: "relative",
      }}>
        <div style={{ fontFamily: A.mono, fontSize: 10, letterSpacing: 3.5, color: A.or, textTransform: "uppercase" }}>
          ★ Bienvenue
        </div>
        <div style={{ fontFamily: A.display, fontStyle: "italic", fontSize: 36, lineHeight: 1, marginTop: 12, color: A.white, letterSpacing: -0.5 }}>
          Les Paparazzis
        </div>
        <div style={{ width: 36, height: 1, background: A.or, margin: "16px auto", opacity: 0.8 }} />
        <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 16, color: "rgba(255,255,255,0.82)", lineHeight: 1.55, padding: "0 8px" }}>
          Une question par semaine. Une seule photo pour y répondre.
          Tout le monde joue, tout est gardé.
        </div>

        <div style={{ marginTop: 22, textAlign: "left", padding: "16px 18px", background: "rgba(190,154,72,0.08)", border: "1px solid rgba(190,154,72,0.25)" }}>
          <RuleLine n="I"   txt="Le couple publie un prompt chaque lundi." />
          <RuleLine n="II"  txt="Tu réponds une fois, quand tu veux dans la semaine." />
          <RuleLine n="III" txt="Dimanche minuit, on archive et un nouveau prompt arrive." />
        </div>

        <button onClick={onDismiss} style={{
          marginTop: 22, padding: "13px 28px",
          background: A.or, color: A.ink, border: "none",
          fontFamily: A.mono, fontSize: 11, letterSpacing: 2.5, fontWeight: 600,
          textTransform: "uppercase", cursor: "pointer",
          width: "100%",
        }}>
          Voir le mur ›
        </button>
        <div style={{ marginTop: 14, fontFamily: A.italic, fontStyle: "italic", fontSize: 12, color: "rgba(255,255,255,0.5)" }}>
          Pause totale du 20 au 22 août — le jour J, on se voit en vrai.
        </div>
      </div>
    </div>
  );
}

function RuleLine({ n, txt }) {
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "baseline", marginBottom: 6 }}>
      <div style={{ fontFamily: A.display, fontStyle: "italic", fontSize: 14, color: A.or, width: 22, flexShrink: 0 }}>{n}.</div>
      <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 13.5, color: "rgba(255,255,255,0.85)", lineHeight: 1.45 }}>{txt}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 2) Phila 1er post overlay — auto-dismiss 2.5 s
// ─────────────────────────────────────────────────────────────────────────
function BrPhilaFirstPostOverlay({ onDismiss }) {
  React.useEffect(() => {
    const t = setTimeout(onDismiss, 2500);
    return () => clearTimeout(t);
  }, [onDismiss]);
  return (
    <div onClick={onDismiss} style={{
      position: "fixed", inset: 0, zIndex: 300, cursor: "pointer",
      background: "rgba(26,22,18,0.94)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24, animation: "a-fade .25s ease both",
    }}>
      <div style={{
        textAlign: "center", color: A.white,
        animation: "a-up .5s cubic-bezier(.2,.7,.3,1) both",
        maxWidth: 320,
      }}>
        <Phila variant="wide" size={120} style={{ display: "block", margin: "0 auto 18px" }} />
        <div style={{ fontFamily: A.mono, fontSize: 10, letterSpacing: 3, color: A.or, textTransform: "uppercase" }}>
          ★ Bienvenue chez les Paparazzis
        </div>
        <div style={{ fontFamily: A.display, fontStyle: "italic", fontSize: 30, color: A.white, lineHeight: 1.1, marginTop: 14 }}>
          Phila approuve.
        </div>
        <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 14, color: "rgba(255,255,255,0.7)", marginTop: 12, lineHeight: 1.5 }}>
          Tu fais maintenant partie des reporters officiels du mariage.
        </div>
        <div style={{ marginTop: 22, fontFamily: A.mono, fontSize: 9, letterSpacing: 2, color: "rgba(255,255,255,0.35)" }}>
          ♥ EASTER EGG 3 / 3 — PAPARAZZIS ♥
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 3) Lightbox — agrandit un polaroid au tap
// ─────────────────────────────────────────────────────────────────────────
function BrLightbox({ post, prompt, isMine, onClose, onDelete }) {
  const handleDelete = () => {
    if (!confirm("Supprimer définitivement ce post du mur ?")) return;
    onDelete?.(post.id);
    onClose();
  };
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 200, cursor: "zoom-out",
      background: "rgba(26,22,18,0.94)",
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      padding: 24, animation: "a-fade .25s ease both",
    }}>
      <button onClick={(e) => { e.stopPropagation(); onClose(); }} style={{
        position: "absolute", top: "calc(16px + env(safe-area-inset-top))", right: 16,
        width: 40, height: 40, borderRadius: "50%",
        background: "rgba(255,255,255,0.12)", color: A.white,
        border: "1px solid rgba(255,255,255,0.25)",
        fontSize: 22, lineHeight: 1, cursor: "pointer",
      }} aria-label="Fermer">×</button>

      <div onClick={(e) => e.stopPropagation()} style={{
        background: A.white, padding: "12px 12px 28px",
        maxWidth: 380, width: "100%",
        boxShadow: "0 30px 80px rgba(0,0,0,0.5)",
        animation: "a-up .35s cubic-bezier(.2,.7,.3,1) both",
        position: "relative",
      }}>
        <BrPhotoFrame post={post} large />
        {isMine && (
          <div style={{
            position: "absolute", top: 22, right: 22,
            fontFamily: A.mono, fontSize: 9, letterSpacing: 2, fontWeight: 600,
            background: A.ink, color: A.or, padding: "4px 8px", borderRadius: 1,
          }}>★ MOI</div>
        )}
        <div style={{ marginTop: 14, textAlign: "center" }}>
          <div style={{ fontFamily: A.mono, fontSize: 9, letterSpacing: 2, color: A.orDeep, textTransform: "uppercase" }}>
            {isMine ? "Toi" : (post.nom_invite || "Anonyme")}
          </div>
          {post.caption && (
            <div style={{ fontFamily: A.italic, fontStyle: "italic", fontSize: 17, color: A.ink, lineHeight: 1.4, marginTop: 6 }}>
              "{post.caption}"
            </div>
          )}
          <div style={{ marginTop: 10, fontFamily: A.mono, fontSize: 9, color: A.inkMute, letterSpacing: 1.5 }}>
            {new Date(post.publie_le).toLocaleDateString("fr-FR", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" })}
          </div>

          {isMine && (
            <button onClick={handleDelete} style={{
              marginTop: 16, padding: "8px 16px",
              background: "transparent", color: A.rouge,
              border: `1px solid ${A.rouge}`,
              fontFamily: A.mono, fontSize: 10, letterSpacing: 2, textTransform: "uppercase", fontWeight: 600,
              cursor: "pointer",
            }}>✕ Supprimer mon post</button>
          )}
        </div>
      </div>

      {prompt && (
        <div style={{
          position: "absolute", bottom: "calc(20px + env(safe-area-inset-bottom))", left: 0, right: 0,
          textAlign: "center", color: "rgba(255,255,255,0.6)",
          fontFamily: A.italic, fontStyle: "italic", fontSize: 13,
          pointerEvents: "none", padding: "0 24px",
        }}>
          en réponse à <em>"{prompt.question}"</em>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 4) BrPhotoFrame — affiche soit l'image base64, soit un placeholder gradient
// ─────────────────────────────────────────────────────────────────────────
function BrPhotoFrame({ post, large = false }) {
  const c = post.photo_color || MOCK_PHOTO_COLORS[0];
  if (post.photo_url) {
    return (
      <div style={{
        aspectRatio: "4/5", background: A.paper, overflow: "hidden",
        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)",
      }}>
        <img src={post.photo_url} alt=""
          style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }
  // Placeholder gradient avec un voile noiseux pour faire vivant
  return (
    <div style={{
      aspectRatio: "4/5",
      background: `linear-gradient(135deg, ${c.from} 0%, ${c.to} 100%)`,
      position: "relative",
      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)",
    }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.12,
        backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
      }} />
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        transform: "translate(-50%, -50%)",
        fontFamily: A.display, fontStyle: "italic",
        fontSize: large ? 64 : 36, color: "rgba(255,255,255,0.45)",
      }}>✦</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// 5) Carte Phila secret prompt (apparaît au 5e post — Club Phila uniquement)
// ─────────────────────────────────────────────────────────────────────────
function BrPhilaSecretCard({ onOpen }) {
  return (
    <button onClick={onOpen} style={{
      width: "100%", padding: "20px 22px", marginTop: 16,
      background: `linear-gradient(135deg, ${A.ink} 0%, #2A2620 100%)`,
      color: A.white, border: `1.5px solid ${A.or}`, cursor: "pointer",
      textAlign: "left", display: "flex", alignItems: "center", gap: 16,
      transition: "transform .15s",
    }} onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
       onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
      <div style={{
        width: 46, height: 46, borderRadius: "50%",
        background: A.or + "22", border: `1.5px solid ${A.or}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}><Phila variant="head" size={32} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: A.mono, fontSize: 9, letterSpacing: 2.5, color: A.or, marginBottom: 4 }}>
          PROMPT SECRET · CLUB PHILA
        </div>
        <div style={{ fontFamily: A.display, fontStyle: "italic", fontSize: 18, color: A.white, lineHeight: 1.2 }}>
          Phila a un message rien que pour toi.
        </div>
      </div>
      <div style={{ color: A.or, fontFamily: A.display, fontSize: 22 }}>→</div>
    </button>
  );
}

Object.assign(window, {
  BrWelcomeOverlay, BrPhilaFirstPostOverlay,
  BrLightbox, BrPhotoFrame, BrPhilaSecretCard,
});
