<template>
  <Transition name="welcome">
    <div
      v-if="visible"
      class="fixed top-20 right-4 z-40 max-w-sm p-4 bg-sky-dark/95 backdrop-blur-sm border border-sky-accent/30 rounded-xl shadow-lg"
      role="status"
    >
      <div class="flex items-start gap-3">
        <div class="text-2xl shrink-0" aria-hidden="true">&#x1f577;&#xfe0f;</div>
        <div class="flex-1">
          <p class="font-narrative text-sky-text text-sm mb-3">
            {{ $t('welcome_back.message') }}
          </p>
          <div class="flex gap-2">
            <button
              class="px-4 py-1.5 bg-sky-accent text-sky-dark font-ui text-sm font-semibold rounded-lg hover:opacity-90 transition-opacity"
              @click="dismiss"
            >
              {{ $t('welcome_back.continue') }}
            </button>
            <button
              class="px-4 py-1.5 text-sky-text/70 hover:text-sky-text font-ui text-sm transition-colors"
              @click="restart"
            >
              {{ $t('welcome_back.restart') }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { useProgressionStore } from '~/stores/progression'

const store = useProgressionStore()
const visible = ref(false)

onMounted(() => {
  if (store.hasExistingProgress) {
    visible.value = true
  }
})

function dismiss() {
  visible.value = false
}

function restart() {
  store.$reset()
  visible.value = false
}
</script>

<style scoped>
.welcome-enter-active,
.welcome-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.welcome-enter-from,
.welcome-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-enter-active,
  .welcome-leave-active {
    transition: none;
  }
}
</style>
