import { createClient } from "@/lib/supabase-server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, ShoppingCart, Users, Package } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default async function DashboardPage() {
    const supabase = createClient()

    // Fetch real data
    const { data: products } = await supabase
        .from("products")
        .select("*")
        .order("created_at", { ascending: false })

    const totalProducts = products?.length || 0
    const totalValue = products?.reduce((acc, product) => acc + (Number(product.price) || 0), 0) || 0
    const recentProducts = products?.slice(0, 5) || []

    // Calculate unique categories
    const categories = new Set(products?.map(p => p.category)).size

    return (
        <div className="flex-1 space-y-4 p-8 pt-6">
            <div className="flex items-center justify-between space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">Genel Bakış</h2>
                <div className="flex items-center space-x-2">
                    <Link href="/dashboard/products/new">
                        <Button>Ürün Ekle</Button>
                    </Link>
                </div>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Toplam Ürün Değeri</CardTitle>
                        <DollarSign className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">₺{totalValue.toLocaleString('tr-TR', { minimumFractionDigits: 2 })}</div>
                        <p className="text-xs text-muted-foreground">Stoktaki toplam varlık</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Toplam Ürün</CardTitle>
                        <Package className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{totalProducts}</div>
                        <p className="text-xs text-muted-foreground">Kayıtlı ürün sayısı</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Kategoriler</CardTitle>
                        <ShoppingCart className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{categories}</div>
                        <p className="text-xs text-muted-foreground">Aktif kategori</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Son Güncelleme</CardTitle>
                        <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">Şimdi</div>
                        <p className="text-xs text-muted-foreground">Canlı veri akışı</p>
                    </CardContent>
                </Card>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
                <Card className="col-span-4">
                    <CardHeader>
                        <CardTitle>Son Eklenen Ürünler</CardTitle>
                        <CardDescription>
                            En son eklenen {recentProducts.length} ürün.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-8">
                            {recentProducts.map((product) => (
                                <div key={product.id} className="flex items-center">
                                    <div className="h-9 w-9 rounded-full bg-slate-100 flex items-center justify-center">
                                        <span className="font-bold text-xs">{product.name.substring(0, 2).toUpperCase()}</span>
                                    </div>
                                    <div className="ml-4 space-y-1">
                                        <p className="text-sm font-medium leading-none">{product.name}</p>
                                        <p className="text-sm text-muted-foreground">{product.category}</p>
                                    </div>
                                    <div className="ml-auto font-medium">₺{Number(product.price).toLocaleString('tr-TR')}</div>
                                </div>
                            ))}
                            {recentProducts.length === 0 && (
                                <div className="text-center py-4 text-muted-foreground">Henüz ürün yok.</div>
                            )}
                        </div>
                    </CardContent>
                </Card>

                {/* Placeholder for future features or quick actions */}
                <Card className="col-span-3">
                    <CardHeader>
                        <CardTitle>Hızlı İşlemler</CardTitle>
                        <CardDescription>
                            Yönetim paneli kısayolları.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="flex flex-col space-y-2">
                            <Link href="/dashboard/products/new">
                                <Button variant="outline" className="w-full justify-start">
                                    <PlusIcon className="mr-2 h-4 w-4" /> Yeni Ürün Ekle
                                </Button>
                            </Link>
                            <Button variant="outline" className="w-full justify-start" disabled>
                                <ShoppingCart className="mr-2 h-4 w-4" /> Siparişleri Yönet (Yakında)
                            </Button>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}

function PlusIcon(props: React.SVGProps<SVGSVGElement>) {
    return (
        <svg
            {...props}
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="M5 12h14" />
            <path d="M12 5v14" />
        </svg>
    )
}