import { useEffect } from 'react'

import type { listStaffMembers } from '#/lib/staff'

type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]

type Props = {
  member: StaffMember | null
  onClose: () => void
}

const dateFormatter = new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'medium',
  timeStyle: 'short',
})

export function StaffMemberDetailDialog({ member, onClose }: Props) {
  useEffect(() => {
    if (!member) return

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

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

  if (!member) return null

  return (
    <div className="confirm-dialog-backdrop" onClick={onClose}>
      <div
        className="confirm-dialog reservation-detail-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="staff-member-detail-title"
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="staff-member-detail-title" className="confirm-dialog-title">
          {member.name}
        </h2>

        <dl className="detail-list">
          <div>
            <dt>E-Mail</dt>
            <dd>
              <a href={`mailto:${member.email}`}>{member.email}</a>
            </dd>
          </div>
          <div>
            <dt>Telefon</dt>
            <dd>{member.phone ? <a href={`tel:${member.phone}`}>{member.phone}</a> : '—'}</dd>
          </div>
          <div>
            <dt>Rolle</dt>
            <dd>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</dd>
          </div>
          <div>
            <dt>Status</dt>
            <dd>{member.banned ? 'Gesperrt' : 'Aktiv'}</dd>
          </div>
          {member.banned && member.banReason && (
            <div>
              <dt>Sperrgrund</dt>
              <dd>{member.banReason}</dd>
            </div>
          )}
          <div>
            <dt>Angelegt am</dt>
            <dd>{dateFormatter.format(new Date(member.createdAt))}</dd>
          </div>
        </dl>

        <div className="confirm-dialog-actions">
          <button type="button" className="btn btn-secondary" onClick={onClose}>
            Schließen
          </button>
        </div>
      </div>
    </div>
  )
}