// Dipoli "console" — a stylized product screenshot that lives in the Variant C hero.
// Single-pane view of a transaction being scored, with live-updating layer bars,
// streaming activity on the right, and a verdict stamp that re-asserts on a loop.

function ConsoleMockup({ scale = 1 }) {
  const [phase, setPhase] = React.useState(0); // 0 scanning → 1 settled
  const [tick, setTick] = React.useState(0);

  // sample rotation
  const samples = [
    { id: 'pay_01K5Z0QXM3', amt: '4,820', ccy: 'USDT', net: 'TRON', src: 'TXo8yq…4f1m', dst: 'TGx9Bk…eKz', dec: 'BLOCK', tone: 'block',
      L1: 84, L2: 88, L3: 96, score: 92, latency: 42,
      rules: ['ip_blocklist', 'velocity_21', 'dest_new_14d', 'cluster_match'],
      narrative: 'Destination first seen 14 days ago on unrelated tenant. IP matches known laundering ring cluster. Escalation recommended.',
      features: [['baseline_dev', 0.38], ['dest_risk', 0.26], ['ip_rep', 0.22], ['time_anom', 0.14]] },
    { id: 'pay_01K5Z0PN7C', amt: '12,500', ccy: 'USDT', net: 'TRON', src: 'TLv3n1…9q8a', dst: 'TMz4Xk…9Lw', dec: 'REVIEW', tone: 'review',
      L1: 44, L2: 62, L3: 68, score: 64, latency: 39,
      rules: ['amount_2x_baseline', 'new_destination'],
      narrative: 'Amount 2.1× client rolling baseline but source IP is whitelisted, client history is clean. Hold for human review.',
      features: [['amount_dev', 0.42], ['dest_new', 0.28], ['client_age', -0.12], ['ip_trust', -0.18]] },
    { id: 'pay_01K5Z0NNF9', amt: '180', ccy: 'USDT', net: 'ETH', src: '0x3f…21a', dst: '0xe1…7c9', dec: 'APPROVE', tone: 'approve',
      L1: 4, L2: 10, L3: 8, score: 7, latency: 22,
      rules: [],
      narrative: 'Known client, known IP, in-hours, amount within baseline. All three layers agree — auto-approved.',
      features: [['client_age', -0.32], ['ip_trust', -0.28], ['amount_norm', -0.22], ['dest_known', -0.12]] },
  ];

  React.useEffect(() => {
    const loop = async () => {
      setPhase(0);
      setTimeout(() => setPhase(1), 900);
      setTimeout(() => setTick(t => t + 1), 5200);
    };
    loop();
    const iv = setInterval(loop, 5200);
    return () => clearInterval(iv);
  }, [tick]);

  const s = samples[tick % samples.length];

  return (
    <div className="cmock" style={{ transform: `scale(${scale})`, transformOrigin: 'top center' }}>
      {/* Window chrome */}
      <div className="cmock-chrome">
        <span className="cmock-tl" style={{ background: '#FF5E78' }} />
        <span className="cmock-tl" style={{ background: '#FFB547' }} />
        <span className="cmock-tl" style={{ background: '#65D97C' }} />
        <div className="cmock-urlbar">
          <IconLock size={11} />
          <span className="mono">console.dipoli.io / tx / {s.id}</span>
        </div>
        <div className="cmock-userchip">
          <span className="cmock-avatar">K</span>
          <span style={{ fontSize: 11 }}>kseniya@dipoli</span>
        </div>
      </div>

      {/* App topbar — mimics the real topnav */}
      <div className="cmock-topbar">
        <DipoliLogoLockup size={20} />
        <div className="cmock-nav">
          <span>Overview</span>
          <span className="active">Transactions</span>
          <span>Clients</span>
          <span>Blocklist</span>
          <span>Settings</span>
        </div>
        <div className="cmock-env">
          <span className="cmock-envdot" />
          <span>prod · eu-west-1</span>
        </div>
      </div>

      {/* Body */}
      <div className="cmock-body">
        {/* Left — transaction summary */}
        <div className="cmock-col">
          <div className="cmock-section">
            <div className="cmock-breadcrumb">
              <span>Transactions</span>
              <span className="cmock-sep">/</span>
              <span style={{ color: 'var(--fg)' }}>{s.id}</span>
            </div>
            <div className="cmock-tx-head">
              <div>
                <div className="mono" style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  {s.amt}<span style={{ color: 'var(--fg-muted)', fontSize: 16, marginLeft: 6 }}>{s.ccy}</span>
                </div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{s.net} · 11:42:08 UTC · inxy_main</div>
              </div>
              <span className={'pill pill-' + (s.tone === 'approve' ? 'approve' : s.tone === 'review' ? 'review' : 'block')}
                style={{ animation: phase === 1 ? 'cmock-stamp 480ms cubic-bezier(.2,.9,.2,1)' : 'none' }}>
                {s.dec}
              </span>
            </div>

            <div className="cmock-route">
              <div className="cmock-addr">
                <span className="muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Source</span>
                <span className="mono" style={{ fontSize: 13, marginTop: 3 }}>{s.src}</span>
              </div>
              <div className="cmock-arrow">
                <svg width="24" height="10" viewBox="0 0 24 10" fill="none"><path d="M1 5h20m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div className="cmock-addr">
                <span className="muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>Destination</span>
                <span className="mono" style={{ fontSize: 13, marginTop: 3 }}>{s.dst}</span>
              </div>
            </div>
          </div>

          {/* Narrative from Model β */}
          <div className="cmock-section cmock-narrative">
            <div className="cmock-sec-head">
              <IconLayers size={12} />
              <span>Model β · narrative</span>
              <span className="cmock-live-pill mono">LIVE</span>
            </div>
            <div className="cmock-narr-text" key={s.id + '-narr'}>
              {s.narrative}
            </div>
          </div>

          {/* Features chart */}
          <div className="cmock-section">
            <div className="cmock-sec-head">
              <IconCpu size={12} />
              <span>Model α · top contributions</span>
            </div>
            <div className="cmock-features">
              {s.features.map(([name, weight]) => (
                <div key={name} className="cmock-feat">
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', minWidth: 90 }}>{name}</span>
                  <div className="cmock-feat-bar">
                    <div className={'cmock-feat-fill ' + (weight > 0 ? 'pos' : 'neg')}
                      style={{ width: phase === 1 ? Math.abs(weight * 180) + 'px' : 0 }} />
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: weight > 0 ? 'var(--block)' : 'var(--approve)', minWidth: 42, textAlign: 'right' }}>
                    {weight > 0 ? '+' : ''}{weight.toFixed(2)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Right — score card + activity */}
        <div className="cmock-col cmock-col-right">
          <div className="cmock-score-card">
            <div className="cmock-sec-head">
              <IconTarget size={12} />
              <span>Combined verdict</span>
              <span className="mono cmock-latency">{s.latency} ms</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '14px 0 8px' }}>
              <ScoreDial score={s.score} size={104} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--fg-muted)', fontWeight: 600 }}>3-layer score</div>
                <div className={'mono cmock-score-big cmock-' + s.tone} key={s.id}>
                  {phase === 1 ? s.score : '—'}
                </div>
                <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>
                  of 100 · {s.dec === 'BLOCK' ? 'blocked' : s.dec === 'REVIEW' ? 'held for review' : 'auto-approved'}
                </div>
              </div>
            </div>
            <div className="cmock-layers">
              {[
                { n: 'L1', label: 'Rules',   val: s.L1, tone: '#63D4E6' },
                { n: 'L2', label: 'Model α', val: s.L2, tone: '#9387FF' },
                { n: 'L3', label: 'Model β', val: s.L3, tone: '#81A8FF' },
              ].map((l, i) => (
                <div key={l.n} className="cmock-layer">
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', width: 62 }}>{l.n} {l.label}</span>
                  <div className="cmock-layer-track">
                    <div className="cmock-layer-fill"
                      style={{
                        width: phase === 1 ? l.val + '%' : 0,
                        background: l.tone,
                        transitionDelay: (i * 120) + 'ms',
                      }} />
                  </div>
                  <span className="mono" style={{ fontSize: 12, color: l.tone, width: 30, textAlign: 'right', fontWeight: 600 }}>
                    {phase === 1 ? l.val : 0}
                  </span>
                </div>
              ))}
            </div>
            <div className="cmock-actions">
              <button className="cmock-btn approve">Approve</button>
              <button className="cmock-btn review">Escalate</button>
              <button className="cmock-btn block">Confirm block</button>
            </div>
          </div>

          <div className="cmock-section cmock-activity">
            <div className="cmock-sec-head">
              <span className="cmock-live-dot" />
              <span>Live activity</span>
              <span className="mono muted" style={{ marginLeft: 'auto', fontSize: 10 }}>28/s</span>
            </div>
            <MiniFeed />
          </div>
        </div>
      </div>

      <style>{`
        .cmock {
          width: 100%;
          max-width: 960px;
          background: #0E0C16;
          border: 1px solid var(--border-strong);
          border-radius: 14px;
          overflow: hidden;
          box-shadow:
            0 0 0 1px rgba(147,135,255,0.08),
            0 60px 120px -40px rgba(0,0,0,0.8),
            0 30px 60px -30px rgba(124,92,252,0.25);
          font-family: 'Inter', system-ui, sans-serif;
        }
        .cmock-chrome {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 14px;
          background: linear-gradient(180deg, #17141F, #120F1A);
          border-bottom: 1px solid var(--border);
        }
        .cmock-tl { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
        .cmock-urlbar {
          flex: 1; margin: 0 14px;
          display: flex; align-items: center; gap: 8px;
          padding: 5px 12px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--border);
          border-radius: 6px;
          font-size: 11.5px; color: var(--fg-muted);
        }
        .cmock-userchip {
          display: flex; align-items: center; gap: 6px;
          font-size: 11px; color: var(--fg-muted);
        }
        .cmock-avatar {
          width: 18px; height: 18px; border-radius: 50%;
          background: linear-gradient(135deg, #7C5CFC, #38C8F6);
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 10px; font-weight: 700; color: #fff;
        }

        .cmock-topbar {
          display: flex; align-items: center; gap: 24px;
          padding: 10px 18px;
          border-bottom: 1px solid var(--border);
          background: rgba(255,255,255,0.01);
        }
        .cmock-nav {
          display: flex; gap: 4px; flex: 1; margin-left: 16px;
        }
        .cmock-nav span {
          padding: 4px 10px; border-radius: 6px;
          font-size: 12px; color: var(--fg-muted); font-weight: 500;
        }
        .cmock-nav .active {
          background: rgba(147,135,255,0.12); color: var(--fg);
        }
        .cmock-env {
          display: flex; align-items: center; gap: 6px;
          padding: 4px 10px;
          border: 1px solid var(--border);
          border-radius: 6px;
          font-size: 10.5px; color: var(--fg-muted);
          font-family: 'JetBrains Mono', monospace;
        }
        .cmock-envdot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--approve);
          animation: cmock-pulse 1.8s ease-out infinite;
        }

        .cmock-body {
          display: grid;
          grid-template-columns: 1fr 320px;
          gap: 0;
          background: #0B0914;
        }
        .cmock-col {
          padding: 16px;
          display: flex; flex-direction: column; gap: 12px;
        }
        .cmock-col-right {
          background: rgba(255,255,255,0.015);
          border-left: 1px solid var(--border);
          padding: 16px 14px;
        }
        .cmock-section {
          background: rgba(255,255,255,0.015);
          border: 1px solid var(--border);
          border-radius: 10px;
          padding: 14px;
        }
        .cmock-sec-head {
          display: flex; align-items: center; gap: 7px;
          font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
          color: var(--fg-muted); font-weight: 600;
          margin-bottom: 12px;
        }
        .cmock-sec-head svg { opacity: 0.7; }
        .cmock-breadcrumb {
          display: flex; align-items: center; gap: 8px;
          font-family: 'JetBrains Mono', monospace;
          font-size: 11px; color: var(--fg-muted);
          margin-bottom: 14px;
        }
        .cmock-sep { color: var(--fg-dim); }

        .cmock-tx-head {
          display: flex; justify-content: space-between; align-items: flex-start;
          margin-bottom: 16px;
        }

        @keyframes cmock-stamp {
          0% { transform: scale(1.6) rotate(-6deg); opacity: 0; }
          60% { transform: scale(0.92) rotate(1.5deg); opacity: 1; }
          100% { transform: scale(1) rotate(0); opacity: 1; }
        }

        .cmock-route {
          display: grid; grid-template-columns: 1fr auto 1fr;
          gap: 10px; align-items: center;
          padding: 12px; border-radius: 8px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--border);
        }
        .cmock-addr { display: flex; flex-direction: column; gap: 2px; }
        .cmock-arrow { color: var(--fg-dim); display: flex; align-items: center; }

        .cmock-narrative .cmock-narr-text {
          font-size: 12.5px; line-height: 1.55; color: var(--fg);
          padding-right: 4px;
          animation: cmock-type 800ms ease-out;
        }
        @keyframes cmock-type {
          0% { opacity: 0; filter: blur(3px); }
          100% { opacity: 1; filter: blur(0); }
        }
        .cmock-live-pill {
          margin-left: auto;
          padding: 1px 6px; border-radius: 4px;
          background: rgba(101,217,124,0.12);
          border: 1px solid rgba(101,217,124,0.3);
          color: var(--approve); font-size: 9.5px; letter-spacing: 0.12em;
        }

        .cmock-features { display: flex; flex-direction: column; gap: 7px; }
        .cmock-feat { display: flex; align-items: center; gap: 10px; }
        .cmock-feat-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.05); border-radius: 999px; position: relative; overflow: hidden; }
        .cmock-feat-fill { height: 100%; border-radius: 999px; transition: width 800ms cubic-bezier(.2,.9,.2,1); }
        .cmock-feat-fill.pos { background: linear-gradient(90deg, rgba(255,94,120,0.6), var(--block)); }
        .cmock-feat-fill.neg { background: linear-gradient(90deg, rgba(101,217,124,0.6), var(--approve)); }

        .cmock-score-card {
          background: linear-gradient(180deg, rgba(147,135,255,0.05), transparent);
          border: 1px solid rgba(147,135,255,0.18);
          border-radius: 10px;
          padding: 14px;
        }
        .cmock-latency {
          margin-left: auto;
          padding: 2px 7px; border-radius: 4px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--border);
          color: var(--fg-muted); font-size: 10px; text-transform: none; letter-spacing: 0;
        }
        .cmock-score-big {
          font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
          margin-top: 4px;
          transition: color 400ms;
        }
        .cmock-score-big.cmock-approve { color: var(--approve); }
        .cmock-score-big.cmock-review  { color: var(--review); }
        .cmock-score-big.cmock-block   { color: var(--block); }
        .cmock-layers { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
        .cmock-layer { display: flex; align-items: center; gap: 8px; }
        .cmock-layer-track { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
        .cmock-layer-fill { height: 100%; border-radius: 999px; transition: width 900ms cubic-bezier(.2,.9,.2,1); }
        .cmock-actions { display: flex; gap: 6px; margin-top: 12px; }
        .cmock-btn {
          flex: 1; padding: 7px 0; border-radius: 6px;
          font-size: 11px; font-weight: 600;
          cursor: pointer; transition: all 150ms;
          border: 1px solid;
          font-family: inherit;
        }
        .cmock-btn.approve { background: rgba(101,217,124,0.10); border-color: rgba(101,217,124,0.3); color: var(--approve); }
        .cmock-btn.review  { background: rgba(255,181,71,0.10); border-color: rgba(255,181,71,0.3); color: var(--review); }
        .cmock-btn.block   { background: rgba(255,94,120,0.10); border-color: rgba(255,94,120,0.3); color: var(--block); }

        .cmock-live-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--approve);
          animation: cmock-pulse 1.5s ease-out infinite;
        }
        @keyframes cmock-pulse {
          0%, 100% { box-shadow: 0 0 0 0 rgba(101,217,124,0.55); }
          70% { box-shadow: 0 0 0 6px rgba(101,217,124,0); }
        }

        @media (max-width: 900px) {
          .cmock-body { grid-template-columns: 1fr; }
          .cmock-col-right { border-left: 0; border-top: 1px solid var(--border); }
          .cmock-nav span:nth-child(n+4) { display: none; }
        }
      `}</style>
    </div>
  );
}

// Small live-activity feed used inside the console mockup's right column.
function MiniFeed() {
  const pool = [
    { t: '11:42:08', id: 'pay_9KR7', amt: '4,820 USDT', dec: 'BLOCK',   s: 92, tone: 'block' },
    { t: '11:42:07', id: 'pay_9KR6', amt: '180 USDT',    dec: 'APPROVE', s: 7,  tone: 'approve' },
    { t: '11:42:06', id: 'pay_9KR5', amt: '12,500 USDT', dec: 'REVIEW',  s: 64, tone: 'review' },
    { t: '11:42:05', id: 'pay_9KR4', amt: '340 USDT',    dec: 'APPROVE', s: 11, tone: 'approve' },
    { t: '11:42:04', id: 'pay_9KR3', amt: '940 USDT',    dec: 'BLOCK',   s: 88, tone: 'block' },
    { t: '11:42:03', id: 'pay_9KR2', amt: '72 USDT',     dec: 'APPROVE', s: 4,  tone: 'approve' },
    { t: '11:42:02', id: 'pay_9KR1', amt: '26,800 USDT', dec: 'REVIEW',  s: 71, tone: 'review' },
  ];
  const [seed, setSeed] = React.useState(0);
  const [rows, setRows] = React.useState(() => pool.slice(0, 5).map((r, i) => ({ ...r, _k: i })));

  React.useEffect(() => {
    const iv = setInterval(() => {
      setSeed(s => s + 1);
      const nxt = pool[(seed + 5) % pool.length];
      setRows(prev => [{ ...nxt, _k: seed + 100 }, ...prev.slice(0, 4)]);
    }, 1900);
    return () => clearInterval(iv);
  }, [seed]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {rows.map(r => (
        <div key={r._k} className="mf-row" style={{
          display: 'grid', gridTemplateColumns: '58px 1fr auto',
          gap: 8, padding: '5px 0', fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5,
          borderBottom: '1px dashed var(--border)',
          animation: 'mf-in 400ms cubic-bezier(.2,.9,.2,1)',
          alignItems: 'center',
        }}>
          <span style={{ color: 'var(--fg-dim)' }}>{r.t}</span>
          <div style={{ overflow: 'hidden' }}>
            <div style={{ color: 'var(--fg)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.id}</div>
            <div style={{ color: 'var(--fg-muted)', fontSize: 9.5, marginTop: 1 }}>{r.amt}</div>
          </div>
          <span className={'pill pill-' + r.tone} style={{ fontSize: 9, padding: '2px 6px', letterSpacing: '0.04em' }}>{r.dec}</span>
        </div>
      ))}
      <style>{`
        @keyframes mf-in {
          0% { opacity: 0; transform: translateY(-6px); background: rgba(147,135,255,0.08); }
          100% { opacity: 1; transform: translateY(0); background: transparent; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { ConsoleMockup, MiniFeed });