import { useTranslations } from 'next-intl';
import { useAppSelector } from '@/redux/store';

export default function GeneralLook()
{

    const t = useTranslations('statistics');
    const report = useAppSelector((state) => state.statisticsReducer.value.report)

    if (!report) {
        return (
            <div className="lg:w-1/3 w-full flex flex-col lg:gap-7 gap-3">
                <div className="w-full h-[200px] flex items-center justify-center">
                    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
                </div>
            </div>
        );
    }

    const stats = [
        {
            icon: 'members',
            value: report?.membersCount?.value ?? 0,
            label: t('totalMembers'),
            bgColor: 'bg-info'
        },
        {
            icon: 'activeMembers',
            value: report?.activeMembersCount?.value ?? 0,
            label: t('totalActiveMembers'),
            bgColor: 'bg-success'
        },
        {
            icon: 'disActiveMembers',
            value: report?.disActiveMembersCount?.value ?? 0,
            label: t('totalUnActiveMembers'),
            bgColor: 'bg-error'
        },
        {
            icon: 'services',
            value: report?.servicesCount?.value ?? 0,
            label: t('totalServices'),
            bgColor: 'bg-info'
        },
        {
            icon: 'activeServices',
            value: report?.activeServicesCount?.value ?? 0,
            label: t('totalActiveServices'),
            bgColor: 'bg-success'
        },
        {
            icon: 'disActiveServices',
            value: report?.disActiveServicesCount?.value ?? 0,
            label: t('totalUnActiveServices'),
            bgColor: 'bg-error'
        },
        {
            icon: 'activeSubscriptions',
            value: report?.activeSubscriptionsCount?.value ?? 0,
            label: t('totalActiveSubscriptions'),
            bgColor: 'bg-info'
        },
        {
            icon: 'expiredSoonSubscriptions',
            value: report?.expiredSoonSubscriptionsCount?.value ?? 0,
            label: t('expiredSoonSubscriptionsCount'),
            bgColor: 'bg-warning'
        },
        {
            icon: 'expiredSubscriptions',
            value: report?.expiredSubscriptionsCount?.value ?? 0,
            label: t('totalExpiredSubscriptions'),
            bgColor: 'bg-error'
        }
    ];

    return (
        <div className="lg:w-1/3 w-full flex flex-col lg:gap-7 gap-3">
            {stats.map((stat, index) => (
                <div key={index} className="w-full h-full flex lg:flex-row flex-col justify-between items-center gap-3 lg:px-5 p-5 border border-secondary-light bg-primary dark:bg-primary-dark rounded-md shadow">
                    <div className="w-full h-full text-start flex items-center gap-2">
                        <span className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-md ${stat.bgColor} flex items-center justify-center`}>
                            <svg className="text-text-dark" width="26" height="26" viewBox="0 0 28 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.69141 3.22229C8.69141 1.44589 7.24365 0 5.46436 0C3.68506 0 2.23779 1.44589 2.23779 3.22229C2.23779 4.9987 3.68506 6.44361 5.46436 6.44361C7.24365 6.44361 8.69141 4.9987 8.69141 3.22229ZM5.46436 1.99675C6.14111 1.99675 6.69141 2.54664 6.69141 3.22229C6.69141 3.89795 6.14111 4.44686 5.46436 4.44686C4.78809 4.44686 4.23779 3.89795 4.23779 3.22229C4.23779 2.54664 4.78809 1.99675 5.46436 1.99675ZM1 14.4238C1.55225 14.4238 2 13.9773 2 13.4254C2 13.1859 2.0271 12.9508 2.07495 12.7212C2.21057 12.0707 2.53113 11.4708 3.01514 10.988C3.67041 10.3338 4.5415 9.974 5.46826 9.974C5.70428 9.974 5.93713 9.99837 6.16113 10.0446C6.38989 10.0917 6.60944 10.1617 6.81299 10.2548C7.3125 10.4781 7.90723 10.2626 8.1377 9.76048C8.36719 9.25934 8.14551 8.66656 7.64307 8.43744C6.98193 8.13617 6.22998 7.97725 5.46826 7.97725C4.00732 7.97725 2.63379 8.54469 1.60107 9.57621C0.568359 10.6068 0 11.9737 0 13.4254C0 13.9773 0.447754 14.4238 1 14.4238ZM19.3086 3.22229C19.3086 4.9987 20.7563 6.44361 22.5356 6.44361C24.3149 6.44361 25.7622 4.9987 25.7622 3.22229C25.7622 1.44589 24.3149 0 22.5356 0C20.7563 0 19.3086 1.44589 19.3086 3.22229ZM22.5356 4.44686C21.8589 4.44686 21.3086 3.89795 21.3086 3.22229C21.3086 2.54664 21.8589 1.99675 22.5356 1.99675C23.2119 1.99675 23.7622 2.54664 23.7622 3.22229C23.7622 3.89795 23.2119 4.44686 22.5356 4.44686ZM22.5317 7.97725C21.77 7.97725 21.0181 8.13617 20.3569 8.43744C19.8545 8.66656 19.6328 9.25934 19.8623 9.76048C20.0918 10.2626 20.6865 10.479 21.187 10.2548C21.3906 10.1617 21.6101 10.0917 21.8389 10.0446C22.0629 9.99837 22.2957 9.974 22.5317 9.974C23.4585 9.974 24.3296 10.3338 24.9849 10.988C25.4689 11.4708 25.7894 12.0707 25.925 12.7212C25.9729 12.9508 26 13.1859 26 13.4254C26 13.9773 26.4478 14.4238 27 14.4238C27.5522 14.4238 28 13.9773 28 13.4254C28 11.9737 27.4316 10.6068 26.3989 9.57621C25.3662 8.54469 23.9927 7.97725 22.5317 7.97725ZM17.7988 4.47221C17.7988 2.38089 16.0947 0.679558 14 0.679558C11.9053 0.679558 10.2012 2.38089 10.2012 4.47221C10.2012 6.56354 11.9053 8.26487 14 8.26487C16.0947 8.26487 17.7988 6.56354 17.7988 4.47221ZM14 2.67631C14.9917 2.67631 15.7988 3.48164 15.7988 4.47221C15.7988 5.46279 14.9917 6.26812 14 6.26812C13.0083 6.26812 12.2012 5.46279 12.2012 4.47221C12.2012 3.48164 13.0083 2.67631 14 2.67631ZM8.38965 18C8.94171 18 9.38928 17.5527 9.38953 17.0011C9.38953 17.001 9.38953 17.0013 9.38953 17.0011C9.38953 14.4633 11.458 12.3978 14 12.3978C16.542 12.3978 18.6104 14.4628 18.6104 17.0007C18.6104 17.0005 18.6104 17.0008 18.6104 17.0007C18.6106 17.5522 19.0583 17.999 19.6104 17.999C20.1626 17.999 20.6104 17.5525 20.6104 17.0007C20.6104 13.362 17.645 10.401 14 10.401C10.355 10.401 7.38965 13.362 7.38965 17.0016C7.38965 17.5535 7.8374 18 8.38965 18Z" fill="white"/>
                            </svg>
                        </span>
                        <span className="max-h-[40px] flex flex-col [&_p]:text-text [&_p]:dark:text-text-dark">
                            <p className="h-[28px] font-semibold text-[20px] p-0 m-0">{stat.value}</p>
                            <p className="font-semibold opacity-50 p-0 m-0 text-[12px]">{stat.label}</p>
                        </span>
                    </div>
                </div>
            ))}
        </div>
    )
}