<script setup>
import { inject } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  position: {
    type: String,
    default: 'top-right',
    validator: (v) => ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'].includes(v)
  }
});

const toasts = inject('toasts');
const removeToast = inject('removeToast');

function getIcon(type) {
  const icons = {
    success: '✓',
    error: '✕',
    warning: '⚠',
    info: 'ℹ',
    pwa: '📱'
  };
  return icons[type] || 'ℹ';
}

const positionClasses = {
  'top-left': 'top-5 left-5',
  'top-center': 'top-5 left-1/2 -translate-x-1/2',
  'top-right': 'top-5 right-5',
  'bottom-left': 'bottom-5 left-5',
  'bottom-center': 'bottom-5 left-1/2 -translate-x-1/2',
  'bottom-right': 'bottom-5 right-5'
};

const typeClasses = {
  success: 'border-l-4 border-l-green-400',
  error: 'border-l-4 border-l-red-400',
  warning: 'border-l-4 border-l-yellow-400',
  info: 'border-l-4 border-l-blue-400',
  pwa: 'border-l-4 border-l-purple-400 bg-gradient-to-br from-purple-500/15 to-transparent'
};
</script>

<template>
  <Teleport to="body">
    <div :class="cn(
      'fixed z-[9999] flex flex-col gap-3 pointer-events-none max-w-[420px]',
      positionClasses[position]
    )">
      <TransitionGroup name="toast">
        <div
          v-for="toast in toasts"
          :key="toast.id"
          :class="cn(
            'pointer-events-auto glass backdrop-blur-[10px] rounded-xl p-4 shadow-lg cursor-pointer',
            'border border-black/10 dark:border-white/10',
            'min-w-[280px] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl',
            'bg-[rgba(255,255,255,0.95)] dark:bg-[rgba(30,30,30,0.95)]',
            typeClasses[toast.type]
          )"
          @click="removeToast(toast.id)"
        >
          <div class="flex items-start gap-3">
            <div class="text-xl flex-shrink-0 size-7 flex items-center justify-center rounded-lg bg-black/5 dark:bg-white/10">
              {{ getIcon(toast.type) }}
            </div>
            <div class="flex-1 min-w-0">
              <div v-if="toast.title" class="font-semibold text-sm mb-1 text-black/95 dark:text-white/95">
                {{ toast.title }}
              </div>
              <div class="text-[13px] text-black/75 dark:text-white/75 leading-relaxed">
                {{ toast.message }}
              </div>
            </div>
            <button
              v-if="toast.action"
              class="px-3 py-1.5 bg-black/10 dark:bg-white/15 border border-black/15 dark:border-white/20 rounded-md text-black/90 dark:text-white text-xs font-semibold whitespace-nowrap transition-all hover:bg-black/15 dark:hover:bg-white/25 hover:scale-105"
              @click.stop="toast.action.handler"
            >
              {{ toast.action.label }}
            </button>
            <button
              v-if="!toast.persistent"
              class="size-5 flex items-center justify-center rounded text-black/50 dark:text-white/50 hover:bg-black/10 dark:hover:bg-white/10 hover:text-black/90 dark:hover:text-white/90 transition-all"
              @click.stop="removeToast(toast.id)"
            >
              ✕
            </button>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

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

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

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

/* Top center animations */
.top-center .toast-enter-from {
  transform: translateY(-100px);
}

.top-center .toast-leave-to {
  transform: translateY(-100px) scale(0.8);
}

@media (max-width: 640px) {
  .toast-container {
    max-width: calc(100vw - 40px);
    left: 20px !important;
    right: 20px !important;
    transform: none !important;
  }
}
</style>
