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

function TelegramIntegration({ onBack }) {
  const { authFetch } = useAuth()
  const [integration, setIntegration] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    fetchIntegration()
  }, [])

  const fetchIntegration = async () => {
    try {
      setLoading(true)
      const response = await authFetch('/api/integrations/telegram')
      if (!response.ok) {
        throw new Error('Ошибка при загрузке интеграции')
      }
      const data = await response.json()
      setIntegration(data)
    } catch (error) {
      console.error('Error fetching integration:', error)
      setError('Не удалось загрузить данные интеграции')
    } finally {
      setLoading(false)
    }
  }

  const handleOpenBot = () => {
    if (integration?.deep_link) {
      window.open(integration.deep_link, '_blank')
    }
  }

  const handleRefresh = () => {
    fetchIntegration()
  }

  if (loading) {
    return (
      <div className="p-4 md:p-6">
        <div className="text-gray-500">Загрузка...</div>
      </div>
    )
  }

  return (
    <div className="p-4 md:p-6">
      <button className="close-x-button" onClick={onBack} title="Закрыть">
        ✕
      </button>

      <h1 className="text-2xl font-bold mb-6">Telegram интеграция</h1>

      {error && (
        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700">
          {error}
        </div>
      )}

      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 className="text-lg font-semibold mb-4">Статус подключения</h2>

        {integration?.is_connected ? (
          <div className="space-y-4">
            <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
              <div className="flex items-center text-green-700">
                <span className="text-xl mr-2">✓</span>
                <span className="font-medium">Telegram подключен</span>
              </div>
            </div>
            
            {integration.telegram_user_id && (
              <div className="text-sm text-gray-600">
                Telegram ID: <span className="font-mono">{integration.telegram_user_id}</span>
              </div>
            )}

            <button
              onClick={handleOpenBot}
              className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
            >
              Открыть бота
            </button>
          </div>
        ) : (
          <div className="space-y-4">
            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
              <div className="flex items-center text-yellow-700">
                <span className="text-xl mr-2">⚠</span>
                <span className="font-medium">Telegram не подключен</span>
              </div>
              <p className="mt-2 text-sm text-gray-600">
                Нажмите кнопку ниже и отправьте команду /start в боте
              </p>
            </div>

            <button
              onClick={handleOpenBot}
              disabled={!integration?.deep_link}
              className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
            >
              Подключить Telegram
            </button>

            <button
              onClick={handleRefresh}
              className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
            >
              Проверить подключение
            </button>
          </div>
        )}
      </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>Нажмите кнопку "Подключить Telegram"</li>
          <li>В открывшемся Telegram нажмите "Start" или отправьте /start</li>
          <li>Вернитесь сюда и нажмите "Проверить подключение"</li>
        </ol>
      </div>
    </div>
  )
}

export default TelegramIntegration