import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableHeader, TableRow, TableHead } from "@/components/ui/table";
import {Eye, Trash2, Edit, Folder, Folders} 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 { Client } from '@/types/types';

interface ClientTableProps {
    clients: Client[];
    onDelete: (id: number) => void;
}

function ClientTable({ clients, onDelete }: ClientTableProps) {
    const { isOpen, openModal, closeModal } = useModal();
    const [selectedClient, setSelectedClient] = useState<Client | null>(null);
    const [action, setAction] = useState<string>(''); // 'view', 'edit', 'delete', 'folders'
    const router = useRouter();

    const handleActionClick = (client: Client, actionType: string) => {
        setSelectedClient(client);
        setAction(actionType);
        openModal();
    };

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

    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>
                                    <TableHead className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Client
                                    </TableHead>
                                    <TableHead className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Contact
                                    </TableHead>
                                    <TableHead className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Adresse
                                    </TableHead>
                                    <TableHead className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Création
                                    </TableHead>
                                    <TableHead className="text-xl px-5 py-3 font-medium text-black-500 text-start">
                                        Actions
                                    </TableHead>
                                </TableRow>
                            </TableHeader>

                            <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">
                                {clients.map((client, index) => (
                                    <TableRow key={index+1}>
                                        <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">
                                                    {client.firstName} {client.lastName}
                                                  </span>
                                                                            <span className="block text-gray-500 text-theme-xs dark:text-gray-400">
                                                    {client.nationality}
                                                  </span>
                                                </div>
                                            </div>
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
                                            <div className="space-y-1">
                                                <div>{client.email}</div>
                                                <div>{client.mobilePhone}</div>
                                            </div>
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">
                                            <div className="space-y-1">
                                                <div>{client.street} {client.streetNumber}</div>
                                                <div>{client.postalCode} {client.stateCanton}</div>
                                                <div>{client.country}</div>
                                            </div>
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                                            {new Date(client.creationDate).toLocaleDateString()}
                                        </TableCell>

                                        <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">
                                            <div className="flex space-x-2">
                                                <button
                                                    onClick={() => handleRedirection(client, 'view')}
                                                    className="p-2 text-blue-500 hover:bg-blue-50 rounded-full"
                                                    title="Voir le client"
                                                >
                                                    <Eye size={24} />
                                                </button>
                                                <button
                                                    onClick={() => handleRedirection(client, 'edit')}
                                                    className="p-2 text-green-500 hover:bg-green-50 rounded-full"
                                                    title="Modifier"
                                                >
                                                    <Edit size={24} />
                                                </button>
                                                <button
                                                    onClick={() => handleRedirection(client, 'folders')}
                                                    className="p-2 text-purple-500 hover:bg-purple-50 rounded-full"
                                                    title="Voir les dossiers"
                                                >
                                                    <Folders size={24} />
                                                </button>
                                                <button
                                                    onClick={() => handleActionClick(client, 'delete')}
                                                    className="p-2 text-red-500 hover:bg-red-50 rounded-full"
                                                    title="Supprimer"
                                                >
                                                    <Trash2 size={24} />
                                                </button>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>

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

                    {action === 'view' && (
                        <>
                            <h3 className="text-xl font-semibold mb-4">Détails du client</h3>
                            <div className="space-y-3">
                                <p><span className="font-medium">Nom:</span> {selectedClient?.firstName} {selectedClient?.lastName}</p>
                                <p><span className="font-medium">Email:</span> {selectedClient?.email}</p>
                                <p><span className="font-medium">Téléphone:</span> {selectedClient?.mobilePhone}</p>
                                <p><span className="font-medium">Adresse:</span> {selectedClient?.street} {selectedClient?.streetNumber}, {selectedClient?.postalCode} {selectedClient?.stateCanton}</p>
                            </div>
                            <div className="flex justify-end mt-6">
                                <Button onClick={closeModal}>Fermer</Button>
                            </div>
                        </>
                    )}

                    {/*{action === 'edit' && (*/}
                    {/*    <>*/}
                    {/*        <h3 className="text-xl font-semibold mb-4">Modifier le client</h3>*/}
                    {/*        /!* Formulaire de modification *!/*/}
                    {/*        <div className="space-y-4">*/}
                    {/*            <div className="grid grid-cols-2 gap-4">*/}
                    {/*                <div>*/}
                    {/*                    <label className="block mb-1">Prénom</label>*/}
                    {/*                    <input*/}
                    {/*                        type="text"*/}
                    {/*                        defaultValue={selectedClient?.firstName}*/}
                    {/*                        className="w-full p-2 border rounded"*/}
                    {/*                    />*/}
                    {/*                </div>*/}
                    {/*                <div>*/}
                    {/*                    <label className="block mb-1">Nom</label>*/}
                    {/*                    <input*/}
                    {/*                        type="text"*/}
                    {/*                        defaultValue={selectedClient?.lastName}*/}
                    {/*                        className="w-full p-2 border rounded"*/}
                    {/*                    />*/}
                    {/*                </div>*/}
                    {/*            </div>*/}
                    {/*        </div>*/}
                    {/*        <div className="flex justify-end space-x-3 mt-6">*/}
                    {/*            <Button variant="outline" onClick={closeModal}>*/}
                    {/*                Annuler*/}
                    {/*            </Button>*/}
                    {/*            <Button*/}
                    {/*                onClick={() => {*/}
                    {/*                    closeModal();*/}
                    {/*                }}*/}
                    {/*            >*/}
                    {/*                Enregistrer*/}
                    {/*            </Button>*/}
                    {/*        </div>*/}
                    {/*    </>*/}
                    {/*)}*/}

                    {/*{action === 'folders' && (*/}
                    {/*    <>*/}
                    {/*        <h3 className="text-xl font-semibold mb-4">Dossiers du client</h3>*/}
                    {/*        <div className="space-y-2">*/}
                    {/*            <div className="p-3 border rounded">*/}
                    {/*                <p className="font-medium">Dossier #12345</p>*/}
                    {/*                <p className="text-sm text-gray-500">Créé le 12/05/2023</p>*/}
                    {/*            </div>*/}
                    {/*            <div className="p-3 border rounded">*/}
                    {/*                <p className="font-medium">Dossier #67890</p>*/}
                    {/*                <p className="text-sm text-gray-500">Créé le 20/06/2023</p>*/}
                    {/*            </div>*/}
                    {/*        </div>*/}
                    {/*        <div className="flex justify-end mt-6">*/}
                    {/*            <Button onClick={closeModal}>Fermer</Button>*/}
                    {/*        </div>*/}
                    {/*    </>*/}
                    {/*)}*/}
                </div>
            </Modal>
        </>
    );
}

export default ClientTable;