import React, { useState, useEffect, useContext } from "react";
import axios from 'axios';
import Header from "../Header";
import ChartBar from "../../../components/ChartBar";
import ChartLine from "../../../components/ChartLine";
import { SettingsContext } from "../../App/SettingsContext";
import { translate, formatPrice } from "../../../Helper";
import { displayProPopup } from "../../../Helper";
import Loader from "../../../components/core/Loader";

function ReportsTab() {
    const { isPro } = useContext(SettingsContext);

    const [activeReportTab, setActiveReportTab] = useState(localStorage.getItem('active-report-tab') || 'total_referral_coupons');
    const [loading, setLoading] = useState(false);
    const [reportsData, setReportsData] = useState(null);
    const [timeRange, setTimeRange] = useState(localStorage.getItem('active-report-timerange') || 'echo_range_last_week');
    const [totalDiscount, setTotalDiscount] = useState(0);
    const [totalDiscountWithCoupon, setTotalDiscountWithCoupon] = useState(0);
    const [totalSales, setTotalSales] = useState(0);
    const [totalSalesWithCoupon, setTotalSalesWithCoupon] = useState(0);
    const [totalReferralOrderWithCoupon, setTotalReferralOrderWithCoupon] = useState(0);

    const handleActiveReportTab = (name) => {
        localStorage.setItem('active-report-tab', name);
        setActiveReportTab(name);
    };

    const handleTimeRangeChange = (range) => {
        localStorage.setItem('active-report-timerange', range);
        setTimeRange(range);
    };


    const fetchReportsData = async () => {
        setLoading(true);
        try {
            const formData = new FormData();
            formData.append('action', 'get_chart_data');
            formData.append('nonce', ecreAdmin.nonce);
            formData.append('report_fetch_data[time_range]', timeRange);
            formData.append('report_fetch_data[report_tab]', activeReportTab);

            const response = await axios.post(ecreAdmin.ajaxurl, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
            });

            if (response.data) {
                setReportsData(response.data);

            } else {
                console.error('Error fetching data');
            }
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchReportsData();
    }, [activeReportTab, timeRange]);


    useEffect(() => {
        // Initialize totals
        let discount = 0;
        let discountWithCoupon = 0;
        let salesCnt = 0;
        let salesWithCouponCnt = 0;
        let totalReferralOrderCount = 0;


        // Validate and process reportsData
        if (reportsData && Array.isArray(reportsData.chart_data) && reportsData.chart_data.length > 0) {
            if (activeReportTab === 'total_discount_coupons') {
                reportsData.chart_data.forEach((entry) => {
                    const totalDiscount = parseFloat(entry.total_discount) || 0; // Corrected key
                    const totalDiscountWithReferral = parseFloat(entry.total_discount_with_referral) || 0; // Corrected key

                    // Accumulate totals
                    discount += totalDiscount;
                    discountWithCoupon += totalDiscountWithReferral;
                });
            }

            if (activeReportTab === 'total_sales_coupons') {
                reportsData.chart_data.forEach((entry) => {
                    const totalSales = parseFloat(entry.total_sales) || 0; // Corrected key
                    const totalSalesWithReferral = parseFloat(entry.total_sales_with_referral) || 0; // Corrected key

                    // Accumulate totals
                    salesCnt += totalSales;
                    salesWithCouponCnt += totalSalesWithReferral;
                });
            }

            if (activeReportTab === 'total_referral_coupons') {
                reportsData.chart_data.forEach((entry) => {
                    const referralCount = parseInt(entry.referral_order_count, 10) || 0; // Base-10 parsing for referral_order_count
                    totalReferralOrderCount += referralCount;
                });
            }
        }

        // Update state
        setTotalDiscount(discount);
        setTotalDiscountWithCoupon(discountWithCoupon);
        setTotalSales(salesCnt);
        setTotalSalesWithCoupon(salesWithCouponCnt);
        setTotalReferralOrderWithCoupon(totalReferralOrderCount);

    }, [reportsData, activeReportTab, timeRange]);


    return (
        <div className="reports-analytics-settings">
            <Header title={translate('reports_analytics')} subtitle={translate('reports_subtitle')} />

            <div className="reports-analytics__navbar ecre-mb-6 md:ecre-mb-10">
                <ul className="reports-analytics__navbar-menu ecre-flex ecre-flex-wrap md:ecre-flex-nowrap ecre-gap-4 ecre-pb-2.5 ecre-border-b ecre-border-gray-200">
                    <li className={`ecre-mb-0 ${activeReportTab === 'total_referral_coupons' ? 'active' : ''}`}>
                        <a onClick={() => handleActiveReportTab('total_referral_coupons')} className="ecre-cursor-pointer ecre-block ecre-text-center ecre-text-gray-900 ecre-text-xs before:ecre-hidden sm:before:ecre-block lg:ecre-text-sm ecre-font-normal ecre-p-2 sm:ecre-p-2.5 ecre-rounded sm:ecre-rounded-[15px] ecre-bg-gray-200 ecre-transition hover:ecre-bg-[#6A40D5] hover:ecre-text-white">{translate('total_referral_coupons')}</a>
                    </li>
                    <li className={`ecre-mb-0 ${activeReportTab === 'total_sales_coupons' ? 'active' : ''}`}>
                        <a onClick={() => handleActiveReportTab('total_sales_coupons')} className="ecre-cursor-pointer ecre-block ecre-text-center ecre-text-gray-900 ecre-text-xs before:ecre-hidden sm:before:ecre-block lg:ecre-text-sm ecre-font-normal ecre-p-2 sm:ecre-p-2.5 ecre-rounded sm:ecre-rounded-[15px] ecre-bg-gray-200 ecre-transition hover:ecre-bg-[#6A40D5] hover:ecre-text-white">{translate('sales_with_referral_coupons')}</a>
                    </li>
                    <li className={`ecre-mb-0 ${activeReportTab === 'total_discount_coupons' ? 'active' : ''}`}>
                        <a onClick={() => handleActiveReportTab('total_discount_coupons')} className="ecre-cursor-pointer ecre-block ecre-text-center ecre-text-gray-900 ecre-text-xs before:ecre-hidden sm:before:ecre-block lg:ecre-text-sm ecre-font-normal ecre-p-2 sm:ecre-p-2.5 ecre-rounded sm:ecre-rounded-[15px] ecre-bg-gray-200 ecre-transition hover:ecre-bg-[#6A40D5] hover:ecre-text-white">{translate('total_discount')} </a>
                    </li>
                </ul>
            </div>

            <div className="reports-analytics__content">
                {activeReportTab === 'total_referral_coupons' ? (
                    reportsData && reportsData.chart_data ? (
                        <div className="reports-analytics-coupons">
                            <div className="entry-title ecre-mb-8">
                                <h6 className="ecre-text-gray-900 ecre-text-[16px] ecre-font-bold ecre-mb-1.5">{translate('total_referral_coupons')}</h6>
                                <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('view_referral_coupons')}</div>
                            </div>

                            <div className="line-chart ecre-mb-4">
                                <div className="ecre-mb-4">
                                    <ChartBar timeRange={timeRange} reportsData={reportsData} />
                                </div>

                                <ul className="line-chart__cartegory-weekly-month-years ecre-flex ecre-flex-wrap ecre-justify-center ecre-gap-x-[15px] ecre-gap-y-1.5">
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_week' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => handleTimeRangeChange('echo_range_last_week')}
                                        >
                                            {translate('last_7_days')}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_this_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_this_month')}
                                        >
                                            {translate('this_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_last_month')}
                                        >
                                            {translate('last_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_year' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_year')}
                                        >
                                            {translate('this_year')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                </ul>
                            </div>

                            <div className="ecre-grid ecre-grid-cols-1 sm:ecre-grid-cols-2 ecre-gap-4">
                                <div className="coupon-card ecre-bg-white ecre-p-4 ecre-rounded">
                                    <div className="text">
                                        <div className="number ecre-text-black ecre-text-xl ecre-font-medium ecre-mb-2">
                                            {totalReferralOrderWithCoupon}
                                        </div>
                                        <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('referral_coupons_total')}</div>
                                    </div>
                                </div>
                            </div>

                            {reportsData.top_coupons && reportsData.top_coupons.length > 0 ? (
                                <div className="ecre-bg-white ecre-p-4 ecre-rounded ecre-mt-4">
                                    <h6 className="ecre-text-gray-900 ecre-text-[16px] ecre-font-bold ecre-mb-4">{translate('top_coupons')}</h6>
                                    <table className="ecre-min-w-full ecre-divide-y ecre-divide-gray-200">
                                        <thead className="ecre-bg-gray-50">
                                            <tr>
                                                <th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('coupon_code')}</th>
                                                <th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('total_orders')}</th>
                                                <th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('total_discount')}</th><th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('creation_date')}</th>
                                                <th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('expiration_date')}</th>
                                                <th className="ecre-px-6 ecre-py-3 ecre-text-left ecre-text-xs ecre-font-medium ecre-text-gray-500 ecre-uppercase ecre-tracking-wider">{translate('discount_type')}</th>
                                            </tr>
                                        </thead>
                                        <tbody className="ecre-bg-white ecre-divide-y ecre-divide-gray-200">
                                            {reportsData.top_coupons.map((coupon, index) => (
                                                <tr key={index}>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{coupon.coupon_code}</td>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{coupon.total_orders}</td>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{formatPrice(coupon.total_discount)}</td>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{coupon.creation_date}</td>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{coupon.expiration_date}</td>
                                                    <td className="ecre-px-6 ecre-py-4 ecre-whitespace-nowrap ecre-text-sm ecre-text-gray-900">{translate(coupon.discount_type)}</td></tr>))}
                                        </tbody>
                                    </table>
                                </div>) : (<div className="ecre-bg-white ecre-p-4 ecre-rounded ecre-mt-4 ecre-text-gray-500">{translate('no_top_coupons')}</div>)}

                        </div>
                    ) : <Loader />
                ) : null}

                {activeReportTab === 'total_sales_coupons' ? (
                    reportsData && reportsData.chart_data ? (
                        <div className="reports-analytics-coupons">
                            <div className="entry-title ecre-mb-8">
                                <h6 className="ecre-text-gray-900 ecre-text-[16px] ecre-font-bold ecre-mb-1.5">{translate('sales_referral_coupon')}</h6>
                                <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('view_sales_referral_coupon')}</div>
                            </div>

                            <div className="line-chart ecre-mb-4">

                                <div className="ecre-mb-4">
                                    <ChartLine
                                        activeReportTab={activeReportTab}
                                        timeRange={timeRange}
                                        reportsData={reportsData}
                                    />
                                </div>

                                <ul className="line-chart__cartegory-weekly-month-years ecre-flex ecre-flex-wrap ecre-justify-center ecre-gap-x-[15px] ecre-gap-y-1.5">
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_week' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => handleTimeRangeChange('echo_range_last_week')}
                                        >
                                            {translate('last_7_days')}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_this_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_this_month')}
                                        >
                                            {translate('this_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_last_month')}
                                        >
                                            {translate('last_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_year' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_year')}
                                        >
                                            {translate('this_year')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                </ul>
                            </div>

                            <div className="ecre-grid ecre-grid-cols-1 sm:ecre-grid-cols-2 ecre-gap-4">
                                <div className="coupon-card ecre-bg-white ecre-p-4 ecre-rounded">
                                    <div className="text">
                                        <div className="number ecre-text-blue-500 ecre-text-xl ecre-font-medium ecre-mb-2">
                                            {formatPrice(totalSales)}
                                        </div>
                                        <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('total_sales')}</div>
                                    </div>
                                </div>
                                <div className="coupon-card ecre-bg-white ecre-p-4 ecre-rounded">
                                    <div className="text">
                                        <div className="number ecre-text-orange-500 ecre-text-xl ecre-font-medium ecre-mb-2">{formatPrice(totalSalesWithCoupon)}</div>
                                        <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('total_sales_with_coupon')}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : <Loader />
                ) : ''}

                {activeReportTab === 'total_discount_coupons' ? (
                    reportsData && reportsData.chart_data ? (
                        <div className="reports-analytics-coupons">
                            <div className="entry-title ecre-mb-8">
                                <h6 className="ecre-text-gray-900 ecre-text-[16px] ecre-font-bold ecre-mb-1.5">{translate('total_discount')}</h6>
                                <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('view_total_discount')}</div>
                            </div>

                            <div className="line-chart ecre-mb-4">

                                <div className="ecre-mb-4">
                                    <ChartLine
                                        activeReportTab={activeReportTab}
                                        timeRange={timeRange}
                                        reportsData={reportsData}
                                    />
                                </div>

                                <ul className="line-chart__cartegory-weekly-month-years ecre-flex ecre-flex-wrap ecre-justify-center ecre-gap-x-[15px] ecre-gap-y-1.5">
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_week' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => handleTimeRangeChange('echo_range_last_week')}
                                        >
                                            {translate('last_7_days')}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_this_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_this_month')}
                                        >
                                            {translate('this_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_last_month' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_last_month')}
                                        >
                                            {translate('last_month')}

                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                            className={`ecre-text-sm ecre-font-medium ecre-cursor-pointer ecre-border-0 ecre-rounded-lg ecre-px-3 ecre-py-2 ecre-transition ${timeRange === 'echo_range_year' ? 'ecre-bg-[#6A40D5] ecre-text-white' : 'ecre-bg-gray-100 ecre-text-gray-900 hover:ecre-bg-[#F5F2FE] hover:ecre-text-[#6A40D5]'}`}
                                            onClick={() => !isPro ? displayProPopup() : handleTimeRangeChange('echo_range_year')}
                                        >
                                            {translate('this_year')}



                                            {!isPro && (
                                                <div className='!ecre-ml-1 ecre-px-1.5 btn-prolock ecre-border-0 ecre-inline-flex ecre-items-center ecre-pt-[3px] ecre-pb-[4px] ecre-bg-[#fee8fd] ecre-rounded-[26px] ecre-text-[#4d1c4b] ecre-text-sm ecre-font-normal'>
                                                    <span className="icon-wrap">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
                                                            <path d="M0.806113 7.65309C0.542977 5.94268 0.279841 4.23232 0.0167049 2.52191C-0.0416496 2.14276 0.389758 1.88417 0.696628 2.11434C1.51645 2.7292 2.33622 3.34402 3.15604 3.95889C3.42597 4.16133 3.81053 4.09545 3.99766 3.81471L6.04517 0.743421C6.26154 0.41886 6.73842 0.41886 6.95479 0.743421L9.0023 3.81471C9.18944 4.09545 9.574 4.16129 9.84392 3.95889C10.6637 3.34402 11.4835 2.7292 12.3033 2.11434C12.6102 1.88417 13.0416 2.14276 12.9833 2.52191C12.7202 4.23232 12.457 5.94268 12.1939 7.65309H0.806113Z" fill="#F748F0" />
                                                            <path d="M11.6001 10.5H1.39974C1.07185 10.5 0.80603 10.2342 0.80603 9.90627V8.60205H12.1938V9.90627C12.1938 10.2342 11.9279 10.5 11.6001 10.5Z" fill="#F748F0" />
                                                        </svg>
                                                    </span>
                                                    <span className="text">
                                                        {translate('upgrade')}
                                                    </span>
                                                </div>
                                            )}
                                        </button>
                                    </li>
                                </ul>
                            </div>

                            <div className="ecre-grid ecre-grid-cols-1 sm:ecre-grid-cols-2 ecre-gap-4">
                                <div className="coupon-card ecre-bg-white ecre-p-4 ecre-rounded">
                                    <div className="text">
                                        <div className="number ecre-text-blue-500 ecre-text-xl ecre-font-medium ecre-mb-2">
                                            {formatPrice(totalDiscount)}
                                        </div>
                                        <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('total_discount_offered')}</div>
                                    </div>
                                </div>
                                <div className="coupon-card ecre-bg-white ecre-p-4 ecre-rounded">
                                    <div className="text">
                                        <div className="number ecre-text-orange-500 ecre-text-xl ecre-font-medium ecre-mb-2">
                                            {formatPrice(totalDiscountWithCoupon)}
                                        </div>
                                        <div className="ecre-text-gray-500 ecre-text-xs ecre-font-normal">{translate('total_discount_with_coupon')}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : <Loader />
                ) : ''}

            </div>
        </div>
    );
}

export default ReportsTab;
