<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { t } from '../lib/i18n/index.svelte';
  import { app } from '../lib/app.svelte';

  // A cute emoji cycler shown while a game's dictionary warms for the local move
  // preview (docs/UI_DESIGN.md). One emoji per 500ms tick — 300ms static, then a
  // 200ms clockwise spin with the current emoji fading out and the next fading in —
  // looping through the sequence; the ten emojis span the 5s warm-up cap.
  const EMOJIS = ['🎲', '🤔', '📡', '📀', '💾', '⏳', '🐌', '🙈', '🇷🇺', '✌️'];
  const TICK_MS = 500;
  const SPIN_MS = 200;

  let index = $state(0);
  let timer: ReturnType<typeof setInterval> | null = null;

  onMount(() => {
    timer = setInterval(() => (index = (index + 1) % EMOJIS.length), TICK_MS);
  });
  onDestroy(() => {
    if (timer) clearInterval(timer);
  });

  // A simultaneous fade + clockwise spin used as both the in and out transition on the
  // keyed glyph, so the outgoing and incoming emoji cross-fade in place. Under
  // reduce-motion it degrades to a plain fade.
  function spinFade(_node: Element, { duration = SPIN_MS }: { duration?: number } = {}) {
    const spin = !app.reduceMotion;
    return {
      duration,
      css: (u: number) => (spin ? `opacity:${u};transform:rotate(${(1 - u) * 360}deg)` : `opacity:${u}`),
    };
  }
</script>

<div class="overlay" role="status" aria-live="polite">
  <div class="box">
    <div class="stage">
      {#key index}
        <span class="emoji" in:spinFade out:spinFade>{EMOJIS[index]}</span>
      {/key}
    </div>
    <span class="caption">{t('dict.loading')}</span>
  </div>
</div>

<style>
  .overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    /* Darker than the onboarding scrim — this blocks the board until the dictionary is ready. */
    background: rgba(0, 0, 0, 0.72);
    /* Via the shared --tg-safe-* tokens so the Android WebView < 140 env() bug is covered (app.css). */
    padding: var(--tg-safe-top) var(--tg-safe-right) var(--tg-safe-bottom) var(--tg-safe-left);
  }
  .box {
    display: grid;
    justify-items: center;
    gap: 1rem;
  }
  .stage {
    display: grid;
    place-items: center;
    /* Reserve the glyph box so the caption never shifts as the emoji swaps. */
    width: 4rem;
    height: 4rem;
  }
  .emoji {
    grid-area: 1 / 1;
    font-size: 3.25rem; /* about twice a tab-bar button */
    line-height: 1;
    will-change: transform, opacity;
  }
  .caption {
    color: #fff;
    font-size: 1rem;
    opacity: 0.85;
  }
</style>
