// Trivan v3 — schémas animés : orchestration (SVG), routeur live, bascule auto
// Exporte sur window : HeroSchema, RouterLive, Failover

const { useState: useSchState, useEffect: useSchEffect } = React;

/* ============================================================
   Schéma hero : client → Trivan → prestataires (SVG animé)
   ============================================================ */
function HeroSchema() {
  return (
    <div className="schema-wrap" data-reveal="" style={{ "--reveal-delay": "250ms" }}>
      <div className="schema-panel">
        <div className="schema-panel-top">
          <span className="sp-title"><span className="live-dot"></span>Flux de paiement — temps réel</span>
          <span className="sp-dots"><i></i><i></i><i></i></span>
        </div>
        <svg className="schema" viewBox="0 0 620 460" role="img" aria-label="Schéma : le client paie, Trivan route la transaction vers le bon prestataire">
        <defs>
          <path id="w1" d="M150 230 C 200 230, 200 230, 250 230" />
          <path id="w2" d="M380 230 C 432 230, 432 87, 480 87" />
          <path id="w3" d="M380 230 L 480 230" />
          <path id="w4" d="M380 230 C 432 230, 432 373, 480 373" />
        </defs>

        {/* étiquettes de zones */}
        <text className="node-sub" x="85" y="166" textAnchor="middle">VOTRE BOUTIQUE</text>
        <text className="node-sub" x="540" y="38" textAnchor="middle">VOS PRESTATAIRES</text>

        {/* câbles */}
        <use href="#w1" className="wire" />
        <use href="#w2" className="wire" />
        <use href="#w3" className="wire" />
        <use href="#w4" className="wire" />

        {/* nœud client */}
        <rect className="node-box" x="20" y="190" width="130" height="80" rx="14" />
        <rect className="card-shape" x="38" y="208" width="30" height="20" rx="4" />
        <line x1="38" y1="215" x2="68" y2="215" stroke="var(--muted)" strokeWidth="3" />
        <text className="node-title" x="38" y="252">Client</text>

        {/* anneau de pulsation du hub */}
        <circle cx="315" cy="230" r="62" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0">
          <animate attributeName="r" values="62;100" dur="3s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.45;0" dur="3s" repeatCount="indefinite" />
        </circle>

        {/* hub Trivan */}
        <rect className="hub-box" x="250" y="175" width="130" height="110" rx="16" />
        <text className="hub-title" x="315" y="226" textAnchor="middle">Trivan</text>
        <text className="node-sub" x="315" y="248" textAnchor="middle" fill="rgba(255,255,255,.6)">ROUTEUR</text>

        {/* prestataires */}
        <rect className="node-box" x="480" y="60" width="120" height="54" rx="12" />
        <text className="psp-name" x="540" y="92" textAnchor="middle">ADYEN</text>
        <rect className="node-box" x="480" y="203" width="120" height="54" rx="12" />
        <text className="psp-name" x="540" y="235" textAnchor="middle">PAYPLUG</text>
        <rect className="node-box" x="480" y="346" width="120" height="54" rx="12" />
        <text className="psp-name" x="540" y="378" textAnchor="middle">PAYPAL</text>

        {/* paquets : client → hub */}
        <circle className="packet-glow" r="8">
          <animateMotion dur="1.6s" repeatCount="indefinite"><mpath href="#w1" /></animateMotion>
        </circle>
        <circle className="packet" r="4">
          <animateMotion dur="1.6s" repeatCount="indefinite"><mpath href="#w1" /></animateMotion>
        </circle>

        {/* paquets : hub → prestataires (alternés) */}
        <circle className="packet" r="4">
          <animateMotion dur="1.7s" begin="0.2s" repeatCount="indefinite"><mpath href="#w2" /></animateMotion>
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.7s" begin="0.2s" repeatCount="indefinite" />
        </circle>
        <circle className="packet" r="4">
          <animateMotion dur="1.7s" begin="1.4s" repeatCount="indefinite"><mpath href="#w3" /></animateMotion>
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.7s" begin="1.4s" repeatCount="indefinite" />
        </circle>
        <circle className="packet" r="4">
          <animateMotion dur="1.7s" begin="2.6s" repeatCount="indefinite"><mpath href="#w4" /></animateMotion>
          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="1.7s" begin="2.6s" repeatCount="indefinite" />
        </circle>

        {/* confirmations "acceptée" */}
        <g>
          <rect className="ok-chip" x="495" y="120" width="90" height="24" rx="12" />
          <text className="ok-txt" x="540" y="136" textAnchor="middle">✓ acceptée</text>
          <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.35;0.45;0.85;1" dur="5.1s" begin="0.5s" repeatCount="indefinite" />
        </g>
        <g>
          <rect className="ok-chip" x="495" y="263" width="90" height="24" rx="12" />
          <text className="ok-txt" x="540" y="279" textAnchor="middle">✓ acceptée</text>
          <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.35;0.45;0.85;1" dur="5.1s" begin="1.7s" repeatCount="indefinite" />
        </g>
        <g>
          <rect className="ok-chip" x="495" y="406" width="90" height="24" rx="12" />
          <text className="ok-txt" x="540" y="422" textAnchor="middle">✓ acceptée</text>
          <animate attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.35;0.45;0.85;1" dur="5.1s" begin="2.9s" repeatCount="indefinite" />
        </g>
      </svg>

        <div className="schema-legend">
          <span className="lg"><i style={{ background: "var(--accent-text)" }}></i>Paiement en transit</span>
          <span className="lg"><i style={{ background: "#d4dad3" }}></i>Connexions actives</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Routeur live : cycle de vie d'une transaction (console)
   ============================================================ */
const RC_TXS = [
  { id: "TX-84A2", amt: "49,90 €", pick: 0, why: "frais optimaux", ms: 212 },
  { id: "TX-84A3", amt: "124,00 €", pick: 1, why: "meilleure acceptation", ms: 187 },
  { id: "TX-84A4", amt: "18,50 €", pick: 2, why: "préférence client", ms: 243 },
  { id: "TX-84A5", amt: "89,00 €", pick: 0, why: "frais optimaux", ms: 198 },
];
const RC_ROUTES = [
  { name: "adyen", meta: "frais 1,4 %" },
  { name: "payplug", meta: "accept. 97 %" },
  { name: "paypal", meta: "1-clic" },
];

function RouterLive() {
  const [txi, setTxi] = useSchState(0);
  const [phase, setPhase] = useSchState(0); // 0 reçue, 1 analyse, 2 routée, 3 acceptée

  useSchEffect(() => {
    const timers = [];
    const loop = (i) => {
      setTxi(i);
      setPhase(0);
      timers.push(setTimeout(() => setPhase(1), 900));
      timers.push(setTimeout(() => setPhase(2), 1900));
      timers.push(setTimeout(() => setPhase(3), 2900));
      timers.push(setTimeout(() => loop((i + 1) % RC_TXS.length), 4600));
    };
    loop(0);
    return () => timers.forEach(clearTimeout);
  }, []);

  const tx = RC_TXS[txi];
  const states = ["reçue", "analyse…", "routée", "acceptée ✓"];
  const barW = [18, 48, 78, 100][phase];
  const logs = [
    "nouvelle transaction entrante…",
    "analyse : montant, moyen de paiement, historique…",
    "route choisie : " + RC_ROUTES[tx.pick].name + " (" + tx.why + ")",
    "acceptée en " + tx.ms + " ms",
  ];

  return (
    <div className="router-console" data-reveal="">
      <div className="rc-top">
        <span className="rc-title"><span className="live-dot"></span>Routeur Trivan — en direct</span>
        <span className="rc-dots"><i></i><i></i><i></i></span>
      </div>
      <div className="rc-body">
        <div className="rc-tx">
          <span className="tx-id">{tx.id}</span>
          <span className="tx-amt">{tx.amt}</span>
          <span className={"tx-state" + (phase === 3 ? " ok" : "")}>{states[phase]}</span>
        </div>
        <div className="rc-routes">
          {RC_ROUTES.map((r, i) => (
            <div className={"rc-route" + (phase >= 2 && tx.pick === i ? " picked" : "") + (phase >= 2 && tx.pick !== i ? " dimmed" : "")} key={r.name}>
              <span className="rr-name">{r.name}</span>
              <span className="rr-meta">{r.meta}</span>
              <span className="rr-pick">→ choisie</span>
            </div>
          ))}
        </div>
        <div className="rc-bar"><i style={{ width: barW + "%" }}></i></div>
        <div className="rc-log">{phase === 3 ? <span className="ok">{logs[phase]}</span> : logs[phase]}</div>
      </div>
    </div>
  );
}

/* ============================================================
   Mini-schéma : bascule automatique (failover)
   ============================================================ */
function Failover() {
  const [down, setDown] = useSchState(false);

  useSchEffect(() => {
    const t = setInterval(() => setDown((d) => !d), 3600);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="failover">
      <span className="fo-hub">Trivan</span>
      <div className="fo-lines">
        <span className={"fo-line a" + (down ? " cut" : " flowing")}></span>
        <span className={"fo-line b" + (down ? " flowing" : "")}></span>
      </div>
      <div className="fo-col">
        <span className={"fo-psp" + (down ? " down" : "")}>{down ? "adyen — hors ligne" : "adyen"}</span>
        <span className={"fo-psp" + (down ? " up-active" : "")}>payplug</span>
      </div>
    </div>
  );
}

Object.assign(window, { HeroSchema, RouterLive, Failover });