// [TSM.ID].[11031972] -- All Rights Reserved. Proprietary & Confidential.
export default function DangerModal({ isOpen, title, message, onConfirm, onCancel, confirmText = "ENGAGE PROTOCOL", cancelText = "ABORT" }) {
  if (!isOpen) return null;

  return (
    <div style={{
      position: 'fixed',
      top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(5, 3, 10, 0.85)',
      backdropFilter: 'blur(8px)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 9999,
      animation: 'fadeIn 0.3s ease-out'
    }}>
      <style>{`
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes pulseRed { 
          0% { box-shadow: 0 0 15px rgba(255, 0, 60, 0.3); } 
          50% { box-shadow: 0 0 30px rgba(255, 0, 60, 0.6); } 
          100% { box-shadow: 0 0 15px rgba(255, 0, 60, 0.3); } 
        }
      `}</style>
      <div style={{
        background: 'linear-gradient(135deg, rgba(20, 0, 5, 0.95) 0%, rgba(5, 0, 0, 0.95) 100%)',
        border: '1px solid #ff003c',
        borderRadius: '12px',
        padding: '40px',
        maxWidth: '500px',
        width: '90%',
        textAlign: 'center',
        animation: 'pulseRed 2s infinite'
      }}>
        <div style={{
          width: '60px', height: '60px', 
          borderRadius: '50%', background: 'rgba(255,0,60,0.1)', 
          border: '2px solid #ff003c',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          margin: '0 auto 20px', color: '#ff003c', fontSize: '2rem', fontWeight: 'bold'
        }}>!</div>
        
        <h2 style={{color: '#ff003c', marginBottom: '15px', fontFamily: 'monospace', letterSpacing: '2px', fontSize: '1.5rem'}}>
          {title}
        </h2>
        
        <p style={{color: '#fff', fontSize: '1rem', lineHeight: '1.6', marginBottom: '35px'}}>
          {message}
        </p>
        
        <div style={{display: 'flex', gap: '15px', justifyContent: 'center'}}>
          <button onClick={onCancel} style={{
            padding: '12px 24px', background: 'transparent', border: '1px solid #555',
            color: '#aaa', borderRadius: '6px', fontFamily: 'monospace', fontSize: '1rem',
            cursor: 'pointer', transition: 'all 0.2s', flex: 1
          }} onMouseOver={e => {e.target.style.color = '#fff'; e.target.style.borderColor = '#888'}}
             onMouseOut={e => {e.target.style.color = '#aaa'; e.target.style.borderColor = '#555'}}>
            {cancelText}
          </button>
          
          <button onClick={onConfirm} style={{
            padding: '12px 24px', background: 'rgba(255, 0, 60, 0.15)', border: '1px solid #ff003c',
            color: '#ff003c', borderRadius: '6px', fontFamily: 'monospace', fontSize: '1rem',
            cursor: 'pointer', transition: 'all 0.2s', flex: 1, fontWeight: 'bold', letterSpacing: '1px'
          }} onMouseOver={e => {e.target.style.background = '#ff003c'; e.target.style.color = '#fff'}}
             onMouseOut={e => {e.target.style.background = 'rgba(255, 0, 60, 0.15)'; e.target.style.color = '#ff003c'}}>
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
}
