import { useState } from "react"
import { useResumes, useDeleteResume, useUpdateResume } from "@/features/resume/hooks/useResumes"
import { Button } from "@/components/ui/button"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Plus, MoreVertical, Pencil, Trash2, CheckCircle, XCircle } from "lucide-react"
import { format } from "date-fns"
import { tr } from "date-fns/locale"
import Swal from "sweetalert2"
import { ResumeForm } from "./ResumeForm"

export const ResumeList = () => {
    const { data: resumes, isLoading } = useResumes()
    const deleteResume = useDeleteResume()
    const updateResume = useUpdateResume()
    const [isFormOpen, setIsFormOpen] = useState(false)
    const [selectedResumeId, setSelectedResumeId] = useState<string | null>(null)

    const handleDelete = async (id: string) => {
        const result = await Swal.fire({
            title: "Emin misiniz?",
            text: "Bu özgeçmişi silmek istediğinize emin misiniz? Bu işlem geri alınamaz!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Evet, Sil",
            cancelButtonText: "İptal",
            confirmButtonColor: "#EF4444",
            cancelButtonColor: "#6B7280",
        })

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

    const handleToggleActive = (id: string, currentStatus: boolean) => {
        updateResume.mutate({
            id,
            data: { is_active: !currentStatus },
        })
    }

    if (isLoading) {
        return <div className="flex justify-center p-8">Yükleniyor...</div>
    }

    return (
        <div className="space-y-4">
            <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold tracking-tight">Özgeçmiş Yönetimi</h2>
                <Button onClick={() => { setSelectedResumeId(null); setIsFormOpen(true); }}>
                    <Plus className="mr-2 h-4 w-4" /> Yeni Özgeçmiş
                </Button>
            </div>

            <div className="rounded-md border bg-white dark:bg-gray-800 shadow-sm">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Başlık</TableHead>
                            <TableHead>Alt Başlık</TableHead>
                            <TableHead>Durum</TableHead>
                            <TableHead>Oluşturulma Tarihi</TableHead>
                            <TableHead className="w-[70px]"></TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {resumes?.map((resume) => (
                            <TableRow key={resume.id}>
                                <TableCell className="font-medium">{resume.title}</TableCell>
                                <TableCell>{resume.title_sub}</TableCell>
                                <TableCell>
                                    <div className="flex items-center gap-2">
                                        {resume.is_active ? (
                                            <span className="flex items-center text-green-600 text-sm bg-green-50 px-2 py-1 rounded-full border border-green-100 dark:bg-green-900/20 dark:border-green-800">
                                                <CheckCircle className="w-3 h-3 mr-1" /> Aktif
                                            </span>
                                        ) : (
                                            <span className="flex items-center text-gray-500 text-sm bg-gray-50 px-2 py-1 rounded-full border border-gray-100 dark:bg-gray-800 dark:border-gray-700">
                                                <XCircle className="w-3 h-3 mr-1" /> Pasif
                                            </span>
                                        )}
                                    </div>
                                </TableCell>
                                <TableCell>
                                    {format(new Date(resume.created_at), "d MMMM yyyy HH:mm", {
                                        locale: tr,
                                    })}
                                </TableCell>
                                <TableCell>
                                    <DropdownMenu>
                                        <DropdownMenuTrigger asChild>
                                            <Button variant="ghost" className="h-8 w-8 p-0">
                                                <MoreVertical className="h-4 w-4" />
                                            </Button>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent align="end">
                                            <DropdownMenuItem onClick={() => { setSelectedResumeId(resume.id); setIsFormOpen(true); }}>
                                                <Pencil className="mr-2 h-4 w-4" /> Düzenle
                                            </DropdownMenuItem>
                                            <DropdownMenuItem onClick={() => handleToggleActive(resume.id, resume.is_active)}>
                                                {resume.is_active ? (
                                                    <>
                                                        <XCircle className="mr-2 h-4 w-4" /> Pasife Al
                                                    </>
                                                ) : (
                                                    <>
                                                        <CheckCircle className="mr-2 h-4 w-4" /> Aktife Al
                                                    </>
                                                )}
                                            </DropdownMenuItem>
                                            <DropdownMenuItem
                                                className="text-red-600 focus:text-red-600"
                                                onClick={() => handleDelete(resume.id)}
                                            >
                                                <Trash2 className="mr-2 h-4 w-4" /> Sil
                                            </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </TableCell>
                            </TableRow>
                        ))}
                        {resumes?.length === 0 && (
                            <TableRow>
                                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">
                                    Henüz hiç özgeçmiş eklenmemiş.
                                </TableCell>
                            </TableRow>
                        )}
                    </TableBody>
                </Table>
            </div>

            {isFormOpen && (
                <ResumeForm
                    isOpen={isFormOpen}
                    onClose={() => setIsFormOpen(false)}
                    resumeId={selectedResumeId}
                />
            )}
        </div>
    )
}
