<script setup lang="ts">
/**
 * Toast notification container.
 *
 * Displays toast notifications from the UI store in a stack at the
 * bottom-right of the screen. Each toast auto-dismisses after its
 * duration or can be manually dismissed by clicking.
 */
import { useUiStore, type Toast, type ToastType } from '@/stores/ui'

const ui = useUiStore()

function getToastClasses(type: ToastType): string {
  const base = 'flex items-start gap-3 px-4 py-3 rounded-lg shadow-lg cursor-pointer transition-all hover:scale-[1.02]'

  const typeClasses: Record<ToastType, string> = {
    success: 'bg-success/90 text-white',
    error: 'bg-error/90 text-white',
    warning: 'bg-warning/90 text-gray-900',
    info: 'bg-primary/90 text-white',
  }

  return `${base} ${typeClasses[type]}`
}

function getIcon(type: ToastType): string {
  const icons: Record<ToastType, string> = {
    success: '\u2713', // checkmark
    error: '\u2717', // X
    warning: '\u26A0', // warning triangle
    info: '\u2139', // info circle
  }
  return icons[type]
}

function handleDismiss(toast: Toast): void {
  ui.dismissToast(toast.id)
}
</script>

<template>
  <Teleport to="body">
    <div
      class="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none"
    >
      <TransitionGroup name="toast">
        <div
          v-for="toast in ui.toasts"
          :key="toast.id"
          :class="getToastClasses(toast.type)"
          class="pointer-events-auto"
          @click="handleDismiss(toast)"
        >
          <span class="text-lg shrink-0">{{ getIcon(toast.type) }}</span>
          <p class="text-sm flex-1">
            {{ toast.message }}
          </p>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

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

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

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

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

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