import React, { useState, useEffect } from 'react'
import { useAuth } from './auth/AuthContext'
import LoadingError from './LoadingError'
import Toast from './Toast'
import './Integrations.css'

function TodoistIntegration({ onNavigate }) {
  const { authFetch } = useAuth()
  const [connected, setConnected] = useState(false)
  const [todoistEmail, setTodoistEmail] = useState('')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [message, setMessage] = useState('')
  const [toastMessage, setToastMessage] = useState(null)
  const [isLoadingError, setIsLoadingError] = useState(false)

  useEffect(() => {
    checkStatus()
    // Проверяем URL параметры для сообщений
    const params = new URLSearchParams(window.location.search)
    const integration = params.get('integration')
    const status = params.get('status')
    if (integration === 'todoist') {
      if (status === 'connected') {
        setMessage('✅ Todoist успешно подключен!')
        // Очищаем URL параметры
        window.history.replaceState({}, '', window.location.pathname)
      } else if (status === 'error') {
        const errorMsg = params.get('message') || 'Произошла ошибка'
        setToastMessage({ text: errorMsg, type: 'error' })
        window.history.replaceState({}, '', window.location.pathname)
      }
    }
  }, [])

  const checkStatus = async () => {
    try {
      setLoading(true)
      setError('')
      const response = await authFetch('/api/integrations/todoist/status')
      if (!response.ok) {
        throw new Error('Ошибка при проверке статуса')
      }
      const data = await response.json()
      setConnected(data.connected || false)
      if (data.connected && data.todoist_email) {
        setTodoistEmail(data.todoist_email)
      }
    } catch (error) {
      console.error('Error checking status:', error)
      setError(error.message || 'Не удалось проверить статус')
      setIsLoadingError(true)
    } finally {
      setLoading(false)
    }
  }

  const handleConnect = async () => {
    try {
      setLoading(true)
      setError('')
      // Получаем URL для редиректа через авторизованный запрос
      const response = await authFetch('/api/integrations/todoist/oauth/connect')
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.error || 'Ошибка при подключении Todoist')
      }
      const data = await response.json()
      if (data.auth_url) {
        // Делаем редирект на Todoist OAuth
        window.location.href = data.auth_url
      } else {
        throw new Error('URL для авторизации не получен')
      }
    } catch (error) {
      console.error('Error connecting Todoist:', error)
      setToastMessage({ text: error.message || 'Не удалось подключить Todoist', type: 'error' })
      setLoading(false)
    }
  }

  const handleDisconnect = async () => {
    if (!window.confirm('Вы уверены, что хотите отключить Todoist?')) {
      return
    }

    try {
      setLoading(true)
      setError('')
      const response = await authFetch('/api/integrations/todoist/disconnect', {
        method: 'DELETE',
      })
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}))
        throw new Error(errorData.error || 'Ошибка при отключении')
      }
      setConnected(false)
      setTodoistEmail('')
      setToastMessage({ text: 'Todoist отключен', type: 'success' })
    } catch (error) {
      console.error('Error disconnecting:', error)
      setToastMessage({ text: error.message || 'Не удалось отключить Todoist', type: 'error' })
    } finally {
      setLoading(false)
    }
  }

  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">Todoist интеграция</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>
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-lg font-semibold mb-4">Статус подключения</h2>
            <div className="space-y-3">
              <div className="flex items-center gap-2">
                <span className="text-green-600 font-semibold">✅ Todoist подключен</span>
              </div>
              {todoistEmail && (
                <div>
                  <span className="text-gray-600">Email: </span>
                  <span className="font-medium">{todoistEmail}</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">
              ✅ Todoist подключен! Закрывайте задачи в Todoist — они автоматически
              появятся в Play Life.
            </p>
            <p className="text-gray-600 text-sm">
              Никаких дополнительных настроек не требуется. Просто закрывайте задачи
              в Todoist, и они будут обработаны автоматически.
            </p>
          </div>

          <button
            onClick={handleDisconnect}
            className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
          >
            Отключить Todoist
          </button>
        </div>
      ) : (
        <div>
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-lg font-semibold mb-4">Подключение Todoist</h2>
            <p className="text-gray-700 mb-4">
              Подключите свой Todoist аккаунт для автоматической обработки закрытых задач.
            </p>
            <button
              onClick={handleConnect}
              className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold"
            >
              Подключить Todoist
            </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>Нажмите кнопку "Подключить Todoist"</li>
              <li>Авторизуйтесь в Todoist</li>
              <li>Готово! Закрытые задачи будут автоматически обрабатываться</li>
            </ol>
          </div>
        </div>
      )}
      {toastMessage && (
        <Toast
          message={toastMessage.text}
          type={toastMessage.type}
          onClose={() => setToastMessage(null)}
        />
      )}
    </div>
  )
}

export default TodoistIntegration