import React from 'react'
import { createPortal } from 'react-dom'

/**
 * Bei blocker.state === "blocked": Speichern, Abbrechen (auf Seite bleiben), Verwerfen (Navigation fortsetzen).
 */
export default function UnsavedChangesPrompt({
  blocker,
  isBusy,
  onSave,
  onDiscardWithoutSave,
  title = 'Ungespeicherte Änderungen',
  detail = 'Es gibt Änderungen, die noch nicht gespeichert sind. Was möchten Sie tun?',
}) {
  if (!blocker || blocker.state !== 'blocked') return null

  return createPortal(
    <div
      className="unsaved-prompt-backdrop"
      role="dialog"
      aria-modal="true"
      aria-labelledby="unsaved-prompt-title"
      onMouseDown={(e) => {
        if (e.target === e.currentTarget && !isBusy) blocker.reset()
      }}
    >
      <div className="unsaved-prompt-sheet card" onMouseDown={(e) => e.stopPropagation()}>
        <h2 id="unsaved-prompt-title" className="unsaved-prompt-title">
          {title}
        </h2>
        <p style={{ margin: '0 0 1rem', fontSize: '0.9375rem', color: 'var(--text2)', lineHeight: 1.55 }}>
          {detail}
        </p>
        <div className="unsaved-prompt-actions">
          <button
            type="button"
            className="btn btn-primary"
            disabled={isBusy}
            onClick={onSave}
          >
            Speichern
          </button>
          <button type="button" className="btn btn-secondary" disabled={isBusy} onClick={() => blocker.reset()}>
            Abbrechen
          </button>
          <button
            type="button"
            className="btn"
            disabled={isBusy}
            style={{ borderColor: 'var(--danger)', color: 'var(--danger)' }}
            onClick={() => {
              onDiscardWithoutSave()
              blocker.proceed()
            }}
          >
            Nicht speichern
          </button>
        </div>
      </div>
    </div>,
    document.body,
  )
}