/* HelpMe — Scam Shield (3rd-party protection integration) */

function ScoreRing({ score = 90, size = 132 }) {
  const r = (size - 16) / 2, c = 2 * Math.PI * r, off = c * (1 - score / 100);
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#e7ded0" strokeWidth="9" />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={T.teal} strokeWidth="9" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={off} style={{ transition: 'stroke-dashoffset 1s ease' }} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <span style={{ fontFamily: DISP, fontWeight: 800, fontSize: 34, color: T.teal, lineHeight: 1 }}>{score}</span>
        <span style={{ fontFamily: SANS, fontSize: 11, fontWeight: 700, color: T.muted, letterSpacing: 0.5 }}>SAFE</span>
      </div>
    </div>
  );
}

const SEV = {
  safe: { bg: T.tealBg, bd: T.teal + '33', icon: 'check', iconBg: T.teal, action: T.teal },
  warn: { bg: T.warnBg, bd: T.warn + '55', icon: 'shield-alert', iconBg: T.warn, action: T.goldDk },
  danger: { bg: T.dangerBg, bd: T.danger + '40', icon: 'shield-x', iconBg: T.danger, action: T.danger },
};

function AlertCard({ a }) {
  const s = SEV[a.sev];
  return (
    <div style={{ display: 'flex', gap: 13, background: s.bg, border: `1px solid ${s.bd}`, borderRadius: 16, padding: 15 }}>
      <div style={{ width: 40, height: 40, borderRadius: 11, background: s.iconBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={s.icon} size={21} color="#fff" />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15.5, color: T.ink, whiteSpace: 'nowrap' }}>{a.title}</span>
          {a.action && <button style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, fontFamily: SANS, fontWeight: 700, fontSize: 13.5, color: s.action, flexShrink: 0 }}>{a.action} <Icon name="arrow-right" size={14} color={s.action} /></button>}
        </div>
        <div style={{ fontFamily: SANS, fontSize: 13.5, color: T.body, lineHeight: 1.45, marginTop: 3 }}>{a.desc}</div>
        <div style={{ fontFamily: SANS, fontSize: 12, color: T.muted, marginTop: 6 }}>{a.when}</div>
      </div>
    </div>
  );
}

function ChannelRow({ ch, last }) {
  const icon = { gmail: 'mail', telegram: 'send', whatsapp: 'message-circle', sms: 'message-dots' }[ch.id];
  const right = {
    active: <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: SANS, fontWeight: 700, fontSize: 14, color: T.teal }}><span style={{ width: 7, height: 7, borderRadius: 9, background: T.teal }} />Active</span>,
    reconnect: <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 14, color: T.goldDk }}>Reconnect</span>,
    setup: <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: SANS, fontWeight: 700, fontSize: 14, color: T.body }}>Set up <Icon name="arrow-right" size={14} color={T.body} /></span>,
  }[ch.status];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '15px 0', borderBottom: last ? 'none' : `1px solid ${T.line}` }}>
      <div style={{ width: 38, height: 38, borderRadius: 11, background: T.cream, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={19} color={T.navy} /></div>
      <span style={{ flex: 1, fontFamily: SANS, fontWeight: 700, fontSize: 15.5, color: T.ink }}>{ch.name}</span>
      {right}
    </div>
  );
}

function ScamShield({ onNav, onBack }) {
  const S = HM.SHIELD;
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: T.cream }}>
      <div style={{ background: T.navy, paddingBottom: 26, borderBottomLeftRadius: 26, borderBottomRightRadius: 26, flexShrink: 0 }}>
        <StatusBar light />
        <div style={{ padding: '4px 22px 0' }}>
          <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 7, color: 'rgba(255,255,255,0.8)', fontFamily: SANS, fontWeight: 600, fontSize: 15, padding: 0, marginBottom: 8 }}>
            <Icon name="arrow-left" size={20} color="rgba(255,255,255,0.8)" /> Back
          </button>
          <h1 style={{ fontFamily: DISP, fontWeight: 800, fontSize: 30, color: '#fff', margin: 0 }}>Scam Shield</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 5, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: SANS, fontSize: 14.5, color: 'rgba(255,255,255,0.7)' }}>Real-time threat monitoring</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.16)', borderRadius: 999, padding: '4px 11px' }}>
              <span style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 600, color: 'rgba(255,255,255,0.55)' }}>Powered by</span>
              <span style={{ fontFamily: SANS, fontSize: 12.5, fontWeight: 800, color: '#fff', letterSpacing: 0.2 }}>Check<span style={{ color: '#ef5a52' }}>First</span></span>
            </span>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto' }}>
        <div style={{ padding: '0 22px 110px' }}>
          {/* score card */}
          <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 20, padding: 20, marginTop: -16, display: 'flex', alignItems: 'center', gap: 18, boxShadow: '0 10px 30px rgba(16,40,66,0.1)' }}>
            <ScoreRing score={S.score} />
            <div>
              <div style={{ fontFamily: DISP, fontWeight: 800, fontSize: 24, color: T.teal }}>Protected</div>
              <div style={{ fontFamily: SANS, fontSize: 14.5, color: T.body, lineHeight: 1.45, marginTop: 4 }}>Your environment is secure. {S.scansToday} scans completed today.</div>
            </div>
          </div>

          {/* stats */}
          <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
            {S.stats.map(st => (
              <div key={st.label} style={{ flex: 1, background: T.card, border: `1px solid ${T.line}`, borderRadius: 14, padding: '13px 10px', textAlign: 'center' }}>
                <div style={{ fontFamily: DISP, fontWeight: 800, fontSize: 24, color: T.ink, lineHeight: 1 }}>{st.value}</div>
                <div style={{ fontFamily: SANS, fontSize: 11, fontWeight: 600, color: T.ink, marginTop: 5, whiteSpace: 'nowrap' }}>{st.label}</div>
                <div style={{ fontFamily: SANS, fontSize: 11, color: T.muted }}>{st.sub}</div>
              </div>
            ))}
          </div>

          <SecHd>Active alerts</SecHd>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {S.alerts.map(a => <AlertCard key={a.id} a={a} />)}
          </div>

          <SecHd>Protected channels</SecHd>
          <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, padding: '0 16px' }}>
            {S.channels.map((ch, i) => <ChannelRow key={ch.id} ch={ch} last={i === S.channels.length - 1} />)}
          </div>

          <SecHd>Safety tips for Siem Reap</SecHd>
          <div style={{ background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, padding: 16, display: 'flex', flexDirection: 'column', gap: 13 }}>
            {S.tips.map((tip, i) => (
              <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                <Icon name="check" size={18} color={T.teal} style={{ flexShrink: 0, marginTop: 1 }} />
                <span style={{ fontFamily: SANS, fontSize: 14, lineHeight: 1.45, color: T.body }}>{tip}</span>
              </div>
            ))}
          </div>

          <button style={{ width: '100%', marginTop: 16, padding: 16, borderRadius: 16, border: `1.5px solid ${T.danger}`, background: T.dangerBg, color: T.danger, cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 15.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>
            <Icon name="shield-alert" size={20} color={T.danger} /> Report a scam
          </button>

          {/* partner attribution — CheckFirst anti-scam API */}
          <div style={{ marginTop: 18, background: T.card, border: `1px solid ${T.line}`, borderRadius: 16, padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ fontFamily: SANS, fontSize: 11.5, fontWeight: 700, color: T.muted, letterSpacing: 1.2 }}>SCAM INTELLIGENCE BY</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: SANS, fontWeight: 700, fontSize: 11.5, color: T.teal, background: T.tealBg, padding: '4px 9px', borderRadius: 999 }}>
                <Icon name="shield-check" size={12} color={T.teal} />Verified partner
              </span>
            </div>
            <div style={{ background: '#fff', border: `1px solid ${T.line}`, borderRadius: 12, padding: '20px 16px', display: 'flex', justifyContent: 'center' }}>
              <img src="app/assets/checkfirst-logo.png" alt="CheckFirst — Stop Scams Before They Start" decoding="async" style={{ width: '80%', maxWidth: 232, height: 'auto', display: 'block' }} />
            </div>
            <div style={{ fontFamily: SANS, fontSize: 12.5, color: T.muted, lineHeight: 1.5, marginTop: 12, textAlign: 'center', textWrap: 'pretty' }}>
              Every alert on this screen is powered by CheckFirst&rsquo;s real-time scam, phishing &amp; fraud detection API.
            </div>
          </div>
        </div>
      </div>

      <BottomNav active="shield" onNav={onNav} />
    </div>
  );
}
function SecHd({ children }) { return <h2 style={{ fontFamily: DISP, fontWeight: 700, fontSize: 22, color: T.ink, margin: '24px 0 12px' }}>{children}</h2>; }

/* dismissible scam toast (shown on home) */
function ScamToast({ onClose, onView }) {
  return (
    <div className="gw-toast-in" style={{ position: 'absolute', top: 52, left: 16, right: 16, zIndex: 70, background: T.card, borderRadius: 18, border: `1px solid ${T.danger}30`, boxShadow: '0 16px 40px rgba(16,40,66,0.22)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', height: '100%' }}>
        <div style={{ width: 5, background: T.danger, flexShrink: 0 }} />
        <div style={{ display: 'flex', gap: 12, padding: 15, flex: 1 }}>
          <div style={{ width: 38, height: 38, borderRadius: 11, background: T.dangerBg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <Icon name="shield-x" size={20} color={T.danger} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: SANS, fontWeight: 700, fontSize: 15, color: T.ink }}>Scam Alert Detected</span>
              <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}><Icon name="x" size={16} color={T.muted} /></button>
            </div>
            <div style={{ fontFamily: SANS, fontSize: 13, color: T.body, lineHeight: 1.4, marginTop: 3 }}>A suspicious QR code near Pub Street was flagged. Avoid scanning unverified codes.</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 7, fontFamily: SANS, fontSize: 11.5, fontWeight: 600, color: T.muted }}>
              <Icon name="shield-check" size={13} color={T.teal} />Flagged by CheckFirst
            </div>
            <div style={{ display: 'flex', gap: 9, marginTop: 11 }}>
              <button onClick={onView} style={{ background: T.danger, color: '#fff', border: 'none', borderRadius: 9, padding: '8px 14px', cursor: 'pointer', fontFamily: SANS, fontWeight: 700, fontSize: 13 }}>See details</button>
              <button onClick={onClose} style={{ background: 'transparent', color: T.body, border: `1px solid ${T.line}`, borderRadius: 9, padding: '8px 14px', cursor: 'pointer', fontFamily: SANS, fontWeight: 600, fontSize: 13 }}>Dismiss</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScamShield, ScamToast, ScoreRing });