<script setup>
import { computed, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import Modal from '@/components/ui/Modal.vue'
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'
import { useAuthStore } from '@/stores/auth'
import { alertTypeLabel } from '@/api/normalize'
import { alertSummaryText } from '@/composables/alertExplanation'
import {
  formatRoleLabel,
  previewAcknowledgmentNote,
  roleAcknowledgmentMessage,
} from '@/composables/alertAcknowledge'

const props = defineProps({
  open: { type: Boolean, default: false },
  alert: { type: Object, default: null },
})

const emit = defineEmits(['confirm', 'close'])

const authStore = useAuthStore()
const { displayName, role } = storeToRefs(authStore)
const note = ref('')

watch(() => props.open, (isOpen) => {
  if (isOpen) note.value = ''
})

const roleLabel = computed(() => formatRoleLabel(role.value))
const roleMessage = computed(() => roleAcknowledgmentMessage(role.value))
const notePreview = computed(() =>
  previewAcknowledgmentNote(role.value, displayName.value, note.value),
)

function severityVariant(severity) {
  return severity === 'CRITICAL' ? 'critical' : 'warning'
}

function onConfirm() {
  emit('confirm', note.value.trim())
}
</script>

<template>
  <Modal :open="open" title="Acknowledge Alert" @close="emit('close')">
    <div v-if="alert" class="space-y-4">
      <div class="flex flex-wrap items-center gap-2">
        <Badge :variant="severityVariant(alert.severity)">{{ alert.severity }}</Badge>
        <span class="text-sm font-medium text-gray-900 dark:text-white">
          {{ alertTypeLabel(alert.alertType) }}
        </span>
      </div>
      <p v-if="alertSummaryText(alert)" class="text-sm text-gray-600 dark:text-gray-400">
        {{ alertSummaryText(alert) }}
      </p>

      <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50">
        <p class="text-sm font-medium text-gray-900 dark:text-white">
          {{ displayName }}
          <span class="text-gray-500 dark:text-gray-400">· {{ roleLabel }}</span>
        </p>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          {{ roleMessage }}
        </p>
      </div>

      <label class="block">
        <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
          Optional note
        </span>
        <textarea
          v-model="note"
          rows="3"
          class="w-full rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
          placeholder="Add clinical context (optional)"
        />
      </label>

      <p class="text-xs text-gray-500 dark:text-gray-400">
        Audit record: {{ notePreview }}
      </p>

      <div class="flex justify-end gap-2">
        <Button variant="ghost" @click="emit('close')">Cancel</Button>
        <Button variant="primary" @click="onConfirm">Acknowledge</Button>
      </div>
    </div>
  </Modal>
</template>
