'use client'

import { useState, useEffect, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import AdminLayout from '@/components/AdminLayout'
import ProductEditor from '@/components/ProductEditor'
import { Product } from '@/lib/products'

function AdminProductsContent() {
  const [products, setProducts] = useState<Product[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isMounted, setIsMounted] = useState(false)
  const [showEditor, setShowEditor] = useState(false)
  const [editingProduct, setEditingProduct] = useState<Product | null>(null)
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null)
  const router = useRouter()
  const searchParams = useSearchParams()
  const newProduct = searchParams.get('new')

  useEffect(() => {
    setIsMounted(true)
  }, [])

  useEffect(() => {
    if (isMounted) {
      if (newProduct === 'true') {
        setShowEditor(true)
      }
      fetchProducts()
    }
  }, [isMounted, newProduct])

  const fetchProducts = async () => {
    try {
      const response = await fetch('/api/admin/products')
      if (response.ok) {
        const data = await response.json()
        setProducts(data.products)
      } else if (response.status === 401) {
        router.push('/admin/login')
      }
    } catch (error) {
      console.error('Error fetching products:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleEdit = (product: Product) => {
    setEditingProduct(product)
    setShowEditor(true)
  }

  const handleDelete = async (slug: string) => {
    if (!confirm('Ви впевнені, що хочете видалити цей продукт?')) {
      return
    }

    try {
      const response = await fetch(`/api/admin/products/${slug}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        setProducts(products.filter(p => p.slug !== slug))
      } else {
        alert('Помилка при видаленні продукту')
      }
    } catch (error) {
      console.error('Error deleting product:', error)
      alert('Помилка при видаленні продукту')
    }
  }

  const handleSave = () => {
    setShowEditor(false)
    setEditingProduct(null)
    fetchProducts()
  }

  const handleCancel = () => {
    setShowEditor(false)
    setEditingProduct(null)
    router.replace('/admin/products')
  }

  if (isLoading) {
    return (
      <AdminLayout currentPage="products">
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500"></div>
        </div>
      </AdminLayout>
    )
  }

  if (showEditor) {
    return (
      <AdminLayout currentPage="products">
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900">
            {editingProduct ? 'Редагувати продукт' : 'Створити новий продукт'}
          </h1>
          <p className="mt-1 text-sm text-gray-600">
            {editingProduct ? 'Змініть дані продукту та збережіть зміни' : 'Заповніть форму для створення нового продукту'}
          </p>
        </div>
        <ProductEditor
          product={editingProduct}
          onSave={handleSave}
          onCancel={handleCancel}
        />
      </AdminLayout>
    )
  }

  return (
    <AdminLayout currentPage="products">
      <div className="mb-8">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Продукти</h1>
            <p className="mt-1 text-sm text-gray-600">
              Управління каталогом продуктів
            </p>
          </div>
          <button
            onClick={() => setShowEditor(true)}
            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-900 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
          >
            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Додати продукт
          </button>
        </div>
      </div>

      {products.length === 0 ? (
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <div className="text-center">
              <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
              </svg>
              <h3 className="mt-2 text-sm font-medium text-gray-900">Немає продуктів</h3>
              <p className="mt-1 text-sm text-gray-500">
                Почніть з додавання першого продукту.
              </p>
              <div className="mt-6">
                <button
                  onClick={() => setShowEditor(true)}
                  className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-900 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                >
                  <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  Додати продукт
                </button>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-white shadow overflow-hidden sm:rounded-md">
          <ul className="divide-y divide-gray-200">
            {products.map((product) => (
              <li key={product.id}>
                <div className="px-4 py-4 sm:px-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center">
                      <div className="flex-shrink-0 h-12 w-12">
                        {product.images && product.images.length > 0 ? (
                          <img
                            className="h-12 w-12 rounded-lg object-cover"
                            src={product.images[0]}
                            alt={product.name}
                          />
                        ) : (
                          <div className="h-12 w-12 rounded-lg bg-gray-200 flex items-center justify-center">
                            <span className="text-xs text-gray-500">Н/З</span>
                          </div>
                        )}
                      </div>
                      <div className="ml-4">
                        <div className="text-sm font-medium text-gray-900">{product.name}</div>
                        <div className="text-sm text-gray-500">{product.price}</div>
                        <div className="flex items-center space-x-2 mt-1">
                          {product.featured && (
                            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                              В наявності
                            </span>
                          )}
                          {product.videoUrl && (
                            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                              Відео
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                    <div className="flex items-center space-x-4">
                      <Link
                        href={`/products/${product.slug}/`}
                        target="_blank"
                        className="text-gray-400 hover:text-gray-600"
                        title="Переглянути на сайті"
                      >
                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                      </Link>
                      <button
                        onClick={() => handleEdit(product)}
                        className="text-primary-600 hover:text-primary-900 text-sm font-medium"
                      >
                        Редагувати
                      </button>
                      <button
                        onClick={() => handleDelete(product.slug)}
                        className="text-red-600 hover:text-red-900 text-sm font-medium"
                      >
                        Видалити
                      </button>
                    </div>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      )}
    </AdminLayout>
  )
}

export default function AdminProductsPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AdminProductsContent />
    </Suspense>
  )
}