import { useState, useEffect, useCallback, useRef } from 'react'
import CurrentWeek from './components/CurrentWeek'
import FullStatistics from './components/FullStatistics'
import ProjectPriorityManager from './components/ProjectPriorityManager'
import WordList from './components/WordList'
import AddWords from './components/AddWords'
import TestConfigSelection from './components/TestConfigSelection'
import AddConfig from './components/AddConfig'
import TestWords from './components/TestWords'
import Integrations from './components/Integrations'

// API endpoints (используем относительные пути, проксирование настроено в nginx/vite)
const CURRENT_WEEK_API_URL = '/playlife-feed'
const FULL_STATISTICS_API_URL = '/d2dc349a-0d13-49b2-a8f0-1ab094bfba9b'

function App() {
  const [activeTab, setActiveTab] = useState('current')
  const [selectedProject, setSelectedProject] = useState(null)
  const [loadedTabs, setLoadedTabs] = useState({
    current: false,
    priorities: false,
    full: false,
    words: false,
    'add-words': false,
    'test-config': false,
    'add-config': false,
    test: false,
    integrations: false,
  })
  
  // Отслеживаем, какие табы уже были загружены (для предотвращения повторных загрузок)
  const [tabsInitialized, setTabsInitialized] = useState({
    current: false,
    priorities: false,
    full: false,
    words: false,
    'add-words': false,
    'test-config': false,
    'add-config': false,
    test: false,
    integrations: false,
  })

  // Параметры для навигации между вкладками
  const [tabParams, setTabParams] = useState({})
  
  // Кеширование данных
  const [currentWeekData, setCurrentWeekData] = useState(null)
  const [fullStatisticsData, setFullStatisticsData] = useState(null)
  
  // Состояния загрузки для каждого таба (показываются только при первой загрузке)
  const [currentWeekLoading, setCurrentWeekLoading] = useState(false)
  const [fullStatisticsLoading, setFullStatisticsLoading] = useState(false)
  const [prioritiesLoading, setPrioritiesLoading] = useState(false)
  
  // Состояния фоновой загрузки (не показываются визуально)
  const [currentWeekBackgroundLoading, setCurrentWeekBackgroundLoading] = useState(false)
  const [fullStatisticsBackgroundLoading, setFullStatisticsBackgroundLoading] = useState(false)
  const [prioritiesBackgroundLoading, setPrioritiesBackgroundLoading] = useState(false)
  
  // Ошибки
  const [currentWeekError, setCurrentWeekError] = useState(null)
  const [fullStatisticsError, setFullStatisticsError] = useState(null)
  const [prioritiesError, setPrioritiesError] = useState(null)
  
  // Состояние для кнопки Refresh (если она есть)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [prioritiesRefreshTrigger, setPrioritiesRefreshTrigger] = useState(0)
  const [testConfigRefreshTrigger, setTestConfigRefreshTrigger] = useState(0)
  const [wordsRefreshTrigger, setWordsRefreshTrigger] = useState(0)

  // Восстанавливаем последний выбранный таб после перезагрузки
  const [isInitialized, setIsInitialized] = useState(false)
  
  useEffect(() => {
    if (isInitialized) return
    
    try {
      const savedTab = window.localStorage?.getItem('activeTab')
      const validTabs = ['current', 'priorities', 'full', 'words', 'add-words', 'test-config', 'add-config', 'test', 'integrations']
      if (savedTab && validTabs.includes(savedTab)) {
        setActiveTab(savedTab)
        setLoadedTabs(prev => ({ ...prev, [savedTab]: true }))
        setIsInitialized(true)
      } else {
        setIsInitialized(true)
      }
    } catch (err) {
      console.warn('Не удалось прочитать активный таб из localStorage', err)
      setIsInitialized(true)
    }
  }, [isInitialized])

  const markTabAsLoaded = useCallback((tab) => {
    setLoadedTabs(prev => (prev[tab] ? prev : { ...prev, [tab]: true }))
  }, [])

  const fetchCurrentWeekData = useCallback(async (isBackground = false) => {
    try {
      if (isBackground) {
        setCurrentWeekBackgroundLoading(true)
      } else {
        setCurrentWeekLoading(true)
      }
      setCurrentWeekError(null)
      console.log('Fetching current week data from:', CURRENT_WEEK_API_URL)
      const response = await fetch(CURRENT_WEEK_API_URL)
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных')
      }
      const jsonData = await response.json()
      // Обрабатываем ответ: приходит массив с одним объектом [{total: ..., projects: [...]}]
      let projects = []
      let total = null
      
      if (Array.isArray(jsonData) && jsonData.length > 0) {
        // Если ответ - массив, проверяем первый элемент
        const firstItem = jsonData[0]
        if (firstItem && typeof firstItem === 'object') {
          // Если первый элемент - объект с полями total и projects
          if (firstItem.projects && Array.isArray(firstItem.projects)) {
            projects = firstItem.projects
            total = firstItem.total !== undefined ? firstItem.total : null
          } else {
            // Если это просто массив проектов
            projects = jsonData
          }
        } else {
          // Если это массив проектов напрямую
          projects = jsonData
        }
      } else if (jsonData && typeof jsonData === 'object' && !Array.isArray(jsonData)) {
        // Если ответ - объект напрямую
        projects = jsonData.projects || jsonData.data || []
        total = jsonData.total !== undefined ? jsonData.total : null
      }
      
      setCurrentWeekData({
        projects: Array.isArray(projects) ? projects : [],
        total: total
      })
    } catch (err) {
      setCurrentWeekError(err.message)
      console.error('Ошибка загрузки данных текущей недели:', err)
    } finally {
      if (isBackground) {
        setCurrentWeekBackgroundLoading(false)
      } else {
        setCurrentWeekLoading(false)
      }
    }
  }, [])

  const fetchFullStatisticsData = useCallback(async (isBackground = false) => {
    try {
      if (isBackground) {
        setFullStatisticsBackgroundLoading(true)
      } else {
        setFullStatisticsLoading(true)
      }
      setFullStatisticsError(null)
      const response = await fetch(FULL_STATISTICS_API_URL)
      if (!response.ok) {
        throw new Error('Ошибка загрузки данных')
      }
      const jsonData = await response.json()
      setFullStatisticsData(jsonData)
    } catch (err) {
      setFullStatisticsError(err.message)
      console.error('Ошибка загрузки данных полной статистики:', err)
    } finally {
      if (isBackground) {
        setFullStatisticsBackgroundLoading(false)
      } else {
        setFullStatisticsLoading(false)
      }
    }
  }, [])
  
  // Используем ref для отслеживания инициализации табов (чтобы избежать лишних пересозданий функции)
  const tabsInitializedRef = useRef({
    current: false,
    priorities: false,
    full: false,
    words: false,
    'add-words': false,
    'test-config': false,
    'add-config': false,
    test: false,
    integrations: false,
  })
  
  // Используем ref для отслеживания кеша (чтобы не зависеть от состояния в useCallback)
  const cacheRef = useRef({
    current: null,
    full: null,
  })
  
  // Обновляем ref при изменении данных
  useEffect(() => {
    cacheRef.current.current = currentWeekData
  }, [currentWeekData])
  
  useEffect(() => {
    cacheRef.current.full = fullStatisticsData
  }, [fullStatisticsData])
  
  // Функция для загрузки данных таба
  const loadTabData = useCallback((tab, isBackground = false) => {
    if (tab === 'current') {
      const hasCache = cacheRef.current.current !== null
      const isInitialized = tabsInitializedRef.current.current
      
      if (!isInitialized) {
        // Первая загрузка таба - загружаем с индикатором
        fetchCurrentWeekData(false)
        tabsInitializedRef.current.current = true
        setTabsInitialized(prev => ({ ...prev, current: true }))
      } else if (hasCache && isBackground) {
        // Возврат на таб с кешем - фоновая загрузка
        fetchCurrentWeekData(true)
      }
      // Если нет кеша и это не первая загрузка - ничего не делаем (данные уже загружаются)
    } else if (tab === 'full') {
      const hasCache = cacheRef.current.full !== null
      const isInitialized = tabsInitializedRef.current.full
      
      if (!isInitialized) {
        // Первая загрузка таба - загружаем с индикатором
        fetchFullStatisticsData(false)
        tabsInitializedRef.current.full = true
        setTabsInitialized(prev => ({ ...prev, full: true }))
      } else if (hasCache && isBackground) {
        // Возврат на таб с кешем - фоновая загрузка
        fetchFullStatisticsData(true)
      }
    } else if (tab === 'priorities') {
      const isInitialized = tabsInitializedRef.current.priorities
      
      if (!isInitialized) {
        // Первая загрузка таба
        setPrioritiesRefreshTrigger(prev => prev + 1)
        tabsInitializedRef.current.priorities = true
        setTabsInitialized(prev => ({ ...prev, priorities: true }))
      } else if (isBackground) {
        // Возврат на таб - фоновая загрузка
        setPrioritiesRefreshTrigger(prev => prev + 1)
      }
    } else if (tab === 'test-config') {
      const isInitialized = tabsInitializedRef.current['test-config']
      
      if (!isInitialized) {
        // Первая загрузка таба
        setTestConfigRefreshTrigger(prev => prev + 1)
        tabsInitializedRef.current['test-config'] = true
        setTabsInitialized(prev => ({ ...prev, 'test-config': true }))
      } else if (isBackground) {
        // Возврат на таб - фоновая загрузка
        setTestConfigRefreshTrigger(prev => prev + 1)
      }
    }
  }, [fetchCurrentWeekData, fetchFullStatisticsData])

  // Функция для обновления всех данных (для кнопки Refresh, если она есть)
  const refreshAllData = useCallback(async () => {
    setIsRefreshing(true)
    setPrioritiesError(null)
    setCurrentWeekError(null)
    setFullStatisticsError(null)
    
    // Триггерим обновление приоритетов
    setPrioritiesRefreshTrigger(prev => prev + 1)
    
    // Загружаем все данные параллельно (не фоново)
    await Promise.all([
      fetchCurrentWeekData(false),
      fetchFullStatisticsData(false),
    ])
    
    setIsRefreshing(false)
  }, [fetchCurrentWeekData, fetchFullStatisticsData])
  
  // Обновляем данные при возвращении экрана в фокус (фоново)
  useEffect(() => {
    const handleFocus = () => {
      if (document.visibilityState === 'visible') {
        // Загружаем данные активного таба фоново
        loadTabData(activeTab, true)
      }
    }
    
    window.addEventListener('focus', handleFocus)
    document.addEventListener('visibilitychange', handleFocus)
    
    return () => {
      window.removeEventListener('focus', handleFocus)
      document.removeEventListener('visibilitychange', handleFocus)
    }
  }, [activeTab, loadTabData])

  const handleProjectClick = (projectName) => {
    setSelectedProject(projectName)
    markTabAsLoaded('full')
    setActiveTab('full')
  }

  const handleTabChange = (tab, params = {}) => {
    if (tab === 'full' && activeTab === 'full') {
      // При повторном клике на "Полная статистика" сбрасываем выбранный проект
      setSelectedProject(null)
    } else if (tab !== activeTab) {
      markTabAsLoaded(tab)
      // Сбрасываем tabParams при переходе с add-config на другой таб
      if (activeTab === 'add-config' && tab !== 'add-config') {
        setTabParams({})
      } else {
        setTabParams(params)
      }
      setActiveTab(tab)
      if (tab === 'current') {
        setSelectedProject(null)
      }
      // Обновляем список слов при возврате из экрана добавления слов
      if (activeTab === 'add-words' && tab === 'words') {
        setWordsRefreshTrigger(prev => prev + 1)
      }
      // Загрузка данных произойдет в useEffect при изменении activeTab
    }
  }

  // Обработчик навигации для компонентов
  const handleNavigate = (tab, params = {}) => {
    handleTabChange(tab, params)
  }

  // Загружаем данные при открытии таба (когда таб становится активным)
  const prevActiveTabRef = useRef(null)
  const lastLoadedTabRef = useRef(null) // Отслеживаем последний загруженный таб, чтобы избежать двойной загрузки
  
  useEffect(() => {
    if (!activeTab || !loadedTabs[activeTab]) return
    
    const isFirstLoad = !tabsInitializedRef.current[activeTab]
    const isReturningToTab = prevActiveTabRef.current !== null && prevActiveTabRef.current !== activeTab
    
    // Проверяем, не загружали ли мы уже этот таб в этом рендере
    const tabKey = `${activeTab}-${isFirstLoad ? 'first' : 'return'}`
    if (lastLoadedTabRef.current === tabKey) {
      return // Уже загружали
    }
    
    if (isFirstLoad) {
      // Первая загрузка таба
      lastLoadedTabRef.current = tabKey
      loadTabData(activeTab, false)
    } else if (isReturningToTab) {
      // Возврат на таб - фоновая загрузка
      lastLoadedTabRef.current = tabKey
      loadTabData(activeTab, true)
    }
    
    prevActiveTabRef.current = activeTab
  }, [activeTab, loadedTabs, loadTabData])
  
  // Определяем общее состояние загрузки и ошибок для кнопки Refresh
  const isAnyLoading = currentWeekLoading || fullStatisticsLoading || prioritiesLoading || isRefreshing
  const hasAnyError = currentWeekError || fullStatisticsError || prioritiesError

  // Сохраняем выбранный таб, чтобы восстановить его после перезагрузки
  useEffect(() => {
    try {
      window.localStorage?.setItem('activeTab', activeTab)
    } catch (err) {
      console.warn('Не удалось сохранить активный таб в localStorage', err)
    }
  }, [activeTab])

  // Определяем, нужно ли скрывать нижнюю панель (для fullscreen экранов)
  const isFullscreenTab = activeTab === 'test' || activeTab === 'add-words' || activeTab === 'add-config'

  return (
    <div className="flex flex-col min-h-screen min-h-dvh">
      <div className={`flex-1 ${isFullscreenTab ? 'pb-0' : 'pb-20'}`}>
        <div className={`max-w-7xl mx-auto ${isFullscreenTab ? 'p-0' : 'p-4 md:p-6'}`}>
          {loadedTabs.current && (
            <div className={activeTab === 'current' ? 'block' : 'hidden'}>
              <CurrentWeek 
                onProjectClick={handleProjectClick}
                data={currentWeekData}
                loading={currentWeekLoading}
                error={currentWeekError}
                onRetry={fetchCurrentWeekData}
                allProjectsData={fullStatisticsData}
                onNavigate={handleNavigate}
              />
            </div>
          )}

          {loadedTabs.priorities && (
            <div className={activeTab === 'priorities' ? 'block' : 'hidden'}>
              <ProjectPriorityManager 
                allProjectsData={fullStatisticsData}
                currentWeekData={currentWeekData}
                shouldLoad={activeTab === 'priorities' && loadedTabs.priorities}
                onLoadingChange={setPrioritiesLoading}
                onErrorChange={setPrioritiesError}
                refreshTrigger={prioritiesRefreshTrigger}
                onNavigate={handleNavigate}
              />
            </div>
          )}

          {loadedTabs.full && (
            <div className={activeTab === 'full' ? 'block' : 'hidden'}>
              <FullStatistics 
                selectedProject={selectedProject} 
                onClearSelection={() => setSelectedProject(null)}
                data={fullStatisticsData}
                loading={fullStatisticsLoading}
                error={fullStatisticsError}
                onRetry={fetchFullStatisticsData}
                currentWeekData={currentWeekData}
                onNavigate={handleNavigate}
              />
            </div>
          )}

          {loadedTabs.words && (
            <div className={activeTab === 'words' ? 'block' : 'hidden'}>
              <WordList 
                onNavigate={handleNavigate}
                dictionaryId={tabParams.dictionaryId}
                isNewDictionary={tabParams.isNewDictionary}
                refreshTrigger={wordsRefreshTrigger}
              />
            </div>
          )}

          {loadedTabs['add-words'] && (
            <div className={activeTab === 'add-words' ? 'block' : 'hidden'}>
              <AddWords 
                onNavigate={handleNavigate}
                dictionaryId={tabParams.dictionaryId}
                dictionaryName={tabParams.dictionaryName}
              />
            </div>
          )}

          {loadedTabs['test-config'] && (
            <div className={activeTab === 'test-config' ? 'block' : 'hidden'}>
              <TestConfigSelection 
                onNavigate={handleNavigate}
                refreshTrigger={testConfigRefreshTrigger}
              />
            </div>
          )}

          {loadedTabs['add-config'] && (
            <div className={activeTab === 'add-config' ? 'block' : 'hidden'}>
              <AddConfig 
                key={tabParams.config?.id || 'new'}
                onNavigate={handleNavigate} 
                editingConfig={tabParams.config}
              />
            </div>
          )}

          {loadedTabs.test && (
            <div className={activeTab === 'test' ? 'block' : 'hidden'}>
              <TestWords 
                onNavigate={handleNavigate}
                wordCount={tabParams.wordCount}
                configId={tabParams.configId}
                maxCards={tabParams.maxCards}
              />
            </div>
          )}

          {loadedTabs.integrations && (
            <div className={activeTab === 'integrations' ? 'block' : 'hidden'}>
              <Integrations onNavigate={handleNavigate} />
            </div>
          )}
        </div>
      </div>
      
      {!isFullscreenTab && (
        <div className="sticky bottom-0 flex bg-white/90 backdrop-blur-md border-t border-white/20 flex-shrink-0 overflow-x-auto shadow-lg z-10 justify-center items-center relative w-full" style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}>
          <div className="flex">
            <button
              onClick={() => handleTabChange('current')}
              className={`min-w-max whitespace-nowrap px-4 py-4 transition-all duration-300 relative ${
                activeTab === 'current'
                  ? 'text-indigo-700 bg-white/50'
                  : 'text-gray-600 hover:text-indigo-600 hover:bg-white/30'
              }`}
              title="Неделя"
            >
              <span className="relative z-10 flex items-center justify-center">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
              </span>
              {activeTab === 'current' && (
                <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
              )}
            </button>
            <button
              onClick={() => handleTabChange('test-config')}
              className={`min-w-max whitespace-nowrap px-4 py-4 transition-all duration-300 relative ${
                activeTab === 'test-config' || activeTab === 'test'
                  ? 'text-indigo-700 bg-white/50'
                  : 'text-gray-600 hover:text-indigo-600 hover:bg-white/30'
              }`}
              title="Тест"
            >
              <span className="relative z-10 flex items-center justify-center">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                  <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
                  <path d="M8 7h6"></path>
                  <path d="M8 11h4"></path>
                </svg>
              </span>
              {(activeTab === 'test-config' || activeTab === 'test') && (
                <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
              )}
            </button>
            <button
              onClick={() => handleTabChange('integrations')}
              className={`min-w-max whitespace-nowrap px-4 py-4 transition-all duration-300 relative ${
                activeTab === 'integrations'
                  ? 'text-indigo-700 bg-white/50'
                  : 'text-gray-600 hover:text-indigo-600 hover:bg-white/30'
              }`}
              title="Интеграции"
            >
              <span className="relative z-10 flex items-center justify-center">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                  <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                  <line x1="12" y1="22.08" x2="12" y2="12"></line>
                </svg>
              </span>
              {activeTab === 'integrations' && (
                <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
              )}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

export default App