// confirm-dialog.jsx — Dialog de confirmare reutilizabil, în stilul site-ului.
// Expune window.ConfirmDialog.
//   <window.ConfirmDialog
//     title="Confirmare"
//     message="Ești sigur că vrei să faci asta?"
//     confirmText="Da, șterge"
//     cancelText="Anulează"
//     danger={true}            // butonul de confirmare devine roșu
//     onConfirm={() => ...}
//     onCancel={() => ...}
//   />
// Rendat cu position: fixed + zIndex 300 — apare peste orice modal / drawer existent.

function ConfirmDialog({ title, message, confirmText, cancelText, onConfirm, onCancel, danger = false }) {
  return (
    <div
      onClick={onCancel}
      style={{
        position: 'fixed', inset: 0, zIndex: 300,
        background: 'rgba(0,0,0,.8)', backdropFilter: 'blur(6px)',
        display: 'grid', placeItems: 'center', padding: 24,
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 440,
          background: '#0a0a0a',
          border: '.5px solid var(--line)',
          borderRadius: 16,
          padding: 28,
          boxShadow: '0 20px 60px rgba(0,0,0,.6)',
        }}
      >
        {title && (
          <h3 className="display" style={{ fontSize: 18, margin: '0 0 12px' }}>{title}</h3>
        )}
        {message && (
          <div style={{ fontSize: 14, color: 'var(--txt-1)', marginBottom: 24, lineHeight: 1.5 }}>{message}</div>
        )}
        <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <button
            type="button"
            onClick={onCancel}
            style={{
              padding: '10px 18px',
              borderRadius: 8,
              border: '.5px solid var(--line)',
              background: 'transparent',
              color: 'var(--txt-1)',
              fontSize: 14,
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            {cancelText || 'Anulează'}
          </button>
          <button
            type="button"
            onClick={onConfirm}
            style={danger ? {
              padding: '10px 18px',
              borderRadius: 8,
              border: '1px solid rgba(255,90,90,.45)',
              background: 'rgba(255,90,90,.15)',
              color: '#FF5A5A',
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
            } : {
              padding: '10px 18px',
              borderRadius: 8,
              border: 'none',
              background: 'var(--accent-1)',
              color: '#0A0A0F',
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
            }}
          >
            {confirmText || 'Confirmă'}
          </button>
        </div>
      </div>
    </div>
  );
}

window.ConfirmDialog = ConfirmDialog;