import React, {useEffect, useState} from 'react';
import { Trash2, Edit, Folder as FolderIcon, ChevronRight, Calendar, User } from 'lucide-react';
import { useModal } from "@/hooks/useModal";
import { Modal } from "@/components/ui/modal";
import Button from "@/components/ui/button/Button";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { Folder } from '@/types/types';

interface FolderTableProps {
    folders: Folder[];
    onDelete: (id: number) => void;
}

function FolderTable({ folders, onDelete }: FolderTableProps) {
    const { isOpen, openModal, closeModal } = useModal();
    const [selectedFolder, setSelectedFolder] = useState<Folder | null>(null);
    const [action, setAction] = useState<string>('');
    const router = useRouter();

    const getStatusColor = (status: string) => {
        switch(status) {
            case 'PROGRESS':
                return 'bg-blue-100 text-blue-800';
            case 'PENDING':
                return 'bg-yellow-100 text-yellow-800';
            case 'FINISHED':
                return 'bg-green-100 text-green-800';
            default:
                return 'bg-gray-100 text-gray-800';
        }
    };

    const handleActionClick = (folder: Folder, actionType: string) => {
        setSelectedFolder(folder);
        setAction(actionType);
        openModal();
    };

    const handleRedirection = (folder: Folder, actionType: string) => {
        if (actionType === "edit") {
            router.push(`/folders/${folder.id}/edit`);
        }
        else if (actionType === "view") {
            router.push(`/folders/${folder.id}`);
        }
        setAction(actionType);
    };

    return (
        <>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {folders.map((folder) => (
                    <div key={folder.id} className="bg-white shadow-md rounded-lg p-5 border border-gray-200">
                        <div className="border-b pb-3 mb-3">
                            <h3 className="text-xl font-bold text-gray-900">
                                {folder.client?.firstName} {folder.client?.lastName}
                            </h3>
                            <div className="mt-2">
                                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(folder.status)}`}>
                                    {folder.status}
                                </span>
                            </div>
                        </div>

                        <div className="space-y-2">
                            <div className="flex items-center text-gray-700">
                                <Calendar size={16} className="mr-2 text-gray-500" />
                                <span className="text-sm">
                                    Créé le: {new Date(folder.createdAt).toLocaleDateString()}
                                </span>
                            </div>



                            <div className="flex items-center text-gray-700">
                                <User size={16} className="mr-2 text-gray-500" />
                                <span className="text-sm">
                                    Client: {folder.client?.email}
                                </span>
                            </div>

                            <div className="flex space-x-2 pt-2">
                                <button
                                    onClick={() => handleRedirection(folder, 'edit')}
                                    className="p-2 text-green-500 hover:bg-green-50 rounded-full"
                                    title="Modifier"
                                >
                                    <Edit size={20} />
                                </button>
                                <button
                                    onClick={() => handleActionClick(folder, 'delete')}
                                    className="p-2 text-red-500 hover:bg-red-50 rounded-full"
                                    title="Supprimer"
                                >
                                    <Trash2 size={20} />
                                </button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>

            {/* Modal de confirmation de suppression */}
            <Modal isOpen={isOpen} onClose={closeModal} className="max-w-md">
                <div className="p-6 bg-white dark:bg-gray-800 rounded-lg">
                    <h3 className="text-xl font-semibold mb-4">Confirmer la suppression</h3>
                    <p className="mb-6">Êtes-vous sûr de vouloir supprimer le dossier de {selectedFolder?.client?.firstName} {selectedFolder?.client?.lastName} ?</p>
                    <div className="flex justify-end space-x-3">
                        <Button variant="outline" onClick={closeModal}>
                            Annuler
                        </Button>
                        <Button
                            onClick={() => {
                                if (selectedFolder) {
                                    onDelete(selectedFolder.id);
                                }
                                closeModal();
                            }}
                            className="bg-red-500 hover:bg-red-600"
                        >
                            Supprimer
                        </Button>
                    </div>
                </div>
            </Modal>
        </>
    );
}

export default FolderTable;