import { useState } from "react"
import { useMainMenus, useDeleteMainMenu } from "@/features/main-menu/hooks/useMainMenu"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { MainMenuForm } from "./MainMenuForm"
import { Plus, Edit, Trash2 } from "lucide-react"
import Swal from "sweetalert2"
import { formatDate } from "@/lib/utils"

export const MainMenuList = () => {
    const { data: menus, isLoading } = useMainMenus()
    const deleteMenu = useDeleteMainMenu()
    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 menü yapılandırmasını silmek istediğinize emin misiniz?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Evet, Sil",
            cancelButtonText: "İptal",
            confirmButtonColor: "#ef4444",
            cancelButtonColor: "#6b7280",
        })

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

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

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

    const handleCloseForm = () => {
        setIsFormOpen(false)
        setEditingId(null)
    }

    if (isFormOpen) {
        return <MainMenuForm menuId={editingId} onClose={handleCloseForm} />
    }

    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between">
                <div>
                    <h2 className="text-3xl font-bold tracking-tight">Menü Yönetimi</h2>
                    <p className="text-muted-foreground">
                        Site navigasyon menüsünü buradan yönetebilirsiniz.
                    </p>
                </div>
                <Button onClick={handleCreate}>
                    <Plus className="mr-2 h-4 w-4" /> Yeni Menü Ekle
                </Button>
            </div>

            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Anasayfa</TableHead>
                            <TableHead>Hakkımda</TableHead>
                            <TableHead>Hizmetler</TableHead>
                            <TableHead>İletişim</TableHead>
                            <TableHead>Durum</TableHead>
                            <TableHead>Oluşturulma Tarihi</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {isLoading ? (
                            <TableRow>
                                <TableCell colSpan={7} className="h-24 text-center">
                                    Yükleniyor...
                                </TableCell>
                            </TableRow>
                        ) : menus?.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={7} className="h-24 text-center">
                                    Henüz menü eklenmemiş.
                                </TableCell>
                            </TableRow>
                        ) : (
                            menus?.map((menu) => (
                                <TableRow key={menu.id}>
                                    <TableCell className="font-medium">{menu.home}</TableCell>
                                    <TableCell>{menu.about}</TableCell>
                                    <TableCell>{menu.services}</TableCell>
                                    <TableCell>{menu.contact}</TableCell>
                                    <TableCell>
                                        <Badge variant={menu.is_active ? "default" : "secondary"}>
                                            {menu.is_active ? "Aktif" : "Pasif"}
                                        </Badge>
                                    </TableCell>
                                    <TableCell>{formatDate(menu.created_at)}</TableCell>
                                    <TableCell className="text-right">
                                        <div className="flex justify-end gap-2">
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                onClick={() => handleEdit(menu.id)}
                                            >
                                                <Edit className="h-4 w-4" />
                                            </Button>
                                            <Button
                                                variant="ghost"
                                                size="icon"
                                                className="text-red-500 hover:text-red-700 hover:bg-red-100"
                                                onClick={() => handleDelete(menu.id)}
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}
