<script setup>
import { computed } from 'vue'
import Card from '@/components/ui/Card.vue'
import Badge from '@/components/ui/Badge.vue'
import SeverityBadge from '@/components/ui/SeverityBadge.vue'
import Button from '@/components/ui/Button.vue'
import FeedbackButtons from '@/components/feedback/FeedbackButtons.vue'
import { alertTypeLabel } from '@/api/normalize'
import { formatAcknowledgedByDisplay } from '@/composables/alertAcknowledge'
import { alertSummaryText } from '@/composables/alertExplanation'

const props = defineProps({
  alert: { type: Object, required: true },
})

const emit = defineEmits(['acknowledge', 'resolve'])

const actionHint = computed(() => {
  const hints = {
    QSOFA_SCREEN: 'Recommend SOFA labs',
    SOFA_SEPSIS: 'Review organ breakdown · Initiate bundle',
    GCS_CRITICAL: 'Urgent neuro assessment',
    GCS_WARNING: 'Monitor consciousness',
  }
  return hints[props.alert.alertType] ?? null
})

function showActions(status) {
  return status !== 'RESOLVED'
}

function canAcknowledge(status) {
  return status === 'OPEN' || status === 'ESCALATED'
}

function canResolve(status) {
  return status === 'ACKNOWLEDGED'
}

function formatTime(iso) {
  if (!iso) return ''
  return new Date(iso).toLocaleString()
}
</script>

<template>
  <Card>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div class="min-w-0 flex-1">
        <div class="flex flex-wrap items-center gap-2">
          <SeverityBadge :severity="alert.severity" />
          <Badge variant="info" size="xs">{{ alert.status }}</Badge>
          <Badge v-if="actionHint" variant="info" size="xs">{{ actionHint }}</Badge>
        </div>
        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
          {{ alertTypeLabel(alert.alertType) }}
        </h3>
        <p v-if="alertSummaryText(alert)" class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          {{ alertSummaryText(alert) }}
        </p>
        <p class="mt-2 text-xs text-gray-500 dark:text-gray-500">
          {{ formatTime(alert.triggeredAt) }}
        </p>
        <p
          v-if="alert.acknowledgedBy"
          class="mt-2 text-xs text-gray-500 dark:text-gray-400"
        >
          Acknowledged by {{ formatAcknowledgedByDisplay(alert.acknowledgedBy) }}
          <span v-if="alert.acknowledgedAt">at {{ formatTime(alert.acknowledgedAt) }}</span>
        </p>
      </div>

      <div v-if="showActions(alert.status)" class="flex w-full shrink-0 gap-2 sm:w-auto">
        <Button
          v-if="canAcknowledge(alert.status)"
          size="sm"
          variant="secondary"
          :aria-label="`Acknowledge ${alertTypeLabel(alert.alertType)} alert`"
          @click="emit('acknowledge')"
        >
          Acknowledge
        </Button>
        <Button
          v-if="canResolve(alert.status)"
          size="sm"
          variant="primary"
          :aria-label="`Resolve ${alertTypeLabel(alert.alertType)} alert`"
          @click="emit('resolve')"
        >
          Resolve
        </Button>
      </div>
    </div>

    <div
      v-if="alert.status === 'ACKNOWLEDGED' || alert.status === 'RESOLVED'"
      class="mt-4 border-t border-gray-100 pt-4 dark:border-gray-700"
    >
      <FeedbackButtons
        :alert-id="alert.id"
        :alert-type="alert.alertType"
        :severity="alert.severity"
        :can-submit="true"
      />
    </div>
  </Card>
</template>