import { useState } from "react"
import { useBanners, useDeleteBanner } from "@/features/site-management/hooks/useBanners"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Plus, Pencil, Trash2, ExternalLink } from "lucide-react"
import { BannerForm } from "./BannerForm"
import Swal from "sweetalert2"
import { getMediaUrl } from "@/lib/utils"

export const BannerList = () => {
    const { data: banners, isLoading } = useBanners()
    const deleteBanner = useDeleteBanner()
    const [isFormOpen, setIsFormOpen] = useState(false)
    const [editingId, setEditingId] = useState<string | null>(null)

    const handleDelete = async (id: string) => {
        const result = await Swal.fire({
            title: "Emin misiniz?",
            text: "Bu bannerı silmek istediğinize emin misiniz?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Evet, Sil",
            cancelButtonText: "İptal",
            confirmButtonColor: "#EF4444",
        })

        if (result.isConfirmed) {
            deleteBanner.mutate(id)
        }
    }

    const handleEdit = (id: string) => {
        setEditingId(id)
        setIsFormOpen(true)
    }

    const handleCreate = () => {
        setEditingId(null)
        setIsFormOpen(true)
    }

    if (isLoading) return <div>Yükleniyor...</div>

    if (isFormOpen) {
        return (
            <BannerForm
                bannerId={editingId}
                onClose={() => setIsFormOpen(false)}
            />
        )
    }

    return (
        <div className="space-y-4">
            <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold tracking-tight">Banner Yönetimi</h2>
                <Button onClick={handleCreate}>
                    <Plus className="mr-2 h-4 w-4" /> Yeni Ekle
                </Button>
            </div>

            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Görsel</TableHead>
                            <TableHead>Küçük Görsel</TableHead>
                            <TableHead>Başlık</TableHead>
                            <TableHead>Durum</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {banners?.map((banner) => (
                            <TableRow key={banner.id}>
                                <TableCell>
                                    <div className="relative h-16 w-24 bg-gray-100 rounded overflow-hidden">
                                        <img
                                            src={getMediaUrl(banner.image)}
                                            alt={banner.title}
                                            className="h-full w-full object-cover"
                                        />
                                    </div>
                                </TableCell>
                                <TableCell>
                                    {banner.image_k && (
                                        <div className="relative h-16 w-16 bg-gray-100 rounded overflow-hidden">
                                            <img
                                                src={getMediaUrl(banner.image_k)}
                                                alt="Small Banner"
                                                className="h-full w-full object-cover"
                                            />
                                        </div>
                                    )}
                                </TableCell>
                                <TableCell>
                                    <div className="font-medium">{banner.title}</div>
                                    <div className="text-sm text-muted-foreground">{banner.sub_title}</div>
                                    {banner.link && (
                                        <a href={banner.link} target="_blank" rel="noreferrer" className="flex items-center text-xs text-blue-500 hover:underline mt-1">
                                            {banner.link} <ExternalLink className="h-3 w-3 ml-1" />
                                        </a>
                                    )}
                                </TableCell>
                                <TableCell>
                                    {banner.is_active ? (
                                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Aktif
                                        </span>
                                    ) : (
                                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            Pasif
                                        </span>
                                    )}
                                </TableCell>
                                <TableCell className="text-right">
                                    <div className="flex justify-end gap-2">
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => handleEdit(banner.id)}
                                        >
                                            <Pencil className="h-4 w-4" />
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="text-red-500 hover:text-red-600"
                                            onClick={() => handleDelete(banner.id)}
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))}
                        {banners?.length === 0 && (
                            <TableRow>
                                <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                                    Henüz banner eklenmemiş.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}
