<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAlertStore } from '@/stores/alerts'
import { usePolling } from '@/composables/usePolling'
import Card from '@/components/ui/Card.vue'
import SeverityBadge from '@/components/ui/SeverityBadge.vue'
import Button from '@/components/ui/Button.vue'
import EmptyState from '@/components/ui/EmptyState.vue'
import AcknowledgeModal from '@/components/alerts/AcknowledgeModal.vue'
import { alertTypeLabel } from '@/api/normalize'
import { formatAcknowledgedByDisplay } from '@/composables/alertAcknowledge'
import { alertSummaryText } from '@/composables/alertExplanation'

const props = defineProps({
  encounterId: { type: String, required: true },
  selectedId: { type: String, default: null },
})

const emit = defineEmits(['select'])

const alertStore = useAlertStore()
const { alerts, loading } = storeToRefs(alertStore)
const confirmingAlert = ref(null)

function loadEncounterAlerts() {
  if (confirmingAlert.value) return
  return alertStore.loadAlerts(props.encounterId)
}

usePolling(loadEncounterAlerts, 5_000)

const visibleAlerts = computed(() =>
  alerts.value.filter(a => a.status !== 'RESOLVED'),
)

async function handleAcknowledge(note) {
  if (!confirmingAlert.value) return
  await alertStore.acknowledge(confirmingAlert.value.id, note)
  confirmingAlert.value = null
  await loadEncounterAlerts()
}

async function resolve(alertId) {
  await alertStore.resolve(alertId)
  await loadEncounterAlerts()
}
</script>

<template>
  <Card>
    <template #header>
      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
        Active Alerts
      </h2>
    </template>

    <EmptyState v-if="!loading && visibleAlerts.length === 0" message="No open alerts" />
    <ul v-else class="divide-y divide-gray-200 dark:divide-gray-700" role="list" aria-label="Active alerts">
      <li
        v-for="alert in visibleAlerts"
        :id="`alert-row-${alert.id}`"
        :key="alert.id"
        class="py-4 first:pt-0 last:pb-0"
      >
        <button
          type="button"
          class="flex w-full min-h-11 cursor-pointer flex-col gap-4 rounded-lg px-2 py-2 text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:flex-row sm:items-start sm:justify-between"
          :class="selectedId === alert.id ? 'bg-blue-50/50 dark:bg-blue-950/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/40'"
          :aria-pressed="selectedId === alert.id"
          :aria-label="`Select ${alertTypeLabel(alert.alertType)} alert, ${alert.severity} severity`"
          @click="emit('select', alert)"
        >
          <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-center gap-2">
              <SeverityBadge :severity="alert.severity" />
              <span class="text-sm font-medium text-gray-900 dark:text-white">
                {{ alertTypeLabel(alert.alertType) }}
              </span>
            </div>
            <p v-if="alertSummaryText(alert)" class="mt-2 truncate text-xs text-gray-500 dark:text-gray-400">
              {{ alertSummaryText(alert) }}
            </p>
            <p
              v-if="alert.acknowledgedBy"
              class="mt-2 text-xs text-gray-500 dark:text-gray-400"
            >
              Acknowledged by {{ formatAcknowledgedByDisplay(alert.acknowledgedBy) }}
            </p>
          </div>
          <div class="flex shrink-0 gap-2">
            <Button
              v-if="alert.status === 'OPEN' || alert.status === 'ESCALATED'"
              size="sm"
              variant="secondary"
              :aria-label="`Acknowledge ${alertTypeLabel(alert.alertType)} alert`"
              @click.stop="confirmingAlert = alert"
            >
              Ack
            </Button>
            <Button
              v-if="alert.status === 'ACKNOWLEDGED'"
              size="sm"
              variant="primary"
              :aria-label="`Resolve ${alertTypeLabel(alert.alertType)} alert`"
              @click.stop="resolve(alert.id)"
            >
              Resolve
            </Button>
          </div>
        </button>
      </li>
    </ul>

    <AcknowledgeModal
      :open="!!confirmingAlert"
      :alert="confirmingAlert"
      @confirm="handleAcknowledge"
      @close="confirmingAlert = null"
    />
  </Card>
</template>
