<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useAlertStore } from '@/stores/alerts'
import { useSettingsStore } from '@/stores/settings'
import { alertTypeLabel } from '@/api/normalize'
import { alertSummaryText } from '@/composables/alertExplanation'
import {
  formatAlertPatientLabel,
  requestNotificationPermission,
  stopCriticalTitleFlash,
} from '@/composables/useAlertNotification'
import Button from '@/components/ui/Button.vue'

const router = useRouter()
const alertStore = useAlertStore()
const settingsStore = useSettingsStore()
const { bannerAlerts } = storeToRefs(alertStore)
const { alertSoundMuted } = storeToRefs(settingsStore)

const showNotificationPrompt = computed(() => {
  if (!('Notification' in window)) return false
  return Notification.permission === 'default'
})

function dismissAll() {
  alertStore.dismissAllBannerAlerts()
  stopCriticalTitleFlash()
}

function dismissOne(alertId) {
  alertStore.dismissBannerAlert(alertId)
  if (bannerAlerts.value.length === 0) {
    stopCriticalTitleFlash()
  }
}

function openAlertCenter() {
  router.push({ name: 'AlertCenter' })
}

async function enableNotifications() {
  await requestNotificationPermission()
}
</script>

<template>
  <div
    v-if="bannerAlerts.length > 0"
    class="border-b border-red-700 bg-red-600 text-white"
    role="alert"
    aria-live="assertive"
  >
    <div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 lg:px-8">
      <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
          <p class="text-sm font-semibold uppercase tracking-wide">Critical alert</p>
          <p class="text-sm text-red-100">
            {{ bannerAlerts.length }} new critical alert{{ bannerAlerts.length === 1 ? '' : 's' }} require attention
          </p>
        </div>
        <div class="flex flex-wrap gap-2">
          <Button size="sm" variant="ghost" class="!text-white hover:!bg-red-700" @click="settingsStore.toggleAlertSoundMute()">
            {{ alertSoundMuted ? 'Unmute sound' : 'Mute sound' }}
          </Button>
          <Button
            v-if="showNotificationPrompt"
            size="sm"
            variant="ghost"
            class="!text-white hover:!bg-red-700"
            @click="enableNotifications"
          >
            Enable notifications
          </Button>
          <Button size="sm" variant="secondary" @click="openAlertCenter">
            Open Alert Center
          </Button>
          <Button size="sm" variant="secondary" @click="dismissAll">
            Dismiss all
          </Button>
        </div>
      </div>

      <ul class="space-y-2">
        <li
          v-for="alert in bannerAlerts"
          :key="alert.id"
          class="flex flex-wrap items-start justify-between gap-4 rounded-lg bg-red-700/60 px-4 py-3"
        >
          <div class="min-w-0">
            <p class="font-medium">{{ alertTypeLabel(alert.alertType) }}</p>
            <p class="text-sm text-red-100">{{ formatAlertPatientLabel(alert) }}</p>
            <p v-if="alertSummaryText(alert)" class="mt-1 text-sm text-red-50">
              {{ alertSummaryText(alert) }}
            </p>
          </div>
          <Button size="sm" variant="ghost" class="!text-white hover:!bg-red-800" @click="dismissOne(alert.id)">
            Dismiss
          </Button>
        </li>
      </ul>
    </div>
  </div>
</template>
