<script setup lang="ts">
/**
 * Toast 通知宿主。
 * 暴露一个全局 list，由 useToasts() 调用 pushToast 添加。
 */
import { useToasts } from '@/utils/toast';
import AppIcon from './AppIcon.vue';

const { list, removeToast } = useToasts();
</script>

<template>
  <Teleport to="body">
    <div class="toast-host">
      <TransitionGroup name="toast">
        <div v-for="t in list" :key="t.id" :class="['toast', `toast--${t.type}`]">
          <span class="toast__msg">{{ t.message }}</span>
          <button class="toast__close" @click="removeToast(t.id)">
            <AppIcon name="x" :size="14" />
          </button>
        </div>
      </TransitionGroup>
    </div>
  </Teleport>
</template>

<style scoped>
.toast-host {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  min-width: 200px; max-width: 360px;
  font-size: var(--font-sm);
}
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-danger); }
.toast--warning { border-left: 3px solid var(--color-warning); }
.toast--info    { border-left: 3px solid var(--color-accent); }

.toast__msg { flex: 1; }
.toast__close {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.toast__close:hover { color: var(--color-text); background: var(--color-surface); }

.toast-enter-active, .toast-leave-active { transition: all var(--duration-base) var(--ease); }
.toast-enter-from { opacity: 0; transform: translateX(20px); }
.toast-leave-to   { opacity: 0; transform: translateX(20px); }
</style>
