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

export const metadata = {
  title: 'Kategoriler - Admin',
}

export default async function CategoriesPage() {
  const categories = await prisma.categories.findMany({
    orderBy: { order_num: 'asc' },
    include: {
      _count: {
        select: { products: true }
      }
    }
  })

  return (
    <div className="space-y-6">
      <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">Kategoriler</h1>
          <p className="text-sm text-slate-500 mt-1">Menü kategorilerinizi yönetin ve sıralayın.</p>
        </div>
        <Link href="/admin/categories/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 Kategori
        </Link>
      </div>

      <div className="bg-white rounded-2xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="bg-slate-50/50 border-b border-slate-100 text-xs uppercase tracking-wider font-semibold text-slate-500">
                <th className="py-4 px-6">Kategori Adı</th>
                <th className="py-4 px-6 text-center">Sıra</th>
                <th className="py-4 px-6 text-center">Ürün Sayısı</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">
              {categories.map((category) => (
                <tr key={category.id} className="hover:bg-slate-50/50 transition-colors group">
                  <td className="py-4 px-6 font-semibold text-slate-800">{category.name_tr}</td>
                  <td className="py-4 px-6 text-center text-slate-500 font-medium">{category.order_num}</td>
                  <td className="py-4 px-6 text-center">
                    <span className="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-lg text-xs font-semibold">
                      {category._count.products} Ürün
                    </span>
                  </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 ${
                      category.status === 1 ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500'
                    }`}>
                      {category.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/categories/${category.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={category.id} />
                    </div>
                  </td>
                </tr>
              ))}
              {categories.length === 0 && (
                <tr>
                  <td colSpan={5} className="py-12 text-center text-slate-500">
                    Henüz kategori bulunmuyor. Yeni bir kategori ekleyerek başlayın.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
