// ui.jsx — Scam Protect product UI pieces: brand mark, browser chrome, threat chips,
// block rows, device chips, status ring, scan sweep, cursor. Exports to window.
// Relies on T, Shield, Check, WarnTri, Dot from theme.jsx.

// ── Brand mark ───────────────────────────────────────────────────────────────
function BrandMark({ scale = 1, color = T.ink, mark = T.brand, mono = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 * scale }}>
      <Shield size={34 * scale} fill={mark}>
        <Check size={18 * scale} color="#fff" weight={2.6} />
      </Shield>
      <div style={{
        fontFamily: T.display, fontWeight: 800, fontSize: 30 * scale,
        letterSpacing: '-0.02em', color, lineHeight: 1,
      }}>
        <span style={{ color: mark }}>S</span>-Security
      </div>
    </div>
  );
}

// ── Browser window chrome ────────────────────────────────────────────────────
function BrowserChrome({ url, secure = false, danger = false, width, height, children, scanning = false, shake = 0 }) {
  return (
    <div style={{
      width, height, background: T.surface,
      borderRadius: 16, overflow: 'hidden',
      border: `1px solid ${T.line}`,
      boxShadow: '0 40px 90px -30px rgba(40,34,26,0.30), 0 8px 24px -12px rgba(40,34,26,0.18)',
      display: 'flex', flexDirection: 'column',
      transform: shake ? `translateX(${shake}px)` : 'none',
    }}>
      {/* Title bar */}
      <div style={{
        height: 52, flexShrink: 0, background: T.surfaceWarm,
        borderBottom: `1px solid ${T.lineSoft}`,
        display: 'flex', alignItems: 'center', gap: 16, padding: '0 18px',
      }}>
        <div style={{ display: 'flex', gap: 8 }}>
          {['#E6C0B6', '#EBD8B0', '#BFD8C2'].map((c, i) => (
            <span key={i} style={{ width: 12, height: 12, borderRadius: '50%', background: c }} />
          ))}
        </div>
        {/* URL bar */}
        <div style={{
          flex: 1, height: 32, borderRadius: 9,
          background: danger ? T.threatSoft : T.panel,
          border: `1px solid ${danger ? '#EBC3B8' : T.line}`,
          display: 'flex', alignItems: 'center', gap: 9, padding: '0 12px',
          fontFamily: T.mono, fontSize: 14, color: danger ? T.threatDeep : T.inkSoft,
        }}>
          {danger
            ? <WarnTri size={15} />
            : <span style={{ width: 12, height: 12, borderRadius: 3, background: secure ? T.safe : T.faint, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ width: 5, height: 5, borderRadius: 1, background: '#fff' }} />
              </span>}
          <span style={{ letterSpacing: '0.01em', whiteSpace: 'nowrap', overflow: 'hidden' }}>{url}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: T.mono, fontSize: 12.5, color: scanning ? T.brand : T.muted, fontWeight: 500 }}>
          <Dot size={7} color={scanning ? T.brand : T.faint} glow={scanning} />
          {scanning ? 'SCANNING' : 'PROTECTED'}
        </div>
      </div>
      {/* Viewport */}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', minHeight: 0 }}>
        {children}
      </div>
    </div>
  );
}

// ── Fake "scam" login page content ───────────────────────────────────────────
function FakeBankPage({ flagged = 0 }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#fff', padding: 0 }}>
      {/* fake header */}
      <div style={{ height: 64, background: '#0E3A6B', display: 'flex', alignItems: 'center', padding: '0 32px', gap: 12 }}>
        <span style={{ width: 26, height: 26, borderRadius: 6, background: '#fff', opacity: 0.92 }} />
        <span style={{ fontFamily: T.display, fontWeight: 800, fontSize: 19, color: '#fff', letterSpacing: '-0.01em' }}>
          Y0urBank <span style={{ fontWeight: 400, opacity: 0.6 }}>online</span>
        </span>
      </div>
      <div style={{ padding: '40px 0', display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: 420, background: '#fff', border: `1px solid #E6E6E6`, borderRadius: 12,
          padding: '32px 34px', boxShadow: '0 8px 30px rgba(0,0,0,0.06)',
          outline: flagged ? `2px solid ${T.threat}` : 'none', outlineOffset: 3,
          transition: 'outline 120ms',
        }}>
          <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 22, color: '#15233A', marginBottom: 5 }}>Verify your account</div>
          <div style={{ fontFamily: T.display, fontSize: 14.5, color: '#7A8290', marginBottom: 22, lineHeight: 1.4 }}>
            Unusual activity detected. Confirm your details to avoid suspension.
          </div>
          {['Username', 'Password'].map((l) => (
            <div key={l} style={{ marginBottom: 14 }}>
              <div style={{ fontFamily: T.mono, fontSize: 11, color: '#9AA2AE', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>{l}</div>
              <div style={{ height: 40, borderRadius: 8, background: '#F4F6F9', border: '1px solid #E2E6EC' }} />
            </div>
          ))}
          <div style={{ height: 44, borderRadius: 9, background: '#0E3A6B', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 8, fontFamily: T.display, fontWeight: 700, fontSize: 15, color: '#fff' }}>
            Confirm now
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Intercept warning card (Scam Protect) ────────────────────────────────────
function InterceptCard({ width = 560, checkP = 0 }) {
  return (
    <div style={{
      width, background: T.surface, borderRadius: 18,
      border: `1px solid ${T.line}`,
      boxShadow: '0 30px 70px -20px rgba(40,34,26,0.45)',
      overflow: 'hidden',
    }}>
      <div style={{ height: 6, background: T.threat }} />
      <div style={{ padding: '30px 34px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
          <Shield size={46} fill={T.brand}>
            <Check size={24} color="#fff" weight={2.8} progress={checkP} />
          </Shield>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 12.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.threat, fontWeight: 600, marginBottom: 4 }}>Scam blocked</div>
            <div style={{ fontFamily: T.display, fontWeight: 800, fontSize: 27, color: T.ink, letterSpacing: '-0.02em', lineHeight: 1.12 }}>We stopped a fake bank site</div>
          </div>
        </div>
        <div style={{ fontFamily: T.display, fontSize: 17, color: T.inkSoft, lineHeight: 1.5, marginBottom: 22 }}>
          This page is impersonating your bank to steal your login. Scam Protect caught it before the page finished loading.
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {['Phishing', 'Cloned login page', 'Domain registered 2 days ago'].map((t) => (
            <div key={t} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              fontFamily: T.mono, fontSize: 13, color: T.threatDeep, fontWeight: 500,
              background: T.threatSoft, border: `1px solid #EFC9BD`, borderRadius: 8, padding: '7px 12px',
            }}>
              <WarnTri size={13} /> {t}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Cursor pointer (simple polygon) ──────────────────────────────────────────
function Cursor({ x, y, pressed = false }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, transform: `scale(${pressed ? 0.86 : 1})`, transformOrigin: 'top left', zIndex: 50, filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.25))', pointerEvents: 'none' }}>
      <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
        <path d="M5 3 L5 20 L10 15 L13 22 L16 20.5 L13 14 L20 14 Z" fill="#fff" stroke={T.ink} strokeWidth="1.6" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

Object.assign(window, { BrandMark, BrowserChrome, FakeBankPage, InterceptCard, Cursor });