<script setup lang="ts">
import 'vue-sonner/style.css';
import { Toaster as ShadcnSonner } from '@/components/core/sonner';
import type { UiSnackbarProps } from './types';

defineOptions({
  name: 'UiSnackbar',
});

const props = withDefaults(defineProps<UiSnackbarProps>(), {
  containerAriaLabel: 'Notifications',
});
</script>

<template>
  <ShadcnSonner v-bind="props" />
</template>

<style scoped>
/*
   * Snackbar visual variants per Figma "Spark Design System / Snackbar".
   *
   * Tokens follow Figma exactly. They resolve at `:root`/`html.dark` via
   * `@aleph-alpha/config-css`'s Spark preset (wired in via `defineUiLibraryConfig`),
   * so light/dark switching cascades for free.
   *
   * `:global()` is required because the toast list is portalled outside
   * the component's scope (rooted at document level via `position: fixed`),
   * so scoped selectors can't reach the rendered DOM. Sonner's
   * `toastOptions.classes` API exposes only a few slots (no per-type×state
   * combinations, no state pseudos), which is why the per-variant colour,
   * action-button and close-button state rules below have to be selector-based.
   *
   * Hierarchy mapping:
   *   - "High" -> `richColors: true`  (vivid background)
   *   - "Low"  -> `richColors: false` (muted/soft background)
   *
   * State mapping (per Figma "Default / Hover / Focused"):
   *   - Default  -> no pseudo-class
   *   - Hover    -> :hover
   *   - Focused  -> :focus-visible
   */

/* Container shape (all variants) — Figma: padding L L L XL, gap M, banner-and-snackbars shadow */
:global([data-sonner-toaster] [data-sonner-toast][data-styled='true']) {
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-l) var(--spacing-xl);
  gap: var(--spacing-m);
  /* No Spark token at exactly 4.075px; matches Figma export literally */
  border-radius: 4.075px;
  box-shadow: var(--shadow-banner-and-snackbars);
}

/*
   * Matrix overrides (used by the AllVariants Storybook story).
   *
   * Each cell mounts a real `<UiSnackbar />` and dispatches one toast on
   * mount. The toast list anchors `<ol>` with `position: fixed` (default
   * bottom-right) and individual toasts with `position: absolute`. Inside
   * `.snackbar-matrix` we want them inline within the grid cell, so reset
   * the layout to normal flow.
   */
:global(.snackbar-matrix [data-sonner-toaster]) {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  transform: none !important;
}
:global(.snackbar-matrix [data-sonner-toast]) {
  position: relative !important;
  transform: none !important;
}

/* Close button: Figma renders the X inline at the right end, after the
     action button. The default markup floats it as a circular badge in a
     corner via `position: absolute` + transform. Override to inline. */
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-styled='true']
    [data-close-button]
) {
  position: static;
  order: 999;
  width: var(--spacing-xxl);
  height: var(--spacing-xxl);
  padding: 0;
  border: none;
  /* Figma: 4px (no exact Spark token; --radius-sm is 2px in this preset) */
  border-radius: 4px;
  background: transparent;
  color: inherit;
  transform: none;
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-styled='true']
    [data-close-button]:hover
) {
  /* No DS token for this hover overlay — keep literal */
  background: rgba(255, 255, 255, 0.1);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-styled='true']
    [data-close-button]:focus-visible
) {
  outline: 2px solid var(--core-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* HIGH hierarchy (richColors=true) */
/* Error High */
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='error']
) {
  background: var(--semantic-bg-error);
  border: 1px solid var(--semantic-border-error);
  color: var(--semantic-content-error);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='error']
    [data-button]
) {
  background: var(--semantic-bg-error-action);
  color: var(--semantic-content-error);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='error']
    [data-button]:hover
) {
  background: var(--semantic-bg-error-action-hover);
}

/* Info High */
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='info']
) {
  background: var(--semantic-bg-info);
  border: 1px solid var(--semantic-border-info);
  color: var(--semantic-content-info);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='info']
    [data-button]
) {
  background: var(--semantic-bg-info-action);
  color: var(--semantic-content-info);
}

/* Warning High */
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='warning']
) {
  background: var(--semantic-bg-warning);
  border: 1px solid var(--semantic-border-warning);
  color: var(--semantic-content-warning);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='warning']
    [data-button]
) {
  background: var(--semantic-bg-warning-action);
  color: var(--semantic-content-warning);
}

/* Success High */
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='success']
) {
  background: var(--semantic-bg-success);
  border: 1px solid var(--semantic-border-success);
  color: var(--semantic-content-success);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='success']
    [data-button]
) {
  background: var(--semantic-bg-success-action);
  color: var(--semantic-content-success);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast][data-rich-colors='true'][data-type='success']
    [data-button]:hover
) {
  background: var(--semantic-bg-success-action-hover);
}

/* LOW hierarchy (richColors=false) */
/* Error Low */
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='error']
) {
  background: var(--semantic-bg-error-soft);
  border: 1px solid var(--semantic-border-error-soft);
  color: var(--semantic-content-error-soft);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='error']
    [data-button]
) {
  background: var(--semantic-bg-error-soft-action);
  color: var(--semantic-content-error-soft);
}

/* Info Low */
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='info']
) {
  background: var(--semantic-bg-info-soft);
  border: 1px solid var(--semantic-border-info-soft);
  color: var(--semantic-content-info-soft);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='info']
    [data-button]
) {
  background: var(--semantic-bg-info-soft-action);
  color: var(--semantic-content-info-soft);
}

/* Warning Low */
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='warning']
) {
  background: var(--semantic-bg-warning-soft);
  border: 1px solid var(--semantic-border-warning-soft);
  color: var(--semantic-content-warning-soft);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='warning']
    [data-button]
) {
  background: var(--semantic-bg-warning-soft-action);
  color: var(--semantic-content-warning-soft);
}

/* Success Low */
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='success']
) {
  background: var(--semantic-bg-success-soft);
  border: 1px solid var(--semantic-border-success-soft);
  color: var(--semantic-content-success-soft);
}
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])[data-type='success']
    [data-button]
) {
  background: var(--semantic-bg-success-soft-action);
  color: var(--semantic-content-success-soft);
}

/* Focus state on action button (Figma "Focused") */
:global([data-sonner-toaster] [data-sonner-toast] [data-button]:focus-visible) {
  outline: 2px solid var(--core-border-focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Hover state for Low hierarchy action button (Figma shows ~80% opacity) */
:global(
  [data-sonner-toaster]
    [data-sonner-toast]:not([data-rich-colors='true'])
    [data-button]:hover
) {
  opacity: 0.8;
}
</style>
