import React, { useState, useContext, useEffect } from 'react';
import { FrontendContext } from '../../App/FrontendContext';
import Loader from '../../../components/core/Loader';
import ecreIcons from '../../../components/core/icons';
import { translate } from '../../../Helper';

function ReferralTableBlock({settings_mx}) {
    const { loadingSettings, loadingInvitesCoupon, inviteCoupons, settings } = useContext(FrontendContext);

    if (loadingSettings && loadingInvitesCoupon) {
        return <Loader />;
    }

    const [elSettings, setElSettings] = useState(settings_mx || {});

    const [currentPage, setCurrentPage] = useState(1);
    const [sortConfig, setSortConfig] = useState({ key: 'date_created_gmt', direction: 'asc' });
    const itemsPerPage = 10;

    // Helper function to format the date
    const formatDate = (dateString) => {
        const options = { year: 'numeric', month: 'short', day: 'numeric' };
        return new Date(dateString).toLocaleDateString(undefined, options);
    };

    // Helper function to capitalize the first letter of a string
    const capitalizeFirstLetter = (string) => {
        return string.charAt(0).toUpperCase() + string.slice(1);
    };

    let completedCoupons;
    let referralComplete;
    let referralPending;

    // Compute completed and pending rewards based on the status
    if (inviteCoupons && inviteCoupons.length > 0) {
        completedCoupons = inviteCoupons.filter(coupon => coupon.status === 'wc-completed');
        referralComplete = completedCoupons.length;
        referralPending = inviteCoupons.length - referralComplete;
    }

    // Ensure inviteCoupons is an array before proceeding
    const validInviteCoupons = Array.isArray(inviteCoupons) ? inviteCoupons : [];

    // Sorting function
    const sortedCoupons = [...validInviteCoupons].sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
            return sortConfig.direction === 'asc' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
            return sortConfig.direction === 'asc' ? 1 : -1;
        }
        return 0;
    });

    // Calculate total pages
    const totalPages = Math.ceil(sortedCoupons.length / itemsPerPage);

    // Get current items
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = sortedCoupons.slice(indexOfFirstItem, indexOfLastItem);

    const handleClick = (event) => {
        setCurrentPage(Number(event.target.id));
    };

    const handleSort = (key) => {
        let direction = 'asc';
        if (sortConfig.key === key && sortConfig.direction === 'asc') {
            direction = 'desc';
        }
        setSortConfig({ key, direction });
    };

    const renderPageNumbers = [];
    if (totalPages <= 3) {
        // If total pages are less than or equal to 3, show all page numbers
        for (let i = 1; i <= totalPages; i++) {
            renderPageNumbers.push(
                <button
                    key={i}
                    id={i}
                    onClick={handleClick}
                    className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === i ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
                >
                    {i}
                </button>
            );
        }
    } else {
        // If total pages are more than 3, show Previous 3 pages or the relevant range
        if (currentPage > 1) {
            renderPageNumbers.push(
                <button
                    key={currentPage - 1}
                    id={currentPage - 1}
                    onClick={handleClick}
                    className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === currentPage - 1 ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
                >
                    {currentPage - 1}
                </button>
            );
        }
        renderPageNumbers.push(
            <button
                key={currentPage}
                id={currentPage}
                onClick={handleClick}
                className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === currentPage ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
            >
                {currentPage}
            </button>
        );
        if (currentPage < totalPages) {
            renderPageNumbers.push(
                <button
                    key={currentPage + 1}
                    id={currentPage + 1}
                    onClick={handleClick}
                    className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === currentPage + 1 ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
                >
                    {currentPage + 1}
                </button>
            );
        }
        
        if (currentPage < totalPages - 1) {
            renderPageNumbers.push(<span key="ellipsis" className="ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white">...</span>);
            renderPageNumbers.push(
                <button
                    key={totalPages}
                    id={totalPages}
                    onClick={handleClick}
                    className={`ecre-h-8 ecre-min-w-8 ecre-p-1 ecre-cursor-pointer ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-bg-[#6a40d5] hover:ecre-text-white ${currentPage === totalPages ? '!ecre-bg-[#6a40d5] ecre-text-white' : '!ecre-bg-transparent ecre-text-[#1e1e1e]'}`}
                >
                    {totalPages}
                </button>
            );
        }
    }

    return (
        <div className="rewards-invites__invite">
            {ecreFrontend.is_user_logged_in ? (
                (settings.canRefferOthers && ecreFrontend.has_orders) || !settings.canRefferOthers ? (
                    <>

                        <div className="ecre-flex ecre-flex-wrap ecre-gap-4 ecre-mb-4 sm:ecre-mb-5">
                            <div className="title-wrap">
                                <h4 className="ecre-text-neutral-950 ecre-text-[25px] ecre-font-medium !ecre-mb-[14px]"> {elSettings.title || translate('your_invites') }</h4>
                                <div className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal"> {elSettings.description || translate('receive_reward_coupon') }</div>
                            </div>
                            <div className="ecre-flex ecre-flex-wrap sm:ecre-flex-nowrap ecre-gap-x-5 ecre-gap-y-2 ecre-ml-auto ecre-mt-auto">
                                <div className="earned-rewards ecre-flex ecre-items-center ecre-gap-1 ecre-text-zinc-500 ecre-text-sm ecre-font-normal">
                                    <span className="ecre-w-2 ecre-h-2 ecre-bg-green-600 ecre-rounded-full"></span>{translate('earned_rewards')}: <strong className="ecre-text-zinc-800 ecre-font-semibold">{referralComplete}</strong>
                                </div>
                                <div className="pending-rewards ecre-flex ecre-items-center ecre-gap-1 ecre-text-zinc-500 ecre-text-sm ecre-font-normal">
                                    <span className="ecre-w-2 ecre-h-2 ecre-bg-orange-400 ecre-rounded-full"></span>{translate('pending_rewards')}: <strong className="ecre-text-zinc-800 ecre-font-semibold">{referralPending}</strong>
                                </div>
                            </div>
                        </div>

                        {validInviteCoupons.length > 0 ? (
                            <div className="ecre-relative ecre-overflow-x-auto ecre-mb-8">
                                <table className="!ecre-w-full !ecre-border-spacing-0 !ecre-text-zinc-600 !ecre-mb-0 !ecre-text-xs sm:!ecre-text-sm !ecre-font-normal !ecre-border-separate !ecre-border !ecre-border-solid !ecre-border-zinc-500 !ecre-rounded-[5px] !ecre-overflow-hidden">
                                    <thead className="!ecre-bg-zinc-500 ecre-text-left">
                                        <tr>
                                            <th
                                                className="ecre-bg-transparent ecre-text-white ecre-font-semibold !ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none ecre-cursor-pointer"
                                                onClick={() => handleSort('billing_email')}
                                            >
                                                {translate('used_by')} {sortConfig.key === 'billing_email' ? (sortConfig.direction === 'asc' ? '▲' : '▼') : ''}
                                            </th>
                                            <th
                                                className="ecre-bg-transparent ecre-text-white ecre-font-semibold !ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none ecre-cursor-pointer"
                                                onClick={() => handleSort('date_created_gmt')}
                                            >
                                               {translate('invitation_date')} {sortConfig.key === 'date_created_gmt' ? (sortConfig.direction === 'asc' ? '▲' : '▼') : ''}
                                            </th>
                                            <th
                                                className="ecre-bg-transparent ecre-text-white ecre-font-semibold !ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none ecre-cursor-pointer"
                                                onClick={() => handleSort('status')}
                                            >
                                                {translate('status')} {sortConfig.key === 'status' ? (sortConfig.direction === 'asc' ? '▲' : '▼') : ''}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {currentItems.map(coupon => (
                                            <tr key={coupon.id}>
                                                <td className="!ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none">{coupon.billing_email}</td>
                                                <td className="!ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none">{formatDate(coupon.date_created_gmt)}</td>
                                                <td className="!ecre-px-3 !ecre-py-3 sm:!ecre-px-5 sm:!ecre-py-5 !ecre-border-none">{capitalizeFirstLetter(coupon.status.replace('wc-', ''))}</td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                                {totalPages > 1 && (
                                    <div className="ecre-flex ecre-justify-end ecre-mt-4">
                                        <div className="ecre-pagination ecre-ml-auto ecre-rounded-sm ecre-border ecre-border-solid ecre-leading-[1] border-[#e0e0e0]">
                                            <button
                                                onClick={() => setCurrentPage(currentPage > 1 ? currentPage - 1 : 1)}
                                                className={`ecre-h-8 ecre-min-w-8 ecre-px-3 ecre-border-0 !ecre-shadow-none !ecre-outline-none ecre-rounded-none ecre-justify-center ecre-items-center ecre-inline-flex !ecre-text-[#1e1e1e] ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-text-[#1e1e1e] !ecre-bg-transparent ${currentPage === 1 ? 'ecre-opacity-50 ecre-cursor-default' : ' ecre-opacity-100 ecre-cursor-pointer'}`}
                                                disabled={currentPage === 1}
                                            >
                                                {translate('previous')}
                                            </button>
                                            {renderPageNumbers}
                                            <button
                                                onClick={() => setCurrentPage(currentPage < totalPages ? currentPage + 1 : totalPages)}
                                                className={`ecre-h-8 ecre-min-w-8 ecre-px-3 ecre-border-0 ecre-border-solid !ecre-shadow-none !ecre-outline-none ecre-border-l ecre-rounded-none !ecre-border-[#e0e0e0] ecre-justify-center ecre-items-center ecre-inline-flex !ecre-text-[#1e1e1e] ecre-text-sm ecre-font-normal ecre-leading-[21px] hover:!ecre-text-[#1e1e1e] !ecre-bg-transparent ${currentPage === totalPages ? 'ecre-opacity-50 ecre-cursor-default' : ' ecre-opacity-100 ecre-cursor-pointer'}`}
                                                disabled={currentPage === totalPages}
                                            >
                                                {translate('next')}
                                            </button>
                                        </div>
                                    </div>
                                )}
                            </div>
                        ) : (
                            <p className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{translate('no_invites_found')}</p>
                        )}

                    </>
                ) : (
                    <div className="ecre-mt-6">
                        <div className="icon ecre-flex ecre-justify-center ecre-mb-4">
                            {ecreIcons.noOrder}
                        </div>
                        <div className="ecre-text-[#5e656a] ecre-text-xs ecre-font-normal ecre-leading-[18px]">
                            <p className='ecre-text-center'>{settings.noOrderMessageToReferrer}</p>
                        </div>
                    </div>
                )
            ) : (
                <div>
                    <h3 className="ecre-text-neutral-950 ecre-text-[35px] !ecre-mt-0 ecre-font-medium ecre-mb-2">{translate('refer_and_win_exciting_rewards')}</h3>
                    <p className="ecre-text-[#686977] ecre-mb-5 ecre-text-xs ecre-font-normal">{translate('create_account_get_referral_code')}</p>
                    <button className="ecre-px-2.5 ecre-inline-flex ecre-items-center !ecre-shadow-none ecre-py-2.5 !ecre-bg-[#6d3ae6] ecre-rounded-[5px] ecre-text-white ecre-text-[10px] ecre-font-normal ecre-leading-[15px] ecre-transition hover:!ecre-bg-violet-800"
                    onClick={() => {
                        const siteUrl = ecreFrontend.site_url;
                        window.location.href = `${siteUrl}/my-account/`;
                    }}
                    >
                        <span className="icon ecre-mr-1">
                            {ecreIcons.loginGift}
                        </span>
                        {translate('get_rewards_now')}
                    </button>
                </div>
            )}

        </div>
    );
}

export default ReferralTableBlock;