import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Plus, Pencil, GripVertical } from "lucide-react"
import { getSliders } from "./actions"
import { Card, CardContent } from "@/components/ui/card"
import Image from "next/image"
import { Badge } from "@/components/ui/badge"

export default async function SlidersPage() {
    const { data: sliders, error } = await getSliders()

    if (error) {
        return <div className="p-8 text-red-500">Hata: {error}</div>
    }

    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">Slider Yönetimi</h2>
                <div className="flex items-center space-x-2">
                    <Link href="/dashboard/sliders/new">
                        <Button>
                            <Plus className="mr-2 h-4 w-4" /> Yeni Slider Ekle
                        </Button>
                    </Link>
                </div>
            </div>

            <div className="grid gap-4">
                {sliders?.length === 0 ? (
                    <Card>
                        <CardContent className="flex flex-col items-center justify-center p-12 text-muted-foreground">
                            <p>Henüz hiç slider eklenmemiş.</p>
                        </CardContent>
                    </Card>
                ) : (
                    sliders?.map((slider) => (
                        <Card key={slider.id} className="overflow-hidden">
                            <div className="flex flex-col sm:flex-row items-center p-2 gap-4">
                                <div className="p-2 cursor-move text-muted-foreground">
                                    <GripVertical className="h-5 w-5" />
                                </div>

                                <div className="relative w-full sm:w-48 h-32 sm:h-24 rounded-md overflow-hidden bg-slate-100 flex-shrink-0">
                                    <Image
                                        src={slider.image_url}
                                        alt={slider.title}
                                        fill
                                        className="object-cover"
                                    />
                                </div>

                                <div className="flex-1 min-w-0 grid gap-1 text-center sm:text-left">
                                    <div className="flex items-center gap-2 justify-center sm:justify-start">
                                        <h3 className="font-semibold truncate">{slider.title}</h3>
                                        {!slider.is_active && (
                                            <Badge variant="secondary">Pasif</Badge>
                                        )}
                                        <Badge variant="outline">Sıra: {slider.order}</Badge>
                                    </div>
                                    <p className="text-sm text-muted-foreground truncate">
                                        {slider.description || "Açıklama yok"}
                                    </p>
                                </div>

                                <div className="flex items-center gap-2 p-2">
                                    <Link href={`/dashboard/sliders/${slider.id}`}>
                                        <Button variant="ghost" size="icon">
                                            <Pencil className="h-4 w-4" />
                                        </Button>
                                    </Link>
                                    {/* Delete functionality usually needs a client component or form action, 
                                        for simplicity here we will just link to edit, 
                                        or we can add a delete button with server action in a separate client component if needed.
                                        Ideally, list items should be client components to handle delete easily.
                                    */}
                                </div>
                            </div>
                        </Card>
                    ))
                )}
            </div>
        </div>
    )
}