import React, { useState } from 'react';
import { toast } from 'react-toastify';
import { createSuggestion } from '../../services/pocketbaseService';
import { useAuth } from '../../contexts/AuthContext';

const SuggestCardWidget = ({ onSuccess }) => {
  const [formData, setFormData] = useState({
    title: '',
    description: '',
    category: 'movie',
    link: ''
  });
  const { user } = useAuth();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user) {
      toast.error('Необходимо войти в систему');
      return;
    }

    try {
      await createSuggestion({
        ...formData,
        status: 'pending',
        user: user.id
      });
      
      toast.success('Предложение успешно отправлено!');
      setFormData({
        title: '',
        description: '',
        category: 'movie',
        link: ''
      });
      
      if (onSuccess) {
        onSuccess();
      }
    } catch (error) {
      toast.error('Ошибка при отправке предложения');
      console.error('Error submitting suggestion:', error);
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-campfire-gray mb-2">Название</label>
        <input
          type="text"
          name="title"
          value={formData.title}
          onChange={handleChange}
          required
          className="w-full bg-campfire-charcoal border border-campfire-gray rounded px-3 py-2 text-campfire-light focus:outline-none focus:border-campfire-secondary"
        />
      </div>
      
      <div>
        <label className="block text-campfire-gray mb-2">Описание</label>
        <textarea
          name="description"
          value={formData.description}
          onChange={handleChange}
          required
          rows="3"
          className="w-full bg-campfire-charcoal border border-campfire-gray rounded px-3 py-2 text-campfire-light focus:outline-none focus:border-campfire-secondary"
        />
      </div>
      
      <div>
        <label className="block text-campfire-gray mb-2">Категория</label>
        <select
          name="category"
          value={formData.category}
          onChange={handleChange}
          required
          className="w-full bg-campfire-charcoal border border-campfire-gray rounded px-3 py-2 text-campfire-light focus:outline-none focus:border-campfire-secondary"
        >
          <option value="movie">Фильм</option>
          <option value="tv">Сериал</option>
          <option value="anime">Аниме</option>
          <option value="game">Игра</option>
        </select>
      </div>
      
      <div>
        <label className="block text-campfire-gray mb-2">Ссылка (опционально)</label>
        <input
          type="url"
          name="link"
          value={formData.link}
          onChange={handleChange}
          className="w-full bg-campfire-charcoal border border-campfire-gray rounded px-3 py-2 text-campfire-light focus:outline-none focus:border-campfire-secondary"
        />
      </div>
      
      <div className="flex justify-end space-x-3">
        <button
          type="submit"
          className="px-4 py-2 bg-campfire-secondary text-campfire-dark rounded hover:bg-campfire-secondary/90"
        >
          Отправить
        </button>
      </div>
    </form>
  );
};

export default SuggestCardWidget; 