/* global React */
(function () {
  const T = window.SC_T;

  function Modal({ open, onClose, title, subtitle, children, footer }) {
    if (!open) return null;
    return (
      <div
        onClick={onClose}
        style={{
          position: 'fixed', inset: 0, zIndex: 60,
          background: 'rgba(17, 24, 39, 0.35)',
          backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 40, animation: 'sc-fade-in .2s ease',
        }}
      >
        <div
          onClick={(e) => e.stopPropagation()}
          style={{
            width: 560, maxHeight: '80vh', background: T.surface, borderRadius: 16,
            boxShadow: '0 24px 60px rgba(17,24,39,0.25), 0 0 0 1px rgba(0,0,0,0.04)',
            display: 'flex', flexDirection: 'column',
            animation: 'sc-scale-in .25s cubic-bezier(0.16, 1, 0.3, 1)', overflow: 'hidden',
          }}
        >
          <div style={{ padding: '20px 24px 14px', borderBottom: `1px solid ${T.borderSoft}` }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: T.ink, letterSpacing: -0.2 }}>{title}</div>
            {subtitle && <div style={{ fontSize: 13, color: T.inkMuted, marginTop: 4 }}>{subtitle}</div>}
          </div>
          <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px' }}>{children}</div>
          {footer && (
            <div style={{ padding: '14px 20px', borderTop: `1px solid ${T.borderSoft}`, display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              {footer}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.Modal = Modal;
})();