'use client';
import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableHeader, TableRow } from "@/components/ui/table";
import { Eye, Trash2, Edit } from 'lucide-react';
import { useModal } from "@/hooks/useModal";
import { Modal } from "@/components/ui/modal";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { Task, TaskStatus } from "@/types/types";
import { cn } from '@/lib/utils';

function TaskTable({ tasks, onDelete }: { tasks: Task[], onDelete: (id: number) => void }) {
    const { isOpen, openModal, closeModal } = useModal();
    const [selectedTask, setSelectedTask] = useState<Task | null>(null);
    const [action, setAction] = useState(''); // 'view', 'edit', 'delete'
    const router = useRouter();

    const handleActionClick = (task: Task, actionType: string) => {
        setSelectedTask(task);
        setAction(actionType);
        openModal();
    };

    const handleRedirection = (task: Task, actionType: string) => {
        if (actionType === "edit") {
            router.push(`/tasks/${task.id}/edit`);
        }
        else if (actionType === "view") {
            router.push(`/tasks/${task.id}`);
        }
    };

    const handleDeleteConfirm = () => {
        if (selectedTask) {
            onDelete(selectedTask.id);
            closeModal();
        }
    };

    const getStatusClasses = (status: TaskStatus) => {
        switch (status) {
            case TaskStatus.PENDING:
                return 'bg-yellow-100 text-yellow-800';
            case TaskStatus.IN_PROGRESS:
                return 'bg-blue-100 text-blue-800';
            case TaskStatus.COMPLETED:
                return 'bg-green-100 text-green-800';
            case TaskStatus.OVERDUE:
                return 'bg-red-100 text-red-800';
            default:
                return 'bg-gray-100 text-gray-800';
        }
    };

    return (
        <>
            <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">
                <div className="max-w-full overflow-x-auto">
                    <div className="min-w-[1102px]">
                        <Table>
                            <TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">
                                <TableRow>
                                    <TableCell className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Tâche
                                    </TableCell>
                                    <TableCell className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Responsable
                                    </TableCell>
                                    <TableCell className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Statut
                                    </TableCell>
                                    <TableCell className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Échéance
                                    </TableCell>
                                    <TableCell className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Actions
                                    </TableCell>
                                </TableRow>
                            </TableHeader>

                            <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
                                {tasks.map((task) => (
                                    <TableRow key={task.id}>
                                        <TableCell className="px-5 py-4 sm:px-6 text-start">
                                            <div className="flex items-center gap-3">
                                                <div>
                                                    <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
                                                        {task.title}
                                                    </span>
                                                    <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
                                                        {task.isPrivate ? 'Privée' : 'Publique'}
                                                    </span>
                                                </div>
                                            </div>
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
                                            {task.responsible?.firstName} {task.responsible?.lastName}
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-start text-theme-sm">
                                            <span className={cn("px-2 inline-flex text-xs leading-5 font-semibold rounded-full", getStatusClasses(task.status))}>
                                                {task.status}
                                            </span>
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                                            {task.dueDate ? new Date(task.dueDate).toLocaleDateString() : 'Non définie'}
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                                            <div className="flex space-x-2">
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    onClick={() => handleRedirection(task, 'view')}
                                                    title="Voir la tâche"
                                                >
                                                    <Eye size={20} />
                                                </Button>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    onClick={() => handleRedirection(task, 'edit')}
                                                    title="Modifier"
                                                >
                                                    <Edit size={20} />
                                                </Button>
                                                <Button
                                                    variant="ghost"
                                                    size="icon"
                                                    onClick={() => handleActionClick(task, 'delete')}
                                                    title="Supprimer"
                                                >
                                                    <Trash2 size={20} />
                                                </Button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>

            <Modal isOpen={isOpen} onClose={closeModal}>
                {action === 'delete' && selectedTask && (
                    <div className="p-4">
                        <h3 className="text-xl font-semibold mb-4">Confirmer la suppression</h3>
                        <p>Êtes-vous sûr de vouloir supprimer la tâche "{selectedTask.title}" ?</p>
                        <div className="flex justify-end mt-6 space-x-2">
                            <Button onClick={closeModal} variant="outline">Annuler</Button>
                            <Button onClick={handleDeleteConfirm} variant="destructive">Supprimer</Button>
                        </div>
                    </div>
                )}
            </Modal>
        </>
    );
}

export default TaskTable;