<template>
  <div class="toast-region" aria-live="polite" aria-atomic="false">
    <TransitionGroup name="toast" tag="ul" class="toast-list">
      <li
        v-for="toast in toastStore.toasts"
        :key="toast.id"
        :class="['toast', `toast--${toast.type}`]"
        role="status"
      >
        {{ toast.message }}
        <button class="toast__close" aria-label="Dismiss" @click="toastStore.dismiss(toast.id)">
          ×
        </button>
      </li>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { useToastStore } from '@/stores/toast'
const toastStore = useToastStore()
</script>

<style scoped lang="scss">
.toast-region {
  position: fixed;
  bottom: calc(var(--bottom-nav-height, 64px) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(calc(100vw - var(--space-8)), 420px);
  pointer-events: none;
}

.toast-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  &--info    { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
  &--success { background: #d4edda; color: #155724; }
  &--error   { background: #f8d7da; color: #721c24; }

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1;
    padding: 0 0 0 var(--space-3);
    color: inherit;
    min-height: var(--touch-min);
    min-width: var(--touch-min);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.toast-enter-active,
.toast-leave-active {
  transition: all var(--duration-base) var(--ease-out);
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(12px);
}
</style>
