import prisma from '@/lib/prisma'
import { Pencil, Plus, 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-8">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-extrabold text-slate-900 tracking-tight">Ürün Yönetimi</h1>
          <p className="text-sm text-slate-500 mt-1">Tüm kategorilerdeki ürünlerinizi görüntüleyin ve düzenleyin.</p>
        </div>
        <Link href="/admin/products/new" className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl font-medium flex items-center gap-2 transition-all shadow-sm hover:shadow-md hover:-translate-y-0.5">
          <Plus size={18} /> Yeni Ürün Ekle
        </Link>
      </div>

      <div className="space-y-8">
        {categories.map((category) => (
          <div key={category.id} className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 overflow-hidden">
            <div className="bg-slate-50/50 px-6 py-5 border-b border-slate-100 flex justify-between items-center">
              <h2 className="text-lg font-bold text-slate-800 tracking-tight">{category.name_tr}</h2>
              <span className="bg-white px-3 py-1 rounded-full text-xs font-semibold text-slate-500 border border-slate-200 shadow-sm">
                {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-slate-100 text-xs uppercase tracking-wider font-semibold text-slate-500">
                      <th className="py-4 px-6 w-16">Resim</th>
                      <th className="py-4 px-6">İsim</th>
                      <th className="py-4 px-6">Fiyat</th>
                      <th className="py-4 px-6 text-center">Durum</th>
                      <th className="py-4 px-6 text-right">İşlemler</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100/80">
                    {category.products.map((product) => (
                      <tr key={product.id} className="hover:bg-slate-50/50 transition-colors group">
                        <td className="py-4 px-6">
                          {product.image_url ? (
                            <div className="relative w-12 h-12 rounded-xl overflow-hidden shadow-sm border border-slate-200 group-hover:scale-105 transition-transform">
                              <Image 
                                src={product.image_url} 
                                alt={product.name_tr}
                                fill
                                className="object-cover"
                              />
                            </div>
                          ) : (
                            <div className="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400 border border-slate-200 shadow-sm">
                              <ImageIcon size={20} />
                            </div>
                          )}
                        </td>
                        <td className="py-4 px-6 font-semibold text-slate-800">{product.name_tr}</td>
                        <td className="py-4 px-6 font-medium text-slate-600">₺{product.price.toString()}</td>
                        <td className="py-4 px-6 text-center">
                          <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold ${product.status === 1 ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500'}`}>
                            {product.status === 1 ? 'Aktif' : 'Pasif'}
                          </span>
                        </td>
                        <td className="py-4 px-6 text-right">
                          <div className="flex justify-end gap-1 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity">
                            <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-10 px-6 text-center text-slate-500 text-sm">
                Bu kategoride henüz ürün bulunmuyor.
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}