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

function TelegramIntegration({ onBack }) {
  const [botToken, setBotToken] = useState('')
  const [chatId, setChatId] = useState('')
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')

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

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

  const handleSave = async () => {
    if (!botToken.trim()) {
      setError('Bot Token обязателен для заполнения')
      return
    }

    try {
      setSaving(true)
      setError('')
      setSuccess('')

      const response = await fetch('/api/integrations/telegram', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ bot_token: botToken }),
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || 'Ошибка при сохранении')
      }

      const data = await response.json()
      setBotToken(data.bot_token || '')
      setChatId(data.chat_id || '')
      setSuccess('Bot Token успешно сохранен!')
    } catch (error) {
      console.error('Error saving integration:', error)
      setError(error.message || 'Не удалось сохранить Bot Token')
    } finally {
      setSaving(false)
    }
  }

  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>

      {loading ? (
        <div className="text-gray-500">Загрузка...</div>
      ) : (
        <>
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-lg font-semibold mb-4">Настройки</h2>

            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Telegram Bot Token
              </label>
              <input
                type="text"
                value={botToken}
                onChange={(e) => setBotToken(e.target.value)}
                placeholder="Введите Bot Token"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
              />
            </div>

            {chatId && (
              <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Chat ID (устанавливается автоматически)
                </label>
                <input
                  type="text"
                  value={chatId}
                  readOnly
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50"
                />
              </div>
            )}

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

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

            <button
              onClick={handleSave}
              disabled={saving || !botToken.trim()}
              className="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"
            >
              {saving ? 'Сохранение...' : 'Сохранить Bot Token'}
            </button>
          </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">
              Откуда взять Bot Token
            </h3>
            <ol className="list-decimal list-inside space-y-2 text-gray-700">
              <li>Откройте Telegram и найдите бота @BotFather</li>
              <li>Отправьте команду /newbot</li>
              <li>Следуйте инструкциям для создания нового бота</li>
              <li>
                После создания бота BotFather предоставит вам Bot Token
              </li>
              <li>Скопируйте токен и вставьте его в поле выше</li>
            </ol>
          </div>

          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
            <h3 className="text-lg font-semibold mb-3 text-yellow-900">
              Что нужно сделать после сохранения Bot Token
            </h3>
            <ol className="list-decimal list-inside space-y-2 text-gray-700">
              <li>После сохранения Bot Token отправьте первое сообщение вашему боту в Telegram</li>
              <li>
                Chat ID будет автоматически сохранен после обработки первого
                сообщения
              </li>
              <li>
                После этого бот сможет отправлять вам ответные сообщения
              </li>
            </ol>
          </div>
        </>
      )}
    </div>
  )
}

export default TelegramIntegration