import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { Save, X, ArrowLeft } from 'lucide-react';
import AdminLayout from '../../../components/admin/AdminLayout';
import { categoryService, Category } from '../../../services/catalog';

export default function EditCategoryPage() {
  const router = useRouter();
  const { id } = router.query;
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [categories, setCategories] = useState<Category[]>([]);
  const [category, setCategory] = useState<Category | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    slug: '',
    parent_id: null as number | null,
    is_active: true
  });
  const [error, setError] = useState('');

  // Загрузка категории и списка категорий при монтировании компонента
  useEffect(() => {
    const fetchData = async () => {
      if (!id) return;
      
      try {
        setLoading(true);
        
        // Загружаем список всех категорий для выбора родительской
        const categoriesData = await categoryService.getCategories();
        setCategories(categoriesData);
        
        // Находим текущую категорию по ID
        const currentCategory = categoriesData.find(cat => cat.id === Number(id));
        
        if (currentCategory) {
          setCategory(currentCategory);
          setFormData({
            name: currentCategory.name,
            slug: currentCategory.slug,
            parent_id: currentCategory.parent_id,
            is_active: currentCategory.is_active
          });
        } else {
          setError('Категория не найдена');
        }
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err);
        setError('Не удалось загрузить данные категории. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

  // Автоматическое создание slug из названия
  const generateSlug = (name: string) => {
    return name
      .toLowerCase()
      .replace(/[^\w\sа-яё-]/g, '') // Удаляем специальные символы, но оставляем кириллицу
      .replace(/\s+/g, '-') // Заменяем пробелы на дефисы
      .replace(/[а-яё]/g, char => { // Транслитерация кириллицы
        const translitMap = {
          'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 
          'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 
          'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 
          'ф': 'f', 'х': 'h', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 'ъ': '', 
          'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
        };
        return translitMap[char] || char;
      })
      .replace(/--+/g, '-') // Заменяем множественные дефисы на один
      .replace(/^-|-$/g, ''); // Удаляем дефисы в начале и конце
  };

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    // Обновляем форму
    setFormData(prev => {
      const newData = {
        ...prev,
        [name]: type === 'checkbox' ? checked : value
      };
      
      // Если изменилось название, автоматически обновляем slug
      if (name === 'name') {
        newData.slug = generateSlug(value);
      }
      
      // Если выбрана родительская категория, преобразуем строку в число или null
      if (name === 'parent_id') {
        newData.parent_id = value === '' ? null : Number(value);
      }
      
      return newData;
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError('');

    try {
      if (!category) return;
      
      // Проверяем, не выбрана ли текущая категория в качестве родительской
      if (formData.parent_id === category.id) {
        setError('Категория не может быть родительской для самой себя');
        setSaving(false);
        return;
      }
      
      // Проверяем, не выбран ли потомок в качестве родительской категории
      const isDescendant = (parentId: number | null, childId: number): boolean => {
        if (parentId === childId) return true;
        
        const children = categories.filter(cat => cat.parent_id === childId);
        return children.some(child => isDescendant(parentId, child.id));
      };
      
      if (formData.parent_id !== null && isDescendant(formData.parent_id, category.id)) {
        setError('Нельзя выбрать потомка в качестве родительской категории');
        setSaving(false);
        return;
      }

      // Обновляем категорию через API
      await categoryService.updateCategory(category.id, formData);
      
      // Перенаправляем на страницу категорий
      router.push('/admin/categories');
    } catch (err) {
      console.error('Ошибка при обновлении категории:', err);
      setError('Не удалось обновить категорию. Пожалуйста, проверьте введенные данные и попробуйте снова.');
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <AdminLayout title="Редактирование категории">
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
        </div>
      </AdminLayout>
    );
  }

  if (!category && !loading) {
    return (
      <AdminLayout title="Категория не найдена">
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">Категория не найдена</p>
            </div>
          </div>
        </div>
        <button
          onClick={() => router.push('/admin/categories')}
          className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          Вернуться к списку категорий
        </button>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout title={`Редактирование: ${category?.name}`}>
      <div className="mb-6 flex items-center">
        <button
          onClick={() => router.push('/admin/categories')}
          className="mr-4 text-gray-500 hover:text-gray-700"
        >
          <ArrowLeft className="h-5 w-5" />
        </button>
        <h2 className="text-xl font-semibold text-gray-800">Редактирование категории</h2>
      </div>

      {error && (
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <form onSubmit={handleSubmit}>
          <div className="p-6">
            <div className="grid grid-cols-1 gap-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                  Название категории *
                </label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  required
                  value={formData.name}
                  onChange={handleChange}
                  className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
              </div>

              <div>
                <label htmlFor="slug" className="block text-sm font-medium text-gray-700 mb-1">
                  Slug *
                </label>
                <input
                  type="text"
                  id="slug"
                  name="slug"
                  required
                  value={formData.slug}
                  onChange={handleChange}
                  className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                />
                <p className="mt-1 text-sm text-gray-500">
                  URL-совместимый идентификатор категории. Генерируется автоматически из названия.
                </p>
              </div>

              <div>
                <label htmlFor="parent_id" className="block text-sm font-medium text-gray-700 mb-1">
                  Родительская категория
                </label>
                <select
                  id="parent_id"
                  name="parent_id"
                  value={formData.parent_id === null ? '' : formData.parent_id}
                  onChange={handleChange}
                  className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                >
                  <option value="">Нет (корневая категория)</option>
                  {categories
                    .filter(cat => cat.id !== category?.id) // Исключаем текущую категорию
                    .map(cat => (
                      <option key={cat.id} value={cat.id}>
                        {cat.name}
                      </option>
                    ))}
                </select>
              </div>

              <div>
                <div className="flex items-center">
                  <input
                    type="checkbox"
                    id="is_active"
                    name="is_active"
                    checked={formData.is_active}
                    onChange={handleChange}
                    className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  />
                  <label htmlFor="is_active" className="ml-2 block text-sm text-gray-700">
                    Активна
                  </label>
                </div>
                <p className="mt-1 text-sm text-gray-500">
                  Неактивные категории не будут отображаться на сайте.
                </p>
              </div>
            </div>
          </div>

          <div className="px-6 py-4 bg-gray-50 flex justify-end">
            <button
              type="button"
              onClick={() => router.push('/admin/categories')}
              className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-3"
            >
              <X className="h-5 w-5 mr-2" />
              Отмена
            </button>
            <button
              type="submit"
              disabled={saving}
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <Save className="h-5 w-5 mr-2" />
              {saving ? 'Сохранение...' : 'Сохранить'}
            </button>
          </div>
        </form>
      </div>
    </AdminLayout>
  );
} 