import { formatNumber } from '@/Utils/Other/FormateNumbers'
import { InfluencerWhiteSVG } from '@/Component/Common/SVGs/CommonSVG'
import { BrandsMenuSVG, CampaignMenuSVG, CategoryMenuSVG, InfluencerPaymentMenuSVG } from '@/Component/Common/SVGs/SidebarSVG';

type StatVariant = 'primary' | 'accent' | 'success' | 'warning' | 'info'

const variantGradient: Record<StatVariant, string> = {
    primary: 'from-primary to-[#a668ff]',
    accent: 'from-accent to-[#ff87c6]',
    success: 'from-success to-[#34d399]',
    warning: 'from-warning to-[#fbbf24]',
    info: 'from-info to-[#60a5fa]',
}

const variantTint: Record<StatVariant, string> = {
    primary: 'from-primary/5 to-[#a668ff]/5',
    accent: 'from-accent/5 to-[#ff87c6]/5',
    success: 'from-success/5 to-[#34d399]/5',
    warning: 'from-warning/5 to-[#fbbf24]/5',
    info: 'from-info/5 to-[#60a5fa]/5',
}

const StatCard = ({ icon, value, label, variant = 'primary' }: { icon: React.ReactNode; value: any; label: string; variant?: StatVariant }) => (
    <div className={`relative overflow-hidden bg-gradient-to-br ${variantTint[variant]} bg-white rounded-card border border-neutral-100 shadow-soft hover:shadow-float hover:-translate-y-1 transition-all duration-200 p-6 flex flex-col gap-4`}>
        <div className="flex items-start justify-between">
            <div className={`min-w-12 h-12 rounded-2xl bg-gradient-to-br ${variantGradient[variant]} flex items-center justify-center shadow-[0_10px_24px_-10px_rgba(140,82,255,0.5)]`}>
                {icon}
            </div>
        </div>
        <div className='flex flex-col gap-1'>
            <span className='text-display md:text-2xl text-xl leading-none font-bold text-neutral-900'>{value}</span>
            <span className='text-[11px] text-neutral-500 font-semibold uppercase tracking-[0.18em]'>{label}</span>
        </div>
    </div>
);

const AdminStats = (props) => {
    const { data } = props;

    const items: Array<{ icon: React.ReactNode; value: any; label: string; variant: StatVariant }> = [
        { icon: <BrandsMenuSVG />, value: data?.totalBrands, label: 'Total Brands', variant: 'primary' },
        { icon: <InfluencerWhiteSVG />, value: data?.totalInfluencer, label: 'Total Influencer', variant: 'accent' },
        { icon: <InfluencerWhiteSVG />, value: data?.totalRegisteredInfluencer, label: 'Registered Influencer', variant: 'info' },
        { icon: <CampaignMenuSVG />, value: data?.campaignCount, label: 'Total Campaigns', variant: 'warning' },
        { icon: <InfluencerPaymentMenuSVG />, value: `$${data?.totalEarnings > 1000 ? formatNumber(data?.totalEarnings) : data?.totalEarnings?.toFixed(2)}`, label: 'Total Revenue', variant: 'success' },
        { icon: <InfluencerPaymentMenuSVG />, value: `$${data?.totalEarningsYear > 1000 ? formatNumber(data?.totalEarningsYear) : data?.totalEarningsYear?.toFixed(2)}`, label: 'Yearly Revenue', variant: 'success' },
        { icon: <CategoryMenuSVG />, value: data?.categoryCount, label: 'Total Categories', variant: 'primary' },
    ];

    return (
        <div className='grid md:grid-cols-3 lg:grid-cols-4 xs:grid-cols-2 md:gap-5 gap-4 stagger-children'>
            {items.map((item, i) => (
                <StatCard key={i} {...item} />
            ))}
        </div>
    )
}

export default AdminStats