import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DollarSign, ShoppingCart, Users, CreditCard } from "lucide-react"

export default function DashboardPage() {
    return (
        <div className="flex-1 space-y-4">
            <div className="flex items-center justify-between space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">Genel Bakış</h2>
            </div>

            {/* Stats Grid */}
            <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 Gelir</CardTitle>
                        <DollarSign className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">₺45,231.89</div>
                        <p className="text-xs text-muted-foreground">+20.1% geçen aya göre</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Abonelikler</CardTitle>
                        <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">+2350</div>
                        <p className="text-xs text-muted-foreground">+180.1% geçen aya göre</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Satışlar</CardTitle>
                        <CreditCard className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">+12,234</div>
                        <p className="text-xs text-muted-foreground">+19% geçen aya göre</p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">Aktif Şimdi</CardTitle>
                        <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">+573</div>
                        <p className="text-xs text-muted-foreground">+201 son bir saatte</p>
                    </CardContent>
                </Card>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
                {/* Recent Sales / Activity */}
                <Card className="col-span-4">
                    <CardHeader>
                        <CardTitle>Son Hareketler</CardTitle>
                        <CardDescription>
                            Bu ay 265+ satış yaptınız.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        {/* Mock List */}
                        <div className="space-y-8">
                            <div 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">OM</span>
                                </div>
                                <div className="ml-4 space-y-1">
                                    <p className="text-sm font-medium leading-none">Ozan Mehmet</p>
                                    <p className="text-sm text-muted-foreground">ozan@email.com</p>
                                </div>
                                <div className="ml-auto font-medium">+₺1,999.00</div>
                            </div>
                            <div 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">AÖ</span>
                                </div>
                                <div className="ml-4 space-y-1">
                                    <p className="text-sm font-medium leading-none">Ayşe Özdemir</p>
                                    <p className="text-sm text-muted-foreground">ayse@email.com</p>
                                </div>
                                <div className="ml-auto font-medium">+₺39.00</div>
                            </div>
                            <div 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">MK</span>
                                </div>
                                <div className="ml-4 space-y-1">
                                    <p className="text-sm font-medium leading-none">Mehmet Kaya</p>
                                    <p className="text-sm text-muted-foreground">mehmet@email.com</p>
                                </div>
                                <div className="ml-auto font-medium">+₺299.00</div>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Recent Products or Other Info */}
                <Card className="col-span-3">
                    <CardHeader>
                        <CardTitle>Son Eklenen Ürünler</CardTitle>
                        <CardDescription>
                            Stoğa yeni giren ürünler.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            <div className="flex justify-between items-center bg-slate-50 p-2 rounded">
                                <span className="text-sm font-medium">Çelik Kasa EV-100</span>
                                <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Stokta</span>
                            </div>
                            <div className="flex justify-between items-center bg-slate-50 p-2 rounded">
                                <span className="text-sm font-medium">Ofis Tipi XYZ</span>
                                <span className="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded">Azaldı</span>
                            </div>
                            <div className="flex justify-between items-center bg-slate-50 p-2 rounded">
                                <span className="text-sm font-medium">Otel Kasası H-20</span>
                                <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Stokta</span>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}