import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Plus, Edit, Trash, ChevronLeft, ChevronRight, ArrowUp, ArrowDown } from 'lucide-react';
import AdminLayout from '../../../components/admin/AdminLayout';
import { categoryService, Category } from '../../../services/catalog';

export default function CategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  // Загрузка категорий при монтировании компонента
  useEffect(() => {
    const fetchCategories = async () => {
      try {
        setLoading(true);
        const data = await categoryService.getCategories();
        setCategories(data);
        setError(null);
      } catch (err) {
        console.error('Ошибка при загрузке категорий:', err);
        setError('Не удалось загрузить категории. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, []);

  // Функция для изменения порядка категорий
  const handleReorder = async (id: number, direction: 'up' | 'down') => {
    const index = categories.findIndex(cat => cat.id === id);
    if (index === -1) return;

    // Если двигаем вверх и это не первый элемент
    if (direction === 'up' && index > 0) {
      try {
        const currentCategory = categories[index];
        const prevCategory = categories[index - 1];
        
        // Обновляем порядок в API
        await categoryService.updateCategory(currentCategory.id, { order: prevCategory.order });
        await categoryService.updateCategory(prevCategory.id, { order: currentCategory.order });
        
        // Обновляем локальное состояние
        const newCategories = [...categories];
        newCategories[index] = { ...newCategories[index], order: prevCategory.order };
        newCategories[index - 1] = { ...newCategories[index - 1], order: currentCategory.order };
        
        // Сортируем по порядку
        newCategories.sort((a, b) => a.order - b.order);
        
        setCategories(newCategories);
      } catch (err) {
        console.error('Ошибка при изменении порядка:', err);
        setError('Не удалось изменить порядок категории.');
      }
    }
    // Если двигаем вниз и это не последний элемент
    else if (direction === 'down' && index < categories.length - 1) {
      try {
        const currentCategory = categories[index];
        const nextCategory = categories[index + 1];
        
        // Обновляем порядок в API
        await categoryService.updateCategory(currentCategory.id, { order: nextCategory.order });
        await categoryService.updateCategory(nextCategory.id, { order: currentCategory.order });
        
        // Обновляем локальное состояние
        const newCategories = [...categories];
        newCategories[index] = { ...newCategories[index], order: nextCategory.order };
        newCategories[index + 1] = { ...newCategories[index + 1], order: currentCategory.order };
        
        // Сортируем по порядку
        newCategories.sort((a, b) => a.order - b.order);
        
        setCategories(newCategories);
      } catch (err) {
        console.error('Ошибка при изменении порядка:', err);
        setError('Не удалось изменить порядок категории.');
      }
    }
  };

  // Функция для удаления категории
  const handleDelete = async (id: number) => {
    if (window.confirm('Вы уверены, что хотите удалить эту категорию?')) {
      try {
        await categoryService.deleteCategory(id);
        setCategories(categories.filter(cat => cat.id !== id));
      } catch (err) {
        console.error('Ошибка при удалении категории:', err);
        setError('Не удалось удалить категорию.');
      }
    }
  };

  // Функция для изменения статуса активности
  const handleToggleActive = async (id: number, currentStatus: boolean) => {
    try {
      await categoryService.updateCategory(id, { is_active: !currentStatus });
      setCategories(categories.map(cat => 
        cat.id === id ? { ...cat, is_active: !cat.is_active } : cat
      ));
    } catch (err) {
      console.error('Ошибка при изменении статуса категории:', err);
      setError('Не удалось изменить статус категории.');
    }
  };

  // Получаем корневые категории и подкатегории
  const rootCategories = categories.filter(cat => cat.parent_id === null);
  
  // Рекурсивная функция для отображения категорий и их подкатегорий
  const renderCategoryRow = (category: Category, level: number = 0) => {
    const indent = level * 12; // Отступ для подкатегорий
    
    return (
      <>
        <tr key={category.id} className={level === 0 ? "bg-gray-50" : ""}>
          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" style={{ paddingLeft: `${6 + indent}px` }}>
            {level > 0 && "— "}{category.name}
          </td>
          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{category.slug}</td>
          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            {category.parent_id ? categories.find(c => c.id === category.parent_id)?.name || '-' : '-'}
          </td>
          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{category.products_count || 0}</td>
          <td className="px-6 py-4 whitespace-nowrap">
            <button 
              onClick={() => handleToggleActive(category.id, category.is_active)}
              className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                ${category.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
            >
              {category.is_active ? 'Активна' : 'Неактивна'}
            </button>
          </td>
          <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            <div className="flex items-center space-x-2">
              <button 
                onClick={() => handleReorder(category.id, 'up')}
                disabled={category.order === 1}
                className={`p-1 rounded-full ${category.order === 1 ? 'text-gray-300' : 'text-gray-600 hover:bg-gray-100'}`}
              >
                <ArrowUp className="h-4 w-4" />
              </button>
              <button 
                onClick={() => handleReorder(category.id, 'down')}
                disabled={category.order === (level === 0 ? rootCategories.length : categories.filter(c => c.parent_id === category.parent_id).length)}
                className={`p-1 rounded-full ${category.order === (level === 0 ? rootCategories.length : categories.filter(c => c.parent_id === category.parent_id).length) ? 'text-gray-300' : 'text-gray-600 hover:bg-gray-100'}`}
              >
                <ArrowDown className="h-4 w-4" />
              </button>
              <span>{category.order}</span>
            </div>
          </td>
          <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <div className="flex justify-end space-x-2">
              <Link href={`/admin/categories/${category.id}`} className="text-indigo-600 hover:text-indigo-900">
                <Edit className="h-5 w-5" />
              </Link>
              <button 
                onClick={() => handleDelete(category.id)}
                className="text-red-600 hover:text-red-900"
              >
                <Trash className="h-5 w-5" />
              </button>
            </div>
          </td>
        </tr>
        {/* Рекурсивно отображаем подкатегории */}
        {category.subcategories?.map(subcat => renderCategoryRow(subcat, level + 1))}
      </>
    );
  };

  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 (error) {
    return (
      <AdminLayout title="Управление категориями">
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6">
          <strong className="font-bold">Ошибка!</strong>
          <span className="block sm:inline"> {error}</span>
        </div>
        <button 
          onClick={() => window.location.reload()} 
          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="Управление категориями">
      <div className="mb-6 flex justify-between items-center">
        <h2 className="text-xl font-semibold text-gray-800">Список категорий</h2>
        <Link href="/admin/categories/create" 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">
          <Plus className="h-5 w-5 mr-2" />
          Добавить категорию
        </Link>
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Slug</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Родительская категория</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Товаров</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Порядок</th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {rootCategories.map(category => renderCategoryRow(category))}
            </tbody>
          </table>
        </div>
        <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
          <div className="text-sm text-gray-500">
            Показано {categories.length} категорий
          </div>
        </div>
      </div>
    </AdminLayout>
  );
} 