<script setup lang="ts">
import { useToastStore } from '../stores/toast'
import { Check, AlertCircle, Info, X, Undo2 } from 'lucide-vue-next'

const toastStore = useToastStore()
</script>

<template>
  <div
    role="region"
    aria-label="Notifications"
    aria-live="polite"
    aria-atomic="false"
    class="fixed top-4 left-1/2 -translate-x-1/2 ml-6 z-[100] flex flex-col gap-2 pointer-events-none"
  >
    <div
      v-for="toast in toastStore.toasts"
      :key="toast.id"
      :role="toast.type === 'error' ? 'alert' : 'status'"
      tabindex="0"
      @keydown.escape="toastStore.removeToast(toast.id)"
      @mouseenter="toastStore.pauseToast(toast.id)"
      @mouseleave="toastStore.resumeToast(toast.id)"
      @focusin="toastStore.pauseToast(toast.id)"
      @focusout="toastStore.resumeToast(toast.id)"
      class="relative w-80 flex items-center gap-3 px-4 py-3 bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] pointer-events-auto border-l-[3px] overflow-hidden"
      :class="[
        toast.exiting ? 'animate-toast-exit' : 'animate-toast-enter',
        toast.type === 'success' ? 'border-l-status-running' : '',
        toast.type === 'error' ? 'border-l-status-error' : '',
        toast.type === 'info' ? 'border-l-accent' : ''
      ]"
    >
      <Check v-if="toast.type === 'success'" class="w-4 h-4 text-status-running shrink-0" aria-hidden="true" :stroke-width="2" />
      <AlertCircle v-if="toast.type === 'error'" class="w-4 h-4 text-status-error shrink-0" aria-hidden="true" :stroke-width="2" />
      <Info v-if="toast.type === 'info'" class="w-4 h-4 text-accent shrink-0" aria-hidden="true" :stroke-width="2" />
      <span class="sr-only">{{ toast.type === 'success' ? 'Success:' : toast.type === 'error' ? 'Error:' : 'Info:' }}</span>
      <span class="text-[0.875rem] text-text-primary flex-1">{{ toast.message }}</span>
      <button
        v-if="toast.onUndo"
        aria-label="Undo"
        v-tooltip="'Undo'"
        @click.stop="toastStore.undoToast(toast.id)"
        class="shrink-0 p-1 text-accent hover:text-accent/80 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-lg"
      >
        <Undo2 class="w-3.5 h-3.5" aria-hidden="true" :stroke-width="2" />
      </button>
      <button
        aria-label="Dismiss"
        v-tooltip="'Dismiss'"
        @click.stop="toastStore.removeToast(toast.id)"
        class="shrink-0 p-1 text-text-tertiary hover:text-text-primary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-lg"
      >
        <X class="w-3.5 h-3.5" aria-hidden="true" :stroke-width="2" />
      </button>
      <div
        v-if="!toast.exiting"
        aria-hidden="true"
        class="absolute bottom-0 left-0 h-0.5 rounded-b-lg"
        :class="[
          toast.type === 'success' ? 'bg-status-running' : '',
          toast.type === 'error' ? 'bg-status-error' : '',
          toast.type === 'info' ? 'bg-accent' : ''
        ]"
        :style="{
          animation: `toast-progress ${toast.duration}ms linear forwards`,
          animationPlayState: toast.paused ? 'paused' : 'running',
        }"
      />
    </div>
  </div>
</template>
