<template>
  <div class="toast toast-end z-50">
    <transition-group name="toast" tag="div">
      <div
        v-for="toast in systemStore.toasts"
        :key="toast.id"
        :class="[
          'alert',
          toast.type === 'success' ? 'alert-success' :
          toast.type === 'error' ? 'alert-error' :
          toast.type === 'warning' ? 'alert-warning' :
          'alert-info'
        ]"
        class="mb-2 shadow-lg"
      >
        <!-- Icon -->
        <svg
          v-if="toast.type === 'success'"
          class="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>

        <svg
          v-else-if="toast.type === 'error'"
          class="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>

        <svg
          v-else-if="toast.type === 'warning'"
          class="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
        </svg>

        <svg
          v-else
          class="w-6 h-6"
          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>

        <!-- Content -->
        <div class="flex-1">
          <div class="font-bold">{{ toast.title }}</div>
          <div v-if="toast.message" class="text-sm opacity-90">{{ toast.message }}</div>
        </div>

        <!-- Close button -->
        <button
          @click="systemStore.removeToast(toast.id)"
          class="btn btn-sm btn-ghost btn-circle"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
</script>

<style scoped>
/* Toast animations */
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
}

.toast-move {
  transition: transform 0.3s ease;
}
</style>