// TX detail scene — 1:1 with /transactions/[id] page.
// Back link → header (mono tx-id 24px + Copy + chips + Share + decision badge)
// → shadow banner → ScoreHero (themed gradient) + Summary card grid
// → Transaction card + Same-IP list grid.

function TxDetailScene({ active }) {
  // Animate score 0→0 (this is an APPROVE tx). The bar + marker re-mount
  // when active flips so the transition replays.
  const [filledPct, setFilledPct] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    setFilledPct(0);
    const id = setTimeout(() => setFilledPct(0), 50); // would matter for non-APPROVE tier
    return () => clearTimeout(id);
  }, [active]);

  return (
    <React.Fragment>
      <MockNav active="tx" />
      <div className="mock-page">
        <a className="det-back" href="#">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
          Back to transactions
        </a>

        <div className="det-h2">
          <div>
            <div className="id-row">
              <span className="tx-id">tx-ls2-r7</span>
              <button className="copy-btn" title="Copy ID" aria-label="Copy transaction ID">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
              </button>
            </div>
            <div className="time">22/04/2026 10:41:34 UTC</div>
            <div className="chips">
              <span className="chip"><span className="n">6,942</span>by this IP</span>
              <span className="chip"><span className="n">1</span>to this destination</span>
              <span className="chip"><span className="n">2,687</span>from this client</span>
            </div>
          </div>
          <div className="actions">
            <button className="share-btn">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
              Share
            </button>
            <div className="dec-badge dec-approve">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              APPROVE
            </div>
          </div>
        </div>

        <div className="det-banner">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
          <div><strong>Shadow mode was active.</strong> The API returned <span className="mono" style={{ color: 'var(--ink)' }}>APPROVE</span> to the client. The system would have returned <span className="mono" style={{ color: 'var(--ink)' }}>APPROVE</span> in production.</div>
        </div>

        <div className="det-grid">
          <div className="det-score-hero tier-approve">
            <svg className="rings" viewBox="0 0 220 220" fill="none">
              <circle cx="110" cy="110" r="100" stroke="white" strokeWidth="1" opacity="0.4"/>
              <circle cx="110" cy="110" r="75"  stroke="white" strokeWidth="1" opacity="0.35"/>
              <circle cx="110" cy="110" r="50"  stroke="white" strokeWidth="1" opacity="0.3"/>
              <circle cx="110" cy="110" r="25"  stroke="white" strokeWidth="1" opacity="0.25"/>
            </svg>
            <div className="leftbar"></div>
            <h3 className="hero-h">Risk Score</h3>
            <div className="hero-num">
              <span className="big">0</span>
              <span className="of">/ 100</span>
            </div>
            <div className="bar-row">
              <div className="bar" style={{ width: filledPct + '%' }}></div>
              <div className="marker" style={{ left: filledPct + '%' }}></div>
            </div>
            <div className="ladder">
              <span className="active">0 APPROVE</span>
              <span>41 REVIEW</span>
              <span>71 BLOCK</span>
            </div>
          </div>

          <div className="panel det-summary-card">
            <div className="sum-hdr">
              <p className="lab">Summary</p>
              <div className="headline">Quiet payout, all green — no rule fired and the client's IP / timing / cadence are exactly what we've seen before.</div>
              <div className="hint">No operator action needed. Switch to Moderate (admin) if you want to override the verdict or update the IP / destination whitelist.</div>
            </div>
            <div className="reasons">
              <div className="reason-item">
                <span className="ico t-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg></span>
                <div><h6>Timing matches the client's pattern</h6><p>Request landed at 08:00 local time — comfortably inside the client's business hours window. Time-of-day is the easiest signal to verify and one of the strongest predictors of legitimate B2B payout activity.</p></div>
              </div>
              <div className="reason-item">
                <span className="ico t-approve"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg></span>
                <div><h6>Sender IP is on the trusted list</h6><p>207.154.223.52 (Frankfurt · Germany) appears 6,942 times in the last 90d without incident. Trusted sender infrastructure is the cleanest single trust signal we have.</p></div>
              </div>
              <div className="reason-item">
                <span className="ico t-info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg></span>
                <div><h6>Activity volume looks routine</h6><p>5 transactions in the last 24h sits well within the client's normal cadence — no burst patterns, no daily-volume spikes suggesting credential takeover or campaign-driven fraud.</p></div>
              </div>
            </div>
          </div>
        </div>

        <div className="det-bot-grid">
          <div className="panel det-tx-card">
            <h3 className="sect-title">Transaction</h3>
            <div className="fld-grid">
              <div className="fld"><div className="f-l">Amount</div><div className="f-v mono">87.75</div></div>
              <div className="fld"><div className="f-l">Currency</div><div className="f-v mono">USDT</div></div>
              <div className="fld"><div className="f-l">Network</div><div className="f-v mono">tron · TRC20</div></div>
              <div className="fld"><div className="f-l">Transaction type</div><div className="f-v">PAYOUT</div></div>
              <div className="fld"><div className="f-l">Client</div><div className="f-v">lyra-20126</div></div>
              <div className="fld"><div className="f-l">Evaluated</div><div className="f-v mono">22/04/2026 10:41:34</div></div>
              <div className="fld" style={{ gridColumn: '1 / -1' }}><div className="f-l">Destination</div><div className="f-v mono trunc">TYJc7dNdGYKwmhicm4Par62pqMGdcEFNWE</div></div>
              <div className="fld"><div className="f-l">IP address</div><div className="f-v mono">207.154.223.52<span className="b-inline b-wl">whitelisted</span></div></div>
              <div className="fld"><div className="f-l">Country</div><div className="f-v">DE · Frankfurt am Main</div></div>
              <div className="fld" style={{ gridColumn: '1 / -1' }}><div className="f-l">User-Agent</div><div className="f-v mono trunc">GuzzleHttp/6.5.5 curl/8.5.0 PHP/7.2.34-54+ubuntu24.04</div></div>
            </div>
          </div>
          <div className="panel det-sameip-card">
            <h3 className="sect-title">Same IP · last 5</h3>
            <div className="ip-line">207.154.223.52</div>
            <div className="ip-meta">Frankfurt am Main · Germany — 6,942 evals / 90d</div>
            <div className="sameip-list">
              <div className="sameip-row"><span className="sr-time">10:41</span><span className="sr-id">tx-ls2-r7</span><span className="sr-amt">87.75</span><span className="badge b-approve">APPROVE</span></div>
              <div className="sameip-row"><span className="sr-time">09:18</span><span className="sr-id">tx-ls2-r6</span><span className="sr-amt">152.40</span><span className="badge b-approve">APPROVE</span></div>
              <div className="sameip-row"><span className="sr-time">08:55</span><span className="sr-id">tx-ls2-r5</span><span className="sr-amt">3,472.00</span><span className="badge b-approve">APPROVE</span></div>
              <div className="sameip-row"><span className="sr-time">08:02</span><span className="sr-id">tx-ls2-r4</span><span className="sr-amt">57.20</span><span className="badge b-approve">APPROVE</span></div>
              <div className="sameip-row"><span className="sr-time">07:31</span><span className="sr-id">tx-ls2-r3</span><span className="sr-amt">2,435.13</span><span className="badge b-approve">APPROVE</span></div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}