<template>
  <Teleport to="body">
    <div class="fixed top-4 right-4 z-50 space-y-2">
      <TransitionGroup
        name="toast"
        tag="div"
        class="space-y-2"
      >
        <div
          v-for="toast in toasts"
          :key="toast.id"
          :class="[
            'flex items-center p-4 rounded-lg shadow-lg max-w-sm w-full',
            'transform transition-all duration-300 ease-in-out',
            toastClasses[toast.type]
          ]"
        >
          <!-- Icon -->
          <div class="flex-shrink-0">
            <Icon
              :icon="toastIcons[toast.type]"
              :class="[
                'w-5 h-5',
                toastIconClasses[toast.type]
              ]"
            />
          </div>

          <!-- Content -->
          <div class="ml-3 flex-1">
            <p :class="[
              'text-sm font-medium',
              toastTextClasses[toast.type]
            ]">
              {{ toast.title }}
            </p>
            <p
              v-if="toast.message"
              :class="[
                'text-sm mt-1',
                toastMessageClasses[toast.type]
              ]"
            >
              {{ toast.message }}
            </p>
          </div>

          <!-- Close Button -->
          <div class="ml-4 flex-shrink-0">
            <button
              @click="removeToast(toast.id)"
              :class="[
                'inline-flex rounded-md p-1.5 transition-colors',
                'focus:outline-none focus:ring-2 focus:ring-offset-2',
                toastCloseClasses[toast.type]
              ]"
            >
              <Icon
                icon="material-symbols:close"
                class="w-4 h-4"
              />
            </button>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<script setup>
import { Icon } from '@iconify/vue'
import { useToast } from '@/Admin/js/composables/useToast.js'

// Use the toast composable
const { toasts, removeToast } = useToast()

// Toast styling configurations
const toastClasses = {
  success: 'bg-green-50 border border-green-200',
  error: 'bg-red-50 border border-red-200',
  info: 'bg-blue-50 border border-blue-200'
}

const toastIcons = {
  success: 'material-symbols:check-circle-outline',
  error: 'material-symbols:error-outline',
  info: 'material-symbols:info-outline'
}

const toastIconClasses = {
  success: 'text-green-400',
  error: 'text-red-400',
  info: 'text-blue-400'
}

const toastTextClasses = {
  success: 'text-green-800',
  error: 'text-red-800',
  info: 'text-blue-800'
}

const toastMessageClasses = {
  success: 'text-green-700',
  error: 'text-red-700',
  info: 'text-blue-700'
}

const toastCloseClasses = {
  success: 'text-green-400 hover:text-green-600 focus:ring-green-500',
  error: 'text-red-400 hover:text-red-600 focus:ring-red-500',
  info: 'text-blue-400 hover:text-blue-600 focus:ring-blue-500'
}
</script>

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

.toast-leave-active {
  transition: all 0.3s ease-in;
}

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

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

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