import React, { useState } from 'react';
import { FaRobot, FaSpinner, FaMagic } from 'react-icons/fa';

const AICreateModal = ({ onClose, onImport }) => {
  const [query, setQuery] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!query.trim()) return;

    setLoading(true);
    setError(null);

    try {
      // Формируем промпт для AI
      const prompt = `Создай JSON объект для медиа контента на основе запроса: "${query}".

Пожалуйста, верни только валидный JSON без дополнительного текста, который содержит следующие поля:

{
  "title": "Название на русском языке",
  "path": "url-slug-на-латинице",
  "type": "movie|tv|game|anime",
  "overview": "Описание на русском языке",
  "release_date": "YYYY-MM-DD",
  "progress_type": "hours|watched|completed",
  "characteristics": {
    "story": "Сюжет",
    "acting": "Актерская игра",
    "visuals": "Визуал",
    "sound": "Звук",
    "atmosphere": "Атмосфера",
    "pacing": "Темп"
  }
}

Тип должен соответствовать запросу:
- movie - для фильмов
- tv - для сериалов
- game - для игр
- anime - для аниме

progress_type должен соответствовать типу:
- hours - для игр
- watched - для фильмов/сериалов/аниме
- completed - для сюжетных игр

Используй веб-поиск для получения актуальной информации.`;

             // Отправляем запрос к GPTunnel API
       console.log('Отправляем запрос к GPTunnel с API ключом:', import.meta.env.VITE_GPTUNNEL_API ? '***' + import.meta.env.VITE_GPTUNNEL_API.slice(-4) : 'НЕ УСТАНОВЛЕН');
       const response = await fetch('https://gptunnel.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${import.meta.env.VITE_GPTUNNEL_API}`
        },
                 body: JSON.stringify({
           model: 'gpt-5-mini',
          messages: [
            {
              role: 'user',
              content: prompt
            }
          ],
          tools: [
            {
              type: 'web_search'
            }
          ],
          tool_choice: 'auto'
        })
      });

             if (!response.ok) {
         console.error('GPTunnel API ответил с ошибкой:', response.status, response.statusText);
         if (response.status === 402) {
           throw new Error('Ошибка оплаты GPTunnel: проверьте баланс или подписку');
         } else if (response.status === 401) {
           throw new Error('Неверный API ключ GPTunnel');
         } else if (response.status === 429) {
           throw new Error('Превышен лимит запросов к GPTunnel');
         } else {
           throw new Error(`Ошибка при обращении к CampFireAI: ${response.status} ${response.statusText}`);
         }
       }

      const data = await response.json();
      
      if (!data.choices || !data.choices[0] || !data.choices[0].message) {
        throw new Error('Неожиданный ответ от CampFireAI');
      }

      const aiResponse = data.choices[0].message.content;
      
      // Пытаемся извлечь JSON из ответа
      let jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
      if (!jsonMatch) {
        throw new Error('CampFireAI не вернул валидный JSON');
      }

      let mediaData;
      try {
        mediaData = JSON.parse(jsonMatch[0]);
      } catch (parseError) {
        throw new Error('Ошибка парсинга JSON от CampFireAI');
      }

      // Валидируем обязательные поля
      if (!mediaData.title || !mediaData.type || !mediaData.overview) {
        throw new Error('CampFireAI вернул неполные данные');
      }

      // Формируем данные для импорта
      const importData = {
        title: mediaData.title,
        path: mediaData.path || mediaData.title.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
        type: mediaData.type,
        overview: mediaData.overview,
        release_date: mediaData.release_date || '',
        progress_type: mediaData.progress_type || 'completed',
        characteristics: mediaData.characteristics || {},
        tmdb_id: null,
        tmdb_type: null
      };

      onImport(importData);
      onClose();
    } catch (err) {
      console.error('Error creating with AI:', err);
      setError(err.message || 'Произошла ошибка при создании с помощью CampFireAI');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 bg-campfire-charcoal rounded-lg shadow-md text-campfire-light">
      <div className="text-center mb-6">
        <div className="inline-flex items-center justify-center w-16 h-16 bg-campfire-amber/20 rounded-full mb-4">
          <FaMagic className="text-3xl text-campfire-amber" />
        </div>
        <h2 className="text-2xl font-bold mb-2">CampFireAI</h2>
        <p className="text-campfire-ash">
          Опишите контент в свободной форме, и ИИ создаст карточку с помощью веб-поиска
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <div>
          <label htmlFor="query" className="block text-sm font-medium text-campfire-light mb-2">
            Опишите контент
          </label>
          <textarea
            id="query"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Например: 'Фильм Матрица 1999 года с Киану Ривзом' или 'Игра The Witcher 3: Wild Hunt' или 'Аниме Наруто'"
            className="input w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber transition-colors"
            rows={4}
            required
          />
          <p className="mt-2 text-sm text-campfire-ash">
            Опишите фильм, сериал, игру или аниме в любом формате. CampFireAI найдет информацию и создаст карточку.
          </p>
        </div>

                 {error && (
           <div className="bg-status-error/20 text-status-error p-4 rounded-md border border-status-error/30">
             <div className="mb-2">{error}</div>
             {error.includes('оплаты') && (
               <div className="text-sm text-status-error/80">
                 <p>Для использования CampFireAI необходимо:</p>
                 <ul className="list-disc list-inside mt-1 space-y-1">
                   <li>Пополнить баланс на <a href="https://gptunnel.com" target="_blank" rel="noopener noreferrer" className="underline hover:text-status-error">gptunnel.com</a></li>
                   <li>Или активировать подписку</li>
                   <li>Проверить правильность API ключа в .env файле</li>
                 </ul>
               </div>
             )}
           </div>
         )}

        <div className="flex gap-3">
          <button
            type="button"
            onClick={onClose}
            className="btn-secondary flex-1"
            disabled={loading}
          >
            Отмена
          </button>
          <button
            type="submit"
            disabled={loading || !query.trim()}
            className="btn-primary flex-1 flex items-center justify-center gap-2"
          >
            {loading ? (
              <>
                <FaSpinner className="animate-spin" />
                <span>Создаю...</span>
              </>
            ) : (
              <>
                <FaRobot />
                <span>Создать с CampFireAI</span>
              </>
            )}
          </button>
        </div>
      </form>

             <div className="mt-6 p-4 bg-campfire-dark/50 rounded-lg">
         <h3 className="font-semibold text-campfire-amber mb-2">Как это работает?</h3>
         <ul className="text-sm text-campfire-ash space-y-1">
           <li>• CampFireAI анализирует ваш запрос</li>
           <li>• Выполняет веб-поиск для получения актуальной информации</li>
           <li>• Создает структурированную карточку медиа</li>
           <li>• Вы можете отредактировать данные перед сохранением</li>
         </ul>
         
         <div className="mt-4 pt-4 border-t border-campfire-ash/20">
           <h4 className="font-medium text-campfire-amber mb-2">Настройка API ключа:</h4>
           <ol className="text-sm text-campfire-ash space-y-1 list-decimal list-inside">
             <li>Создайте файл <code className="bg-campfire-dark px-1 rounded">.env</code> в корне проекта</li>
             <li>Добавьте строку: <code className="bg-campfire-dark px-1 rounded">VITE_GPTUNNEL_API=ваш_ключ</code></li>
             <li>Получите API ключ на <a href="https://gptunnel.com" target="_blank" rel="noopener noreferrer" className="text-campfire-amber hover:underline">gptunnel.com</a></li>
             <li>Перезапустите dev сервер</li>
           </ol>
         </div>
       </div>
    </div>
  );
};

export default AICreateModal;
