// GetContent — herbruikbare bevestigingsmodal (bijv. "opdracht verwijderen").
// Hergebruikt dezelfde blur/overlay + fade als de aanmeld-modal (.gc-modal-*).
function ConfirmModal({ open, title, body, confirmLabel, cancelLabel, danger, onConfirm, onClose }) {
  const cardRef = React.useRef(null);
  const [mounted, setMounted] = React.useState(open);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setMounted(true);
      const raf = requestAnimationFrame(() => setVisible(true));
      const tf = setTimeout(() => setVisible(true), 60); // fallback (verborgen tab)
      return () => { cancelAnimationFrame(raf); clearTimeout(tf); };
    }
    setVisible(false);
    const t = setTimeout(() => setMounted(false), 320);
    return () => clearTimeout(t);
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const t = setTimeout(() => { const b = cardRef.current && cardRef.current.querySelector('button[data-confirm]'); if (b) b.focus(); }, 0);
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; clearTimeout(t); };
  }, [open, onClose]);

  if (!mounted) return null;

  const accent = danger ? 'var(--gc-danger)' : 'var(--accent)';
  const btnBase = { height: 48, padding: '0 22px', borderRadius: 12, fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 'var(--fw-semibold)', cursor: 'pointer' };

  return (
    <div
      className={'gc-modal-overlay' + (visible ? ' is-open' : '')}
      onMouseDown={onClose}
      role="presentation"
      style={{ position: 'fixed', inset: 0, zIndex: 210, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'clamp(1rem, 5vw, 2.5rem)' }}
    >
      <div
        ref={cardRef}
        className="gc-modal-card"
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="gc-confirm-title"
        onMouseDown={(e) => e.stopPropagation()}
        style={{ position: 'relative', width: '100%', maxWidth: 440, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: 'clamp(1.75rem, 4vw, 2.5rem)' }}
      >
        <h2 id="gc-confirm-title" style={{ fontSize: 'clamp(1.2rem, 3vw, 1.4rem)', fontWeight: 'var(--fw-semibold)', letterSpacing: '-0.01em', lineHeight: 1.25, color: 'var(--text-strong)', margin: 0 }}>{title}</h2>
        {body && <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.6, color: 'var(--text-muted)' }}>{body}</p>}
        <div style={{ display: 'flex', gap: 12, marginTop: 'clamp(1.5rem, 3vw, 2rem)', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <button type="button" onClick={onClose} className="gc-confirm-cancel" style={Object.assign({}, btnBase, { border: '1.5px solid var(--border-strong)', background: 'transparent', color: 'var(--text-strong)' })}>
            {cancelLabel || 'Annuleren'}
          </button>
          <button type="button" data-confirm onClick={onConfirm} className="gc-confirm-go" style={Object.assign({}, btnBase, { border: 'none', background: accent, color: 'var(--on-accent)' })}>
            {confirmLabel || 'Bevestigen'}
          </button>
        </div>
      </div>
    </div>
  );
}
window.ConfirmModal = ConfirmModal;