import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Link } from "react-router-dom";
import axios from 'axios';
import ReactPaginate from 'react-paginate';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
import { toast } from 'react-toastify';
import Swal from 'sweetalert2';
import { ClipLoader } from 'react-spinners';
import useGetJanazas from '../operations/queries/useGetJanazas';

const JanazaTable = () => {
    const [sortConfig, setSortConfig] = useState<{ key: string; direction: string }>({ key: 'id', direction: 'desc' });
    const [currentPage, setCurrentPage] = useState(0);
    const itemsPerPage = 10;

    const { janazas, manualRefetch, error, isLoading } = useGetJanazas();

    const handleSort = (field: string) => {
        setSortConfig({
            key: field,
            direction: sortConfig.key === field && sortConfig.direction === 'asc' ? 'desc' : 'asc'
        });
    };

    const getSortIcon = (field: string) => {
        if (sortConfig.key !== field) return null;
        return sortConfig.direction === 'asc' ? 
            <FontAwesomeIcon icon={faSortUp} style={{ color: '#3c4b64', marginLeft: '5px' }} /> : 
            <FontAwesomeIcon icon={faSortDown} style={{ color: '#3c4b64', marginLeft: '5px' }} />;
    };

    const offset = currentPage * itemsPerPage;
    const paginatedJanazas = janazas?.slice(offset, offset + itemsPerPage);

    const sortedJanazas = sortConfig.key ? paginatedJanazas?.slice().sort((a, b) => {
        const aValue = a ? sortConfig.key.split('.').reduce((o, i) => o ? o[i] : undefined, a) : undefined;
        const bValue = b ? sortConfig.key.split('.').reduce((o, i) => o ? o[i] : undefined, b) : undefined;

        if (aValue < bValue) return sortConfig.direction === 'asc' ? -1 : 1;
        if (aValue > bValue) return sortConfig.direction === 'asc' ? 1 : -1;
        return 0;
    }) : paginatedJanazas;

    const pageCount = Math.ceil(janazas?.length / itemsPerPage);

    const handlePageClick = ({ selected }: any) => {
        setCurrentPage(selected);
    };

    const handleValidate = async (janaza: any) => {
        try {
            const response = await axios.post(`/admin/janaza/${janaza.id}/validate`);
            if (response.status === 200) {
                manualRefetch()
                toast.success('Janaza ' + janaza.id + ' validée'); // Affiche un toast de succès
            } else {
                console.error('Error validating janaza:', response.data.error);
                toast.error('Erreur lors de la validation de la Janaza ' + janaza.id + ' : ' + response.data?.error); // Affiche un toast d'erreur
            }
        } catch (error) {
            console.error('Error validating janaza:', error);
            toast.error('Erreur lors de la validation de la Janaza ' + janaza.id + ' : ' + error); // Affiche un toast d'erreur
        }
    };

    const handleDelete = async (janaza: any) => {
        Swal.fire({
            title: "Attention",
            html: `Êtes-vous sûr de vouloir supprimer cette Janaza ?<br>(id: ${janaza.id})`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Oui",
            cancelButtonText: "Non",
            confirmButtonColor: "#000000",
            cancelButtonColor: "#000000",
            padding: "25px",
            preConfirm: async () => {
                try {
                    const response = await axios.post(`/admin/janaza/${janaza.id}/delete`);
                    if (response.data.success) {
                        manualRefetch()
                        toast.success('Janaza ' + janaza.id + ' supprimée');
                    } else {
                        console.error('Error deleting janaza:', response.data.error);
                        toast.error('Erreur lors de la suppression de la Janaza ' + janaza.id + ' : ' + response.data?.error);
                    }
                } catch (error) {
                    console.error('Error deleting janaza:', error);
                    toast.error('Erreur lors de la suppression de la Janaza ' + janaza.id + ' : ' + error);
                }
            }
        });
    };

    const handleActivate = async (janaza: any) => {
        try {
            const response = await axios.post(`/admin/janaza/${janaza.id}/activate`);
            if (response.status === 200) {
                manualRefetch()
                toast.success('Janaza ' + janaza.id + ' activée');
            } else {
                console.error('Error activating janaza:', response.data.error);
                toast.error('Erreur lors de l\'activation de la Janaza ' + janaza.id + ' : ' + response.data?.error);
            }
        } catch (error) {
            console.error('Error activating janaza:', error);
            toast.error('Erreur lors de l\'activation de la Janaza ' + janaza.id + ' : ' + error);
        }
    };

    const handleDeactivate = async (janaza: any) => {
        try {
            const response = await axios.post(`/admin/janaza/${janaza.id}/deactivate`);
            if (response.status === 200) {
                manualRefetch()
                toast.success('Janaza ' + janaza.id + ' désactivée');
            } else {
                console.error('Error deactivating janaza:', response.data.error);
                toast.error('Erreur lors de la désactivation de la Janaza ' + janaza.id + ' : ' + response.data?.error);
            }
        } catch (error) {
            console.error('Error deactivating janaza:', error);
            toast.error('Erreur lors de la désactivation de la Janaza ' + janaza.id + ' : ' + error);
        }
    };

    const styles = {
        textContainer: {
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis"
        }
    }

    console.log("janazasss", janazas)

    return (
        <>
            {
                !isLoading ? (
                    <>
                        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                            <h1>Liste des Janazas</h1>
                            {/* <a href="/admin/janaza/new">Créer un nouveau</a> */}
                        </div>
                        <table className="table">
                            <thead>
                                <tr style={{ textAlign: 'center' }}>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('id')} style={{ cursor: 'pointer' }}>
                                        ID {getSortIcon('id')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('deadName')} style={{ cursor: 'pointer' }}>
                                        Nom {getSortIcon('deadName')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('location.name')} style={{ cursor: 'pointer' }}>
                                        Lieu {getSortIcon('location.name')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('dateTime')} style={{ cursor: 'pointer' }}>
                                        Date {getSortIcon('dateTime')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('isValidated')} style={{ cursor: 'pointer' }}>
                                        Validé {getSortIcon('isValidated')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider" onClick={() => handleSort('isActive')} style={{ cursor: 'pointer' }}>
                                        Statut {getSortIcon('isActive')}
                                    </th>
                                    <th className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {Array.isArray(sortedJanazas) && sortedJanazas?.map((janaza: any) => (
                                    <tr key={janaza.id} style={{ textAlign: 'center' }}>
                                        <td>{janaza.id}</td>
                                        <td style={{ ...styles.textContainer, maxWidth: "150px" }}> {janaza.deadName}</td>
                                        <td style={{ ...styles.textContainer, maxWidth: "150px" }}>
                                            {janaza.location ? (
                                                <Link to={`/admin/location/${janaza.location.id}/edit`} state={janaza.location.id}>{janaza.location.name}</Link>
                                            ) : ''}
                                        </td>
                                        <td style={{ ...styles.textContainer, maxWidth: "150px" }}>{janaza.dateTime ? new Date(janaza.dateTime).toLocaleDateString('fr-FR') : ''}</td>
                                        <td style={{ ...styles.textContainer, maxWidth: "150px" }}>{janaza.isValidated === 1 ? "Oui" : janaza.isValidated === -1 ? "En attente" : "Non"}</td>
                                        <td style={{ ...styles.textContainer, maxWidth: "150px" }}>{janaza.isActive ? "Actif" : "Inactif"}</td>
                                        <td style={{ textAlign: 'right', paddingRight: '15px' }}>
                                            <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: '5px' }}>
                                                {janaza.isValidated != 1 && (
                                                    <button style={{ border: "none", backgroundColor: "transparent" }} onClick={() => handleValidate(janaza)}>
                                                        <FontAwesomeIcon icon={['fas', 'check-square']} size="xl" color='#2CA262' />
                                                    </button>
                                                )}
                                                {janaza.isActive ? (
                                                    <button style={{ border: "none", backgroundColor: "transparent" }} onClick={() => handleDeactivate(janaza)} title="Désactiver">
                                                        <FontAwesomeIcon icon={['fas', 'toggle-on']} size="xl" color='#2CA262' />
                                                    </button>
                                                ) : (
                                                    <button style={{ border: "none", backgroundColor: "transparent" }} onClick={() => handleActivate(janaza)} title="Activer">
                                                        <FontAwesomeIcon icon={['fas', 'toggle-off']} size="xl" color='#AD2E17' />
                                                    </button>
                                                )}
                                                <Link style={{ color: "black" }} className="bg-[#FFDA81] hover:bg-[#F5CD6B] text-xl rounded-lg inline-block font-semibold" to={{ pathname: `/admin/janaza/${janaza.id}/edit` }} state={janaza.id}>
                                                    <FontAwesomeIcon icon={['fas', 'edit']} size="lg" />
                                                </Link>
                                                <button style={{ border: "none", backgroundColor: "transparent" }} onClick={() => handleDelete(janaza)}>
                                                    <FontAwesomeIcon icon={['fas', 'times']} size="xl" color='#AD2E17' />
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                        <ReactPaginate
                            previousLabel={'Précédent'}
                            nextLabel={'Suivant'}
                            breakLabel={'...'}
                            pageCount={pageCount}
                            marginPagesDisplayed={2}
                            pageRangeDisplayed={5}
                            onPageChange={handlePageClick}
                            containerClassName={'pagination'}
                            activeClassName={'active'}
                            pageClassName="paginationItem"
                            pageLinkClassName="paginationLink"
                            previousClassName="paginationItem"
                            nextClassName="paginationItem"
                            breakClassName="paginationItem"
                            breakLinkClassName="paginationLink"
                            previousLinkClassName="paginationLink"
                            nextLinkClassName="paginationLink"
                            activeLinkClassName="paginationActive"
                        />
                        <style>{`
                .pagination {
                    display: flex;
                    list-style-type: none;
                    padding: 0;
                    margin: 20px 0;
                    justify-content: center;
                    user-select: none;
                }
                .paginationItem {
                    margin: 0 5px;
                }
                .paginationLink {
                    display: block;
                    padding: 10px;
                    text-decoration: none;
                    color: black;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    cursor: pointer;
                    user-select: none;
                }
                .paginationLink:hover {
                    background-color: #f0f0f0;
                    text-decoration: none;
                    color: black;
                }
                .paginationActive {
                    background-color: #000000;
                    color: white;
                    border-color: #000000;
                }
            `}</style>
                    </>) : (
                    <div style={{ flex: 1, display: "flex", width: "100%", height: "600px", justifyContent: "center", alignItems: "center" }}>
                        <ClipLoader size={20} color={"#000"} />
                    </div>
                )

            }

        </>
    );
}

export default JanazaTable;