import React from "react";

export const PERMIT_ENTRY_WARNING_TEXT = [
  "THIS PERMIT IS ONLY VALID WHEN ALL SECTIONS ARE COMPLETE.",
  "DO NOT PROCEED WITH YOUR WORK UNTIL YOUR PERMIT HAS BEEN AUTHORISED BY THE RELEVANT MEMBERS OF STAFF."
];

function WarningIcon() {
  return (
    <svg
      className="ptw-entry-warn-modal__icon-svg"
      width="28"
      height="28"
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
    >
      <path
        d="M12 3.2 2.8 19.2a1.2 1.2 0 0 0 1.05 1.8h16.3a1.2 1.2 0 0 0 1.05-1.8L12 3.2Z"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinejoin="round"
      />
      <path
        d="M12 9v5.2"
        stroke="currentColor"
        strokeWidth="1.75"
        strokeLinecap="round"
      />
      <circle cx="12" cy="17.2" r="1" fill="currentColor" />
    </svg>
  );
}

export default function PermitEntryWarningModal({
  open,
  onCancel,
  onConfirm,
  confirming = false
}) {
  if (!open) return null;

  return (
    <div
      className="swi-modal-backdrop ptw-entry-warn-backdrop"
      role="dialog"
      aria-modal="true"
      aria-labelledby="ptw-entry-warn-title"
      aria-describedby="ptw-entry-warn-desc"
    >
      <div
        className="swi-modal ptw-entry-warn-modal"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="ptw-entry-warn-modal__accent" aria-hidden="true" />

        <div className="ptw-entry-warn-modal__icon" aria-hidden="true">
          <WarningIcon />
        </div>

        <header className="ptw-entry-warn-modal__head">
          <p className="ptw-entry-warn-modal__eyebrow">Permit to Work</p>
          <h2 id="ptw-entry-warn-title" className="ptw-entry-warn-modal__title">
            Important — read before starting
          </h2>
        </header>

        <div id="ptw-entry-warn-desc" className="ptw-entry-warn-modal__body">
          <div className="ptw-entry-warn-modal__message" role="note">
            {PERMIT_ENTRY_WARNING_TEXT.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
        </div>

        <footer className="ptw-entry-warn-modal__actions">
          <button
            type="button"
            className="swi-btn swi-btn--ghost ptw-entry-warn-modal__cancel"
            onClick={onCancel}
            disabled={confirming}
          >
            Cancel
          </button>
          <button
            type="button"
            className="swi-btn swi-btn--primary ptw-entry-warn-modal__confirm"
            onClick={onConfirm}
            disabled={confirming}
          >
            {confirming ? "Starting…" : "I understand, continue"}
          </button>
        </footer>
      </div>
    </div>
  );
}
