'use client';

import { useMemo } from 'react';
import { useAuth, useConfig, useLang } from '@/lib';
import { FeatherIcon, Frame, Grid, Pic } from '@/Theme/Midone';
import useFormat from '@/lib/format';
import Link from 'next/link';
import ReportsDashboard from '@/Components/Marketer/ReportsDashboard';
import { Loading } from "@/Theme/Midone/Utils";


export default function MarketerPackagesPage() {
    const { laraAdmin, nextDomain, mediaPath, nextAdmin } = useConfig();
    const { user } = useAuth({ guard: "guest" });
    const { formatMoney } = useFormat();
    const { local } = useLang();


    const info = useMemo(() => ({
        perPage: 50,
        url: `${laraAdmin}/marketer/packages`,
        columns: [
            { label: "image", minWidth: "70px", jsx: (item) => <Link href={`/${local}/panel/marketing/packages/${item.id}`} ><Pic src={`${mediaPath}/packages/${item?.thumbnail}`} defaultImg={`${mediaPath}/public/default/course.jpg`} classImg="user-avatar" key={"img" + item?.thumbnail} /> </Link> },
            { label: "title", jsx: (item) => <Link href={`/${local}/panel/marketing/packages/${item.id}`} style={{ color: 'blue' }} >{item.title}</Link> },
            { label: "price", jsx: (item) => formatMoney(item.price, null) },
            { label: "deposit_count", field: 'deposit_count' },
            { label: "deposit_sum", jsx: (item) => <span className="text-emerald-700 font-semibold">{formatMoney(item.deposit_sum, null)}</span> },
            {
                label: "", sort: false, minWidth: "110px",
                jsx: (item) => (
                    <div className='flex justify-center gap-2 flex-wrap'>
                        {[
                            { name: 'ایتا', icon: 'Send', shareUrl: `https://eitaa.com/share/url?url=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                            { name: 'سروش', icon: 'MessageSquare', shareUrl: `https://sapp.ir/share?url=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                            { name: 'روبیکا', icon: 'Radio', shareUrl: `https://rubika.ir/share?url=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                            { name: 'بله', icon: 'Bell', shareUrl: `https://bale.ai/share?url=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                            { name: 'تلگرام', icon: 'Send', shareUrl: `https://t.me/share/url?url=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                            { name: 'واتساپ', icon: 'MessageCircle', shareUrl: `https://wa.me/?text=${encodeURIComponent(nextDomain + "/packages/" + item?.id + '?Mti=' + user?.marketer_token)}` },
                        ].map((social) => (
                            <FeatherIcon key={social.name} name={social.icon} url={social.shareUrl} tooltip={`اشتراک در ${social.name}`} target="_blank" rel="noopener noreferrer" />
                        ))}
                    </div>
                )
            },
        ],
    }), [laraAdmin, mediaPath, nextDomain, user?.marketer_token, formatMoney]);

    const GridItems = ({ info }) => (
        <div className="intro-y col-span-12 mt-6 box px-3 py-5">
            <Grid {...info} key={info.url} />
        </div>
    );


    return (
        <Frame>
            <GridItems info={info} />
            <div className="intro-y col-span-12 mt-6">
                <ReportsDashboard
                    className="mt-6"
                    apiUrl="/marketer/transactions"
                    groupByOptions={[
                        {
                            value: 'package',
                            label: 'پکیج',
                            dataKey: 'packageTitle',
                            stats: true,
                            statsLabel: 'پرفروش‌ترین پکیج بازاریابان',
                            icon: '📦',
                            color: 'bg-amber-100'
                        },
                        {
                            value: 'marketer',
                            label: 'بازاریاب',
                            dataKey: 'marketerName',
                            stats: true,
                            statsLabel: 'بهترین بازاریاب',
                            icon: '🏆',
                            color: 'bg-indigo-100'
                        },
                    ]}
                    defaultGroupBy="package"
                    showGroupByToggle={true}
                    title="📊 تحلیل فروش پکیج‌ها"
                    subtitle="بر اساس بازه زمانی انتخابی"
                    tableLabel={'لیست تمام تراکنش‌های'}
                    tableLink={{
                        url: nextAdmin + '/marketing/transactions',
                        key: 'id'
                    }}
                    tableColumns={[
                        { field: 'marketerName', label: 'بازاریاب', sortable: true },
                        { field: 'packageTitle', label: 'پکیج', sortable: true }
                    ]}
                    transformData={(data) => {

                        return data.data.map(item => ({
                            ...item,
                            packageTitle: item.packageTitle || item.package?.title || 'بدون پکیج',
                            price: item.price,
                            type: item.type_id,
                            created_at: item.created_at
                        }));
                    }}
                    loadingComponent={<div className="col-span-12 xxl:col-span-9">
                        <Loading className="mt-5" />
                    </div>}
                />
            </div>
        </Frame>
    );
}