nakama/frontend/src/App.jsx

import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom'
import { useState, useEffect, useRef } from 'react'
import { initTelegramApp } from './utils/telegram'
import { verifyAuth, verifySession } from './utils/api'
import { initTheme } from './utils/theme'
import Layout from './components/Layout'
import Feed from './pages/Feed'
import Search from './pages/Search'
import Notifications from './pages/Notifications'
import Profile from './pages/Profile'
import UserProfile from './pages/UserProfile'
import CommentsPage from './pages/CommentsPage'
import PostMenuPage from './pages/PostMenuPage'
import './styles/index.css'

function AppContent() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [showLogin, setShowLogin] = useState(false)
  const navigate = useNavigate()
  const startParamProcessed = useRef(false) // Флаг для обработки startParam только один раз
  const initAppCalled = useRef(false) // Флаг чтобы initApp вызывался только один раз

  useEffect(() => {
    // Инициализировать тему только один раз
    initTheme()
    
    // Инициализировать приложение только если еще не было вызвано
    if (!initAppCalled.current) {
      initAppCalled.current = true
      initApp()
    }
  }, [])

  const initApp = async () => {
    try {
      // Инициализация Telegram Web App
      initTelegramApp()
      
      // Проверить наличие Telegram Web App API
      const tg = window.Telegram?.WebApp
      
      // Дать время на полную инициализацию Telegram Web App
      await new Promise(resolve => setTimeout(resolve, 300))
      
      // Проверить наличие initData (главный индикатор что мы в Telegram)
      const initData = tg?.initData || ''
      
      if (initData) {
        // Есть initData - пробуем авторизоваться через API
        try {
          const userData = await verifyAuth()
          
          // Сохранить сессию для будущих загрузок
          localStorage.setItem('nakama_user', JSON.stringify(userData))
          localStorage.setItem('nakama_auth_type', 'telegram')
          
          // КРИТИЧНО: Сначала установить loading в false, потом user
          // Это предотвращает бесконечную загрузку
          setLoading(false)
          setUser(userData)
          
          // Обработать параметр start из Telegram (только один раз)
          if (!startParamProcessed.current && tg?.startParam?.startsWith('post_')) {
            startParamProcessed.current = true // Пометить как обработанный
            const postId = tg.startParam.replace('post_', '')
            // Использовать navigate вместо window.location.href (не вызывает перезагрузку)
            // Задержка чтобы компонент успел отрендериться с user
            setTimeout(() => {
              navigate(`/feed?post=${postId}`, { replace: true })
            }, 200)
          }
          return
        } catch (authError) {
          console.error('Ошибка авторизации через API:', authError)
          // Если авторизация не удалась, проверяем сохраненную сессию
          const savedUser = localStorage.getItem('nakama_user')
          if (savedUser) {
            try {
              const userData = JSON.parse(savedUser)
              // Проверить что сессия еще актуальна (можно добавить проверку времени)
              setUser(userData)
              setLoading(false)
              return
            } catch (e) {
              console.error('Ошибка восстановления сессии:', e)
              localStorage.removeItem('nakama_user')
              localStorage.removeItem('nakama_auth_type')
            }
          }
          // Если нет сохраненной сессии, показываем Login Widget
          setShowLogin(true)
          setLoading(false)
          return
        }
      }
      
      // Если нет initData, проверяем сохраненную сессию OAuth
      const savedUser = localStorage.getItem('nakama_user')
      const authType = localStorage.getItem('nakama_auth_type')
      
      if (savedUser && authType === 'oauth') {
        try {
          const userData = JSON.parse(savedUser)
          
          // Проверить сессию на сервере (обновить данные пользователя)
          try {
            const freshUserData = await verifySession(userData.telegramId)
            // Обновить сохраненную сессию
            localStorage.setItem('nakama_user', JSON.stringify(freshUserData))
            setUser(freshUserData)
          } catch (sessionError) {
            console.error('Ошибка проверки сессии:', sessionError)
            // Если проверка не удалась, использовать сохраненные данные
            setUser(userData)
          }
          
          setLoading(false)
          return
        } catch (e) {
          console.error('Ошибка восстановления сессии:', e)
          localStorage.removeItem('nakama_user')
          localStorage.removeItem('nakama_auth_type')
        }
      }
      
      // Если нет сохраненной сессии и нет initData, показываем Login Widget
      setShowLogin(true)
      setLoading(false)
    } catch (err) {
      console.error('Ошибка инициализации:', err)
      setError(err.message)
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        flexDirection: 'column',
        gap: '16px'
      }}>
        <div className="spinner" />
        <p style={{ color: 'var(--text-secondary)' }}>Загрузка...</p>
      </div>
    )
  }

  // Показать Login Widget если нет авторизации
  if (showLogin) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        padding: '24px',
        textAlign: 'center',
        flexDirection: 'column',
        gap: '16px'
      }}>
        <h2 style={{ color: 'var(--text-primary)', margin: 0 }}>Используйте официальный клиент Telegram</h2>
        <p style={{ color: 'var(--text-secondary)', margin: 0, maxWidth: '360px', lineHeight: 1.5 }}>
          Для доступа к NakamaHost откройте бота в официальном приложении Telegram. 
          Если вы уже используете официальный клиент и видите это сообщение, 
          пожалуйста сообщите об ошибке в&nbsp;
          <a href="https://t.me/NakamaReportbot" style={{ color: 'var(--text-primary)', textDecoration: 'underline' }}>
            @NakamaReportbot
          </a>.
        </p>
        <button
          onClick={() => window.location.reload()}
          style={{
            padding: '12px 24px',
            borderRadius: '12px',
            border: 'none',
            background: 'var(--bg-primary)',
            color: 'var(--text-primary)',
            fontSize: '16px',
            cursor: 'pointer'
          }}
        >
          Перезагрузить
        </button>
      </div>
    )
  }

  if (error) {
    return (
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        flexDirection: 'column',
        gap: '16px',
        padding: '20px'
      }}>
        <p style={{ color: 'var(--text-primary)', textAlign: 'center' }}>
          Ошибка загрузки приложения
        </p>
        <p style={{ color: 'var(--text-secondary)', textAlign: 'center' }}>
          {error}
        </p>
        <button 
          onClick={() => {
            setError(null)
            setShowLogin(true)
          }}
          style={{
            padding: '12px 24px',
            borderRadius: '12px',
            background: 'var(--button-accent)',
            color: 'white',
            border: 'none',
            cursor: 'pointer',
            fontSize: '16px'
          }}
        >
          Попробовать снова
        </button>
      </div>
    )
  }

  if (!user) {
    return null
  }

  return (
    <Routes>
      <Route path="/" element={<Layout user={user} />}>
        <Route index element={<Navigate to="/feed" replace />} />
        <Route path="feed" element={<Feed user={user} />} />
        <Route path="search" element={<Search user={user} />} />
        <Route path="notifications" element={<Notifications user={user} />} />
        <Route path="profile" element={<Profile user={user} setUser={setUser} />} />
        <Route path="user/:id" element={<UserProfile currentUser={user} />} />
        <Route path="post/:postId/comments" element={<CommentsPage user={user} />} />
        <Route path="post/:postId/menu" element={<PostMenuPage user={user} />} />
      </Route>
    </Routes>
  )
}

function App() {
  return (
    <BrowserRouter>
      <AppContent />
    </BrowserRouter>
  )
}

export default App