<template>
  <div class="notification-container">
    <transition-group name="notification-list" tag="div">
      <div
        v-for="notification in store.notifications"
        :key="notification.id"
        :class="['alert', `alert-${notification.type}`]"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="alert-content">
          <span class="icon" v-if="getIcon(notification.type)">
            <!-- Basic SVG Icons - replace with your preferred icon set or library -->
            <svg v-if="notification.type === 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
            <svg v-if="notification.type === 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
            <svg v-if="notification.type === 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
            <svg v-if="notification.type === 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
          </span>
          <span class="notification-message">{{ notification.message }}</span>
        </div>
        <button
          @click="store.removeNotification(notification.id)"
          class="alert-close-btn"
          aria-label="Close notification"
        >
          <span class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg></span>
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { useNotificationStore, type Notification } from '@/stores/notifications';

const store = useNotificationStore();

const getIcon = (type: Notification['type']) => {
  // This function now primarily determines if an icon should be shown,
  // as valerie-ui might handle specific icons via CSS or a global icon system.
  // For this example, we're still providing SVGs directly.
  // valerie-ui .icon class will style the SVG size/alignment.
  const iconMap = {
    success: true,
    error: true,
    warning: true,
    info: true,
  };
  return iconMap[type];
};
</script>

<style lang="scss" scoped>
// Overriding valerie-ui defaults or adding custom positioning
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999; // Ensure it's above other valerie-ui components if necessary
  width: 350px; // Adjusted width to better fit valerie-ui alert style
  display: flex;
  flex-direction: column;
  gap: 12px;
}

// Use valerie-ui's .alert class for base styling.
// Specific type styles (alert-success, alert-error, etc.) are handled by valerie-ui.scss
// We can add overrides here if needed.
.alert {
  // valerie-ui .alert already has padding, border, shadow, etc.
  // We might want to adjust margin if the gap from .notification-container isn't enough
  // or if we want to override something specific from valerie-ui's .alert
  // For example, if valerie-ui doesn't set margin-bottom on .alert:
  // margin-bottom: 0; // Reset if valerie-ui adds margin, rely on gap.

  // Override icon color if valerie-ui doesn't color them by alert type,
  // or if our SVGs need specific coloring not handled by `fill="currentColor"` and parent color.
  // valerie-ui .alert-<type> should handle border-left-color.
  // valerie-ui .icon class is generic, we might need to scope it.
  .alert-content > .icon {
    // valerie-ui uses .icon class. Check valerie-ui.scss for its styling.
    // Assuming valerie-ui's .icon class handles sizing and alignment.
    // We need to ensure our SVG icons get the correct color based on notification type.
    // valerie-ui .alert-<type> typically sets text color, which currentColor should pick up.
    // If not, add specific color rules:
    // Example:
    // &.alert-success .icon { color: var(--success); } // If --success is defined in valerie or globally
    // &.alert-error .icon { color: var(--danger); }
    // &.alert-warning .icon { color: var(--warning); }
    // &.alert-info .icon { color: var(--secondary-accent); } // Match valerie-ui's alert-info

    // The SVGs provided use fill="currentColor", so they should inherit from the parent.
    // The .alert-<type> classes in valerie-ui.scss set border-left-color but not necessarily text or icon color.
    // Let's ensure icons match the left border color for consistency, if not already handled.
  }

  // If valerie-ui .alert-content needs adjustment
  .alert-content {
    // display: flex; align-items: center; flex-grow: 1; is usually in valerie's .alert-content
    .notification-message {
      font-size: 0.95rem; // Match valerie-ui's typical text size or adjust
      line-height: 1.5;
      margin-left: 0.5em; // Space between icon and message if icon exists
    }
  }

  // Style for the close button based on valerie-ui's .alert-close-btn
  .alert-close-btn {
    // valerie-ui's .alert-close-btn should handle most styling.
    // We might need to adjust padding or alignment if it doesn't look right
    // with our custom notification container.
    // The provided SVG for close button is wrapped in a span.icon, let's style that.
    .icon {
      display: inline-flex; // Ensure icon is aligned
      align-items: center;
      justify-content: center;
      // valerie-ui's .alert-close-btn might already style the icon color on hover.
    }
  }
}


// Transitions for the list - these should still work fine.
// Ensure the transitions target the .alert class now.
.notification-list-enter-active,
.notification-list-leave-active {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.notification-list-enter-from,
.notification-list-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.notification-list-leave-active {
  position: absolute;
  // Ensure width calculation is correct if items have variable width or valerie-ui adds padding/margin
  // This might need to be calc(100%) if .alert is full width of its slot in notification-container.
  // Or if valerie-ui .alert has its own padding that affects its outer width.
  // For now, assuming .alert takes the width of the slot provided by transition-group.
  width: 100%; // Re-evaluate if needed after valerie styling.
}
</style>