Первоначальный коммит

Co-authored-by: Cursor <cursoragent@cursor.com>

play-life-web/src/components/FitbitIntegration.jsx

@@ -0,0 +1,528 @@
+import React, { useState, useEffect } from 'react'
+import { useAuth } from './auth/AuthContext'
+import LoadingError from './LoadingError'
+import Toast from './Toast'
+import './Integrations.css'
+
+function FitbitIntegration({ onNavigate }) {
+  const { authFetch } = useAuth()
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [message, setMessage] = useState('')
+  const [oauthError, setOauthError] = useState('')
+  const [toastMessage, setToastMessage] = useState(null)
+  const [isLoadingError, setIsLoadingError] = useState(false)
+  const [goals, setGoals] = useState({
+    steps: { min: 8000, max: 10000 },
+    floors: { min: 8, max: 10 },
+    azm: { min: 22, max: 44 }
+  })
+  const [stats, setStats] = useState({
+    steps: { value: 0, goal: { min: 8000, max: 10000 } },
+    floors: { value: 0, goal: { min: 8, max: 10 } },
+    azm: { value: 0, goal: { min: 22, max: 44 } }
+  })
+  const [isEditingGoals, setIsEditingGoals] = useState(false)
+  const [editedGoals, setEditedGoals] = useState(goals)
+  const [syncing, setSyncing] = useState(false)
+
+  // Сохраняем OAuth статус из URL в ref, чтобы проверить после checkStatus
+  const oauthStatusRef = React.useRef(null)
+
+  useEffect(() => {
+    // Проверяем URL параметры для сообщений ДО вызова checkStatus
+    const params = new URLSearchParams(window.location.search)
+    const integration = params.get('integration')
+    const status = params.get('status')
+    if (integration === 'fitbit') {
+      oauthStatusRef.current = status
+      if (status === 'connected') {
+        setMessage('Fitbit успешно подключен!')
+      } else if (status === 'error') {
+        const errorMsg = params.get('message') || 'unknown_error'
+        const errorMessages = {
+          'config_error': 'Ошибка конфигурации сервера. Обратитесь к администратору.',
+          'invalid_state': 'Недействительный токен авторизации. Попробуйте ещё раз.',
+          'no_code': 'Не получен код авторизации от Fitbit. Попробуйте ещё раз.',
+          'token_exchange_failed': 'Не удалось обменять код на токен. Проверьте настройки Fitbit приложения.',
+          'user_info_failed': 'Не удалось получить информацию о пользователе Fitbit.',
+          'db_error': 'Ошибка сохранения данных. Попробуйте ещё раз.',
+          'unknown_error': 'Произошла неизвестная ошибка при подключении Fitbit.'
+        }
+        setOauthError(errorMessages[errorMsg] || `Ошибка: ${errorMsg}`)
+      }
+      // Очищаем URL параметры
+      window.history.replaceState({}, '', window.location.pathname)
+    }
+    checkStatus()
+  }, [])
+
+  useEffect(() => {
+    if (connected) {
+      loadStats()
+    }
+  }, [connected])
+
+  const checkStatus = async () => {
+    try {
+      setLoading(true)
+      setError('')
+      const response = await authFetch('/api/integrations/fitbit/status')
+      if (!response.ok) {
+        throw new Error('Ошибка при проверке статуса')
+      }
+      const data = await response.json()
+      setConnected(data.connected || false)
+      if (data.connected && data.goals) {
+        setGoals(data.goals)
+        setEditedGoals(data.goals)
+      }
+      // Если OAuth вернул status=connected, но бэкенд не подтвердил подключение
+      if (oauthStatusRef.current === 'connected' && !data.connected) {
+        setOauthError('Авторизация в Fitbit прошла, но подключение не сохранилось. Попробуйте ещё раз или обратитесь к администратору.')
+        setMessage('')
+      }
+      oauthStatusRef.current = null
+    } catch (error) {
+      console.error('Error checking status:', error)
+      setError(error.message || 'Не удалось проверить статус')
+      setIsLoadingError(true)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadStats = async () => {
+    try {
+      const response = await authFetch('/api/integrations/fitbit/stats')
+      if (!response.ok) {
+        throw new Error('Ошибка при загрузке статистики')
+      }
+      const data = await response.json()
+      // Нормализуем данные, чтобы избежать undefined
+      const defaultGoal = { min: 0, max: 0 }
+      const normalizedStats = {
+        steps: {
+          value: data.steps?.value ?? 0,
+          goal: data.steps?.goal ?? defaultGoal
+        },
+        floors: {
+          value: data.floors?.value ?? 0,
+          goal: data.floors?.goal ?? defaultGoal
+        },
+        azm: {
+          value: data.azm?.value ?? 0,
+          goal: data.azm?.goal ?? defaultGoal
+        }
+      }
+      setStats(normalizedStats)
+      // Обновляем цели из ответа
+      if (data.steps?.goal) {
+        setGoals({
+          steps: data.steps.goal,
+          floors: data.floors?.goal ?? defaultGoal,
+          azm: data.azm?.goal ?? defaultGoal
+        })
+        setEditedGoals({
+          steps: data.steps.goal,
+          floors: data.floors?.goal ?? defaultGoal,
+          azm: data.azm?.goal ?? defaultGoal
+        })
+      }
+    } catch (error) {
+      console.error('Error loading stats:', error)
+      // Не показываем ошибку, просто не обновляем статистику
+    }
+  }
+
+  const handleConnect = async () => {
+    try {
+      setLoading(true)
+      setError('')
+      const response = await authFetch('/api/integrations/fitbit/oauth/connect')
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Ошибка при подключении Fitbit')
+      }
+      const data = await response.json()
+      if (data.auth_url) {
+        window.location.href = data.auth_url
+      } else {
+        throw new Error('URL для авторизации не получен')
+      }
+    } catch (error) {
+      console.error('Error connecting Fitbit:', error)
+      setToastMessage({ text: error.message || 'Не удалось подключить Fitbit', type: 'error' })
+      setLoading(false)
+    }
+  }
+
+  const handleDisconnect = async () => {
+    if (!window.confirm('Вы уверены, что хотите отключить Fitbit?')) {
+      return
+    }
+
+    try {
+      setLoading(true)
+      setError('')
+      const response = await authFetch('/api/integrations/fitbit/disconnect', {
+        method: 'DELETE',
+      })
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Ошибка при отключении')
+      }
+      setConnected(false)
+      setStats({
+        steps: { value: 0, goal: { min: 8000, max: 10000 } },
+        floors: { value: 0, goal: { min: 8, max: 10 } },
+        azm: { value: 0, goal: { min: 22, max: 44 } }
+      })
+      setToastMessage({ text: 'Fitbit отключен', type: 'success' })
+    } catch (error) {
+      console.error('Error disconnecting:', error)
+      setToastMessage({ text: error.message || 'Не удалось отключить Fitbit', type: 'error' })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSync = async () => {
+    try {
+      setSyncing(true)
+      const response = await authFetch('/api/integrations/fitbit/sync', {
+        method: 'POST',
+      })
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Ошибка при синхронизации')
+      }
+      setToastMessage({ text: 'Данные синхронизированы', type: 'success' })
+      await loadStats()
+    } catch (error) {
+      console.error('Error syncing:', error)
+      setToastMessage({ text: error.message || 'Не удалось синхронизировать данные', type: 'error' })
+    } finally {
+      setSyncing(false)
+    }
+  }
+
+  const handleSaveGoals = async () => {
+    try {
+      const response = await authFetch('/api/integrations/fitbit/goals', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          steps: editedGoals.steps,
+          floors: editedGoals.floors,
+          azm: editedGoals.azm,
+        }),
+      })
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}))
+        throw new Error(errorData.error || 'Ошибка при сохранении целей')
+      }
+      setGoals(editedGoals)
+      setIsEditingGoals(false)
+      setToastMessage({ text: 'Цели сохранены', type: 'success' })
+      await loadStats()
+    } catch (error) {
+      console.error('Error saving goals:', error)
+      setToastMessage({ text: error.message || 'Не удалось сохранить цели', type: 'error' })
+    }
+  }
+
+  const handleCancelEdit = () => {
+    setEditedGoals(goals)
+    setIsEditingGoals(false)
+  }
+
+  const getProgressPercent = (value, min, max) => {
+    if (value >= max) return 100
+    if (value <= min) return (value / min) * 50
+    return 50 + ((value - min) / (max - min)) * 50
+  }
+
+  const getProgressColor = (value, min, max) => {
+    if (value >= max) return 'text-green-600'
+    if (value >= min) return 'text-blue-600'
+    return 'text-gray-600'
+  }
+
+  if (isLoadingError && !loading) {
+    return (
+      <div className="p-4 md:p-6">
+        <button className="close-x-button" onClick={() => onNavigate?.('profile')} title="Закрыть">
+          ✕
+        </button>
+        <LoadingError onRetry={checkStatus} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 md:p-6">
+      <button className="close-x-button" onClick={() => onNavigate?.('profile')} title="Закрыть">
+        ✕
+      </button>
+
+      <h1 className="text-2xl font-bold mb-6">Fitbit интеграция</h1>
+
+      {loading ? (
+        <div className="fixed inset-0 flex justify-center items-center">
+          <div className="flex flex-col items-center">
+            <div className="w-12 h-12 border-4 border-indigo-200 border-t-indigo-600 rounded-full animate-spin mb-4"></div>
+            <div className="text-gray-600 font-medium">Загрузка...</div>
+          </div>
+        </div>
+      ) : connected ? (
+        <div>
+          {message && (
+            <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+              <p className="text-green-800">{message}</p>
+            </div>
+          )}
+          {oauthError && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+              <p className="text-red-800">{oauthError}</p>
+              <button onClick={() => setOauthError('')} className="text-red-600 text-sm underline mt-1">Скрыть</button>
+            </div>
+          )}
+
+          {/* Статистика */}
+          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Статистика за сегодня</h2>
+              <button
+                onClick={handleSync}
+                disabled={syncing}
+                className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+              >
+                {syncing ? 'Синхронизация...' : 'Синхронизировать'}
+              </button>
+            </div>
+
+            {/* Шаги */}
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-gray-700 font-medium">Шаги</span>
+                <span className={`font-bold ${getProgressColor(stats.steps?.value ?? 0, stats.steps?.goal?.min ?? 0, stats.steps?.goal?.max ?? 0)}`}>
+                  {(stats.steps?.value ?? 0).toLocaleString()} / {stats.steps?.goal?.min ?? 0}-{stats.steps?.goal?.max ?? 0}
+                </span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3">
+                <div
+                  className="bg-indigo-600 h-3 rounded-full transition-all"
+                  style={{ width: `${Math.min(100, getProgressPercent(stats.steps?.value ?? 0, stats.steps?.goal?.min ?? 0, stats.steps?.goal?.max ?? 0))}%` }}
+                ></div>
+              </div>
+            </div>
+
+            {/* Этажи */}
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-gray-700 font-medium">Этажи</span>
+                <span className={`font-bold ${getProgressColor(stats.floors?.value ?? 0, stats.floors?.goal?.min ?? 0, stats.floors?.goal?.max ?? 0)}`}>
+                  {stats.floors?.value ?? 0} / {stats.floors?.goal?.min ?? 0}-{stats.floors?.goal?.max ?? 0}
+                </span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3">
+                <div
+                  className="bg-indigo-600 h-3 rounded-full transition-all"
+                  style={{ width: `${Math.min(100, getProgressPercent(stats.floors?.value ?? 0, stats.floors?.goal?.min ?? 0, stats.floors?.goal?.max ?? 0))}%` }}
+                ></div>
+              </div>
+            </div>
+
+            {/* Баллы кардио (AZM) */}
+            <div className="mb-6">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-gray-700 font-medium">Баллы кардио</span>
+                <span className={`font-bold ${getProgressColor(stats.azm?.value ?? 0, stats.azm?.goal?.min ?? 0, stats.azm?.goal?.max ?? 0)}`}>
+                  {stats.azm?.value ?? 0} / {stats.azm?.goal?.min ?? 0}-{stats.azm?.goal?.max ?? 0}
+                </span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3">
+                <div
+                  className="bg-indigo-600 h-3 rounded-full transition-all"
+                  style={{ width: `${Math.min(100, getProgressPercent(stats.azm?.value ?? 0, stats.azm?.goal?.min ?? 0, stats.azm?.goal?.max ?? 0))}%` }}
+                ></div>
+              </div>
+            </div>
+          </div>
+
+          {/* Настройка целей */}
+          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-semibold">Дневные цели</h2>
+              {!isEditingGoals && (
+                <button
+                  onClick={() => setIsEditingGoals(true)}
+                  className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors text-sm"
+                >
+                  Изменить
+                </button>
+              )}
+            </div>
+
+            {isEditingGoals ? (
+              <div className="space-y-4">
+                {/* Шаги */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Шаги (мин - макс)</label>
+                  <div className="flex gap-2">
+                    <input
+                      type="number"
+                      value={editedGoals.steps.min}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, steps: { ...editedGoals.steps, min: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                    <input
+                      type="number"
+                      value={editedGoals.steps.max}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, steps: { ...editedGoals.steps, max: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                  </div>
+                </div>
+
+                {/* Этажи */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Этажи (мин - макс)</label>
+                  <div className="flex gap-2">
+                    <input
+                      type="number"
+                      value={editedGoals.floors.min}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, floors: { ...editedGoals.floors, min: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                    <input
+                      type="number"
+                      value={editedGoals.floors.max}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, floors: { ...editedGoals.floors, max: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                  </div>
+                </div>
+
+                {/* Баллы кардио */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Баллы кардио (мин - макс)</label>
+                  <div className="flex gap-2">
+                    <input
+                      type="number"
+                      value={editedGoals.azm.min}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, azm: { ...editedGoals.azm, min: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                    <input
+                      type="number"
+                      value={editedGoals.azm.max}
+                      onChange={(e) => setEditedGoals({ ...editedGoals, azm: { ...editedGoals.azm, max: parseInt(e.target.value) || 0 } })}
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
+                    />
+                  </div>
+                </div>
+
+                <div className="flex gap-2">
+                  <button
+                    onClick={handleSaveGoals}
+                    className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+                  >
+                    Сохранить
+                  </button>
+                  <button
+                    onClick={handleCancelEdit}
+                    className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+                  >
+                    Отмена
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Шаги:</span>
+                  <span className="font-medium">{goals.steps.min} - {goals.steps.max}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Этажи:</span>
+                  <span className="font-medium">{goals.floors.min} - {goals.floors.max}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-600">Баллы кардио:</span>
+                  <span className="font-medium">{goals.azm.min} - {goals.azm.max}</span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
+            <h3 className="text-lg font-semibold mb-3 text-blue-900">
+              Как это работает
+            </h3>
+            <p className="text-gray-700 mb-2">
+              ✅ Fitbit подключен! Данные синхронизируются автоматически каждые 4 часа.
+            </p>
+            <p className="text-gray-600 text-sm">
+              Вы также можете синхронизировать данные вручную, нажав кнопку "Синхронизировать".
+            </p>
+          </div>
+
+          <button
+            onClick={handleDisconnect}
+            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          >
+            Отключить Fitbit
+          </button>
+        </div>
+      ) : (
+        <div>
+          {oauthError && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+              <p className="text-red-800 font-medium">Ошибка подключения Fitbit</p>
+              <p className="text-red-700 mt-1">{oauthError}</p>
+              <button onClick={() => setOauthError('')} className="text-red-600 text-sm underline mt-2">Скрыть</button>
+            </div>
+          )}
+          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+            <h2 className="text-lg font-semibold mb-4">Подключение Fitbit</h2>
+            <p className="text-gray-700 mb-4">
+              Подключите свой Fitbit аккаунт для отслеживания шагов, этажей и баллов кардионагрузки.
+            </p>
+            <button
+              onClick={handleConnect}
+              className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold"
+            >
+              Подключить Fitbit
+            </button>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+            <h3 className="text-lg font-semibold mb-3 text-blue-900">
+              Что нужно сделать
+            </h3>
+            <ol className="list-decimal list-inside space-y-2 text-gray-700">
+              <li>Нажмите кнопку "Подключить Fitbit"</li>
+              <li>Авторизуйтесь в Fitbit</li>
+              <li>Разрешите доступ к данным о физической активности</li>
+              <li>Готово! Данные будут синхронизироваться автоматически</li>
+            </ol>
+          </div>
+        </div>
+      )}
+      {toastMessage && (
+        <Toast
+          message={toastMessage.text}
+          type={toastMessage.type}
+          onClose={() => setToastMessage(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default FitbitIntegration