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

export const SiteInfoList = () => {
    const { data: siteInfos, isLoading } = useSiteInfos()
    const deleteSiteInfo = useDeleteSiteInfo()
    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 site bilgisini silmek istediğinize emin misiniz?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Evet, Sil",
            cancelButtonText: "İptal",
            confirmButtonColor: "#EF4444",
        })

        if (result.isConfirmed) {
            deleteSiteInfo.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 (
            <SiteInfoForm
                siteInfoId={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">Site Bilgileri</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>Logo (W)</TableHead>
                            <TableHead>Logo (B)</TableHead>
                            <TableHead>Telefon</TableHead>
                            <TableHead>Email</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {siteInfos?.map((info) => (
                            <TableRow key={info.id}>
                                <TableCell>
                                    {info.w_logo && (
                                        <div className="relative h-10 w-10 bg-gray-100 rounded">
                                            <img
                                                src={getMediaUrl(info.w_logo)}
                                                alt="White Logo"
                                                className="h-full w-full object-contain p-1"
                                            />
                                        </div>
                                    )}
                                </TableCell>
                                <TableCell>
                                    {info.b_logo && (
                                        <div className="relative h-10 w-10 bg-gray-800 rounded">
                                            <img
                                                src={getMediaUrl(info.b_logo)}
                                                alt="Black Logo"
                                                className="h-full w-full object-contain p-1"
                                            />
                                        </div>
                                    )}
                                </TableCell>
                                <TableCell>{info.phone}</TableCell>
                                <TableCell>{info.email}</TableCell>
                                <TableCell className="text-right">
                                    <div className="flex justify-end gap-2">
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            onClick={() => handleEdit(info.id)}
                                        >
                                            <Pencil className="h-4 w-4" />
                                        </Button>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="text-red-500 hover:text-red-600"
                                            onClick={() => handleDelete(info.id)}
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))}
                        {siteInfos?.length === 0 && (
                            <TableRow>
                                <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                                    Henüz site bilgisi eklenmemiş.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}
