'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Plus, Edit, Trash, ChevronRight, ChevronDown } from 'lucide-react';

// Типы для категорий
interface Category {
  id: number;
  name: string;
  slug: string;
  parent_id: number | null;
  is_active: boolean;
  subcategories?: Category[];
}

// Временные данные до реализации API
const mockCategories: Category[] = [
  { 
    id: 1, 
    name: 'Женская одежда', 
    slug: 'womens-clothing', 
    parent_id: null, 
    is_active: true,
    subcategories: [
      { id: 2, name: 'Платья', slug: 'dresses', parent_id: 1, is_active: true },
      { id: 3, name: 'Блузки', slug: 'blouses', parent_id: 1, is_active: true },
      { id: 4, name: 'Юбки', slug: 'skirts', parent_id: 1, is_active: false }
    ]
  },
  { 
    id: 5, 
    name: 'Мужская одежда', 
    slug: 'mens-clothing', 
    parent_id: null, 
    is_active: true,
    subcategories: [
      { id: 6, name: 'Рубашки', slug: 'shirts', parent_id: 5, is_active: true },
      { id: 7, name: 'Брюки', slug: 'pants', parent_id: 5, is_active: true }
    ]
  },
  { 
    id: 8, 
    name: 'Аксессуары', 
    slug: 'accessories', 
    parent_id: null, 
    is_active: true, 
    subcategories: []
  }
];

// Компонент для отображения категории в дереве
const CategoryTreeItem = ({ 
  category, 
  level = 0, 
  onEdit, 
  onDelete,
  expandedCategories,
  toggleCategory
}: { 
  category: Category; 
  level?: number;
  onEdit: (id: number) => void;
  onDelete: (id: number) => void;
  expandedCategories: number[];
  toggleCategory: (id: number) => void;
}) => {
  const isExpanded = expandedCategories.includes(category.id);
  const hasSubcategories = category.subcategories && category.subcategories.length > 0;
  
  return (
    <div>
      <div className="flex items-center py-2 px-4 hover:bg-gray-50 border-b">
        <div 
          className="flex items-center" 
          style={{ paddingLeft: `${level * 20}px` }}
        >
          {hasSubcategories && (
            <button 
              onClick={() => toggleCategory(category.id)}
              className="w-6 h-6 flex items-center justify-center mr-2 text-gray-500 hover:text-gray-700"
            >
              {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
            </button>
          )}
          {!hasSubcategories && <div className="w-6 mr-2"></div>}
          <span className={`${!category.is_active ? 'text-gray-400' : ''}`}>{category.name}</span>
        </div>
        <div className="ml-auto flex items-center">
          <span className="text-sm text-gray-500 mr-4">{category.slug}</span>
          <button
            onClick={() => onEdit(category.id)}
            className="text-indigo-600 hover:text-indigo-900 p-1"
          >
            <Edit size={16} />
          </button>
          <button
            onClick={() => onDelete(category.id)}
            className="text-red-600 hover:text-red-900 p-1 ml-1"
          >
            <Trash size={16} />
          </button>
        </div>
      </div>
      {isExpanded && hasSubcategories && (
        <div>
          {category.subcategories!.map(subcategory => (
            <CategoryTreeItem
              key={subcategory.id}
              category={subcategory}
              level={level + 1}
              onEdit={onEdit}
              onDelete={onDelete}
              expandedCategories={expandedCategories}
              toggleCategory={toggleCategory}
            />
          ))}
        </div>
      )}
    </div>
  );
};

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

  // Загрузка категорий при монтировании
  useEffect(() => {
    // Здесь должен быть запрос к API
    // В будущем заменить на реальный запрос
    setLoading(true);
    
    setTimeout(() => {
      setCategories(mockCategories);
      setExpandedCategories([1, 5]); // По умолчанию раскрываем первые категории
      setLoading(false);
    }, 500);
  }, []);

  // Обработчик редактирования категории
  const handleEdit = (id: number) => {
    // В будущем реализовать с переходом на страницу редактирования
    console.log('Редактирование категории:', id);
    alert(`Редактирование категории с ID: ${id}`);
  };

  // Обработчик удаления категории
  const handleDelete = (id: number) => {
    if (window.confirm('Вы уверены, что хотите удалить эту категорию?')) {
      console.log('Удаление категории:', id);
      // В будущем реализовать запрос к API
      // Временная реализация для демонстрации
      const removeCategory = (cats: Category[]): Category[] => {
        return cats.filter(cat => {
          if (cat.id === id) return false;
          if (cat.subcategories) {
            cat.subcategories = removeCategory(cat.subcategories);
          }
          return true;
        });
      };
      
      setCategories(removeCategory([...categories]));
    }
  };

  // Обработчик раскрытия/скрытия категории
  const toggleCategory = (id: number) => {
    setExpandedCategories(prev => 
      prev.includes(id) 
        ? prev.filter(catId => catId !== id) 
        : [...prev, id]
    );
  };

  if (loading) {
    return (
      <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>
    );
  }

  if (error) {
    return (
      <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>
    );
  }

  return (
    <div>
      <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">
        <div className="border-b px-6 py-3 bg-gray-50">
          <h3 className="text-base font-medium">Дерево категорий</h3>
        </div>
        
        <div className="divide-y">
          {categories.length === 0 ? (
            <div className="py-4 px-6 text-center text-gray-500">
              Категории не найдены
            </div>
          ) : (
            categories.map(category => (
              <CategoryTreeItem
                key={category.id}
                category={category}
                onEdit={handleEdit}
                onDelete={handleDelete}
                expandedCategories={expandedCategories}
                toggleCategory={toggleCategory}
              />
            ))
          )}
        </div>
      </div>
    </div>
  );
} 