<script lang="ts">
  import type { ToastSeverity } from "$lib/types/app";
  // Renders the toast stack in the bottom-right of the viewport. Mount once
  // at the app root (in +layout.svelte). Reads from the global toasts store.
  //
  // Severity colour mapping uses the brand palette via CSS variables already
  // defined in app.css — no inline literals.
  //
  // Honours prefers-reduced-motion via the existing :root[data-reduce-motion]
  // attribute that preferences.svelte.js sets.
  import { toasts } from '$lib/stores/toasts.svelte.js';
  import { X } from 'lucide-svelte';

  function severityClass(severity: ToastSeverity) {
    switch (severity) {
      case 'success': return 'toast-success';
      case 'info':    return 'toast-info';
      case 'warn':    return 'toast-warn';
      case 'error':   return 'toast-error';
      default:        return 'toast-info';
    }
  }
</script>

<div class="toast-viewport" aria-live="polite" aria-atomic="false">
  {#each toasts.items as toast (toast.id)}
    <div
      class="toast {severityClass(toast.severity)}"
      role={toast.severity === 'error' ? 'alert' : 'status'}
    >
      <div class="toast-body">
        <div class="toast-title">{toast.title}</div>
        {#if toast.body}
          <div class="toast-msg">{toast.body}</div>
        {/if}
      </div>
      <button
        class="toast-close"
        aria-label="Dismiss"
        onclick={() => toasts.dismiss(toast.id)}
        type="button"
      >
        <X size={14} aria-hidden="true" />
      </button>
    </div>
  {/each}
</div>

<style>
  .toast-viewport {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 9999;
    max-width: min(28rem, calc(100vw - 2rem));
    pointer-events: none;
  }

  .toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: var(--color-bg-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    /* Slide in from right; honours reduce-motion via the existing class
       that preferences.svelte.js applies to <html>. */
    animation: toast-slide-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  :global(html.reduce-motion) .toast { animation: none; }

  @keyframes toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  /* Severity styling tints the whole surface and border in the matching
     semantic colour. Brand-aligned: no side stripes, no decorative
     accents. The body text and dismiss button still read against the
     tinted background because the tints are at low alpha. */
  .toast-info,
  .toast-success {
    background: color-mix(in oklch, var(--color-success) 10%, var(--color-bg-card));
    border-color: color-mix(in oklch, var(--color-success) 35%, var(--color-border));
  }
  .toast-warn {
    background: color-mix(in oklch, var(--color-warning) 10%, var(--color-bg-card));
    border-color: color-mix(in oklch, var(--color-warning) 35%, var(--color-border));
  }
  .toast-error {
    background: color-mix(in oklch, var(--color-danger) 10%, var(--color-bg-card));
    border-color: color-mix(in oklch, var(--color-danger) 35%, var(--color-border));
  }

  .toast-body {
    flex: 1;
    min-width: 0;
  }

  .toast-title {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    word-wrap: break-word;
  }

  .toast-msg {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
    word-wrap: break-word;
  }

  .toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 100ms, color 100ms;
  }
  .toast-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #fff);
  }
  .toast-close:focus-visible {
    outline: 2px solid var(--ember, #c87144);
    outline-offset: 2px;
  }
</style>
