import { createClient } from "@/lib/supabase-server"
import { format } from "date-fns"
import { tr } from "date-fns/locale"
import Link from "next/link"
import { Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"

export default async function CategoriesPage() {
    const supabase = createClient()
    const { data: categories } = await supabase
        .from('categories')
        .select('*')
        .order('created_at', { ascending: false })

    return (
        <div className="flex-1 space-y-4 p-8 pt-6">
            <div className="flex items-center justify-between">
                <div>
                    <h2 className="text-3xl font-bold tracking-tight">Kategoriler ({categories?.length || 0})</h2>
                    <p className="text-muted-foreground">
                        Sitenizdeki ürün kategorilerini yönetin.
                    </p>
                </div>
                <Link href="/dashboard/categories/new">
                    <Button>
                        <Plus className="mr-2 h-4 w-4" /> Yeni Ekle
                    </Button>
                </Link>
            </div>

            <div className="rounded-md border p-4">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Ad</TableHead>
                            <TableHead>Slug</TableHead>
                            <TableHead>Oluşturulma Tarihi</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {categories?.map((category) => (
                            <TableRow key={category.id}>
                                <TableCell className="font-medium">{category.name}</TableCell>
                                <TableCell>{category.slug}</TableCell>
                                <TableCell>
                                    {format(new Date(category.created_at), "d MMMM yyyy", { locale: tr })}
                                </TableCell>
                                <TableCell className="text-right">
                                    <Link href={`/dashboard/categories/${category.id}`}>
                                        <Button variant="ghost" size="sm">
                                            Düzenle
                                        </Button>
                                    </Link>
                                </TableCell>
                            </TableRow>
                        ))}
                        {(!categories || categories.length === 0) && (
                            <TableRow>
                                <TableCell colSpan={4} className="h-24 text-center">
                                    Kategori bulunamadı.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}
