import prisma from '@/lib/prisma'
import { Pencil, Plus, Trash2, Image as ImageIcon } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'
import DeleteButton from './DeleteButton'

export const metadata = {
  title: 'Ürün Yönetimi - Admin',
}

export default async function ProductsPage() {
  const categories = await prisma.categories.findMany({
    orderBy: { order_num: 'asc' },
    include: {
      products: {
        orderBy: { id: 'asc' },
      },
    },
  })

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">Ürün Yönetimi</h1>
        <Link href="/admin/products/new" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
          <Plus size={20} />
          <span>Yeni Ürün Ekle</span>
        </Link>
      </div>

      <div className="space-y-8">
        {categories.map((category) => (
          <div key={category.id} className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
              <h2 className="text-lg font-bold text-gray-800">{category.name_tr}</h2>
              <span className="text-sm text-gray-500 font-medium">{category.products.length} ürün</span>
            </div>
            
            {category.products.length > 0 ? (
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse">
                  <thead>
                    <tr className="border-b border-gray-100">
                      <th className="py-3 px-6 text-sm font-semibold text-gray-600 w-16">Resim</th>
                      <th className="py-3 px-6 text-sm font-semibold text-gray-600">İsim</th>
                      <th className="py-3 px-6 text-sm font-semibold text-gray-600">Fiyat</th>
                      <th className="py-3 px-6 text-sm font-semibold text-gray-600">Durum</th>
                      <th className="py-3 px-6 text-sm font-semibold text-gray-600 text-right">İşlemler</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {category.products.map((product) => (
                      <tr key={product.id} className="hover:bg-gray-50 transition-colors">
                        <td className="py-3 px-6">
                          {product.image_url ? (
                            <div className="relative w-12 h-12 rounded-lg overflow-hidden border border-gray-200">
                              <Image 
                                src={product.image_url} 
                                alt={product.name_tr}
                                fill
                                className="object-cover"
                              />
                            </div>
                          ) : (
                            <div className="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 border border-gray-200">
                              <ImageIcon size={20} />
                            </div>
                          )}
                        </td>
                        <td className="py-3 px-6 font-medium text-gray-900">{product.name_tr}</td>
                        <td className="py-3 px-6 text-gray-600">₺{product.price.toString()}</td>
                        <td className="py-3 px-6">
                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${product.status === 1 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                            {product.status === 1 ? 'Aktif' : 'Pasif'}
                          </span>
                        </td>
                        <td className="py-3 px-6 text-right">
                          <div className="flex justify-end gap-2">
                            <Link href={`/admin/products/${product.id}/edit`} className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="Düzenle">
                              <Pencil size={18} />
                            </Link>
                            <DeleteButton id={product.id} />
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="py-6 px-6 text-gray-500 text-sm">
                Bu kategoride henüz ürün yok.
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}