<script setup lang="ts">
import { AlertTriangle, CheckCircle2, Info, X } from '@lucide/vue'

import { useAdminToast } from '../../composables/useAdminToast'

const { toast, dismissAdminToast } = useAdminToast()

function iconForTone(tone: string) {
  if (tone === 'success') return CheckCircle2
  if (tone === 'error') return AlertTriangle
  return Info
}
</script>

<template>
  <Teleport to="body">
    <div class="pointer-events-none fixed inset-x-0 top-4 z-[1000] flex justify-center px-4 sm:top-5">
      <Transition
        enter-active-class="transition duration-300 ease-out"
        enter-from-class="-translate-y-8 scale-95 opacity-0"
        enter-to-class="translate-y-0 scale-100 opacity-100"
        leave-active-class="transition duration-200 ease-in"
        leave-from-class="translate-y-0 scale-100 opacity-100"
        leave-to-class="-translate-y-6 scale-95 opacity-0"
      >
        <div
          v-if="toast"
          :key="toast.id"
          class="pointer-events-auto flex w-full max-w-[min(560px,calc(100vw-2rem))] items-center gap-3 rounded-full border bg-white/96 px-4 py-3 shadow-[0_24px_70px_rgba(76,40,160,0.22)] backdrop-blur-xl sm:px-5"
          :class="toast.tone === 'success'
            ? 'border-emerald-200 text-emerald-900'
            : toast.tone === 'error'
              ? 'border-rose-200 text-rose-900'
              : 'border-violet-200 text-violet-950'"
          :role="toast.tone === 'error' ? 'alert' : 'status'"
          aria-live="polite"
        >
          <span
            class="grid h-9 w-9 shrink-0 place-items-center rounded-full"
            :class="toast.tone === 'success'
              ? 'bg-emerald-50 text-emerald-600'
              : toast.tone === 'error'
                ? 'bg-rose-50 text-rose-600'
                : 'bg-violet-50 text-violet-700'"
          >
            <component :is="iconForTone(toast.tone)" class="h-4.5 w-4.5" />
          </span>

          <p class="min-w-0 flex-1 text-sm font-semibold leading-5 text-slate-800">
            {{ toast.message }}
          </p>

          <button
            v-if="!toast.persistent"
            type="button"
            class="grid h-8 w-8 shrink-0 place-items-center rounded-full text-slate-400 transition hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400"
            aria-label="Toast schließen"
            @click="dismissAdminToast(toast.id)"
          >
            <X class="h-4 w-4" />
          </button>
        </div>
      </Transition>
    </div>
  </Teleport>
</template>
