import React from "react";
import { formatPermitValidity } from "../../context/PermitValidityContext.jsx";

export default function PermitExpiryWarningModal({
  open,
  permit,
  onDismiss,
  onHandover,
  onHandback
}) {
  if (!open || !permit) return null;

  return (
    <div className="swi-modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="ptw-expiry-warn-title">
      <div className="swi-modal ptw-expiry-warn-modal" onClick={(e) => e.stopPropagation()}>
        <header className="swi-modal__head">
          <h2 id="ptw-expiry-warn-title" className="swi-modal__title">
            Permit expiring soon
          </h2>
        </header>
        <div className="swi-modal__body">
          <p>
            {permit.permitNumber ? (
              <>Permit <strong>{permit.permitNumber}</strong> </>
            ) : (
              <>This permit </>
            )}
            will expire in 30 minutes (at {formatPermitValidity(permit.validUntil)}).
            Please complete a <strong>Handover</strong> or <strong>Handback</strong> form to
            continue work safely.
          </p>
          <div className="ptw-row-actions ptw-expiry-warn-modal__actions">
            <button type="button" className="swi-btn swi-btn--ghost" onClick={onDismiss}>
              Dismiss
            </button>
            <button type="button" className="swi-btn" onClick={onHandover}>
              Fill Handover
            </button>
            <button type="button" className="swi-btn swi-btn--primary" onClick={onHandback}>
              Fill Handback
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
