'use client';

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

// Типы для коллекций
interface Collection {
  id: number;
  name: string;
  slug: string;
  description: string | null;
  is_active: boolean;
}

// Временные данные до реализации API
const mockCollections: Collection[] = [
  { 
    id: 1, 
    name: 'Весна-Лето 2023', 
    slug: 'spring-summer-2023', 
    description: 'Коллекция весна-лето 2023 года. Яркие цвета и легкие ткани.', 
    is_active: true 
  },
  { 
    id: 2, 
    name: 'Осень-Зима 2022/23', 
    slug: 'autumn-winter-2022-23', 
    description: 'Теплые и стильные вещи для холодного сезона.', 
    is_active: true 
  },
  { 
    id: 3, 
    name: 'Базовая коллекция', 
    slug: 'basic-collection', 
    description: 'Базовые модели, которые всегда в тренде.', 
    is_active: true 
  },
  { 
    id: 4, 
    name: 'Спортивная линия', 
    slug: 'sport-line', 
    description: 'Спортивная одежда для активного образа жизни.', 
    is_active: false 
  }
];

export default function CollectionsPage() {
  const [collections, setCollections] = useState<Collection[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredCollections, setFilteredCollections] = useState<Collection[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Загрузка коллекций при монтировании
  useEffect(() => {
    // Здесь должен быть запрос к API
    // В будущем заменить на реальный запрос
    setLoading(true);
    
    setTimeout(() => {
      setCollections(mockCollections);
      setFilteredCollections(mockCollections);
      setLoading(false);
    }, 500);
  }, []);

  // Обработчик поиска
  useEffect(() => {
    if (searchTerm.trim() === '') {
      setFilteredCollections(collections);
    } else {
      const filtered = collections.filter(collection => 
        collection.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        collection.slug.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (collection.description && collection.description.toLowerCase().includes(searchTerm.toLowerCase()))
      );
      setFilteredCollections(filtered);
    }
  }, [searchTerm, collections]);

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

  // Обработчик удаления коллекции
  const handleDelete = (id: number) => {
    if (window.confirm('Вы уверены, что хотите удалить эту коллекцию?')) {
      console.log('Удаление коллекции:', id);
      // В будущем реализовать запрос к API
      // Временная реализация для демонстрации
      const updatedCollections = collections.filter(collection => collection.id !== id);
      setCollections(updatedCollections);
      setFilteredCollections(updatedCollections.filter(collection => 
        collection.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        collection.slug.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (collection.description && collection.description.toLowerCase().includes(searchTerm.toLowerCase()))
      ));
    }
  };

  // Обработчик изменения статуса коллекции
  const handleToggleStatus = (id: number) => {
    const updatedCollections = collections.map(collection => 
      collection.id === id 
        ? { ...collection, is_active: !collection.is_active } 
        : collection
    );
    setCollections(updatedCollections);
    setFilteredCollections(updatedCollections.filter(collection => 
      collection.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      collection.slug.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (collection.description && collection.description.toLowerCase().includes(searchTerm.toLowerCase()))
    ));
  };

  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/collections/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 p-4 mb-6">
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <Search className="h-5 w-5 text-gray-400" />
          </div>
          <input
            type="text"
            placeholder="Поиск коллекций..."
            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <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-right text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {filteredCollections.map((collection) => (
              <tr key={collection.id}>
                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{collection.name}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{collection.slug}</td>
                <td className="px-6 py-4 text-sm text-gray-500">
                  {collection.description ? 
                    (collection.description.length > 60 ? 
                      `${collection.description.substring(0, 60)}...` : 
                      collection.description) : 
                    '—'}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span 
                    className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                      collection.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                    }`}
                  >
                    {collection.is_active ? 'Активна' : 'Неактивна'}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <div className="flex justify-end space-x-2">
                    <button
                      onClick={() => handleToggleStatus(collection.id)}
                      className={`text-sm ${
                        collection.is_active ? 'text-red-600 hover:text-red-900' : 'text-green-600 hover:text-green-900'
                      }`}
                    >
                      {collection.is_active ? 'Деактивировать' : 'Активировать'}
                    </button>
                    <button
                      onClick={() => handleEdit(collection.id)}
                      className="text-indigo-600 hover:text-indigo-900"
                    >
                      <Edit size={16} />
                    </button>
                    <button
                      onClick={() => handleDelete(collection.id)}
                      className="text-red-600 hover:text-red-900"
                    >
                      <Trash size={16} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
            {filteredCollections.length === 0 && (
              <tr>
                <td colSpan={5} className="px-6 py-4 text-center text-sm text-gray-500">
                  Коллекции не найдены
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
} 