// Visuel de la carte Oryze — composant partagé web + mobile.
// Moment héros : keyline 3px + ombre dure 6px sur fond Majorelle, matière
// en aplats (voile diagonal, fines rayures, arc donut de marque en fond
// perdu). GARDE-FOUS DÉMO (non négociables) : « DÉMO » toujours visible,
// numéro fictif, marque Oryze uniquement — aucun logo de réseau réel,
// aucun nom de banque/partenaire. Désirable comme objet Oryze, pas comme
// imitation d'une vraie carte. window.OryzeShared.CardVisual
(function () {
  const Ic = window.OryzeIcons;
  const mono = "var(--font-mono)";

  // Finitions — aplats DS uniquement. `lilac` passe le contenu à l'encre.
  const DESIGNS = {
    majorelle: { bg: "var(--oryze-majorelle)", fg: "#FFFFFF", logo: "../../assets/logos/oryze-logo-white.png", pillBorder: "rgba(255,255,255,0.9)", pillBg: "rgba(17,17,17,0.22)", sheen: "linear-gradient(118deg, var(--oryze-majorelle-2) 0%, rgba(122,99,243,0) 46%), linear-gradient(118deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 34%)", stripe: "rgba(255,255,255,0.045)", arcOpacity: 0.5, textShadow: "0 1px 0 rgba(17,17,17,0.18)", rule: "rgba(255,255,255,0.55)" },
    ink: { bg: "var(--oryze-ink)", fg: "var(--oryze-paper)", logo: "../../assets/logos/oryze-logo-white.png", pillBorder: "rgba(250,248,242,0.85)", pillBg: "rgba(255,255,255,0.08)", sheen: "linear-gradient(118deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%)", stripe: "rgba(255,255,255,0.05)", arcOpacity: 0.42, textShadow: "none", rule: "rgba(250,248,242,0.5)" },
    lilac: { bg: "var(--oryze-lilac)", fg: "var(--oryze-ink)", logo: "../../assets/logos/oryze-logo-black.png", pillBorder: "rgba(17,17,17,0.85)", pillBg: "rgba(255,255,255,0.28)", sheen: "linear-gradient(118deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 42%)", stripe: "rgba(17,17,17,0.035)", arcOpacity: 0.55, textShadow: "none", rule: "rgba(17,17,17,0.45)" },
  };

  // Puce — aplat butter, traces de contact à l'encre. Objet design, pas photo.
  function Chip() {
    return (
      <div style={{ width: 38, height: 28, borderRadius: 6, flex: "none", position: "relative", overflow: "hidden", background: "linear-gradient(135deg, var(--oryze-butter) 0%, #EDD25B 100%)", border: "1.5px solid var(--oryze-ink)", boxSizing: "border-box" }}>
        <span style={{ position: "absolute", left: 0, right: 0, top: "33%", height: 1.25, background: "var(--oryze-ink)", opacity: 0.55 }}></span>
        <span style={{ position: "absolute", left: 0, right: 0, top: "63%", height: 1.25, background: "var(--oryze-ink)", opacity: 0.55 }}></span>
        <span style={{ position: "absolute", top: 0, bottom: 0, left: "30%", width: 1.25, background: "var(--oryze-ink)", opacity: 0.55 }}></span>
        <span style={{ position: "absolute", top: 0, bottom: 0, right: "30%", width: 1.25, background: "var(--oryze-ink)", opacity: 0.55 }}></span>
        <span style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", width: 12, height: 10, borderRadius: 3, border: "1.25px solid var(--oryze-ink)", background: "var(--oryze-butter)", boxSizing: "border-box" }}></span>
      </div>
    );
  }

  function CardVisual({ statut = "active", revealed = false, design = "majorelle", style = {} }) {
    const C = window.OryzeCarte.card;
    const D = DESIGNS[design] || DESIGNS.majorelle;
    const off = statut !== "active";
    const fullGroups = C.full.split(" ");
    const last4 = fullGroups[3];

    return (
      <div style={{ position: "relative", width: "100%", maxWidth: 344, flex: "none", ...style }}>
        <div style={{
          aspectRatio: "1.586", borderRadius: 16, boxSizing: "border-box",
          background: D.bg,
          border: "var(--border-heavy) solid var(--line-keyline)",
          boxShadow: "var(--shadow-lg)",
          position: "relative", overflow: "hidden",
          filter: off ? "grayscale(1)" : "none", opacity: off ? 0.9 : 1,
          transition: "filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out)",
        }}>
          {/* ---- Matière (aplats, sous le contenu) ---- */}
          <span aria-hidden="true" style={{ position: "absolute", inset: 0, background: D.sheen }}></span>
          <span aria-hidden="true" style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(135deg, " + D.stripe + " 0px, " + D.stripe + " 1px, transparent 1px, transparent 8px)" }}></span>
          {/* Arc donut de marque — fond perdu bas-droit (brandmark, pas un hologramme) */}
          <svg aria-hidden="true" viewBox="0 0 100 100" style={{ position: "absolute", right: -56, bottom: -74, width: 210, height: 210, opacity: D.arcOpacity }}>
            <circle cx="50" cy="50" r="38" fill="none" stroke={design === "lilac" ? "var(--oryze-majorelle)" : "var(--oryze-lavender)"} strokeWidth="16" strokeDasharray="119.4 238.8" transform="rotate(-90 50 50)" />
            <circle cx="50" cy="50" r="38" fill="none" stroke="var(--oryze-rose)" strokeWidth="16" strokeDasharray="56.3 238.8" strokeDashoffset="-122.4" transform="rotate(-90 50 50)" />
          </svg>

          {/* ---- Contenu ---- */}
          <div style={{ position: "relative", height: "100%", boxSizing: "border-box", padding: "16px 20px", display: "flex", flexDirection: "column", justifyContent: "space-between", color: D.fg }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <img src={D.logo} alt="ORYZE" style={{ height: 17 }} />
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                {/* DÉMO — visible en permanence, non négociable */}
                <span style={{ fontFamily: mono, fontSize: 9.5, fontWeight: 600, letterSpacing: "0.12em", border: "1.5px solid " + D.pillBorder, borderRadius: 999, padding: "2.5px 9px", background: D.pillBg }}>DÉMO</span>
                <Ic.contactless size={18} style={{ opacity: 0.92 }} />
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
              <Chip />
              {/* Numéro — groupes masqués en retrait, les 4 derniers chiffres portent la hiérarchie */}
              <div style={{ display: "flex", alignItems: "baseline", gap: "0.55em", fontFamily: mono, fontSize: 18, fontWeight: 600, letterSpacing: "0.06em", whiteSpace: "nowrap", textShadow: D.textShadow }}>
                {revealed
                  ? fullGroups.map((g, i) => <span key={i}>{g}</span>)
                  : [0, 1, 2].map((i) => <span key={i} style={{ opacity: 0.62 }}>••••</span>).concat(<span key="l4">{last4}</span>)}
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 10 }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: mono, fontSize: 8.5, letterSpacing: "0.12em", opacity: 0.75 }}>TITULAIRE</div>
                <div style={{ fontFamily: mono, fontSize: 12, letterSpacing: "0.06em", marginTop: 2, whiteSpace: "nowrap" }}>{C.holder}</div>
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: mono, fontSize: 8.5, letterSpacing: "0.12em", opacity: 0.75 }}>EXP {C.exp}</span>
                {revealed && <span style={{ fontFamily: mono, fontSize: 8.5, letterSpacing: "0.12em", opacity: 0.75 }}>CVV {C.cvv}</span>}
              </div>
              <div style={{ fontFamily: mono, fontSize: 10, letterSpacing: "0.1em", opacity: 0.88, borderBottom: "1.5px solid " + D.rule, paddingBottom: 1 }}>DÉBIT</div>
            </div>
          </div>
        </div>

        {/* Pastille d'état hors service */}
        {off && (
          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "var(--oryze-paper)", color: "var(--text-strong)", border: "var(--border-key) solid var(--line-keyline)", borderRadius: 999, padding: "7px 14px", fontSize: 13, fontWeight: 700, boxShadow: "var(--shadow-xs)" }}>
              {statut === "opposed" ? <Ic.shield size={15} /> : <Ic.lock size={15} />}
              {statut === "opposed" ? "Opposée" : "Verrouillée"}
            </span>
          </div>
        )}
      </div>
    );
  }

  window.OryzeShared = window.OryzeShared || {};
  window.OryzeShared.CardVisual = CardVisual;
})();