<script lang="ts">
  import { fade, fly } from 'svelte/transition';
  import { app, dismissToast } from '../lib/app.svelte';

  const dur = $derived(app.reduceMotion ? 0 : 260);
  // An info bubble owns its whole 3s life through a CSS animation — appear, a ~1s hold at rest,
  // then rise-and-fade — so it takes no Svelte enter/leave transition; an error keeps the fly-in /
  // fade-out dwell behaviour.
  const isInfo = $derived(app.toast?.kind !== 'error');
</script>

{#if app.toast}
  <!-- Re-key on the toast's seq so a fresh message tears the old node down and replays the
       appear cycle: the newest toast cancels the previous one and starts its own. -->
  {#key app.toast.seq}
    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <div
      class="toast {app.toast.kind}"
      class:rise={isInfo && !app.reduceMotion}
      class:rise-reduced={isInfo && app.reduceMotion}
      role="status"
      aria-live="polite"
      onclick={dismissToast}
      in:fly={{ y: isInfo ? 0 : 32, duration: isInfo ? 0 : dur }}
      out:fade={{ duration: isInfo ? 0 : dur }}
    >
      {app.toast.text}
    </div>
  {/key}
{/if}

<style>
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: min(92vw, 420px);
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 50;
    text-align: center;
    cursor: pointer;
  }
  .error {
    border-color: var(--danger);
    color: var(--danger);
  }
  /* An info bubble fades in, holds for ~1s at rest, then drifts up by roughly the tab-bar height
     while fading out, all within 3s; the X centring is preserved across the rise. The 8%/41%
     stops are the appear (~240ms) and the end of the ~1s hold. */
  .toast.rise {
    animation: toast-rise 3s ease-out forwards;
  }
  @keyframes toast-rise {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
    }
    8%,
    41% {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(-56px);
    }
  }
  /* Reduced motion: the same 3s life (appear, ~1s hold, fade), fade only — no upward travel. */
  .toast.rise-reduced {
    animation: toast-rise-reduced 3s ease-out forwards;
  }
  @keyframes toast-rise-reduced {
    0% {
      opacity: 0;
    }
    8%,
    41% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
