<template>
  <!-- Info: simple popup, X button, backdrop click also dismisses -->
  <div v-if="alert.severity === 0 && visible"
       class="modal modal-open z-[9999]"
       @click.self="dismiss">
    <div class="modal-box relative max-w-md">
      <button @click="dismiss"
              class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
      <div class="flex items-center gap-3 mb-3">
        <svg class="w-8 h-8 text-info flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h3 class="font-bold text-lg">Customer Alert</h3>
      </div>
      <p class="text-base-content whitespace-pre-wrap">{{ alert.message }}</p>
    </div>
  </div>

  <!-- Notice: orange background, siren icons, X button only (no backdrop dismiss) -->
  <div v-else-if="alert.severity === 1 && visible"
       class="modal modal-open z-[9999]">
    <div class="modal-box relative max-w-md bg-orange-500 text-white border-4 border-orange-700">
      <button @click="dismiss"
              class="btn btn-sm btn-circle absolute right-2 top-2 bg-transparent border-white text-white hover:bg-orange-700 hover:border-orange-700">✕</button>
      <div class="flex items-center justify-center gap-3 mb-4">
        <span class="text-3xl animate-bounce">🚨</span>
        <h3 class="font-bold text-2xl tracking-widest">NOTICE</h3>
        <span class="text-3xl animate-bounce" style="animation-delay: 0.15s">🚨</span>
      </div>
      <div class="bg-orange-600 rounded-lg p-4">
        <p class="text-lg font-medium text-center whitespace-pre-wrap">{{ alert.message }}</p>
      </div>
    </div>
  </div>

  <!-- Critical: dark red, must type "confirm" to close, no X, no backdrop dismiss -->
  <div v-else-if="alert.severity === 2 && visible"
       class="modal modal-open z-[9999]">
    <div class="modal-box relative max-w-md border-4 border-red-500"
         style="background-color: #1a0000;">
      <div class="text-center mb-5">
        <div class="text-5xl mb-3">⛔</div>
        <h3 class="font-bold text-2xl text-red-400 tracking-wider">CRITICAL ALERT</h3>
      </div>
      <div class="rounded-lg p-4 mb-6 border border-red-700" style="background-color: #3b0000;">
        <p class="text-white text-lg font-medium text-center whitespace-pre-wrap">{{ alert.message }}</p>
      </div>
      <div class="space-y-3">
        <p class="text-red-300 text-sm text-center">
          Type <span class="font-mono font-bold text-white bg-red-800 px-2 py-0.5 rounded">confirm</span> to acknowledge
        </p>
        <div class="flex gap-2">
          <input v-model="confirmText"
                 type="text"
                 placeholder="Type confirm here..."
                 class="input flex-1 bg-red-900 text-white border-red-600 placeholder-red-500" />
          <button @click="dismiss"
                  :disabled="confirmText.toLowerCase() !== 'confirm'"
                  class="btn btn-error disabled:opacity-30">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface CustomerAlert {
  id: number;
  severity: number;
  message: string;
}

const props = defineProps<{ alert: CustomerAlert }>();
const visible = ref(true);
const confirmText = ref('');

const dismiss = () => {
  if (props.alert.severity === 2 && confirmText.value.toLowerCase() !== 'confirm') return;
  visible.value = false;
};
</script>
