'use client';

import { useEffect, useState } from 'react';
import { Center, Spinner, Text, VStack } from '@chakra-ui/react';
import { useTelegramWebApp } from '../hooks/useTelegramWebApp';

export default function MainApp() {
  const [isMounted, setIsMounted] = useState(false);
  const { webApp, error, isLoading } = useTelegramWebApp();

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted || isLoading) {
    return (
      <Center h="100vh">
        <Spinner size="xl" />
      </Center>
    );
  }

  if (error) {
    return (
      <Center h="100vh">
        <VStack>
          <Text color="red.500">Ошибка инициализации</Text>
          <Text>{error.message}</Text>
        </VStack>
      </Center>
    );
  }

  if (!webApp) {
    return (
      <Center h="100vh">
        <Text>WebApp не инициализирован</Text>
      </Center>
    );
  }

  return (
    <Center h="100vh">
      <Text>Добро пожаловать, {webApp.initDataUnsafe.user?.first_name}!</Text>
    </Center>
  );
}