import { useMemo } from 'react';
import dynamic from 'next/dynamic';
import 'mantine-datatable/styles.css';
import { DataTable } from '@/components/Shared/DataTable';

import StatsCompareBadge from '@/components/AbandonedCart/StatsCompareBadge';
import CompareTrendArrow from '@/components/AbandonedCart/CompareTrendArrow';
import { DateRange, formatRangeLabel } from '@/lib/abandoned-cart-stats-date';
import styles from './abandoned-cart-stats.module.css';

const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });

export interface AbandonedCartStats {
    filters?: {
        date_from: string;
        date_to: string;
        timezone: string;
        wa_filter?: string;
        checkout_filter?: string;
    };
    wa_sent_unique_users: number;
    wa_pending_count: number;
    wa_pending_note?: string;
    converted_success_unique_users: number;
    converted_both_wa_and_checkout_in_range?: number;
    conversion_rate_in_range_percent: number;
    conversion_rate_within_7_days_percent: number;
    co_by_day: Record<string, number>;
    co_within_days: Record<string, number>;
    co_day_0_same_day_users?: number;
    co_day_1_next_day_users?: number;
    co_within_3_days_users?: number;
    avg_days_to_checkout: number;
    max_days_to_checkout: number;
    match_type_breakdown: { full: number; partial: number; none: number };
    reminder_effectiveness: {
        after_first_wa: { wa_sent_users: number; converted_users: number; conversion_rate_percent: number };
        after_second_wa: { wa_sent_users: number; converted_users: number; conversion_rate_percent: number };
    };
    top_unconverted_products: { product_id: string; product_title: string; abandon_count: number }[];
    revenue_by_match_type: { full: number; partial: number; none: number };
    best_wa_send_time?: {
        by_hour: { hour: number; wa_sent_users: number; converted_users: number; conversion_rate_percent: number }[];
        by_day_of_week: {
            day: number;
            day_label: string;
            wa_sent_users: number;
            converted_users: number;
            conversion_rate_percent: number;
        }[];
    };
}

type WaSendTimeBucket = {
    wa_sent_users: number;
    converted_users: number;
};

/** Tampilkan chart checkout jika ada minimal satu bucket dengan jumlah CO > 0 */
const hasCheckoutBucketData = (buckets: WaSendTimeBucket[] | undefined) =>
    (buckets || []).some((bucket) => bucket.converted_users > 0);

interface AbandonedCartStatsPanelProps {
    statsData: AbandonedCartStats;
    compareStatsData: AbandonedCartStats | null;
    compareEnabled: boolean;
    appliedStatsRange: DateRange;
    appliedCompareRange: DateRange | null;
    onOpenPicker: () => void;
    selectedCoDay: string;
    onSelectedCoDayChange: (day: string) => void;
}

const formatCurrency = (value: number) =>
    new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(value || 0);

/** Label chart: item checkout vs isi cart saat pengingat WA */
const CHECKOUT_MATCH_CATEGORIES = ['Semua item sama', 'Sebagian item sama', 'Beli item lain'];

type ReminderEffectivenessStat = {
    wa_sent_users: number;
    converted_users: number;
    conversion_rate_percent: number;
};

const formatReminderSummary = ({ converted_users, wa_sent_users }: ReminderEffectivenessStat) => {
    if (wa_sent_users === 0) {
        return 'Belum ada pengingat dikirim di periode ini';
    }
    return `${converted_users} checkout dari ${wa_sent_users} user`;
};

const formatReminderRate = ({ wa_sent_users, conversion_rate_percent }: ReminderEffectivenessStat) =>
    wa_sent_users === 0 ? '—' : `${conversion_rate_percent}%`;

/** Keterangan rentang hari eksklusif dari WA terakhir sebelum checkout (kalender WIB) */
const CO_EXCLUSIVE_DAY_HINT: Record<string, string> = {
    '0': 'Hari yang sama dengan WA terakhir',
    '1': '1 hari setelah WA terakhir',
    '2': '2 hari setelah WA terakhir',
    '3': '3 hari setelah WA terakhir',
    '4': '4 hari setelah WA terakhir',
    '5': '5 hari setelah WA terakhir',
    '6': '6 hari setelah WA terakhir',
    '7': '7 hari setelah WA terakhir',
};

const CO_DAY_OPTIONS = ['0', '1', '2', '3', '4', '5', '6', '7'] as const;

const MetricCard = ({
    label,
    value,
    previous,
    compareEnabled,
    skipCompare,
    suffix = '',
    note,
}: {
    label: string;
    value: number | string;
    previous?: number | null;
    compareEnabled: boolean;
    skipCompare?: boolean;
    suffix?: string;
    note?: string;
}) => (
    <div className="panel border-2 border-blue-400/20">
        <p className="text-xs text-gray-500 mb-2">{label}</p>
        <div className="text-4xl font-bold flex items-center mb-2">
            {value}
            {suffix}
            {compareEnabled && !skipCompare && typeof value === 'number' && typeof previous === 'number' && previous != null ? (
                <CompareTrendArrow current={value} previous={previous} />
            ) : null}
        </div>
        <StatsCompareBadge
            current={typeof value === 'number' ? value : Number(value) || 0}
            previous={previous}
            compareEnabled={compareEnabled}
            skipCompare={skipCompare}
            suffix={suffix}
        />
        {note && <p className="mt-1 text-xs text-gray-500">{note}</p>}
    </div>
);

const AbandonedCartStatsPanel = ({
    statsData,
    compareStatsData,
    compareEnabled,
    appliedStatsRange,
    appliedCompareRange,
    onOpenPicker,
    selectedCoDay,
    onSelectedCoDayChange,
}: AbandonedCartStatsPanelProps) => {
    const topProductsWithCompare = useMemo(() => {
        const previousMap = new Map(
            (compareStatsData?.top_unconverted_products || []).map((item) => [item.product_id, item.abandon_count])
        );

        return statsData.top_unconverted_products.map((item) => ({
            ...item,
            previous_abandon_count: previousMap.get(item.product_id) ?? null,
        }));
    }, [statsData.top_unconverted_products, compareStatsData]);

    const coByHour = statsData.best_wa_send_time?.by_hour || [];
    const coByDayOfWeek = statsData.best_wa_send_time?.by_day_of_week || [];
    const showCoByHourChart = hasCheckoutBucketData(coByHour);
    const showCoByDayChart = hasCheckoutBucketData(coByDayOfWeek);

    const coByHourCategories = useMemo(
        () => coByHour.map((bucket) => String(bucket.hour).padStart(2, '0')),
        [coByHour]
    );
    const coByDayCategories = useMemo(
        () => coByDayOfWeek.map((bucket) => bucket.day_label),
        [coByDayOfWeek]
    );

    const coByHourSeries = useMemo(() => {
        const currentData = coByHour.map((bucket) => bucket.converted_users);
        if (!compareEnabled || !compareStatsData?.best_wa_send_time?.by_hour) {
            return [{ name: 'Jumlah checkout', data: currentData }];
        }
        return [
            { name: 'Periode ini', data: currentData },
            {
                name: 'Periode lalu',
                data: compareStatsData.best_wa_send_time.by_hour.map((bucket) => bucket.converted_users),
            },
        ];
    }, [coByHour, compareEnabled, compareStatsData]);

    const coByDaySeries = useMemo(() => {
        const currentData = coByDayOfWeek.map((bucket) => bucket.converted_users);
        if (!compareEnabled || !compareStatsData?.best_wa_send_time?.by_day_of_week) {
            return [{ name: 'Jumlah checkout', data: currentData }];
        }
        return [
            { name: 'Periode ini', data: currentData },
            {
                name: 'Periode lalu',
                data: compareStatsData.best_wa_send_time.by_day_of_week.map((bucket) => bucket.converted_users),
            },
        ];
    }, [coByDayOfWeek, compareEnabled, compareStatsData]);

    const acWaSent = statsData.wa_sent_unique_users || 0;
    const acCoUsers = statsData.converted_success_unique_users || 0;
    const acCoRate = statsData.conversion_rate_in_range_percent || 0;
    const acAvgDays = statsData.avg_days_to_checkout || 0;
    const acMaxDays = statsData.max_days_to_checkout ?? 0;
    const acWithin3 = statsData.co_within_3_days_users ?? statsData.co_within_days?.['3'] ?? 0;
    const acWithin7Pct = statsData.conversion_rate_within_7_days_percent || 0;
    const acDay0 = statsData.co_day_0_same_day_users ?? statsData.co_by_day?.['0'] ?? 0;
    const acDay0Share = acCoUsers ? Math.round((acDay0 / acCoUsers) * 100) : 0;

    const acWa1Rate = statsData.reminder_effectiveness?.after_first_wa?.conversion_rate_percent ?? 0;
    const acWa2Rate = statsData.reminder_effectiveness?.after_second_wa?.conversion_rate_percent ?? 0;
    const acWa2Sent = statsData.reminder_effectiveness?.after_second_wa?.wa_sent_users ?? 0;
    const acWa1Sent = statsData.reminder_effectiveness?.after_first_wa?.wa_sent_users ?? 0;

    const acMatch = statsData.match_type_breakdown || { full: 0, partial: 0, none: 0 };
    const acMatchTotal = acMatch.full + acMatch.partial + acMatch.none;

    const acInsights = useMemo(() => {
        const items: string[] = [];

        if (acWaSent > 0) {
            const conv = `Dari ${acWaSent} user yang menerima WA, ${acCoUsers} checkout (rasio ${acCoRate}%).`;
            items.push(
                acCoRate < 10
                    ? `${conv} Rasio masih rendah — pertimbangkan perbaiki isi/penawaran pesan WA.`
                    : conv,
            );
        }

        if (acCoUsers > 0) {
            items.push(
                `Rata-rata checkout ${acAvgDays} hari setelah WA; ${acDay0Share}% terjadi di hari yang sama. ` +
                (acDay0Share >= 50
                    ? 'Momentum kuat di awal — kirim WA saat user aktif agar cepat konversi.'
                    : 'Sebagian besar butuh waktu — follow-up di beberapa hari pertama bisa membantu.'),
            );
        }

        if (acWa1Sent > 0 || acWa2Sent > 0) {
            if (acWa2Sent > 0 && acWa2Rate > acWa1Rate) {
                items.push(
                    `WA ke-2 lebih efektif (${acWa2Rate}% vs ${acWa1Rate}%) — pertahankan pengiriman pengingat kedua.`,
                );
            } else if (acWa1Rate > acWa2Rate) {
                items.push(
                    `WA ke-1 lebih efektif (${acWa1Rate}% vs ${acWa2Rate}%) — mayoritas konversi di pengingat pertama.`,
                );
            } else if (acWa1Rate === acWa2Rate && acWa1Rate > 0) {
                items.push(`Efektivitas WA ke-1 dan ke-2 setara (${acWa1Rate}%).`);
            }
        }

        if (acMatchTotal > 0) {
            const maxVal = Math.max(acMatch.full, acMatch.partial, acMatch.none);
            if (maxVal === acMatch.full) {
                items.push(
                    'Mayoritas checkout membeli item yang sama dengan cart — pengingat produk spesifik terbukti relevan.',
                );
            } else if (maxVal === acMatch.none) {
                items.push(
                    'Mayoritas checkout membeli item lain — pertimbangkan rekomendasi produk lebih luas di pesan WA.',
                );
            } else {
                items.push('Mayoritas checkout membeli sebagian item dari cart.');
            }
        }

        return items;
    }, [
        acWaSent,
        acCoUsers,
        acCoRate,
        acAvgDays,
        acDay0Share,
        acWa1Sent,
        acWa2Sent,
        acWa1Rate,
        acWa2Rate,
        acMatchTotal,
        acMatch.full,
        acMatch.partial,
        acMatch.none,
    ]);

    return (
        <div className="space-y-6 p-5">
            <div className="panel">
                <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <h6 className="font-semibold">Filter Periode</h6>
                        <p className="mt-1 text-xs text-gray-500">
                            WA dihitung berdasarkan <strong>tanggal kirim WA</strong>. CO dihitung berdasarkan{' '}
                            <strong>tanggal checkout sukses</strong>.
                        </p>
                    </div>
                    <button type="button" className="btn btn-outline-primary btn-sm" onClick={onOpenPicker}>
                        {formatRangeLabel(appliedStatsRange)}
                        {compareEnabled && <span className="ml-2 badge bg-primary/10 text-primary">Compare</span>}
                    </button>
                </div>
                <div className="mt-3 space-y-1 text-xs text-gray-500">
                    <p>
                        Periode aktif: {statsData.filters?.date_from || appliedStatsRange.from} s/d{' '}
                        {statsData.filters?.date_to || appliedStatsRange.to} (WIB)
                    </p>
                    {compareEnabled && appliedCompareRange && (
                        <p>
                            Compare period: {appliedCompareRange.from} s/d {appliedCompareRange.to} (WIB)
                        </p>
                    )}
                </div>
            </div>

            {acInsights.length > 0 && (
                <div className="panel border-2 border-emerald-400/30 bg-emerald-50/40 dark:bg-emerald-900/10">
                    <h6 className="mb-2 font-semibold">Insight Otomatis</h6>
                    <ul className="list-disc space-y-1 pl-5 text-sm text-gray-700 dark:text-gray-200">
                        {acInsights.map((text, idx) => (
                            <li key={idx}>{text}</li>
                        ))}
                    </ul>
                </div>
            )}

            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                <MetricCard
                    label="WA Terkirim"
                    value={statsData.wa_sent_unique_users}
                    previous={compareStatsData?.wa_sent_unique_users}
                    compareEnabled={compareEnabled}
                    note="User unik — tanggal kirim WA"
                />
                <MetricCard
                    label="User CO Sukses"
                    value={statsData.converted_success_unique_users}
                    previous={compareStatsData?.converted_success_unique_users}
                    compareEnabled={compareEnabled}
                    note="Tanggal checkout"
                />
                <MetricCard
                    label="WA Pending"
                    value={statsData.wa_pending_count}
                    compareEnabled={compareEnabled}
                    skipCompare
                    note="Snapshot antrian saat ini (tidak dibandingkan per periode)"
                />
                <MetricCard
                    label="Rasio CO"
                    value={statsData.conversion_rate_in_range_percent}
                    previous={compareStatsData?.conversion_rate_in_range_percent}
                    compareEnabled={compareEnabled}
                    suffix="%"
                    note="CO ÷ WA terkirim"
                />
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
                <div className="panel border-2 border-blue-400/20">
                    <p className="text-xs text-gray-500 mb-2">Kecepatan Checkout</p>
                    <div className="text-4xl font-bold mb-2">
                        {acAvgDays}
                        <span className="text-base font-medium text-gray-500"> hari rata-rata</span>
                    </div>
                    <div className="space-y-1 text-sm text-gray-600 dark:text-gray-300">
                        <p>
                            Hari sama (day-0): <strong>{acDay0} user</strong> · Sampai hari ke-3:{' '}
                            <strong>{acWithin3} user</strong>
                        </p>
                        <p>
                            Dalam 7 hari: <strong>{acWithin7Pct}%</strong> · Terlama:{' '}
                            <strong>{acMaxDays} hari</strong>
                        </p>
                    </div>
                    <p className="mt-2 text-xs text-gray-500">Jeda WA → checkout, maks 30 hari sejak WA pertama.</p>
                </div>
            </div>

            <div className="grid gap-4 lg:grid-cols-2">
                <div className="panel border-2 border-blue-400/20">
                    <h6 className="mb-1 font-semibold">Checkout di hari ke berapa?</h6>
                    <p className="mb-3 text-xs text-gray-500">
                        Selisih checkout dari <strong>WA terakhir sebelum checkout</strong> (log WA). Tiap user
                        hanya masuk satu rentang hari.
                    </p>
                    <div className="mb-4 flex flex-wrap items-end gap-3">
                        <div>
                            <label className="mb-1 block w-[200px] text-xs text-gray-500">Pilih rentang hari</label>
                            <select
                                className="form-select w-full text-sm"
                                value={selectedCoDay}
                                onChange={(e) => onSelectedCoDayChange(e.target.value)}
                            >
                                {CO_DAY_OPTIONS.map((day) => (
                                    <option key={day} value={day}>
                                        Hari ke-{day}
                                    </option>
                                ))}
                            </select>
                        </div>
                        <div className="rounded border border-white-dark/10 px-4 py-2">
                            <p className="text-xs text-gray-500">{CO_EXCLUSIVE_DAY_HINT[selectedCoDay]}</p>
                            <p className="text-xl font-bold">{statsData.co_by_day?.[selectedCoDay] ?? 0} user</p>
                            <StatsCompareBadge
                                current={statsData.co_by_day?.[selectedCoDay] ?? 0}
                                previous={compareStatsData?.co_by_day?.[selectedCoDay]}
                                compareEnabled={compareEnabled}
                            />
                        </div>
                    </div>
                    <div className="grid grid-cols-2 gap-3 text-center">
                        <div className="panel border-2 border-blue-400/20">
                            <p className="text-xs text-gray-500">Checkout dalam 1 minggu</p>
                            <p className="text-lg font-bold">{statsData.co_by_day?.within_7_days_total ?? 0} user</p>
                            <StatsCompareBadge
                                current={statsData.co_by_day?.within_7_days_total ?? 0}
                                previous={compareStatsData?.co_by_day?.within_7_days_total}
                                compareEnabled={compareEnabled}
                            />
                        </div>
                        <div className="panel border-2 border-blue-400/20">
                            <p className="text-xs text-gray-500">Checkout lewat 1 minggu</p>
                            <p className="text-lg font-bold">{statsData.co_by_day?.more_than_7_days ?? 0} user</p>
                            <StatsCompareBadge
                                current={statsData.co_by_day?.more_than_7_days ?? 0}
                                previous={compareStatsData?.co_by_day?.more_than_7_days}
                                compareEnabled={compareEnabled}
                            />
                        </div>
                    </div>
                </div>

                <div className="panel border-2 border-blue-400/20">
                    <h6 className="mb-1 font-semibold">Total user yang sudah checkout</h6>
                    <p className="mb-3 text-xs text-gray-500">
                        Hitung mundur dari WA terakhir sebelum checkout. Angka di kolom berikutnya bisa sama — itu
                        user yang sama, bukan ditambah.
                    </p>
                    <div className="grid grid-cols-4 gap-2 text-center">
                        {CO_DAY_OPTIONS.map((day) => (
                            <div key={day} className="panel border-2 border-blue-400/20">
                                <p className="text-xs text-gray-500">Sampai hari ke-{day}</p>
                                <p className="text-base font-bold">{statsData.co_within_days?.[day] ?? 0}</p>
                                <StatsCompareBadge
                                    current={statsData.co_within_days?.[day] ?? 0}
                                    previous={compareStatsData?.co_within_days?.[day]}
                                    compareEnabled={compareEnabled}
                                    className="justify-center"
                                />
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            <div className="grid gap-4 lg:grid-cols-2">
                <div className="panel border-2 border-blue-400/20">
                    <h6 className="mb-1 font-semibold">User beli item yang sama dengan cart?</h6>
                    <p className="mb-3 text-xs text-gray-500">
                        Setelah dapat WA — dibandingkan dengan isi cart saat pengingat dikirim. Menghitung jumlah checkout, bukan user unik.
                    </p>
                    {statsData.match_type_breakdown && (
                        <ReactApexChart
                            type="bar"
                            height={280}
                            series={
                                compareEnabled && compareStatsData?.match_type_breakdown
                                    ? [
                                        {
                                            name: 'Periode ini',
                                            data: [
                                                statsData.match_type_breakdown.full,
                                                statsData.match_type_breakdown.partial,
                                                statsData.match_type_breakdown.none,
                                            ],
                                        },
                                        {
                                            name: 'Periode lalu',
                                            data: [
                                                compareStatsData.match_type_breakdown.full,
                                                compareStatsData.match_type_breakdown.partial,
                                                compareStatsData.match_type_breakdown.none,
                                            ],
                                        },
                                    ]
                                    : [
                                        {
                                            name: 'Jumlah checkout',
                                            data: [
                                                statsData.match_type_breakdown.full,
                                                statsData.match_type_breakdown.partial,
                                                statsData.match_type_breakdown.none,
                                            ],
                                        },
                                    ]
                            }
                            options={{
                                xaxis: { categories: CHECKOUT_MATCH_CATEGORIES },
                                plotOptions: { bar: { borderRadius: 4, columnWidth: '45%' } },
                                legend: { position: 'bottom' },
                            }}
                        />
                    )}
                </div>
                <div className="panel border-2 border-blue-400/20">
                    <h6 className="mb-1 font-semibold">Revenue</h6>
                    <p className="mb-3 text-xs text-gray-500">
                        Total bayar user per order (sub_total) — sudah termasuk ongkir, voucher, poin, dan diskon.
                        Dikelompokkan seperti chart di sebelah kiri.
                    </p>
                    <ReactApexChart
                        type="bar"
                        height={280}
                        series={
                            compareEnabled && compareStatsData
                                ? [
                                    {
                                        name: 'Periode ini',
                                        data: [
                                            statsData.revenue_by_match_type.full,
                                            statsData.revenue_by_match_type.partial,
                                            statsData.revenue_by_match_type.none,
                                        ],
                                    },
                                    {
                                        name: 'Periode lalu',
                                        data: [
                                            compareStatsData.revenue_by_match_type.full,
                                            compareStatsData.revenue_by_match_type.partial,
                                            compareStatsData.revenue_by_match_type.none,
                                        ],
                                    },
                                ]
                                : [
                                    {
                                        name: 'Revenue',
                                        data: [
                                            statsData.revenue_by_match_type.full,
                                            statsData.revenue_by_match_type.partial,
                                            statsData.revenue_by_match_type.none,
                                        ],
                                    },
                                ]
                        }
                        options={{
                            xaxis: { categories: CHECKOUT_MATCH_CATEGORIES },
                            yaxis: {
                                labels: {
                                    formatter: (val: number) => formatCurrency(val),
                                },
                            },
                            tooltip: {
                                y: {
                                    formatter: (val: number) => formatCurrency(val),
                                },
                            },
                            legend: { position: 'bottom' },
                        }}
                    />
                </div>
            </div>

            {(showCoByHourChart || showCoByDayChart) && (
                <div className="grid gap-4 lg:grid-cols-2">
                    {showCoByHourChart && (
                        <div className="panel border-2 border-blue-400/20">
                            <h6 className="mb-1 font-semibold">Checkout per Jam (WIB)</h6>
                            <p className="mb-3 text-xs text-gray-500">
                                Jumlah checkout sukses berdasarkan jam checkout terjadi (converted_at) dalam periode ini.
                            </p>
                            <ReactApexChart
                                type="line"
                                height={280}
                                series={coByHourSeries}
                                options={{
                                    xaxis: { categories: coByHourCategories },
                                    stroke: { curve: 'smooth', width: 2 },
                                    markers: { size: 4 },
                                    yaxis: {
                                        labels: { formatter: (val: number) => String(Math.round(val)) },
                                        min: 0,
                                        forceNiceScale: true,
                                    },
                                    tooltip: {
                                        y: { formatter: (val: number) => `${val} checkout` },
                                    },
                                    legend: { position: 'bottom' },
                                }}
                            />
                        </div>
                    )}
                    {showCoByDayChart && (
                        <div className="panel border-2 border-blue-400/20">
                            <h6 className="mb-1 font-semibold">Checkout per Hari</h6>
                            <p className="mb-3 text-xs text-gray-500">
                                Jumlah checkout sukses berdasarkan hari checkout terjadi (converted_at) dalam periode ini.
                            </p>
                            <ReactApexChart
                                type="line"
                                height={280}
                                series={coByDaySeries}
                                options={{
                                    xaxis: { categories: coByDayCategories },
                                    stroke: { curve: 'smooth', width: 2 },
                                    markers: { size: 4 },
                                    yaxis: {
                                        labels: { formatter: (val: number) => String(Math.round(val)) },
                                        min: 0,
                                        forceNiceScale: true,
                                    },
                                    tooltip: {
                                        y: { formatter: (val: number) => `${val} checkout` },
                                    },
                                    legend: { position: 'bottom' },
                                }}
                            />
                        </div>
                    )}
                </div>
            )}

            <div className="grid gap-4 lg:grid-cols-2">
                <div className="panel border-2 border-blue-400/20">
                    <h6 className="mb-1 font-semibold">Efektivitas Pengingat</h6>
                    <p className="mb-3 text-xs text-gray-500">
                        Berapa banyak user yang checkout setelah pengingat WA ke-1 atau ke-2 dikirim dalam periode ini.
                    </p>
                    <div className="mb-4 grid gap-3 sm:grid-cols-2">
                        <div className="panel border-2 border-blue-400/20">
                            <p className="text-sm font-semibold">Setelah WA ke-1</p>
                            <p className="text-xs text-gray-500">
                                {formatReminderSummary(statsData.reminder_effectiveness.after_first_wa)}
                            </p>
                            <p className="text-lg font-bold">
                                {formatReminderRate(statsData.reminder_effectiveness.after_first_wa)}
                            </p>
                            <StatsCompareBadge
                                current={statsData.reminder_effectiveness.after_first_wa.conversion_rate_percent}
                                previous={compareStatsData?.reminder_effectiveness.after_first_wa.conversion_rate_percent}
                                compareEnabled={compareEnabled}
                                skipCompare={statsData.reminder_effectiveness.after_first_wa.wa_sent_users === 0}
                                suffix="%"
                            />
                        </div>
                        <div className="panel border-2 border-blue-400/20">
                            <p className="text-sm font-semibold">Setelah WA ke-2</p>
                            <p className="text-xs text-gray-500">
                                {formatReminderSummary(statsData.reminder_effectiveness.after_second_wa)}
                            </p>
                            <p className="text-lg font-bold">
                                {formatReminderRate(statsData.reminder_effectiveness.after_second_wa)}
                            </p>
                            <StatsCompareBadge
                                current={statsData.reminder_effectiveness.after_second_wa.conversion_rate_percent}
                                previous={compareStatsData?.reminder_effectiveness.after_second_wa.conversion_rate_percent}
                                compareEnabled={compareEnabled}
                                skipCompare={statsData.reminder_effectiveness.after_second_wa.wa_sent_users === 0}
                                suffix="%"
                            />
                        </div>
                    </div>
                    <ReactApexChart
                        type="bar"
                        height={220}
                        series={
                            compareEnabled && compareStatsData
                                ? [
                                    {
                                        name: 'Current',
                                        data: [
                                            statsData.reminder_effectiveness.after_first_wa.conversion_rate_percent,
                                            statsData.reminder_effectiveness.after_second_wa.conversion_rate_percent,
                                        ],
                                    },
                                    {
                                        name: 'Previous',
                                        data: [
                                            compareStatsData.reminder_effectiveness.after_first_wa.conversion_rate_percent,
                                            compareStatsData.reminder_effectiveness.after_second_wa.conversion_rate_percent,
                                        ],
                                    },
                                ]
                                : [
                                    {
                                        name: 'Conversion Rate (%)',
                                        data: [
                                            statsData.reminder_effectiveness.after_first_wa.conversion_rate_percent,
                                            statsData.reminder_effectiveness.after_second_wa.conversion_rate_percent,
                                        ],
                                    },
                                ]
                        }
                        options={{
                            xaxis: { categories: ['WA ke-1', 'WA ke-2'] },
                            plotOptions: { bar: { borderRadius: 4 } },
                            legend: { position: 'bottom' },
                        }}
                    />
                </div>

                <div className="panel border-2 border-blue-400/20">
                    <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
                        <h6 className="font-semibold">Top Produk Tidak Di-CO</h6>
                        <span className="text-xs text-gray-500">
                            Menampilkan {statsData.top_unconverted_products.length} produk
                            {statsData.top_unconverted_products.length < 10 ? ' (data tersedia dalam periode ini)' : ' (top 10)'}
                        </span>
                    </div>
                    <DataTable
                        className="table-hover whitespace-nowrap"
                        records={topProductsWithCompare}
                        idAccessor="product_id"
                        minHeight={120}
                        noRecordsText="Tidak ada data produk tidak di-CO dalam periode ini"
                        columns={[
                            {
                                accessor: 'rank',
                                title: '#',
                                width: 60,
                                render: (_, index) => <span className="font-semibold">{index + 1}</span>,
                            },
                            {
                                accessor: 'product_title',
                                title: 'Nama Produk',
                                render: ({ product_title }) => <span className="font-medium">{product_title || '-'}</span>,
                            },
                            {
                                accessor: 'abandon_count',
                                title: 'Jumlah Abandon',
                                textAlign: 'center',
                                render: ({ abandon_count, previous_abandon_count }) => (
                                    <div>
                                        <p>{abandon_count}</p>
                                        {compareEnabled && previous_abandon_count != null && (
                                            <StatsCompareBadge
                                                current={abandon_count}
                                                previous={previous_abandon_count}
                                                compareEnabled={compareEnabled}
                                                className="justify-center"
                                            />
                                        )}
                                    </div>
                                ),
                            },
                        ]}
                    />
                </div>
            </div>


        </div>
    );
};

export default AbandonedCartStatsPanel;