const { Button, Alert } = window.CLIQDesignSystem_d61053;

/**
 * The "Pause & Review" interception screen — faithfully follows the source
 * mockup. Intercepts a spoofed login, explains in plain language, confirms
 * the family was notified, and offers only safe actions (no "proceed anyway").
 */
window.PauseReview = function PauseReview({ onSafe, onAsk }) {
  const [resolved, setResolved] = React.useState(false);

  return (
    <div style={{ position: 'absolute', inset: 0 }}>
      {/* faux spoof page behind the scrim */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, padding: '24px 22px', opacity: 0.4 }}>
        <div style={{ height: 22, width: 120, background: '#D3D1C7', borderRadius: 4, margin: '0 auto 22px' }} />
        <div style={{ height: 46, background: '#F1EFE8', border: '1px solid #D3D1C7', borderRadius: 8, marginBottom: 14 }} />
        <div style={{ height: 46, background: '#F1EFE8', border: '1px solid #D3D1C7', borderRadius: 8, marginBottom: 14 }} />
        <div style={{ height: 46, background: '#B4B2A9', borderRadius: 8 }} />
      </div>

      {/* spoof URL warning bar */}
      <div style={{ position: 'absolute', top: 12, left: 14, right: 14, display: 'flex', alignItems: 'center', gap: 8,
        background: 'var(--alert-100)', border: '1px solid var(--border-danger)', borderRadius: 999, padding: '9px 14px' }}>
        <i className="ti ti-alert-triangle" style={{ fontSize: 18, color: 'var(--alert-700)' }} aria-hidden="true" />
        <span style={{ fontSize: 13, color: 'var(--alert-700)', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>chase-update-security.com</span>
        <i className="ti ti-lock-off" style={{ fontSize: 16, color: 'var(--alert-700)', marginLeft: 'auto' }} aria-hidden="true" />
      </div>

      {/* scrim */}
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(27,34,84,.55)' }} />

      {/* modal */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 14 }}>
        <div style={{ background: '#fff', borderRadius: 24, padding: '22px 20px', width: '100%' }}>
          {resolved ? (
            <div style={{ textAlign: 'center', padding: '30px 6px' }}>
              <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--teal-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
                <i className="ti ti-check" style={{ fontSize: 44, color: 'var(--teal-700)' }} aria-hidden="true" />
              </div>
              <p style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'var(--navy-800)' }}>You're safe now</p>
              <p style={{ margin: 0, fontSize: 16, color: 'var(--text-body)', lineHeight: 1.5 }}>CLIQ closed that page. Nothing was sent. You can keep going as normal.</p>
            </div>
          ) : (
            <>
              <div style={{ width: 66, height: 66, borderRadius: '50%', background: 'var(--warn-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}>
                <i className="ti ti-player-pause" style={{ fontSize: 34, color: 'var(--warn-700)' }} aria-hidden="true" />
              </div>
              <p style={{ margin: '0 0 6px', textAlign: 'center', fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'var(--navy-800)' }}>Let's pause a second</p>
              <p style={{ margin: '0 0 16px', textAlign: 'center', fontSize: 16, color: 'var(--text-body)', lineHeight: 1.5 }}>
                This page is pretending to be Chase, but it's <span style={{ color: 'var(--alert-700)', fontWeight: 600 }}>not the real website</span>. We stopped it so your password stays safe.
              </p>

              <div style={{ background: 'var(--violet-100)', borderRadius: 16, padding: '12px 14px', marginBottom: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <i className="ti ti-circle-x" style={{ fontSize: 18, color: 'var(--alert-700)' }} aria-hidden="true" />
                  <span style={{ fontSize: 14, color: 'var(--text-body)' }}>This page: <span style={{ color: 'var(--alert-700)' }}>chase-update-security.com</span></span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <i className="ti ti-circle-check" style={{ fontSize: 18, color: 'var(--teal-700)' }} aria-hidden="true" />
                  <span style={{ fontSize: 14, color: 'var(--text-body)' }}>Real Chase: <span style={{ color: 'var(--teal-700)' }}>chase.com</span></span>
                </div>
              </div>

              <div style={{ marginBottom: 18 }}>
                <Alert tone="safe">We've let your son James know. You're not alone.</Alert>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                <Button variant="primary" size="senior" fullWidth icon="shield-check" onClick={() => setResolved(true)}>Take me back to safety</Button>
                <Button variant="secondary" fullWidth icon="external-link" onClick={() => setResolved(true)}>Go to the real Chase instead</Button>
                <Button variant="ghost" fullWidth icon="microphone" onClick={onAsk}>Talk to CLIQ about this</Button>
              </div>
            </>
          )}
          {resolved && (
            <div style={{ marginTop: 18 }}>
              <Button variant="positive" size="senior" fullWidth icon="home" onClick={onSafe}>Back to home</Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}