/* global React, V2Icon */

function V2DiscardModal({ open, draftLabel, hasContent, onConfirm, onCancel }) {
  if (!open) return null;
  return (
    <div
      onClick={onCancel}
      style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: 'rgba(17, 19, 18, 0.4)',
        display: 'grid', placeItems: 'center',
        animation: 'fadeIn 150ms ease-out',
      }}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          width: 420, background: '#fff',
          borderRadius: 14, boxShadow: 'var(--shadow-xl)',
          padding: '22px 24px',
          animation: 'modalIn 220ms cubic-bezier(0.4, 0, 0.2, 1)',
          fontFamily: 'var(--font-sans)',
        }}
      >
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8,
        }}>
          <span style={{
            width: 32, height: 32, borderRadius: 8,
            background: '#fef2f2', color: 'var(--reject-text)',
            display: 'grid', placeItems: 'center',
          }}>
            <V2Icon name="trash" size={15} />
          </span>
          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--sage-800)' }}>
            Discard draft?
          </h3>
        </div>
        <p style={{
          margin: '4px 0 6px 42px',
          fontSize: 13, color: 'var(--sage-600)', lineHeight: 1.5,
        }}>
          This will delete the <strong style={{ color: 'var(--sage-800)' }}>{draftLabel}</strong> draft note. This action cannot be undone.
        </p>
        {hasContent && (
          <div style={{
            marginLeft: 42, marginTop: 10, marginBottom: 6,
            padding: '8px 12px', borderRadius: 6,
            background: 'var(--flag-surface)', border: '1px solid var(--flag-border)',
            fontSize: 11.5, color: 'var(--flag-text)',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <V2Icon name="alertTriangle" size={12} stroke="var(--flag-text)" />
            This draft contains content that will be lost.
          </div>
        )}
        <div style={{
          display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 18,
        }}>
          <button
            onClick={onCancel}
            style={{
              padding: '8px 14px', borderRadius: 6,
              border: '1px solid var(--sage-200)',
              background: '#fff', color: 'var(--sage-700)',
              cursor: 'pointer', fontSize: 12.5, fontWeight: 500,
              fontFamily: 'var(--font-sans)',
            }}
          >Keep editing</button>
          <button
            onClick={onConfirm}
            style={{
              padding: '8px 14px', borderRadius: 6,
              border: 0, background: 'var(--destructive)',
              color: '#fff', cursor: 'pointer',
              fontSize: 12.5, fontWeight: 600,
              fontFamily: 'var(--font-sans)',
            }}
          >Discard draft</button>
        </div>
      </div>
    </div>
  );
}

window.V2DiscardModal = V2DiscardModal;