<script setup lang="ts">
import { onMounted, ref, computed } from "vue"
import router from "@/router"; // если используешь другой SDK, импорт может отличаться

// необязательно делать реактивным, но удобно для шаблона
const tgApp = ref(window.Telegram.WebApp)
const tgData = ref(tgApp.value.initDataUnsafe)

// какие-то удобные вычисления для UI
const userId = computed(() => tgApp.value?.user?.id?.toString() ?? "")
const username = computed(() => tgApp.value?.user?.username ?? "")
const firstName = computed(() => tgData.value?.user?.first_name ?? "")

onMounted(() => {
  // сообщаем Telegram WebApp, что UI готов
  tgData.ready()

  // если есть данные пользователя — положим что-то в localStorage
  if (tgData.value.user?.id != null) {
    localStorage.setItem("token", tgData.value.user.id.toString())
  } else {
    localStorage.setItem("token", "123")
  }
  // router.push('/')
})
</script>

<template>
  <div class="p-4">
    <p>Telegram user id: {{ userId || "—" }}</p>
    <p>Username: {{ username || "—" }}</p>
    <p>First name: {{ firstName || "—" }}</p>
  </div>
</template>

<style scoped>
</style>