import { useMemo, useState } from 'react';
import dynamic from 'next/dynamic';

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

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

export interface BirthdayStats {
    filters?: {
        date_from: string;
        date_to: string;
        timezone: string;
        wa_filter?: string;
        checkout_filter?: string;
        checkout_source?: string;
        promo_window_days?: number;
        reminder_days_before?: number;
        reminder_label?: string;
    };
    reminder_days_before?: number;
    reminder_label?: string;
    wa_sent_unique_users: number;
    wa_sent_reminder_unique_users?: number;
    wa_sent_h7_unique_users?: number;
    wa_sent_h1_unique_users?: number;
    wa_sent_h0_unique_users?: number;
    converted_reminder_window_users?: number;
    converted_h7_window_users?: number;
    converted_h0_window_users?: number;
    converted_h1_window_users?: number;
    converted_late_after_h0_users?: number;
    converted_late_over8_users?: number;
    h0_reach?: number;
    h1_reach?: number;
    reminder_window_conversion_rate_percent?: number;
    h7_window_conversion_rate_percent?: number;
    h0_conversion_rate_percent?: number;
    h1_conversion_rate_percent?: number;
    preference_reminder_percent?: number;
    preference_h0_percent?: number;
    preference_h7_percent?: number;
    preference_h1_percent?: number;
    funnel?: {
        reminder_sent?: number;
        co_reminder_window?: number;
        h0_sent?: number;
        co_after_h0?: number;
        not_converted_after_h0?: number;
        h7_sent: number;
        co_h7_window: number;
        h1_sent: number;
        co_after_h1: number;
        not_converted_after_h1: number;
    };
    converted_success_orders: number;
    converted_success_unique_users: number;
    converted_with_wa_anchor_unique_users?: number;
    converted_without_wa_anchor_unique_users?: number;
    converted_both_wa_and_checkout_in_range?: number;
    conversion_rate_in_range_percent: number;
    conversion_rate_within_7_days_percent: number;
    conversion_rate_within_30_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;
    co_within_7_days_users?: number;
    co_within_30_days_users?: number;
    avg_days_to_checkout: number;
    max_days_to_checkout: number;
    total_revenue: number;
    birthday_discount_total: 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;
        }[];
    };
    offset_comparison?: {
        window_days: number;
        always_include?: number[];
        cohorts: BirthdayOffsetCohort[];
        insight?: {
            winner_offset: number | null;
            faster_offset?: number | null;
            summary: string;
            lines?: string[];
        };
    };
}

export interface BirthdayOffsetCohort {
    days_before: number;
    label: string;
    wa_sent_users: number;
    converted_users: number;
    conversion_rate_percent: number;
    avg_days_to_checkout: number;
    median_days_to_checkout: number;
    max_days_to_checkout: number;
    speed_buckets: {
        day_0: number;
        day_1_3: number;
        day_4_7: number;
        day_8_14: number;
        day_15_30: number;
    };
}

type CheckoutBucket = {
    converted_users: number;
};

const hasCheckoutBucketData = (buckets: CheckoutBucket[] | undefined) =>
    (buckets || []).some((bucket) => bucket.converted_users > 0);

interface BirthdayStatsPanelProps {
    statsData: BirthdayStats;
    compareStatsData: BirthdayStats | null;
    compareEnabled: boolean;
    appliedStatsRange: DateRange;
    appliedCompareRange: DateRange | null;
    onOpenPicker: () => void;
}

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

const MetricCard = ({
    label,
    value,
    displayValue,
    subValue,
    previous,
    compareEnabled,
    skipCompare,
    suffix = '',
    note,
}: {
    label: string;
    value: number | string;
    displayValue?: string;
    subValue?: string;
    previous?: number | null;
    compareEnabled: boolean;
    skipCompare?: boolean;
    suffix?: string;
    note?: string;
}) => {
    const compareCurrent = typeof value === 'number' ? value : Number(value) || 0;

    return (
        <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">
                {displayValue ?? value}
                {suffix && typeof value === 'number' ? suffix : ''}
                {compareEnabled && !skipCompare && typeof previous === 'number' && previous != null ? (
                    <CompareTrendArrow current={compareCurrent} previous={previous} />
                ) : null}
            </div>
            {subValue && <p className="mb-1 text-sm font-medium text-gray-600 dark:text-gray-300">{subValue}</p>}
            <StatsCompareBadge
                current={compareCurrent}
                previous={previous}
                compareEnabled={compareEnabled}
                skipCompare={skipCompare}
                suffix={suffix && typeof value === 'number' ? suffix : ''}
            />
            {note && <p className="mt-1 text-xs text-gray-500">{note}</p>}
        </div>
    );
};

const BirthdayStatsPanel = ({
    statsData,
    compareStatsData,
    compareEnabled,
    appliedStatsRange,
    appliedCompareRange,
    onOpenPicker,
}: BirthdayStatsPanelProps) => {
    const [statsSubTab, setStatsSubTab] = useState<'summary' | 'compare' | 'offset'>('summary');
    const [showDetail, setShowDetail] = useState(false);

    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 convertedUsers = statsData.converted_success_unique_users || 0;
    const convertedOrders = statsData.converted_success_orders || 0;
    const revenue = statsData.total_revenue || 0;
    const discount = statsData.birthday_discount_total || 0;
    const revenuePerUser = convertedUsers ? Math.round(revenue / convertedUsers) : 0;
    const discountPerOrder = convertedOrders ? Math.round(discount / convertedOrders) : 0;
    const discountRatioPercent = revenue ? Math.round((discount / revenue) * 1000) / 10 : 0;

    const coDay0 = statsData.co_day_0_same_day_users ?? statsData.co_by_day?.['0'] ?? 0;
    const coWithin3 = statsData.co_within_3_days_users ?? 0;
    const coWithin7 = statsData.co_within_7_days_users ?? 0;
    const coWithin30 = statsData.co_within_30_days_users ?? 0;
    const coBucket1to3 = Math.max(0, coWithin3 - coDay0);
    const coBucket4to7 = Math.max(0, coWithin7 - coWithin3);
    const coBucket8to30 = Math.max(0, coWithin30 - coWithin7);

    const reminderLabel = statsData.reminder_label || statsData.filters?.reminder_label || 'H-7';
    const reminderSent = statsData.wa_sent_reminder_unique_users ?? statsData.wa_sent_h7_unique_users ?? 0;
    const h1Sent = statsData.wa_sent_h1_unique_users ?? 0;
    const h0Sent = statsData.wa_sent_h0_unique_users ?? 0;
    const coReminder = statsData.converted_reminder_window_users ?? statsData.converted_h7_window_users ?? 0;
    const coH0 = statsData.converted_h0_window_users ?? 0;
    const coLate = statsData.converted_late_after_h0_users ?? statsData.converted_late_over8_users ?? 0;
    const coH1Historical = statsData.converted_h1_window_users ?? 0;
    const showH1Historical = h1Sent > 0 || coH1Historical > 0;
    const prefReminder = statsData.preference_reminder_percent ?? statsData.preference_h7_percent ?? 0;
    const prefH0 = statsData.preference_h0_percent ?? statsData.preference_h1_percent ?? 0;
    const h0ExtraUsers = coH0;
    const waNotConverted = Math.max(0, (statsData.wa_sent_unique_users || 0) - convertedUsers);
    const preferLabel = prefH0 > prefReminder ? 'pada/setelah H-0' : `sebelum H-0 (setelah ${reminderLabel})`;
    const preferPercent = Math.max(prefReminder, prefH0);
    const funnelReminderSent = statsData.funnel?.reminder_sent ?? statsData.funnel?.h7_sent ?? reminderSent;
    const funnelCoReminder = statsData.funnel?.co_reminder_window ?? statsData.funnel?.co_h7_window ?? coReminder;
    const funnelH0Sent = statsData.funnel?.h0_sent ?? h0Sent;
    const funnelCoAfterH0 = statsData.funnel?.co_after_h0 ?? coH0;
    const funnelNotConverted = statsData.funnel?.not_converted_after_h0 ?? Math.max(0, funnelH0Sent - funnelCoAfterH0);

    const offsetCohorts = statsData.offset_comparison?.cohorts || [];
    const compareOffsetCohorts = compareStatsData?.offset_comparison?.cohorts || [];
    const getOffsetCohort = (cohorts: BirthdayOffsetCohort[], daysBefore: number) =>
        cohorts.find((item) => item.days_before === daysBefore);
    const emptyOffsetCohort = (daysBefore: number): BirthdayOffsetCohort => ({
        days_before: daysBefore,
        label: `H-${daysBefore}`,
        wa_sent_users: 0,
        converted_users: 0,
        conversion_rate_percent: 0,
        avg_days_to_checkout: 0,
        median_days_to_checkout: 0,
        max_days_to_checkout: 0,
        speed_buckets: { day_0: 0, day_1_3: 0, day_4_7: 0, day_8_14: 0, day_15_30: 0 },
    });
    const cohortH7 = getOffsetCohort(offsetCohorts, 7) || emptyOffsetCohort(7);
    const cohortH14 = getOffsetCohort(offsetCohorts, 14) || emptyOffsetCohort(14);
    const extraOffsetCohorts = offsetCohorts.filter((item) => item.days_before !== 7 && item.days_before !== 14);
    const extraOffsetSentLabel = extraOffsetCohorts
        .filter((item) => item.wa_sent_users > 0)
        .map((item) => `${item.label}: ${item.wa_sent_users}`)
        .join(' · ');
    const reminderSplitLabel = statsData.offset_comparison
        ? [`H-7: ${cohortH7.wa_sent_users}`, `H-14: ${cohortH14.wa_sent_users}`, extraOffsetSentLabel, `H-1: ${h1Sent}`, `H-0: ${h0Sent}`]
              .filter(Boolean)
              .join(' · ')
        : `${reminderLabel}: ${reminderSent} · H-1: ${h1Sent} · H-0: ${h0Sent}`;
    const mixedReminderOffsets = cohortH7.wa_sent_users > 0 && cohortH14.wa_sent_users > 0;
    const offsetInsight = statsData.offset_comparison?.insight;
    const offsetChartLabels = offsetCohorts.map((item) => item.label);
    const offsetCrSeries = useMemo(() => {
        const current = offsetCohorts.map((item) => item.conversion_rate_percent);
        if (!compareEnabled || !compareOffsetCohorts.length) {
            return [{ name: 'Conversion rate', data: current }];
        }
        return [
            { name: 'Periode ini', data: current },
            {
                name: 'Periode lalu',
                data: offsetCohorts.map(
                    (item) => getOffsetCohort(compareOffsetCohorts, item.days_before)?.conversion_rate_percent ?? 0
                ),
            },
        ];
    }, [offsetCohorts, compareEnabled, compareOffsetCohorts]);
    const offsetAvgDaysSeries = useMemo(
        () => [{ name: 'Rata-rata hari', data: offsetCohorts.map((item) => item.avg_days_to_checkout) }],
        [offsetCohorts]
    );

    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]);

    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 birthday</strong>. Checkout dihitung dari{' '}
                            <strong>order sukses</strong> yang memiliki{' '}
                            <strong>meta_items.birthday_extra</strong> (amount &gt; 0).
                        </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>

            <div className="flex flex-wrap gap-2">
                <button
                    type="button"
                    className={`btn btn-sm ${statsSubTab === 'summary' ? 'btn-primary' : 'btn-outline-primary'}`}
                    onClick={() => setStatsSubTab('summary')}
                >
                    Ringkasan
                </button>
                <button
                    type="button"
                    className={`btn btn-sm ${statsSubTab === 'compare' ? 'btn-primary' : 'btn-outline-primary'}`}
                    onClick={() => setStatsSubTab('compare')}
                >
                    {reminderLabel} vs H-0
                </button>
                <button
                    type="button"
                    className={`btn btn-sm ${statsSubTab === 'offset' ? 'btn-primary' : 'btn-outline-primary'}`}
                    onClick={() => setStatsSubTab('offset')}
                >
                    H-7 vs H-14
                </button>
            </div>

            {statsSubTab === 'summary' && (
                <>
                    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                        <MetricCard
                            label="WA Terkirim"
                            value={statsData.wa_sent_unique_users}
                            subValue={reminderSplitLabel}
                            previous={compareStatsData?.wa_sent_unique_users}
                            compareEnabled={compareEnabled}
                            note="Pecahan H-7/H-14 dari log kirim WA (bukan label env)"
                        />
                        <MetricCard
                            label="Greetings H-0"
                            value={statsData.wa_sent_h0_unique_users ?? 0}
                            previous={compareStatsData?.wa_sent_h0_unique_users}
                            compareEnabled={compareEnabled}
                            note="User unik menerima greetings hari H birthday"
                        />
                        <MetricCard
                            label="User Checkout"
                            value={statsData.converted_success_unique_users}
                            subValue={`dari ${statsData.converted_success_orders} order`}
                            previous={compareStatsData?.converted_success_unique_users}
                            compareEnabled={compareEnabled}
                            note="User unik pakai diskon birthday (order sukses)"
                        />
                        <MetricCard
                            label="Rasio Konversi"
                            value={statsData.conversion_rate_in_range_percent}
                            previous={compareStatsData?.conversion_rate_in_range_percent}
                            compareEnabled={compareEnabled}
                            suffix="%"
                            note="User checkout ÷ WA terkirim"
                        />
                        <MetricCard
                            label="Revenue"
                            value={statsData.total_revenue}
                            displayValue={formatCurrency(statsData.total_revenue)}
                            subValue={`Diskon: ${formatCurrency(statsData.birthday_discount_total)}`}
                            previous={compareStatsData?.total_revenue}
                            compareEnabled={compareEnabled}
                            note="sub_total order sukses dengan diskon birthday"
                        />
                    </div>

                    <div>
                        <button
                            type="button"
                            className="btn btn-outline-primary btn-sm"
                            onClick={() => setShowDetail((prev) => !prev)}
                        >
                            {showDetail ? 'Sembunyikan detail' : 'Lihat detail'}
                        </button>
                    </div>

                    {showDetail && (
                        <>
                            <div className="grid gap-4 lg: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">
                                        {statsData.avg_days_to_checkout}
                                        <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>
                                            Terlama: <strong>{statsData.max_days_to_checkout ?? 0} hari</strong> · Hari sama (day-0):{' '}
                                            <strong>{statsData.co_day_0_same_day_users ?? statsData.co_by_day?.['0'] ?? 0} user</strong>
                                        </p>
                                        <p>
                                            Dalam 7 hari: <strong>{statsData.conversion_rate_within_7_days_percent}%</strong> · Dalam 30 hari:{' '}
                                            <strong>{statsData.conversion_rate_within_30_days_percent}%</strong>
                                        </p>
                                    </div>
                                    <p className="mt-2 text-xs text-gray-500">
                                        Jeda kirim WA {reminderLabel} → checkout, maks 30 hari (masa promo).
                                    </p>
                                </div>
                            </div>

                            <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">
                                    <li>
                                        Mayoritas user checkout <strong>{preferLabel}</strong> ({preferPercent}% dari converter dengan anchor WA).
                                    </li>
                                    <li>
                                        Greetings H-0 mendorong tambahan <strong>{h0ExtraUsers} user</strong> checkout.
                                    </li>
                                    <li>
                                        <strong>{waNotConverted} user</strong> sudah menerima WA tapi belum checkout — potensi follow-up.
                                    </li>
                                </ul>
                            </div>

                            <div className="grid gap-4 lg:grid-cols-2">
                                <div className="panel border-2 border-blue-400/20">
                                    <p className="text-xs text-gray-500 mb-2">Efisiensi Diskon</p>
                                    <div className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
                                        <div className="flex items-center justify-between">
                                            <span>Revenue / user checkout</span>
                                            <strong>{formatCurrency(revenuePerUser)}</strong>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            <span>Rata-rata diskon / order</span>
                                            <strong>{formatCurrency(discountPerOrder)}</strong>
                                        </div>
                                        <div className="flex items-center justify-between">
                                            <span>Rasio diskon ÷ revenue</span>
                                            <strong>{discountRatioPercent}%</strong>
                                        </div>
                                    </div>
                                    <p className="mt-2 text-xs text-gray-500">Makin kecil rasio diskon, makin sehat margin promo.</p>
                                </div>

                                <div className="panel border-2 border-blue-400/20">
                                    <p className="text-xs text-gray-500 mb-2">Distribusi Kecepatan Checkout</p>
                                    <ReactApexChart
                                        type="bar"
                                        height={220}
                                        series={[{ name: 'User', data: [coDay0, coBucket1to3, coBucket4to7, coBucket8to30] }]}
                                        options={{
                                            chart: { toolbar: { show: false } },
                                            plotOptions: { bar: { horizontal: true, borderRadius: 4, distributed: true, barHeight: '65%' } },
                                            dataLabels: { enabled: true },
                                            legend: { show: false },
                                            xaxis: { categories: ['Hari 0', '1-3 hari', '4-7 hari', '8-30 hari'] },
                                            tooltip: { y: { formatter: (val: number) => `${val} user` } },
                                        }}
                                    />
                                    <p className="mt-1 text-xs text-gray-500">Jumlah user unik per rentang hari sampai checkout.</p>
                                </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 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 Minggu</h6>
                                            <p className="mb-3 text-xs text-gray-500">
                                                Jumlah checkout sukses berdasarkan hari dalam minggu saat checkout terjadi.
                                            </p>
                                            <ReactApexChart
                                                type="line"
                                                height={280}
                                                series={[
                                                    {
                                                        name: 'Jumlah checkout',
                                                        data: coByDayOfWeek.map((bucket) => bucket.converted_users),
                                                    },
                                                ]}
                                                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>
                            )}
                        </>
                    )}
                </>
            )}

            {statsSubTab === 'compare' && (
                <>
                    {mixedReminderOffsets && (
                        <p className="text-xs text-gray-500">
                            Tab ini menggabungkan semua reminder (H-7 {cohortH7.wa_sent_users} + H-14 {cohortH14.wa_sent_users}
                            ) lalu dibanding dengan H-0. Untuk pecahan H-7 vs H-14, buka tab <strong>H-7 vs H-14</strong>.
                        </p>
                    )}
                    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                        <MetricCard
                            label={`CO Window ${reminderLabel}`}
                            value={coReminder}
                            previous={
                                compareStatsData?.converted_reminder_window_users ??
                                compareStatsData?.converted_h7_window_users
                            }
                            compareEnabled={compareEnabled}
                            note={`Checkout sebelum hari H-0 (didorong ${reminderLabel})`}
                        />
                        <MetricCard
                            label="CO Setelah H-0"
                            value={coH0}
                            previous={compareStatsData?.converted_h0_window_users}
                            compareEnabled={compareEnabled}
                            note="Checkout pada/setelah hari ultah (didorong H-0 / histori H-1)"
                        />
                        <MetricCard
                            label="CO Terlambat"
                            value={coLate}
                            previous={
                                compareStatsData?.converted_late_after_h0_users ??
                                compareStatsData?.converted_late_over8_users
                            }
                            compareEnabled={compareEnabled}
                            note="Checkout setelah H-0 tanpa greetings H-0"
                        />
                    </div>

                    {showH1Historical && (
                        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                            <MetricCard
                                label="H-1 Histori — Terkirim"
                                value={h1Sent}
                                previous={compareStatsData?.wa_sent_h1_unique_users}
                                compareEnabled={compareEnabled}
                                note="User yang dulu menerima reminder H-1 (sudah tidak dikirim)"
                            />
                            <MetricCard
                                label="H-1 Histori — Checkout"
                                value={coH1Historical}
                                previous={compareStatsData?.converted_h1_window_users}
                                compareEnabled={compareEnabled}
                                note="Checkout setelah H-1 (data lama, masuk bucket sesuai waktu CO)"
                            />
                            <MetricCard
                                label="H-1 Histori — Conv. Rate"
                                value={statsData.h1_conversion_rate_percent ?? 0}
                                previous={compareStatsData?.h1_conversion_rate_percent}
                                compareEnabled={compareEnabled}
                                suffix="%"
                                note="CO setelah H-1 ÷ H-1 terkirim"
                            />
                        </div>
                    )}

                    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                        <MetricCard
                            label="H-0 Reach"
                            value={statsData.h0_reach ?? h0Sent}
                            previous={compareStatsData?.h0_reach ?? compareStatsData?.wa_sent_h0_unique_users}
                            compareEnabled={compareEnabled}
                            note="User yang menerima greetings H-0"
                        />
                        <MetricCard
                            label="H-0 Conversion Rate"
                            value={statsData.h0_conversion_rate_percent ?? 0}
                            previous={compareStatsData?.h0_conversion_rate_percent}
                            compareEnabled={compareEnabled}
                            suffix="%"
                            note="CO setelah H-0 ÷ H-0 reach"
                        />
                        <MetricCard
                            label={`${reminderLabel} Window Conv. Rate`}
                            value={
                                statsData.reminder_window_conversion_rate_percent ??
                                statsData.h7_window_conversion_rate_percent ??
                                0
                            }
                            previous={
                                compareStatsData?.reminder_window_conversion_rate_percent ??
                                compareStatsData?.h7_window_conversion_rate_percent
                            }
                            compareEnabled={compareEnabled}
                            suffix="%"
                            note={`CO window ${reminderLabel} ÷ ${reminderLabel} terkirim`}
                        />
                    </div>

                    <div className="panel border-2 border-blue-400/20">
                        <h6 className="mb-1 font-semibold">Preferensi Waktu Checkout</h6>
                        <p className="mb-3 text-xs text-gray-500">
                            Porsi converter yang checkout mulai window {reminderLabel} vs mulai H-0 (di luar segmen terlambat).
                        </p>
                        <div className="flex flex-col gap-4 sm:flex-row">
                            <div className="flex-1">
                                <div className="mb-1 flex justify-between text-xs">
                                    <span>Mulai {reminderLabel}</span>
                                    <span>{prefReminder}%</span>
                                </div>
                                <div className="h-3 w-full rounded bg-gray-200">
                                    <div className="h-3 rounded bg-blue-500" style={{ width: `${prefReminder}%` }} />
                                </div>
                            </div>
                            <div className="flex-1">
                                <div className="mb-1 flex justify-between text-xs">
                                    <span>Mulai H-0</span>
                                    <span>{prefH0}%</span>
                                </div>
                                <div className="h-3 w-full rounded bg-gray-200">
                                    <div className="h-3 rounded bg-emerald-500" style={{ width: `${prefH0}%` }} />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="panel border-2 border-blue-400/20">
                        <h6 className="mb-1 font-semibold">Funnel {reminderLabel} → H-0</h6>
                        <p className="mb-3 text-xs text-gray-500">
                            Alur dari WA terkirim hingga checkout. &quot;Tidak CO&quot; = penerima H-0 yang belum checkout.
                        </p>
                        <ReactApexChart
                            type="bar"
                            height={320}
                            series={[
                                {
                                    name: 'User',
                                    data: [
                                        funnelReminderSent,
                                        funnelCoReminder,
                                        funnelH0Sent,
                                        funnelCoAfterH0,
                                        funnelNotConverted,
                                    ],
                                },
                            ]}
                            options={{
                                chart: { toolbar: { show: false } },
                                plotOptions: { bar: { horizontal: true, borderRadius: 4, distributed: true, barHeight: '70%' } },
                                dataLabels: { enabled: true },
                                legend: { show: false },
                                xaxis: {
                                    categories: [
                                        `${reminderLabel} Terkirim`,
                                        `CO Window ${reminderLabel}`,
                                        'H-0 Terkirim',
                                        'CO Setelah H-0',
                                        'Tidak CO (H-0)',
                                    ],
                                },
                                tooltip: { y: { formatter: (val: number) => `${val} user` } },
                            }}
                        />
                    </div>

                    <div className="grid gap-4 lg: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">
                                {statsData.avg_days_to_checkout}
                                <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>
                                    Terlama: <strong>{statsData.max_days_to_checkout ?? 0} hari</strong> · Hari sama (day-0):{' '}
                                    <strong>{coDay0} user</strong>
                                </p>
                                <p>
                                    Dalam 7 hari: <strong>{statsData.conversion_rate_within_7_days_percent}%</strong> · Dalam 30 hari:{' '}
                                    <strong>{statsData.conversion_rate_within_30_days_percent}%</strong>
                                </p>
                            </div>
                            <p className="mt-2 text-xs text-gray-500">
                                Jeda dihitung dari waktu kirim WA {reminderLabel} → checkout (bukan dari angka env).
                            </p>
                        </div>

                        <div className="panel border-2 border-blue-400/20">
                            <p className="text-xs text-gray-500 mb-2">Distribusi Kecepatan Checkout</p>
                            <ReactApexChart
                                type="bar"
                                height={220}
                                series={[{ name: 'User', data: [coDay0, coBucket1to3, coBucket4to7, coBucket8to30] }]}
                                options={{
                                    chart: { toolbar: { show: false } },
                                    plotOptions: { bar: { horizontal: true, borderRadius: 4, distributed: true, barHeight: '65%' } },
                                    dataLabels: { enabled: true },
                                    legend: { show: false },
                                    xaxis: { categories: ['Hari 0', '1-3 hari', '4-7 hari', '8-30 hari'] },
                                    tooltip: { y: { formatter: (val: number) => `${val} user` } },
                                }}
                            />
                            <p className="mt-1 text-xs text-gray-500">
                                Hari 0 = hari yang sama saat WA {reminderLabel} dikirim.
                            </p>
                        </div>
                    </div>
                </>
            )}

            {statsSubTab === 'offset' && (
                <>
                    <p className="text-xs text-gray-500">
                        Kohort dari <strong>log kirim WA</strong> (H-7 = <code>days_before: 7</code>, H-14 ={' '}
                        <code>days_before: 14</code>). Ringkasan sebelumnya menempel label env ke semua reminder, jadi
                        angka &quot;{reminderLabel}&quot; di sana bisa tercampur. Checkout dihitung dalam{' '}
                        <strong>{statsData.offset_comparison?.window_days ?? 30} hari setelah WA itu</strong>.
                    </p>
                    {!statsData.offset_comparison && (
                        <p className="text-sm text-amber-700">
                            Data pecahan H-7/H-14 belum termuat. Refresh halaman statistik atau ganti periode tanggal.
                        </p>
                    )}

                    {offsetInsight?.summary && (
                        <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 H-7 vs H-14</h6>
                            <p className="text-sm text-gray-700 dark:text-gray-200">{offsetInsight.summary}</p>
                        </div>
                    )}

                    <div className="grid gap-4 lg:grid-cols-2">
                        {[cohortH7, cohortH14].map((cohort) => {
                            const previous = getOffsetCohort(compareOffsetCohorts, cohort.days_before);
                            return (
                                <div key={cohort.days_before} className="panel border-2 border-blue-400/20 space-y-3">
                                    <h6 className="font-semibold">{cohort.label}</h6>
                                    <div className="grid gap-3 sm:grid-cols-2">
                                        <MetricCard
                                            label="WA Terkirim"
                                            value={cohort.wa_sent_users}
                                            previous={previous?.wa_sent_users}
                                            compareEnabled={compareEnabled}
                                            note="User unik reminder di periode ini"
                                        />
                                        <MetricCard
                                            label="Checkout"
                                            value={cohort.converted_users}
                                            previous={previous?.converted_users}
                                            compareEnabled={compareEnabled}
                                            note="Order sukses dalam 30 hari setelah WA"
                                        />
                                        <MetricCard
                                            label="Conversion Rate"
                                            value={cohort.conversion_rate_percent}
                                            previous={previous?.conversion_rate_percent}
                                            compareEnabled={compareEnabled}
                                            suffix="%"
                                            note="Checkout ÷ WA terkirim"
                                        />
                                        <MetricCard
                                            label="Rata-rata ke Checkout"
                                            value={cohort.avg_days_to_checkout}
                                            previous={previous?.avg_days_to_checkout}
                                            compareEnabled={compareEnabled}
                                            suffix=" hari"
                                            note={`Median ${cohort.median_days_to_checkout} hari · terlama ${cohort.max_days_to_checkout} hari`}
                                        />
                                    </div>
                                </div>
                            );
                        })}
                    </div>

                    {offsetCohorts.length > 0 && (
                        <div className="grid gap-4 lg:grid-cols-2">
                            <div className="panel border-2 border-blue-400/20">
                                <h6 className="mb-1 font-semibold">Conversion Rate per Offset</h6>
                                <p className="mb-3 text-xs text-gray-500">Semakin tinggi, semakin efektif mendorong checkout.</p>
                                <ReactApexChart
                                    type="bar"
                                    height={260}
                                    series={offsetCrSeries}
                                    options={{
                                        chart: { toolbar: { show: false } },
                                        plotOptions: { bar: { borderRadius: 4, columnWidth: '45%' } },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: (val: number) => `${val}%`,
                                        },
                                        xaxis: { categories: offsetChartLabels },
                                        yaxis: {
                                            min: 0,
                                            labels: { formatter: (val: number) => `${val}%` },
                                        },
                                        tooltip: { y: { formatter: (val: number) => `${val}%` } },
                                        legend: { position: 'bottom' },
                                    }}
                                />
                            </div>
                            <div className="panel border-2 border-blue-400/20">
                                <h6 className="mb-1 font-semibold">Rata-rata Hari WA → Checkout</h6>
                                <p className="mb-3 text-xs text-gray-500">Semakin rendah, semakin cepat user membeli setelah WA.</p>
                                <ReactApexChart
                                    type="bar"
                                    height={260}
                                    series={offsetAvgDaysSeries}
                                    options={{
                                        chart: { toolbar: { show: false } },
                                        plotOptions: { bar: { borderRadius: 4, columnWidth: '45%' } },
                                        dataLabels: {
                                            enabled: true,
                                            formatter: (val: number) => `${val} hari`,
                                        },
                                        xaxis: { categories: offsetChartLabels },
                                        yaxis: {
                                            min: 0,
                                            labels: { formatter: (val: number) => `${val}` },
                                        },
                                        tooltip: { y: { formatter: (val: number) => `${val} hari` } },
                                    }}
                                />
                            </div>
                        </div>
                    )}

                    <div className="panel border-2 border-blue-400/20">
                        <h6 className="mb-1 font-semibold">Distribusi Kecepatan Checkout</h6>
                        <p className="mb-3 text-xs text-gray-500">
                            Jumlah user checkout per rentang hari sejak WA reminder dikirim.
                        </p>
                        <ReactApexChart
                            type="bar"
                            height={280}
                            series={[
                                {
                                    name: cohortH7.label,
                                    data: [
                                        cohortH7.speed_buckets.day_0,
                                        cohortH7.speed_buckets.day_1_3,
                                        cohortH7.speed_buckets.day_4_7,
                                        cohortH7.speed_buckets.day_8_14,
                                        cohortH7.speed_buckets.day_15_30,
                                    ],
                                },
                                {
                                    name: cohortH14.label,
                                    data: [
                                        cohortH14.speed_buckets.day_0,
                                        cohortH14.speed_buckets.day_1_3,
                                        cohortH14.speed_buckets.day_4_7,
                                        cohortH14.speed_buckets.day_8_14,
                                        cohortH14.speed_buckets.day_15_30,
                                    ],
                                },
                            ]}
                            options={{
                                chart: { toolbar: { show: false } },
                                plotOptions: { bar: { borderRadius: 4, columnWidth: '55%' } },
                                dataLabels: { enabled: true },
                                xaxis: { categories: ['Hari 0', '1-3 hari', '4-7 hari', '8-14 hari', '15-30 hari'] },
                                tooltip: { y: { formatter: (val: number) => `${val} user` } },
                                legend: { position: 'bottom' },
                            }}
                        />
                    </div>

                    {extraOffsetCohorts.length > 0 && (
                        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                            {extraOffsetCohorts.map((cohort) => (
                                <MetricCard
                                    key={cohort.days_before}
                                    label={`${cohort.label} — CR`}
                                    value={cohort.conversion_rate_percent}
                                    suffix="%"
                                    previous={getOffsetCohort(compareOffsetCohorts, cohort.days_before)?.conversion_rate_percent}
                                    compareEnabled={compareEnabled}
                                    note={`${cohort.wa_sent_users} WA · ${cohort.converted_users} CO · rata-rata ${cohort.avg_days_to_checkout} hari`}
                                />
                            ))}
                        </div>
                    )}
                </>
            )}
        </div>
    );
};

export default BirthdayStatsPanel;