import { useEffect, useRef } from 'react'

type Props = {
  open: boolean
  customerName: string
  customerEmail: string
  tableName: string
  date: string
  startTime: string
  endTime: string
  partySize: number
  onClose: () => void
}

function FlameBadgeIcon() {
  return (
    <svg className="reservation-confirmed-flame" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M12 2c1 3-3 4-3 7.5A3.5 3.5 0 0 0 12 13a3.5 3.5 0 0 0 3-5.3c1.5 1 2.5 3 2.5 5a5.5 5.5 0 1 1-11 0C6.5 8.5 9.5 6 12 2Z"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export function ReservationConfirmedModal({
  open,
  customerName,
  customerEmail,
  tableName,
  date,
  startTime,
  endTime,
  partySize,
  onClose,
}: Props) {
  const closeRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    if (!open) return

    closeRef.current?.focus()

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') onClose()
    }

    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [open, onClose])

  if (!open) return null

  return (
    <div className="confirm-dialog-backdrop" onClick={onClose}>
      <div
        className="confirm-dialog reservation-confirmed-dialog"
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="reservation-confirmed-title"
        onClick={(event) => event.stopPropagation()}
      >
        <FlameBadgeIcon />

        <h2 id="reservation-confirmed-title" className="reservation-confirmed-title">
          Tisch reserviert!
        </h2>
        <p className="reservation-confirmed-message">
          Bis bald, {customerName}! Wir halten Ihnen den Platz warm und legen schon mal Kohle nach.
        </p>

        <dl className="detail-list">
          <div>
            <dt>Tisch</dt>
            <dd>{tableName}</dd>
          </div>
          <div>
            <dt>Datum</dt>
            <dd>{date}</dd>
          </div>
          <div>
            <dt>Uhrzeit</dt>
            <dd>
              {startTime} – {endTime}
            </dd>
          </div>
          <div>
            <dt>Personen</dt>
            <dd>{partySize}</dd>
          </div>
        </dl>

        <p className="reservation-confirmed-footnote">
          Eine Bestätigung ist unterwegs an <strong>{customerEmail}</strong>. Dort finden Sie auch einen
          Link, falls sich doch noch etwas ändert.
        </p>

        <div className="confirm-dialog-actions">
          <button ref={closeRef} type="button" className="btn btn-primary" onClick={onClose}>
            Alles klar
          </button>
        </div>
      </div>
    </div>
  )
}