'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Search, Plus, Edit, Trash, ChevronLeft, ChevronRight } from 'lucide-react';
import { fetchProducts, deleteProduct, Product, getImageUrl } from '@/lib/api';
import EditProductDialog from './components/EditProductDialog';
import { Button } from '@/components/ui/button';

// Компонент таблицы товаров
interface ProductsTableProps {
  products: Product[];
  loading: boolean;
  onDelete: (id: number) => void;
  onEdit: (id: number) => void;
}

const ProductsTable = ({ products, loading, onDelete, onEdit }: ProductsTableProps) => {
  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-4 bg-gray-200 rounded w-1/4"></div>
          <div className="space-y-2">
            <div className="h-4 bg-gray-200 rounded"></div>
            <div className="h-4 bg-gray-200 rounded"></div>
            <div className="h-4 bg-gray-200 rounded"></div>
          </div>
        </div>
      </div>
    );
  }

  // Функция для получения URL первого изображения товара
  const getProductImageUrl = (product: Product): string | null => {
    if (product.images && Array.isArray(product.images) && product.images.length > 0) {
      // Если images - массив строк URL
      if (typeof product.images[0] === 'string') {
        return getImageUrl(product.images[0]);
      } 
      // Если images - массив объектов с полем image_url
      else if (typeof product.images[0] === 'object' && product.images[0] !== null) {
        const img = product.images[0] as any;
        return getImageUrl(img.image_url || '');
      }
    }
    return null;
  };

  // Функция для получения общего количества товаров в наличии
  const getProductStock = (product: Product): number => {
    // Если есть variants - суммируем stock по всем вариантам
    if (product.variants && Array.isArray(product.variants) && product.variants.length > 0) {
      return product.variants.reduce((sum: number, variant) => 
        sum + (typeof variant.stock === 'number' ? variant.stock : 0), 0);
    }
    // Иначе используем стандартное поле stock
    return typeof product.stock === 'number' ? product.stock : 0;
  };

  return (
    <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 whitespace-nowrap">ID</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Изображение</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Название</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Слаг</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Категория</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Размеры</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Цена</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Остаток</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {products.map((product) => {
              const imageUrl = getProductImageUrl(product);
              const stockAmount = getProductStock(product);
              
              // Получаем строку размеров
              const sizesString = product.variants && product.variants.length > 0
                ? product.variants
                    .filter(v => v.size)
                    .map(v => v.size?.code || v.size?.name)
                    .join(', ')
                : 'Не указаны';
              
              return (
                <tr key={product.id}>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#{product.id}</td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    {imageUrl ? (
                      <img 
                        src={imageUrl} 
                        alt={product.name} 
                        className="h-12 w-12 rounded-md object-cover"
                      />
                    ) : (
                      <div className="h-12 w-12 rounded-md bg-gray-200 flex items-center justify-center">
                        <span className="text-xs text-gray-500">Нет</span>
                      </div>
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    <div className="max-w-[150px] truncate" title={product.name}>
                      {product.name || 'Без названия'}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div className="max-w-[100px] truncate" title={product.slug}>
                      {product.slug || '-'}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div className="max-w-[120px] truncate" title={product.category?.name}>
                      {product.category?.name || 
                       (product.category_id ? `ID: ${product.category_id}` : '-')}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <div className="max-w-[120px] truncate" title={sizesString}>
                      {sizesString}
                    </div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {typeof product.price === 'number' && (
                      <div>
                        <span className="font-medium">{product.price.toLocaleString('ru-RU')} ₽</span>
                        {product.discount_price && (
                          <div className="text-xs text-red-600">
                            {product.discount_price.toLocaleString('ru-RU')} ₽
                          </div>
                        )}
                      </div>
                    )}
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                      ${stockAmount > 20 ? 'bg-green-100 text-green-800' : 
                        stockAmount > 10 ? 'bg-yellow-100 text-yellow-800' : 
                        stockAmount > 0 ? 'bg-red-100 text-red-800' :
                        'bg-gray-100 text-gray-800'}`}>
                      {stockAmount > 0 ? stockAmount : 'Нет в наличии'}
                    </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={() => onEdit(product.id)}
                        className="p-1 text-indigo-600 hover:text-indigo-900 hover:bg-indigo-50 rounded"
                        title="Редактировать"
                      >
                        <Edit size={16} />
                      </button>
                      <button 
                        onClick={() => onDelete(product.id)}
                        className="p-1 text-red-600 hover:text-red-900 hover:bg-red-50 rounded"
                        title="Удалить"
                      >
                        <Trash size={16} />
                      </button>
                    </div>
                  </td>
                </tr>
              );
            })}
            {products.length === 0 && (
              <tr>
                <td colSpan={9} className="px-6 py-4 text-center text-sm text-gray-500">
                  Товары не найдены
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// Компонент пагинации
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const Pagination = ({ currentPage, totalPages, onPageChange }: PaginationProps) => {
  return (
    <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
      <div className="flex flex-1 justify-between sm:hidden">
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${
            currentPage === 1 ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'
          }`}
        >
          Назад
        </button>
        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium ${
            currentPage === totalPages ? 'text-gray-300' : 'text-gray-700 hover:bg-gray-50'
          }`}
        >
          Вперед
        </button>
      </div>
      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
          <p className="text-sm text-gray-700">
            Страница <span className="font-medium">{currentPage}</span> из{' '}
            <span className="font-medium">{totalPages}</span>
          </p>
        </div>
        <div>
          <nav className="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
            <button
              onClick={() => onPageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className={`relative inline-flex items-center rounded-l-md px-2 py-2 ${
                currentPage === 1 
                  ? 'text-gray-300' 
                  : 'text-gray-400 hover:bg-gray-50'
              }`}
            >
              <ChevronLeft className="h-5 w-5" aria-hidden="true" />
            </button>
            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
              <button
                key={page}
                onClick={() => onPageChange(page)}
                className={`relative inline-flex items-center px-4 py-2 text-sm font-semibold ${
                  page === currentPage
                    ? 'z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
                    : 'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0'
                }`}
              >
                {page}
              </button>
            ))}
            <button
              onClick={() => onPageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className={`relative inline-flex items-center rounded-r-md px-2 py-2 ${
                currentPage === totalPages 
                  ? 'text-gray-300' 
                  : 'text-gray-400 hover:bg-gray-50'
              }`}
            >
              <ChevronRight className="h-5 w-5" aria-hidden="true" />
            </button>
          </nav>
        </div>
      </div>
    </div>
  );
};

export default function ProductsPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [isDeleting, setIsDeleting] = useState(false);
  
  // Состояние для модального окна редактирования
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const [editProductId, setEditProductId] = useState<number | undefined>(undefined);

  // Загрузка товаров
  const loadProducts = async (page = 1, search = '') => {
    try {
      setLoading(true);
      const response = await fetchProducts({ 
        page, 
        search,
        limit: 10 
      });
      
      console.log('Полученные товары:', response);
      
      // Проверяем разные форматы данных
      let productsData: Product[] = [];
      
      if (response.data) {
        // Проверяем, есть ли обертка product в ответе
        if (typeof response.data === 'object' && 'product' in response.data) {
          const productData = response.data.product;
          // Формат { data: { product: { items: [...] } } }
          if (productData && typeof productData === 'object' && 'items' in productData) {
            productsData = productData.items as Product[];
            setTotalPages(productData.total_pages || 1);
          }
          // Формат { data: { product: [...] } }
          else if (Array.isArray(productData)) {
            productsData = productData;
            setTotalPages(Math.ceil(productData.length / 10) || 1);
          }
        }
        // Формат { data: { items: [...] } }
        else if (typeof response.data === 'object' && 'items' in response.data) {
          productsData = response.data.items as Product[];
          setTotalPages(response.data.total_pages || 1);
        } 
        // Формат { data: [...] } - массив товаров
        else if (Array.isArray(response.data)) {
          productsData = response.data;
          setTotalPages(Math.ceil(productsData.length / 10) || 1);
        }
      }
      
      // Отфильтровываем по поиску, если сервер не поддерживает поиск
      if (search && Array.isArray(productsData)) {
        productsData = productsData.filter(product => 
          product.name.toLowerCase().includes(search.toLowerCase()));
      }
      
      // Делаем пагинацию на клиенте, если сервер не поддерживает пагинацию
      if (page > 1 && Array.isArray(productsData) && response.data && !('total_pages' in response.data)) {
        const startIndex = (page - 1) * 10;
        productsData = productsData.slice(startIndex, startIndex + 10);
      }
      
      setProducts(productsData);
      setError(null);
    } catch (err) {
      console.error('Ошибка при загрузке товаров:', err);
      setError('Не удалось загрузить товары');
      setProducts([]);
    } finally {
      setLoading(false);
    }
  };

  // Загрузка при монтировании и изменении страницы/поиска
  useEffect(() => {
    loadProducts(currentPage, searchQuery);
  }, [currentPage]);

  // Обработчик поиска
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setCurrentPage(1);
    loadProducts(1, searchQuery);
  };

  // Обработчик удаления товара
  const handleDelete = async (id: number) => {
    if (window.confirm('Вы уверены, что хотите удалить этот товар?')) {
      try {
        setIsDeleting(true);
        const response = await deleteProduct(id);
        if (response.status === 200 || response.status === 204) {
          // Обновляем список товаров после удаления
          loadProducts(currentPage, searchQuery);
        } else {
          throw new Error(`Ошибка при удалении: ${response.status}`);
        }
      } catch (err) {
        console.error('Ошибка при удалении товара:', err);
        alert('Не удалось удалить товар');
      } finally {
        setIsDeleting(false);
      }
    }
  };
  
  // Обработчик открытия модального окна для редактирования
  const handleEdit = (id: number) => {
    console.log('Открытие модального окна для редактирования товара с ID:', id);
    setEditProductId(id);
    setIsEditDialogOpen(true);
  };
  
  // Обработчик открытия модального окна для создания
  const handleCreate = () => {
    setEditProductId(undefined);
    setIsEditDialogOpen(true);
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">Товары</h1>
        <Button 
          onClick={handleCreate}
          className="bg-indigo-600 hover:bg-indigo-700"
        >
          <Plus size={18} className="mr-1" />
          Создать товар
        </Button>
      </div>
      
      <form onSubmit={handleSearch} className="flex gap-2">
        <div className="flex-1 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"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            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"
          />
        </div>
        <Button type="submit" variant="outline">
          Найти
        </Button>
      </form>
      
      {error && (
        <div className="bg-red-50 border-l-4 border-red-400 p-4">
          <div className="flex">
            <div className="ml-3">
              <p className="text-sm text-red-700">
                {error}
              </p>
            </div>
          </div>
        </div>
      )}
      
      <ProductsTable 
        products={products}
        loading={loading}
        onDelete={handleDelete}
        onEdit={handleEdit}
      />
      
      {totalPages > 1 && (
        <div className="space-y-2">
          <div className="flex justify-between items-center text-sm text-gray-500">
            <div>
              Показано {products.length} из многих товаров
            </div>
            <div>
              Страница {currentPage} из {totalPages}
            </div>
          </div>
          <Pagination 
            currentPage={currentPage} 
            totalPages={totalPages} 
            onPageChange={setCurrentPage} 
          />
        </div>
      )}
      
      {/* Модальное окно редактирования/создания товара */}
      <EditProductDialog
        isOpen={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        productId={editProductId}
        onComplete={() => loadProducts(currentPage, searchQuery)}
      />
    </div>
  );
} 