import { createClient } from "@/lib/supabase-server"
import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"



// Helper to get products
async function getProducts() {
    const supabase = createClient()
    const { data, error } = await supabase
        .from("products")
        .select("*")
        .eq("is_active", true)
        .order("created_at", { ascending: false })

    if (error) {
        console.error("Error fetching products:", error)
        return []
    }
    return data
}

export default async function ProductsPage() {
    const products = await getProducts()

    return (
        <div className="container py-12 md:py-24">
            <div className="flex flex-col items-center mb-12 text-center">
                <h1 className="text-4xl font-bold tracking-tight mb-4 font-outfit">Ürün Koleksiyonumuz</h1>
                <p className="text-muted-foreground max-w-2xl">
                    Güvenliğiniz için en son teknoloji ile üretilmiş, sertifikalı çelik kasa çözümlerimizi inceleyin.
                </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {products && products.length > 0 ? (
                    products.map((product) => (
                        <Card key={product.id} className="overflow-hidden border-0 shadow-md hover:shadow-xl transition-all duration-300 group">
                            <div className="aspect-[4/5] relative bg-slate-100 dark:bg-slate-800">
                                {product.image_url ? (
                                    <Image
                                        src={product.image_url}
                                        alt={product.name}
                                        fill
                                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                                    />
                                ) : (
                                    <div className="absolute inset-0 flex items-center justify-center text-slate-400">
                                        <span className="text-sm">Görsel Yok</span>
                                    </div>
                                )}
                            </div>
                            <CardHeader className="p-4">
                                <div className="flex justify-between items-start">
                                    <div className="w-full">
                                        <div className="flex justify-between items-center w-full">
                                            <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">{product.category}</span>
                                            {product.product_code && (
                                                <span className="text-xs font-semibold text-slate-400">#{product.product_code}</span>
                                            )}
                                        </div>
                                        <CardTitle className="text-lg mt-1">{product.name}</CardTitle>
                                    </div>
                                </div>
                            </CardHeader>
                            <CardFooter className="p-4 pt-0">
                                <Button className="w-full" variant="outline" asChild>
                                    <Link href={`/products/${product.id}`}>
                                        Detayları İncele
                                    </Link>
                                </Button>
                            </CardFooter>
                        </Card>
                    ))
                ) : (
                    <div className="col-span-full text-center py-12">
                        <p className="text-muted-foreground">Henüz vitrinde ürünümüz bulunmuyor.</p>
                    </div>
                )}
            </div>
        </div>
    )
}