import dynamic from 'next/dynamic';
import type { ReactNode } from 'react';
import { useSelector } from 'react-redux';
import type { ApexOptions } from 'apexcharts';
import 'mantine-datatable/styles.css';
import { DataTable } from '@/components/Shared/DataTable';

import { IRootState } from '@/store';

import type { JourneyStats, PathMetricRow } from './JourneyStatsPanel';
import JourneyFunnelChart from './JourneyFunnelChart';
import JourneyFunnelDonut from './JourneyFunnelDonut';
import JourneyOverviewSnapshot from './JourneyOverviewSnapshot';
import LandingPageDurationDonut from './LandingPageDurationDonut';
import AcquisitionTable, {
    type AcquisitionActiveFilters,
    type AcquisitionRowClickPayload,
    type AcquisitionTableRowInput,
    formatDurationMin,
} from './AcquisitionTable';
import type { JourneyWidgetId } from './widget-registry';
import AddToCartItemReport, { type ItemAttributionFilters } from './AddToCartItemReport';
import { funnelView, mapAcquisitionRowsForMode } from '@/lib/journey-count-mode';
import { useJourneyCountMode } from './JourneyCountModeContext';
import { journeyChartGrid, journeyChartInteract } from './journey-chart-options';
import AcquisitionSunburstChart from './AcquisitionSunburstChart';
import PurchaseOrdersTable from './PurchaseOrdersTable';
import type { DateRange } from '@/lib/abandoned-cart-stats-date';
import StatsCompareBadge from '@/components/AbandonedCart/StatsCompareBadge';
import CompareTrendArrow from '@/components/AbandonedCart/CompareTrendArrow';

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

const CHANNEL_LABELS: Record<string, string> = {
    web: 'Website',
    shopee: 'Shopee',
    tokped: 'Tokopedia',
    blibli: 'Blibli',
    jdid: 'JD.ID',
    lazada: 'Lazada',
    whizliz: 'Whizliz',
    zalora: 'Zalora',
    gostore: 'GoStore',
    tiktok: 'TikTok',
    wa_cs_online: 'WhatsApp CS Online',
    wa_gi: 'WhatsApp CS GI',
    wa_kokas: 'WhatsApp CS Kokas',
    wa_bekasi: 'WhatsApp CS Bekasi',
    wa_cibubur: 'WhatsApp CS Cibubur',
    store_gi: 'Store Grand Indonesia',
    store_kokas: 'Store Kota Kasablanka',
    store_bekasi: 'Store Pakuwon Bekasi',
    store_cibubur: 'Store Living World Cibubur',
};

export const MetricCard = ({
    label,
    value,
    suffix = '',
    note,
    compareEnabled = false,
    previous = null,
    compareCurrent,
    
}: {
    label: string;
    value: number | string;
    suffix?: string;
    note?: string;
    compareEnabled?: boolean;
    previous?: number | null;
    compareCurrent?: number;
}) => {
    const currentNum = compareCurrent ?? (typeof value === 'number' ? value : null);
    return (
        <div className="rounded border border-gray-100 shadow-md bg-white p-3 text-[#0e1726] dark:border-[#334155] dark:bg-[#0e1726] dark:text-white">
            <p className="text-xs text-gray-500 mb-2 dark:text-slate-400">{label}</p>
            <div className="text-3xl font-bold flex items-center mb-2">
                {value}
                {suffix}
                {compareEnabled && currentNum != null && previous != null ? (
                    <CompareTrendArrow current={currentNum} previous={previous} />
                ) : null}
            </div>
            {note ? <p className="text-xs text-gray-400 mt-1 dark:text-slate-500">{note}</p> : null}
            {compareEnabled && currentNum != null && previous != null ? (
                <StatsCompareBadge current={currentNum} previous={previous} compareEnabled suffix={suffix} />
            ) : null}
        </div>
    );
};

function prevNum(
    compareEnabled: boolean,
    compareStats: JourneyStats | null | undefined,
    getter: (stats: JourneyStats) => number | undefined | null
) {
    if (!compareEnabled || !compareStats) return null;
    const value = getter(compareStats);
    return typeof value === 'number' ? value : 0;
}

function pctShare(part: number, whole: number) {
    if (!whole) return 0;
    return Math.round((part / whole) * 1000) / 10;
}

function CoreKpis({
    stats,
    extras,
    compareEnabled = false,
    compareStats,
}: {
    stats: JourneyStats;
    extras?: ReactNode;
    compareEnabled?: boolean;
    compareStats?: JourneyStats | null;
}) {
    const countMode = useJourneyCountMode();
    const isUsers = countMode === 'users';
    return (
        <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-3">
            <MetricCard
                label={isUsers ? 'Users' : 'Sessions'}
                value={isUsers ? stats.overview.unique_visitors : stats.overview.total_sessions}
                compareEnabled={compareEnabled}
                previous={prevNum(
                    compareEnabled,
                    compareStats,
                    (s) => (isUsers ? s.overview.unique_visitors : s.overview.total_sessions)
                )}
            />
            {isUsers ? (
                <MetricCard
                    label="Engaged users"
                    value={stats.overview.engaged_users || 0}
                    note={`${
                        stats.overview.unique_visitors
                            ? Math.round(((stats.overview.engaged_users || 0) / stats.overview.unique_visitors) * 1000) / 10
                            : 0
                    }%`}
                    compareEnabled={compareEnabled}
                    previous={prevNum(compareEnabled, compareStats, (s) => s.overview.engaged_users || 0)}
                />
            ) : (
                <>
                    <MetricCard
                        label="Active users"
                        value={stats.overview.unique_visitors}
                        compareEnabled={compareEnabled}
                        previous={prevNum(compareEnabled, compareStats, (s) => s.overview.unique_visitors)}
                    />
                    <MetricCard
                        label="Engaged sessions"
                        value={stats.overview.engaged_sessions || 0}
                        note={`${stats.overview.engagement_rate_percent || 0}%`}
                        compareEnabled={compareEnabled}
                        previous={prevNum(compareEnabled, compareStats, (s) => s.overview.engaged_sessions || 0)}
                    />
                </>
            )}
            <MetricCard
                label="Avg time"
                value={formatDurationMin(stats.overview.avg_duration_min)}
                compareEnabled={compareEnabled}
                compareCurrent={stats.overview.avg_duration_min}
                previous={prevNum(compareEnabled, compareStats, (s) => s.overview.avg_duration_min)}
            />
            {extras}
        </div>
    );
}

function landingPagesToAcquisitionRows(rows: PathMetricRow[] = []): AcquisitionTableRowInput[] {
    return rows.map((row) => {
        const sessions = Number(row.sessions ?? row.count ?? 0);
        const purchase = Number(row.purchase_sessions ?? 0);
        const active = Number(row.active_users ?? 0);
        const engaged = Number(row.engaged_sessions ?? 0);
        const avgMin = Number(row.avg_duration_min ?? 0);
        const totalDurationMs =
            Number(row.total_duration_ms ?? 0) ||
            (avgMin > 0 && sessions > 0 ? Math.round(avgMin * sessions * 60000) : 0);
        return {
            id: row.path,
            channel_group: row.path,
            utm_source: '',
            utm_medium: '',
            utm_campaign: '',
            sessions,
            event_count: Number(row.event_count ?? 0),
            engaged_sessions: engaged,
            checkout_sessions: Number(row.checkout_sessions ?? 0),
            purchase_sessions: purchase,
            purchase_rate_percent: sessions ? Math.round((purchase / sessions) * 1000) / 10 : 0,
            avg_duration_min: avgMin,
            active_users: active,
            users: active,
            checkout_users: Number(row.checkout_users ?? 0),
            purchase_users: Number(row.purchase_users ?? 0),
            purchase_orders: Number(row.purchase_orders ?? 0),
            engaged_users: Number(row.engaged_users ?? 0),
            engaged_sessions_per_active_user: active ? Math.round((engaged / active) * 100) / 100 : 0,
            total_duration_ms: totalDurationMs,
        };
    });
}

function PathMetricsTable({
    rows,
    totalSessions,
    emptyText,
    pathTitle,
    showPageViews = false,
    showSessionDetails = false,
}: {
    rows: PathMetricRow[];
    totalSessions: number;
    emptyText: string;
    pathTitle: string;
    showPageViews?: boolean;
    showSessionDetails?: boolean;
}) {
    const detailColumns = showPageViews || showSessionDetails;
    return (
        <DataTable
            records={rows}
            idAccessor="path"
            columns={[
                { accessor: 'path', title: pathTitle },
                ...(showPageViews
                    ? [{ accessor: 'page_views', title: 'Page views', render: ({ page_views, count }: PathMetricRow) => (page_views ?? count ?? 0).toLocaleString('id-ID') }]
                    : []),
                {
                    accessor: 'sessions',
                    title: 'Sessions',
                    render: ({ sessions, count }: PathMetricRow) => (sessions ?? count ?? 0).toLocaleString('id-ID'),
                },
                {
                    accessor: 'active_users',
                    title: 'Active users',
                    render: ({ active_users }: PathMetricRow) => (active_users || 0).toLocaleString('id-ID'),
                },
                ...(detailColumns
                    ? [
                        {
                            accessor: 'event_count',
                            title: 'Event count',
                            render: ({ event_count }: PathMetricRow) => (event_count || 0).toLocaleString('id-ID'),
                        },
                        {
                            accessor: 'engaged_sessions',
                            title: 'Engaged',
                            render: ({ engaged_sessions }: PathMetricRow) => (engaged_sessions || 0).toLocaleString('id-ID'),
                        },
                        {
                            accessor: 'avg_duration_min',
                            title: 'Avg time',
                            render: ({ avg_duration_min }: PathMetricRow) => formatDurationMin(avg_duration_min || 0),
                        },
                    ]
                    : []),
                {
                    accessor: 'share',
                    title: 'Share',
                    render: ({ sessions, count }: PathMetricRow) =>
                        `${pctShare(sessions ?? count ?? 0, totalSessions)}%`,
                },
            ]}
            minHeight={140}
            noRecordsText={emptyText}
        />
    );
}

interface JourneyWidgetBodyProps {
    id: JourneyWidgetId;
    statsData: JourneyStats;
    acquisitionFilters?: AcquisitionActiveFilters;
    onAcquisitionRowClick?: (payload: AcquisitionRowClickPayload) => void;
    onAcquisitionFiltersChange?: (filters: AcquisitionActiveFilters) => void;
    onClearAcquisitionFilters?: () => void;
    onNavigateSection?: (section: 'acquisition' | 'sessions' | 'realtime') => void;
    isRefreshing?: boolean;
    isLoading?: boolean;
    compareEnabled?: boolean;
    compareStatsData?: JourneyStats | null;
    dateRange?: DateRange;
    compareRange?: DateRange | null;
    itemAttributionFilters?: ItemAttributionFilters;
    onItemAttributionFiltersChange?: (filters: ItemAttributionFilters) => void;
}

const JourneyWidgetBody = ({
    id,
    statsData,
    acquisitionFilters,
    onAcquisitionRowClick,
    onAcquisitionFiltersChange,
    onClearAcquisitionFilters,
    onNavigateSection,
    isRefreshing,
    isLoading = false,
    compareEnabled = false,
    compareStatsData = null,
    dateRange,
    compareRange = null,
    itemAttributionFilters,
    onItemAttributionFiltersChange,
}: JourneyWidgetBodyProps) => {
    const isDark = useSelector(
        (state: IRootState) => state.themeConfig.theme === 'dark' || state.themeConfig.isDarkMode
    );
    const countMode = useJourneyCountMode();
    const funnel = funnelView(statsData, countMode);
    const funnelChartSteps = [
        { key: 'sessions', label: funnel.startLabel, count: funnel.start },
        { key: 'product', label: 'View product', count: funnel.product },
        { key: 'cart', label: 'Add to cart', count: funnel.cart },
        { key: 'checkout', label: 'Begin checkout', count: funnel.checkout },
        { key: 'purchase', label: 'Purchase', count: funnel.purchase },
    ];

    const funnelRows = [
        { step: funnel.startLabel, count: funnel.start, rate: 100 },
        { step: 'View product', count: funnel.product, rate: funnel.product_rate_percent },
        { step: 'Add to cart', count: funnel.cart, rate: funnel.cart_rate_percent },
        { step: 'Begin checkout', count: funnel.checkout, rate: funnel.checkout_rate_percent },
        { step: 'Purchase', count: funnel.purchase, rate: funnel.purchase_rate_percent },
    ];

    const topViews = (statsData.commerce?.top_products || []).slice(0, 8);
    const topAtc = (statsData.commerce?.top_add_to_cart || []).slice(0, 8);
    const topQueries = (statsData.search?.top_queries || []).slice(0, 8);
    const deadClickQueries = (statsData.search?.top_queries || [])
        .filter((row) => Number(row.impressions) > 0 && Number(row.clicks) === 0)
        .sort((a, b) => Number(b.impressions) - Number(a.impressions))
        .slice(0, 8);

    switch (id) {
        case 'overview':
            return (
                <JourneyOverviewSnapshot
                    statsData={statsData}
                    onNavigate={onNavigateSection}
                    compareEnabled={compareEnabled}
                    compareStatsData={compareStatsData}
                />
            );

        case 'top_pages': {
            const landingRows = mapAcquisitionRowsForMode(
                landingPagesToAcquisitionRows(statsData.top_pages || []),
                countMode
            );
            const compareLandingRows = mapAcquisitionRowsForMode(
                landingPagesToAcquisitionRows(compareStatsData?.top_pages || []),
                countMode
            );

            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label="Unique landings"
                                    value={(statsData.top_pages || []).length}
                                    note="top 50 entry pages"
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => (s.top_pages || []).length)}
                                />
                            </>
                        }
                    />
                    <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
                        <div className="xl:col-span-2">
                            <AcquisitionTable
                                variant="landing"
                                compact
                                rows={landingRows}
                                compareEnabled={compareEnabled}
                                compareRows={compareLandingRows}
                                isRefreshing={isRefreshing}
                                isLoading={isLoading}
                            />
                        </div>
                        <div className="xl:col-span-1">
                            <LandingPageDurationDonut
                                rows={landingRows}
                                isRefreshing={isRefreshing || isLoading}
                            />
                        </div>
                    </div>
                </div>
            );
        }

        case 'funnel':
            return (
                <div className="space-y-4">
                    <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
                        <MetricCard
                            label={countMode === 'users' ? 'Users' : 'Sessions'}
                            value={countMode === 'users' ? statsData.overview.unique_visitors : statsData.overview.total_sessions}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                countMode === 'users' ? s.overview.unique_visitors : s.overview.total_sessions
                            )}
                        />
                        {countMode === 'users' ? (
                            <MetricCard
                                label="Engaged users"
                                value={statsData.overview.engaged_users || 0}
                                compareEnabled={compareEnabled}
                                previous={prevNum(compareEnabled, compareStatsData, (s) => s.overview.engaged_users || 0)}
                            />
                        ) : (
                            <MetricCard
                                label="Active users"
                                value={statsData.overview.unique_visitors}
                                compareEnabled={compareEnabled}
                                previous={prevNum(compareEnabled, compareStatsData, (s) => s.overview.unique_visitors)}
                            />
                        )}
                        <MetricCard
                            label="Product view rate"
                            value={funnel.product_rate_percent}
                            suffix="%"
                            note={`${funnel.product} dari ${funnel.start} ${funnel.unitNote}`}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => funnelView(s, countMode).product_rate_percent)}
                        />
                        <MetricCard
                            label="Add to cart rate"
                            value={funnel.cart_rate_percent}
                            suffix="%"
                            note={`${funnel.cart} dari ${funnel.product} product view`}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => funnelView(s, countMode).cart_rate_percent)}
                        />
                        <MetricCard
                            label="Checkout rate"
                            value={funnel.checkout_rate_percent}
                            suffix="%"
                            note={`${funnel.checkout} dari ${funnel.cart} add to cart`}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => funnelView(s, countMode).checkout_rate_percent)}
                        />
                        <MetricCard
                            label="Purchase rate"
                            value={funnel.purchase_rate_percent}
                            suffix="%"
                            note={funnel.purchaseNote}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => funnelView(s, countMode).purchase_rate_percent)}
                        />
                    </div>
                    <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
                        <div className="xl:col-span-2">
                            <JourneyFunnelChart steps={funnelChartSteps} />
                        </div>
                        <JourneyFunnelDonut
                            steps={funnelChartSteps}
                            sessionStart={funnel.start}
                        />
                    </div>
                    <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-3">
                        {funnelRows.map((row) => (
                            <div
                                key={row.step}
                                className="rounded border border-gray-100 shadow-md bg-white p-3 text-[#0e1726] dark:border-[#334155] dark:bg-[#0e1726] dark:text-white"
                            >
                                <p className="text-xs text-gray-500 mb-2 dark:text-slate-400">{row.step}</p>
                                <div className="flex items-center gap-4">
                                    <span className="text-3xl font-bold">{row.count}</span>
                                    <span className="text-sm font-semibold text-black dark:text-white">
                                        ({row.rate}%)
                                    </span>
                                </div>
                            </div>
                        ))}
                    </div>
                    {dateRange ? (
                        <PurchaseOrdersTable
                            dateRange={dateRange}
                            compareEnabled={compareEnabled}
                            compareRange={compareRange}
                            acquisitionFilters={acquisitionFilters}
                        />
                    ) : null}
                </div>
            );

        case 'auth':
            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label="Login success"
                                    value={statsData.auth?.login_success_rate_percent || 0}
                                    suffix="%"
                                    note={`${statsData.auth?.login_success || 0}/${statsData.auth?.login_start || 0}`}
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.auth?.login_success_rate_percent || 0)}
                                />
                                <MetricCard
                                    label="Signup success"
                                    value={statsData.auth?.signup_success_rate_percent || 0}
                                    suffix="%"
                                    note={`${statsData.auth?.signup_success || 0}/${statsData.auth?.signup_start || 0}`}
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.auth?.signup_success_rate_percent || 0)}
                                />
                            </>
                        }
                    />
                </div>
            );

        case 'exit_intent':
            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label="Modal shown"
                                    value={statsData.exit_intent?.modal_shown || 0}
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.exit_intent?.modal_shown || 0)}
                                />
                                <MetricCard
                                    label="Unlock rate"
                                    value={statsData.exit_intent?.unlock_rate_percent || 0}
                                    suffix="%"
                                    note={`${statsData.exit_intent?.unlock || 0} unlock`}
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.exit_intent?.unlock_rate_percent || 0)}
                                />
                            </>
                        }
                    />
                </div>
            );

        case 'commerce':
            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label={countMode === 'users' ? 'Product view users' : 'Product views'}
                                    value={
                                        countMode === 'users'
                                            ? statsData.commerce?.product_view_users || 0
                                            : statsData.commerce?.product_view_sessions || 0
                                    }
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                        countMode === 'users'
                                            ? s.commerce?.product_view_users || 0
                                            : s.commerce?.product_view_sessions || 0
                                    )}
                                />
                                <MetricCard
                                    label={countMode === 'users' ? 'Add to cart users' : 'Add to cart'}
                                    value={
                                        countMode === 'users'
                                            ? statsData.commerce?.add_to_cart_users || 0
                                            : statsData.commerce?.add_to_cart_sessions || 0
                                    }
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                        countMode === 'users'
                                            ? s.commerce?.add_to_cart_users || 0
                                            : s.commerce?.add_to_cart_sessions || 0
                                    )}
                                />
                            </>
                        }
                    />
                    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
                        <MetricCard
                            label={countMode === 'users' ? 'Product view users' : 'Product view sessions'}
                            value={
                                countMode === 'users'
                                    ? statsData.commerce?.product_view_users || 0
                                    : statsData.commerce?.product_view_sessions || 0
                            }
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                countMode === 'users'
                                    ? s.commerce?.product_view_users || 0
                                    : s.commerce?.product_view_sessions || 0
                            )}
                        />
                        <MetricCard
                            label={countMode === 'users' ? 'Add to cart users' : 'Add to cart sessions'}
                            value={
                                countMode === 'users'
                                    ? statsData.commerce?.add_to_cart_users || 0
                                    : statsData.commerce?.add_to_cart_sessions || 0
                            }
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                countMode === 'users'
                                    ? s.commerce?.add_to_cart_users || 0
                                    : s.commerce?.add_to_cart_sessions || 0
                            )}
                        />
                        <MetricCard
                            label={countMode === 'users' ? 'Purchase users' : 'Purchase sessions'}
                            value={
                                countMode === 'users'
                                    ? statsData.commerce?.purchase_users || 0
                                    : statsData.commerce?.purchase_sessions || 0
                            }
                            note={`${
                                countMode === 'users'
                                    ? statsData.commerce?.purchase_per_checkout_users_percent || 0
                                    : statsData.commerce?.purchase_per_checkout_percent || 0
                            }% dari checkout`}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) =>
                                countMode === 'users'
                                    ? s.commerce?.purchase_users || 0
                                    : s.commerce?.purchase_sessions || 0
                            )}
                        />
                        <MetricCard
                            label="Voucher success"
                            value={statsData.commerce?.voucher?.success_rate_percent || 0}
                            suffix="%"
                            note={`${statsData.commerce?.voucher?.apply_success || 0}/${statsData.commerce?.voucher?.apply_total || 0}`}
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => s.commerce?.voucher?.success_rate_percent || 0)}
                        />
                    </div>
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                        <DataTable
                            records={topViews}
                            idAccessor="product_id"
                            columns={[
                                {
                                    accessor: 'product_slug',
                                    title: 'Top product views',
                                    render: ({ product_title, product_slug, product_id }) =>
                                        product_title || product_slug || product_id || '—',
                                },
                                { accessor: 'views', title: 'Views' },
                                { accessor: 'add_to_cart', title: 'ATC' },
                            ]}
                            noRecordsText="Belum ada product_view"
                            minHeight={120}
                        />
                        <DataTable
                            records={topAtc}
                            idAccessor="product_id"
                            columns={[
                                {
                                    accessor: 'product_slug',
                                    title: 'Top add to cart',
                                    render: ({ product_title, product_slug, product_id }) =>
                                        product_title || product_slug || product_id || '—',
                                },
                                { accessor: 'add_to_cart', title: 'ATC' },
                                { accessor: 'views', title: 'Views' },
                            ]}
                            noRecordsText="Belum ada add_to_cart"
                            minHeight={120}
                        />
                    </div>
                </div>
            );

        case 'acquisition': {
            const acq = statsData.acquisition;
            const trend = countMode === 'users' ? acq?.trend_users || acq?.trend : acq?.trend;
            const categories = trend?.days || [];
            const prevTrend =
                compareEnabled
                    ? countMode === 'users'
                        ? compareStatsData?.acquisition?.trend_users || compareStatsData?.acquisition?.trend
                        : compareStatsData?.acquisition?.trend
                    : null;
            const prevTotalByIndex =
                prevTrend?.days?.map((_, idx) =>
                    (prevTrend.series || []).reduce((sum, s) => sum + Number(s.data?.[idx] || 0), 0)
                ) || [];
            const chartSeries = [
                ...(trend?.series?.map((s) => ({
                    name: s.name,
                    type: 'area' as const,
                    data: s.data || [],
                })) || []),
                ...(compareEnabled && prevTotalByIndex.length
                    ? [
                        {
                            name: 'Compare period',
                            type: 'line' as const,
                            data: categories.map((_, idx) => prevTotalByIndex[idx] || 0),
                        },
                    ]
                    : []),
            ];
            const seriesCount = chartSeries.length;
            const options: ApexOptions = {
                chart: {
                    type: 'area',
                    fontFamily: 'Nunito, sans-serif',
                    ...journeyChartInteract,
                },
                dataLabels: { enabled: false },
                stroke: {
                    curve: 'smooth',
                    width: 2,
                    dashArray: compareEnabled ? [...Array(Math.max(seriesCount - 1, 0)).fill(0), 6] : 0,
                },
                xaxis: {
                    categories,
                    labels: { style: { fontSize: '11px' } },
                },
                yaxis: {
                    labels: { style: { fontSize: '11px' } },
                },
                grid: journeyChartGrid(isDark),
                tooltip: {
                    shared: true,
                    x: {
                        formatter: (val: number) => categories[val] ?? String(val),
                    },
                },
                legend: { show: true },
            };

            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <MetricCard
                                label="Purchase rate"
                                value={funnel.purchase_rate_percent}
                                suffix="%"
                                note={funnel.purchaseNote}
                                compareEnabled={compareEnabled}
                                previous={prevNum(compareEnabled, compareStatsData, (s) => funnelView(s, countMode).purchase_rate_percent)}
                            />
                        }
                    />
                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                        <div className="xl:col-span-2">
                            <ReactApexChart
                                options={options}
                                series={chartSeries}
                                type="area"
                                height={280}
                            />
                        </div>
                        <div className="xl:col-span-1">
                            <AcquisitionSunburstChart
                                rows={mapAcquisitionRowsForMode(acq?.table_rows || [], countMode)}
                                activeFilters={acquisitionFilters}
                                onSliceClick={onAcquisitionRowClick}
                                isRefreshing={isRefreshing}
                            />
                        </div>
                    </div>

                    <div>
                        <AcquisitionTable
                            rows={mapAcquisitionRowsForMode(acq?.table_rows || [], countMode)}
                            rowsByDimension={
                                acq?.table_rows_by_dimension
                                    ? {
                                          channel_group: mapAcquisitionRowsForMode(
                                              acq.table_rows_by_dimension.channel_group || [],
                                              countMode
                                          ),
                                          utm_source: mapAcquisitionRowsForMode(
                                              acq.table_rows_by_dimension.utm_source || [],
                                              countMode
                                          ),
                                          utm_medium: mapAcquisitionRowsForMode(
                                              acq.table_rows_by_dimension.utm_medium || [],
                                              countMode
                                          ),
                                          utm_campaign: mapAcquisitionRowsForMode(
                                              acq.table_rows_by_dimension.utm_campaign || [],
                                              countMode
                                          ),
                                          source_medium: mapAcquisitionRowsForMode(
                                              acq.table_rows_by_dimension.source_medium || [],
                                              countMode
                                          ),
                                      }
                                    : undefined
                            }
                            availableEventTypes={acq?.available_event_types}
                            activeFilters={acquisitionFilters}
                            onRowClick={onAcquisitionRowClick}
                            onFiltersChange={onAcquisitionFiltersChange}
                            onClearFilters={onClearAcquisitionFilters}
                            isRefreshing={isRefreshing}
                            compareEnabled={compareEnabled}
                            compareRows={mapAcquisitionRowsForMode(compareStatsData?.acquisition?.table_rows || [], countMode)}
                            compareRowsByDimension={compareStatsData?.acquisition?.table_rows_by_dimension}
                        />
                    </div>
                </div>
            );
        }

        case 'wedding':
            return (
                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <MetricCard
                        label={countMode === 'users' ? 'Preview users' : 'Preview opens'}
                        value={
                            countMode === 'users'
                                ? statsData.wedding?.preview_open_users || 0
                                : statsData.wedding?.preview_opens || 0
                        }
                        compareEnabled={compareEnabled}
                        previous={prevNum(compareEnabled, compareStatsData, (s) =>
                            countMode === 'users'
                                ? s.wedding?.preview_open_users || 0
                                : s.wedding?.preview_opens || 0
                        )}
                    />
                    <MetricCard
                        label="→ Checkout"
                        value={
                            countMode === 'users'
                                ? statsData.wedding?.preview_to_checkout_users || 0
                                : statsData.wedding?.preview_to_checkout || 0
                        }
                        note={`${
                            countMode === 'users'
                                ? statsData.wedding?.checkout_rate_users_percent || 0
                                : statsData.wedding?.checkout_rate_percent || 0
                        }%`}
                        compareEnabled={compareEnabled}
                        previous={prevNum(compareEnabled, compareStatsData, (s) =>
                            countMode === 'users'
                                ? s.wedding?.preview_to_checkout_users || 0
                                : s.wedding?.preview_to_checkout || 0
                        )}
                    />
                    <MetricCard
                        label="→ Purchase"
                        value={
                            countMode === 'users'
                                ? statsData.wedding?.preview_to_purchase_users || 0
                                : statsData.wedding?.preview_to_purchase || 0
                        }
                        note={`${
                            countMode === 'users'
                                ? statsData.wedding?.purchase_rate_users_percent || 0
                                : statsData.wedding?.purchase_rate_percent || 0
                        }%`}
                        compareEnabled={compareEnabled}
                        previous={prevNum(compareEnabled, compareStatsData, (s) =>
                            countMode === 'users'
                                ? s.wedding?.preview_to_purchase_users || 0
                                : s.wedding?.preview_to_purchase || 0
                        )}
                    />
                </div>
            );

        case 'search':
            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label="Sessions with search"
                                    value={statsData.search?.sessions_with_search || 0}
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.search?.sessions_with_search || 0)}
                                />
                                <MetricCard
                                    label="Search → product"
                                    value={statsData.search?.search_to_product_rate_percent || 0}
                                    suffix="%"
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => s.search?.search_to_product_rate_percent || 0)}
                                />
                            </>
                        }
                    />
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                        <DataTable
                            records={topQueries}
                            idAccessor="query"
                            columns={[
                                { accessor: 'query', title: 'Top queries' },
                                {
                                    accessor: 'clicks',
                                    title: 'Clicks',
                                    render: (row: { clicks?: number; impressions?: number; ctr_percent?: number }) =>
                                        Number(row.clicks || 0).toLocaleString('id-ID'),
                                },
                                {
                                    accessor: 'impressions',
                                    title: 'Impressions',
                                    render: (row: { clicks?: number; impressions?: number; ctr_percent?: number }) =>
                                        Number(row.impressions || 0).toLocaleString('id-ID'),
                                },
                                {
                                    accessor: 'ctr_percent',
                                    title: 'CTR',
                                    render: (row: { clicks?: number; impressions?: number; ctr_percent?: number }) =>
                                        `${Number(row.ctr_percent || 0).toLocaleString('id-ID')}%`,
                                },
                            ]}
                            noRecordsText="Belum ada search"
                            minHeight={120}
                        />
                        <DataTable
                            records={deadClickQueries}
                            idAccessor="query"
                            columns={[
                                { accessor: 'query', title: 'Dead click queries' },
                                {
                                    accessor: 'impressions',
                                    title: 'Dead click',
                                    render: (row: { impressions?: number; ctr_percent?: number }) =>
                                        Number(row.impressions || 0).toLocaleString('id-ID'),
                                },
                                {
                                    accessor: 'ctr_percent',
                                    title: 'CTR',
                                    render: (row: { impressions?: number; ctr_percent?: number }) =>
                                        `${Number(row.ctr_percent || 0).toLocaleString('id-ID')}%`,
                                },
                            ]}
                            noRecordsText="Tidak ada dead click"
                            minHeight={120}
                        />
                    </div>
                </div>
            );

        case 'entry_exit':
            return (
                <div className="space-y-4">
                    <CoreKpis
                        stats={statsData}
                        compareEnabled={compareEnabled}
                        compareStats={compareStatsData}
                        extras={
                            <>
                                <MetricCard
                                    label="Entry paths"
                                    value={(statsData.top_entry_pages || []).length}
                                    note="top 15"
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => (s.top_entry_pages || []).length)}
                                />
                                <MetricCard
                                    label="Exit paths"
                                    value={(statsData.top_exit_pages || []).length}
                                    note="top 15"
                                    compareEnabled={compareEnabled}
                                    previous={prevNum(compareEnabled, compareStatsData, (s) => (s.top_exit_pages || []).length)}
                                />
                            </>
                        }
                    />
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
                        <PathMetricsTable
                            rows={statsData.top_entry_pages || []}
                            totalSessions={statsData.overview.total_sessions}
                            emptyText="No data"
                            pathTitle="Top entry"
                        />
                        <PathMetricsTable
                            rows={statsData.top_exit_pages || []}
                            totalSessions={statsData.overview.total_sessions}
                            emptyText="No data"
                            pathTitle="Top exit"
                        />
                    </div>
                </div>
            );

        case 'link_clicks': {
            type LinkClickChannelRow = { channel: string; count: number; share: number };
            const linkClicks = statsData.link_clicks;
            const total = linkClicks?.total || 0;
            const channelRows: LinkClickChannelRow[] = (linkClicks?.by_channel || []).map((row) => ({
                channel: CHANNEL_LABELS[row.channel] || row.channel,
                count: row.count,
                share: total ? Math.round((row.count / total) * 1000) / 10 : 0,
            }));
            const days = linkClicks?.daily?.days || [];
            const chartSeries =
                linkClicks?.daily?.series?.map((s) => ({
                    name: CHANNEL_LABELS[s.name] || s.name,
                    data: s.data || [],
                })) || [];
            const chartOptions: ApexOptions = {
                chart: {
                    type: 'area',
                    fontFamily: 'Nunito, sans-serif',
                    ...journeyChartInteract,
                },
                dataLabels: { enabled: false },
                stroke: { curve: 'smooth', width: 2 },
                xaxis: {
                    categories: days,
                    labels: { style: { fontSize: '11px' } },
                },
                yaxis: {
                    labels: { style: { fontSize: '11px' } },
                },
                grid: journeyChartGrid(isDark),
                legend: { show: true },
            };

            return (
                <div className="space-y-4">
                    <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                        <MetricCard label="Total klik" value={total} note="/links + floating WA" compareEnabled={compareEnabled} previous={prevNum(compareEnabled, compareStatsData, (s) => s.link_clicks?.total || 0)} />
                        <MetricCard
                            label="Active channels"
                            value={channelRows.length}
                            note="in the date range"
                            compareEnabled={compareEnabled}
                            previous={prevNum(compareEnabled, compareStatsData, (s) => (s.link_clicks?.by_channel || []).length)}
                        />
                    </div>
                    {chartSeries.length ? (
                        <ReactApexChart options={chartOptions} series={chartSeries} type="area" height={280} />
                    ) : (
                        <p className="text-sm text-gray-400">Belum ada klik di rentang ini.</p>
                    )}
                    <DataTable
                        records={channelRows}
                        idAccessor="channel"
                        columns={[
                            { accessor: 'channel', title: 'Channel' },
                            {
                                accessor: 'count',
                                title: 'Clicks',
                                render: ({ count }: LinkClickChannelRow) => count.toLocaleString('id-ID'),
                            },
                            {
                                accessor: 'share',
                                title: 'Percentage',
                                render: ({ share }: LinkClickChannelRow) => `${share.toLocaleString('id-ID')}%`,
                            },
                        ]}
                        minHeight={140}
                        noRecordsText="Belum ada data klik marketplace"
                    />
                </div>
            );
        }

        case 'item_cart':
            return (
                <AddToCartItemReport
                    report={statsData.item_report}
                    dateRange={dateRange}
                    attributionFilters={itemAttributionFilters}
                    onAttributionFiltersChange={onItemAttributionFiltersChange}
                />
            );

        default:
            return null;
    }
};

export default JourneyWidgetBody;