import { useEffect, useMemo, useRef, useState } from 'react';
import { flexRender } from '@tanstack/react-table';
import type { ColumnVisibilityState, SortingState } from '@tanstack/table-core';
import {
    getCoreRowModel,
    getFilteredRowModel,
    getPaginationRowModel,
    getSortedRowModel,
    useLegacyTable,
    type LegacyColumnDef,
} from '@tanstack/react-table/legacy';

import styles from './acquisition-table.module.css';
import { calcDelta, formatComparePrevious } from '@/lib/abandoned-cart-stats-compare';
import { useJourneyCountMode } from './JourneyCountModeContext';


export interface AcquisitionTableRow {
    id: string;
    channel_group: string;
    utm_source: string;
    utm_medium: string;
    utm_campaign: string;
    sessions: number;
    event_count: number;
    event_counts_by_type?: Record<string, number>;
    engaged_sessions: number;
    checkout_sessions: number;
    purchase_sessions: number;
    purchase_rate_percent: number;
    avg_duration_min: number;
    engaged_sessions_per_active_user: number;
    active_users: number;
    total_duration_ms: number;
    event_count_filtered?: number;
}

export type AcquisitionTableRowInput = {
    id: string;
    channel_group: string;
    utm_source: string;
    utm_medium: string;
    utm_campaign: string;
    sessions: number;
    event_count?: number;
    event_counts_by_type?: Record<string, number>;
    engaged_sessions: number;
    checkout_sessions: number;
    purchase_sessions: number;
    purchase_rate_percent: number;
    avg_duration_min?: number;
    engaged_sessions_per_active_user?: number;
    active_users?: number;
    total_duration_ms?: number;
    users?: number;
    checkout_users?: number;
    purchase_users?: number;
    purchase_orders?: number;
    engaged_users?: number;
    purchase_rate_users_percent?: number;
};

export function normalizeAcquisitionTableRow(row: AcquisitionTableRowInput): AcquisitionTableRow {
    return {
        ...row,
        event_count: row.event_count ?? 0,
        event_counts_by_type: row.event_counts_by_type ?? {},
        avg_duration_min: row.avg_duration_min ?? 0,
        engaged_sessions_per_active_user: row.engaged_sessions_per_active_user ?? 0,
        active_users: row.active_users ?? 0,
        total_duration_ms: row.total_duration_ms ?? 0,
    };
}

export function normalizeAcquisitionTableRows(rows: AcquisitionTableRowInput[] = []): AcquisitionTableRow[] {
    return rows.map(normalizeAcquisitionTableRow);
}

export type AcquisitionTableRowsByDimension = Partial<
    Record<PrimaryDimension, AcquisitionTableRowInput[]>
>;

export type PrimaryDimension =
    | 'channel_group'
    | 'utm_source'
    | 'utm_medium'
    | 'utm_campaign'
    | 'source_medium';

const PRIMARY_DIMENSIONS: { id: PrimaryDimension; label: string }[] = [
    { id: 'channel_group', label: 'Default channel group' },
    { id: 'utm_source', label: 'Source' },
    { id: 'utm_medium', label: 'Medium' },
    { id: 'utm_campaign', label: 'Campaign' },
    { id: 'source_medium', label: 'Source / medium' },
];

const METRIC_COLUMNS = [
    { id: 'sessions', label: 'Sessions' },
    { id: 'event_count', label: 'Event count' },
    { id: 'avg_duration_min', label: 'Average time' },
    { id: 'engaged_sessions', label: 'Engaged sessions' },
    { id: 'engaged_sessions_per_active_user', label: 'Engaged sessions per active user' },
    { id: 'checkout_sessions', label: 'Checkouts' },
    { id: 'purchase_sessions', label: 'Purchase' },
    { id: 'purchase_rate_percent', label: 'Purchase rate' },
] as const;

export type AcquisitionEventTypeOption = {
    type: string;
    count: number;
};

const STORAGE_KEY = 'journey-acq-table-state-v3';
const LANDING_STORAGE_KEY = 'journey-landing-table-state-v2';

const LANDING_DEFAULT_VISIBILITY: ColumnVisibilityState = {
    event_count: false,
    avg_duration_min: true,
    engaged_sessions: false,
    engaged_sessions_per_active_user: false,
    checkout_sessions: false,
    purchase_sessions: false,
    purchase_rate_percent: false,
};

type PersistedTableState = {
    columnVisibility?: ColumnVisibilityState;
    sorting?: SortingState;
    primaryDimension?: PrimaryDimension;
    pageSize?: number;
    eventCountType?: string;
};

const DEFAULT_VISIBILITY: ColumnVisibilityState = {
    event_count: true,
    avg_duration_min: true,
    engaged_sessions: true,
    engaged_sessions_per_active_user: true,
    checkout_sessions: true,
    purchase_sessions: true,
    purchase_rate_percent: true,
};

const DEFAULT_SORTING: SortingState = [{ id: 'sessions', desc: true }];
const NOT_SET = '(not set)';

export type AcquisitionActiveFilters = {
    channel_group: string;
    utm_source: string;
    utm_medium: string;
    utm_campaign: string;
};

export const UTM_SEARCH_MIN_LENGTH = 1;

export function matchesUtmSearch(value: string, query: string) {
    const q = String(query || '').trim().toLowerCase();
    if (!q) return true;
    const hay = String(value || '').trim().toLowerCase();
    return hay.startsWith(q);
}

export type AcquisitionRowClickPayload = {
    row: AcquisitionTableRow;
    primaryDimension: PrimaryDimension;
    filters: AcquisitionActiveFilters;
};

function cleanUtmValue(value: string) {
    const v = String(value || '').trim();
    return v && v !== NOT_SET ? v : '';
}

export function buildAcquisitionFiltersFromRow(
    row: AcquisitionTableRow,
    primary: PrimaryDimension
): AcquisitionActiveFilters {
    switch (primary) {
        case 'channel_group':
            return {
                channel_group: row.channel_group || 'Unassigned',
                utm_source: '',
                utm_medium: '',
                utm_campaign: '',
            };
        case 'utm_source':
            return {
                channel_group: '',
                utm_source: cleanUtmValue(row.utm_source),
                utm_medium: '',
                utm_campaign: '',
            };
        case 'utm_medium':
            return {
                channel_group: '',
                utm_source: '',
                utm_medium: cleanUtmValue(row.utm_medium),
                utm_campaign: '',
            };
        case 'utm_campaign':
            return {
                channel_group: '',
                utm_source: '',
                utm_medium: '',
                utm_campaign: cleanUtmValue(row.utm_campaign),
            };
        case 'source_medium':
            return {
                channel_group: '',
                utm_source: cleanUtmValue(row.utm_source),
                utm_medium: cleanUtmValue(row.utm_medium),
                utm_campaign: '',
            };
        default:
            return { channel_group: '', utm_source: '', utm_medium: '', utm_campaign: '' };
    }
}

export function isSameAcquisitionFilters(
    a: AcquisitionActiveFilters,
    b: AcquisitionActiveFilters
) {
    return (
        a.channel_group === b.channel_group &&
        a.utm_source === b.utm_source &&
        a.utm_medium === b.utm_medium &&
        a.utm_campaign === b.utm_campaign
    );
}

export function rowMatchesActiveFilters(
    row: AcquisitionTableRow,
    primary: PrimaryDimension,
    active: AcquisitionActiveFilters
) {
    const rowFilters = buildAcquisitionFiltersFromRow(row, primary);
    return isSameAcquisitionFilters(rowFilters, active);
}

type MetricCompareOptions = {
    compareEnabled?: boolean;
    previous?: number | null;
    formatPrevious?: (n: number) => string;
};

function CompareHint({
    current,
    previous,
    enabled,
    formatPrevious,
}: {
    current: number;
    previous?: number | null;
    enabled?: boolean;
    formatPrevious?: (n: number) => string;
}) {
    if (!enabled || previous == null) return null;
    const delta = calcDelta(current, previous);
    const color =
        delta.direction === 'up' ? styles.compareUp : delta.direction === 'down' ? styles.compareDown : styles.compareFlat;
    const prevLabel = formatPrevious ? formatPrevious(previous) : formatComparePrevious(previous);
    return (
        <span className={`${styles.compareHint} ${color}`}>
            vs {prevLabel} · ({delta.label})
        </span>
    );
}

function compareHintFromOptions(current: number, options?: MetricCompareOptions) {
    return (
        <CompareHint
            current={current}
            previous={options?.previous}
            enabled={options?.compareEnabled}
            formatPrevious={options?.formatPrevious}
        />
    );
}

function shareOfTotal(value: number, total: number) {
    if (!total || value <= 0) return 0;
    return Math.round((value / total) * 1000) / 10;
}

function renderCountMetric(
    value: number,
    total: number,
    options?: { isTotal?: boolean; barWidth?: number } & MetricCompareOptions
) {
    const hint = compareHintFromOptions(value, options);
    if (options?.isTotal) {
        return (
            <div className={styles.metricCell}>
                <span className={styles.metricValue}>{value.toLocaleString('id-ID')}</span>
                <span className={styles.metricPct}>100%</span>
                {hint}
            </div>
        );
    }

    const share = shareOfTotal(value, total);

    if (options?.barWidth !== undefined) {
        return (
            <div className={styles.metricCellWithBar}>
                <div className={styles.barCell}>
                    <div className={styles.barTrack}>
                        <div className={styles.barFill} style={{ width: `${options.barWidth}%` }} />
                    </div>
                    <span className={styles.barValue}>{value.toLocaleString('id-ID')}</span>
                    <span className={styles.metricPct}>({share}%)</span>
                </div>
                {hint}
            </div>
        );
    }

    return (
        <div className={styles.metricCell}>
            <span className={styles.metricValue}>{value.toLocaleString('id-ID')}</span>
            <span className={styles.metricPct}>{share}%</span>
            {hint}
        </div>
    );
}

function renderRateMetric(
    value: number,
    options?: { isTotal?: boolean; shareOfOrders?: number } & MetricCompareOptions
) {
    const hint = compareHintFromOptions(value, {
        ...options,
        formatPrevious: options?.formatPrevious ?? ((n) => formatComparePrevious(n, '%')),
    });
    if (options?.isTotal) {
        return (
            <div className={styles.metricCell}>
                <span className={styles.metricValue}>{value}%</span>
                {hint}
            </div>
        );
    }

    return (
        <div className={styles.metricCell}>
            <span className={styles.metricValue}>{value}%</span>
            {typeof options?.shareOfOrders === 'number' ? (
                <span className={styles.metricPct}>{options.shareOfOrders}% orders</span>
            ) : null}
            {hint}
        </div>
    );
}

export function formatDurationMin(min: number) {
    if (!min || min <= 0) return '0s';
    if (min < 1) return `${Math.round(min * 60)}s`;
    if (min >= 60) {
        const hours = Math.floor(min / 60);
        const minutes = Math.round(min % 60);
        return minutes > 0 ? `${hours}j ${minutes}m` : `${hours}j`;
    }
    const wholeMin = Math.floor(min);
    const seconds = Math.round((min - wholeMin) * 60);
    return seconds > 0 ? `${wholeMin}m ${seconds}s` : `${wholeMin}m`;
}

function renderDurationMetric(
    value: number,
    totalAvgMin: number,
    options?: { isTotal?: boolean; barWidth?: number } & MetricCompareOptions
) {
    const label = formatDurationMin(value);
    const hint = compareHintFromOptions(value, {
        ...options,
        formatPrevious: options?.formatPrevious ?? formatDurationMin,
    });

    const bar =
        options?.barWidth !== undefined ? (
            <div className={styles.barCell}>
                <div className={styles.barTrack}>
                    <div className={styles.barFill} style={{ width: `${options.barWidth}%` }} />
                </div>
            </div>
        ) : null;

    if (options?.isTotal) {
        return (
            <div className={styles.metricCell}>
                {bar}
                <span className={styles.metricValue}>{label}</span>
                {hint}
            </div>
        );
    }

    const share =
        totalAvgMin > 0 ? Math.round((value / totalAvgMin) * 1000) / 10 : 0;

    return (
        <div className={`${styles.metricCell} ${bar ? styles.metricCellWithBar : ''}`}>
            {bar}
            <span className={styles.metricValue}>{label}</span>
            {share > 0 && share !== 100 ? (
                <span className={styles.metricPct}>{share}% vs avg</span>
            ) : null}
            {hint}
        </div>
    );
}

function renderRatioMetric(
    value: number,
    totalAvg: number,
    options?: { isTotal?: boolean; suffix?: string } & MetricCompareOptions
) {
    const formatted = value.toLocaleString('id-ID', {
        minimumFractionDigits: value % 1 === 0 ? 0 : 2,
        maximumFractionDigits: 2,
    });
    const hint = compareHintFromOptions(value, options);

    if (options?.isTotal) {
        return (
            <div className={styles.metricCell}>
                <span className={styles.metricValue}>{formatted}</span>
                {hint}
            </div>
        );
    }

    const share = totalAvg > 0 ? Math.round((value / totalAvg) * 1000) / 10 : 0;

    return (
        <div className={styles.metricCell}>
            <span className={styles.metricValue}>{formatted}</span>
            {share > 0 && share !== 100 ? (
                <span className={styles.metricPct}>
                    {share}%{options?.suffix ? ` ${options.suffix}` : ''}
                </span>
            ) : null}
            {hint}
        </div>
    );
}

function loadPersistedState(storageKey = STORAGE_KEY): PersistedTableState {
    if (typeof window === 'undefined') return {};
    try {
        const raw = localStorage.getItem(storageKey);
        if (!raw) return {};
        return JSON.parse(raw) as PersistedTableState;
    } catch {
        return {};
    }
}

function savePersistedState(state: PersistedTableState, storageKey = STORAGE_KEY) {
    if (typeof window === 'undefined') return;
    try {
        localStorage.setItem(storageKey, JSON.stringify(state));
    } catch {
        /* ignore */
    }
}

function mergeEventCountsByType(
    a: Record<string, number> = {},
    b: Record<string, number> = {}
): Record<string, number> {
    const out = { ...a };
    Object.entries(b).forEach(([type, count]) => {
        out[type] = (out[type] || 0) + (Number(count) || 0);
    });
    return out;
}

function resolveEventCount(row: AcquisitionTableRow, eventType: string) {
    if (eventType === 'all') return row.event_count || 0;
    return Number(row.event_counts_by_type?.[eventType] || 0);
}

function formatEventTypeLabel(type: string) {
    return type.replace(/_/g, ' ');
}

function getMetricThClass(columnId: string) {
    if (columnId === 'sessions') return `${styles.thMetric} ${styles.thMetricBar}`;
    if (columnId === 'engaged_sessions_per_active_user' || columnId === 'avg_duration_min') {
        return `${styles.thMetric} ${styles.thMetricWide}`;
    }
    return styles.thMetric;
}

function getMetricTdClass(columnId: string) {
    if (columnId === 'sessions') return `${styles.tdMetric} ${styles.tdMetricBar}`;
    if (columnId === 'engaged_sessions_per_active_user' || columnId === 'avg_duration_min') {
        return `${styles.tdMetric} ${styles.tdMetricWide}`;
    }
    return styles.tdMetric;
}

interface EventCountHeaderProps {
    selected: string;
    options: AcquisitionEventTypeOption[];
    open: boolean;
    search: string;
    onOpenChange: (open: boolean) => void;
    onSearchChange: (value: string) => void;
    onSelect: (type: string) => void;
}

function EventCountHeader({
    selected,
    options,
    open,
    search,
    onOpenChange,
    onSearchChange,
    onSelect,
}: EventCountHeaderProps) {
    const rootRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (!open) return;
        const onDocClick = (event: MouseEvent) => {
            if (!rootRef.current?.contains(event.target as Node)) {
                onOpenChange(false);
            }
        };
        document.addEventListener('mousedown', onDocClick);
        return () => document.removeEventListener('mousedown', onDocClick);
    }, [open, onOpenChange]);

    const filteredOptions = useMemo(() => {
        const q = search.trim().toLowerCase();
        if (!q) return options;
        return options.filter((opt) => opt.type.toLowerCase().includes(q));
    }, [options, search]);

    const selectedLabel =
        selected === 'all' ? 'Event count' : formatEventTypeLabel(selected);

    return (
        <div
            ref={rootRef}
            className={styles.eventCountHeader}
            onClick={(e) => e.stopPropagation()}
        >
            <button
                type="button"
                className={styles.eventCountHeaderBtn}
                onClick={() => onOpenChange(!open)}
                aria-expanded={open}
            >
                <span>{selectedLabel}</span>
                <span className={styles.eventCountChevron}>▾</span>
            </button>
            {open ? (
                <div className={styles.eventCountMenu}>
                    <input
                        type="search"
                        className={styles.eventCountSearch}
                        placeholder="Search items"
                        value={search}
                        onChange={(e) => onSearchChange(e.target.value)}
                        onClick={(e) => e.stopPropagation()}
                    />
                    <button
                        type="button"
                        className={`${styles.eventCountOption} ${selected === 'all' ? styles.eventCountOptionActive : ''}`}
                        onClick={() => {
                            onSelect('all');
                            onOpenChange(false);
                            onSearchChange('');
                        }}
                    >
                        All events
                    </button>
                    {filteredOptions.map((opt) => (
                        <button
                            key={opt.type}
                            type="button"
                            className={`${styles.eventCountOption} ${selected === opt.type ? styles.eventCountOptionActive : ''}`}
                            onClick={() => {
                                onSelect(opt.type);
                                onOpenChange(false);
                                onSearchChange('');
                            }}
                        >
                            {formatEventTypeLabel(opt.type)}
                        </button>
                    ))}
                    {filteredOptions.length === 0 ? (
                        <div className={styles.eventCountEmpty}>Tidak ada event</div>
                    ) : null}
                </div>
            ) : null}
        </div>
    );
}

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

function dimensionLabel(row: AcquisitionTableRow, primary: PrimaryDimension): string {
    switch (primary) {
        case 'channel_group':
            return row.channel_group || 'Unassigned';
        case 'utm_source':
            return row.utm_source || NOT_SET;
        case 'utm_medium':
            return row.utm_medium || NOT_SET;
        case 'utm_campaign':
            return row.utm_campaign || NOT_SET;
        case 'source_medium':
            return `${row.utm_source || NOT_SET} / ${row.utm_medium || NOT_SET}`;
        default:
            return row.channel_group || 'Unassigned';
    }
}

function aggregateByPrimary(rows: AcquisitionTableRow[], primary: PrimaryDimension): AcquisitionTableRow[] {
    const map = new Map<string, AcquisitionTableRow>();

    rows.forEach((row) => {
        const label = dimensionLabel(row, primary);
        const key =
            primary === 'source_medium'
                ? `${row.utm_source}|${row.utm_medium}`
                : primary === 'channel_group'
                    ? row.channel_group || 'Unassigned'
                    : String(row[primary as keyof AcquisitionTableRow] || NOT_SET);

        const existing = map.get(key);
        if (!existing) {
            map.set(key, {
                id: key,
                channel_group: row.channel_group,
                utm_source: row.utm_source,
                utm_medium: row.utm_medium,
                utm_campaign: row.utm_campaign,
                sessions: row.sessions,
                event_count: row.event_count,
                event_counts_by_type: { ...(row.event_counts_by_type || {}) },
                engaged_sessions: row.engaged_sessions,
                checkout_sessions: row.checkout_sessions,
                purchase_sessions: row.purchase_sessions,
                purchase_rate_percent: row.purchase_rate_percent,
                total_duration_ms: row.total_duration_ms || 0,
                active_users: row.active_users || 0,
                avg_duration_min: row.avg_duration_min || 0,
                engaged_sessions_per_active_user: row.engaged_sessions_per_active_user || 0,
            });
            return;
        }

        existing.sessions += row.sessions;
        existing.event_count += row.event_count;
        existing.event_counts_by_type = mergeEventCountsByType(
            existing.event_counts_by_type,
            row.event_counts_by_type
        );
        existing.engaged_sessions += row.engaged_sessions;
        existing.checkout_sessions += row.checkout_sessions;
        existing.purchase_sessions += row.purchase_sessions;
        existing.total_duration_ms += row.total_duration_ms || 0;
        existing.active_users += row.active_users || 0;
        existing.purchase_rate_percent = pct(existing.purchase_sessions, existing.sessions);
        existing.avg_duration_min =
            existing.sessions > 0
                ? Math.round((existing.total_duration_ms / existing.sessions / 60000) * 10) / 10
                : 0;
        existing.engaged_sessions_per_active_user =
            existing.active_users > 0
                ? Math.round((existing.engaged_sessions / existing.active_users) * 100) / 100
                : 0;
    });

    return [...map.values()].sort((a, b) => b.sessions - a.sessions);
}

function computeTotals(rows: AcquisitionTableRow[]): AcquisitionTableRow {
    const totals = rows.reduce(
        (acc, row) => {
            acc.sessions += row.sessions;
            acc.event_count += row.event_count;
            acc.event_counts_by_type = mergeEventCountsByType(
                acc.event_counts_by_type,
                row.event_counts_by_type
            );
            acc.engaged_sessions += row.engaged_sessions;
            acc.checkout_sessions += row.checkout_sessions;
            acc.purchase_sessions += row.purchase_sessions;
            acc.total_duration_ms += row.total_duration_ms || 0;
            acc.active_users += row.active_users || 0;
            return acc;
        },
        {
            sessions: 0,
            event_count: 0,
            event_counts_by_type: {} as Record<string, number>,
            engaged_sessions: 0,
            checkout_sessions: 0,
            purchase_sessions: 0,
            total_duration_ms: 0,
            active_users: 0,
        }
    );

    const avg_duration_min =
        totals.sessions > 0
            ? Math.round((totals.total_duration_ms / totals.sessions / 60000) * 10) / 10
            : 0;
    const engaged_sessions_per_active_user =
        totals.active_users > 0
            ? Math.round((totals.engaged_sessions / totals.active_users) * 100) / 100
            : 0;

    return {
        id: '__total__',
        channel_group: 'Total',
        utm_source: '',
        utm_medium: '',
        utm_campaign: '',
        sessions: totals.sessions,
        event_count: totals.event_count,
        event_counts_by_type: totals.event_counts_by_type,
        engaged_sessions: totals.engaged_sessions,
        checkout_sessions: totals.checkout_sessions,
        purchase_sessions: totals.purchase_sessions,
        purchase_rate_percent: pct(totals.purchase_sessions, totals.sessions),
        avg_duration_min,
        engaged_sessions_per_active_user,
        active_users: totals.active_users,
        total_duration_ms: totals.total_duration_ms,
    };
}

interface AcquisitionTableProps {
    rows: AcquisitionTableRowInput[];
    rowsByDimension?: AcquisitionTableRowsByDimension;
    availableEventTypes?: AcquisitionEventTypeOption[];
    activeFilters?: AcquisitionActiveFilters;
    onRowClick?: (payload: AcquisitionRowClickPayload) => void;
    onFiltersChange?: (filters: AcquisitionActiveFilters) => void;
    onClearFilters?: () => void;
    isRefreshing?: boolean;
    isLoading?: boolean;
    compareEnabled?: boolean;
    compareRows?: AcquisitionTableRowInput[];
    compareRowsByDimension?: AcquisitionTableRowsByDimension;
    variant?: 'acquisition' | 'landing';
    compact?: boolean;
}

const AcquisitionTable = ({
    rows,
    rowsByDimension,
    availableEventTypes = [],
    activeFilters,
    onRowClick,
    onFiltersChange,
    onClearFilters,
    isRefreshing = false,
    isLoading = false,
    compareEnabled = false,
    compareRows = [],
    compareRowsByDimension,
    variant = 'acquisition',
    compact = false,
}: AcquisitionTableProps) => {
    const countMode = useJourneyCountMode();
    const isLanding = variant === 'landing';
    const storageKey = isLanding ? LANDING_STORAGE_KEY : STORAGE_KEY;
    const [sorting, setSorting] = useState<SortingState>(DEFAULT_SORTING);
    const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilityState>(
        isLanding ? LANDING_DEFAULT_VISIBILITY : DEFAULT_VISIBILITY
    );
    const [globalFilter, setGlobalFilter] = useState('');
    const [columnsOpen, setColumnsOpen] = useState(false);
    const [primaryDimension, setPrimaryDimension] = useState<PrimaryDimension>('channel_group');
    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
    const [hydrated, setHydrated] = useState(false);
    const [eventCountType, setEventCountType] = useState('all');
    const [eventCountMenuOpen, setEventCountMenuOpen] = useState(false);
    const [eventCountSearch, setEventCountSearch] = useState('');

    useEffect(() => {
        const saved = loadPersistedState(storageKey);
        if (saved.sorting?.length) setSorting(saved.sorting);
        if (saved.columnVisibility) {
            setColumnVisibility(
                isLanding
                    ? { ...LANDING_DEFAULT_VISIBILITY, ...saved.columnVisibility }
                    : { ...DEFAULT_VISIBILITY, ...saved.columnVisibility }
            );
        }
        if (saved.primaryDimension && !isLanding) setPrimaryDimension(saved.primaryDimension);
        if (saved.pageSize) setPagination((p) => ({ ...p, pageSize: saved.pageSize! }));
        if (saved.eventCountType) setEventCountType(saved.eventCountType);
        setHydrated(true);
    }, [isLanding, storageKey]);

    useEffect(() => {
        setPagination((p) => ({ ...p, pageIndex: 0 }));
    }, [primaryDimension, globalFilter]);

    useEffect(() => {
        if (!hydrated) return;
        savePersistedState(
            {
                sorting,
                columnVisibility,
                primaryDimension,
                pageSize: pagination.pageSize,
                eventCountType,
            },
            storageKey
        );
    }, [sorting, columnVisibility, primaryDimension, pagination.pageSize, eventCountType, hydrated, storageKey]);

    const normalizedRows = useMemo(() => normalizeAcquisitionTableRows(rows), [rows]);

    const aggregatedRows = useMemo(() => {
        if (isLanding) return normalizedRows;
        const fromApi = rowsByDimension?.[primaryDimension];
        if (fromApi && fromApi.length > 0) {
            return normalizeAcquisitionTableRows(fromApi);
        }
        return aggregateByPrimary(normalizedRows, primaryDimension);
    }, [isLanding, normalizedRows, rowsByDimension, primaryDimension]);

    const compareAggregated = useMemo(() => {
        if (!compareEnabled) return [] as AcquisitionTableRow[];
        const normalized = normalizeAcquisitionTableRows(compareRows);
        if (isLanding) return normalized;
        const fromApi = compareRowsByDimension?.[primaryDimension];
        if (fromApi && fromApi.length > 0) return normalizeAcquisitionTableRows(fromApi);
        return aggregateByPrimary(normalized, primaryDimension);
    }, [compareEnabled, compareRows, compareRowsByDimension, isLanding, primaryDimension]);

    const compareByKey = useMemo(() => {
        const map = new Map<string, AcquisitionTableRow>();
        compareAggregated.forEach((row) => {
            map.set(isLanding ? row.channel_group || row.id : dimensionLabel(row, primaryDimension), row);
        });
        return map;
    }, [compareAggregated, isLanding, primaryDimension]);

    const compareTotals = useMemo(() => computeTotals(compareAggregated), [compareAggregated]);

    const totals = useMemo(() => {
        const base = computeTotals(aggregatedRows);
        return {
            ...base,
            event_count_filtered: resolveEventCount(base, eventCountType),
        };
    }, [aggregatedRows, eventCountType]);

    const tableRows = useMemo(
        () =>
            aggregatedRows.map((row) => ({
                ...row,
                event_count_filtered: resolveEventCount(row, eventCountType),
            })),
        [aggregatedRows, eventCountType]
    );

    const totalEventCountForFilter = totals.event_count_filtered ?? 0;
    const compareEventCountTotal = resolveEventCount(compareTotals, eventCountType);

    const previousForRow = (row: AcquisitionTableRow) => {
        if (!compareEnabled) return undefined;
        const key = isLanding ? row.channel_group || row.id : dimensionLabel(row, primaryDimension);
        return (
            compareByKey.get(key) || {
                id: '__missing__',
                channel_group: '',
                utm_source: '',
                utm_medium: '',
                utm_campaign: '',
                sessions: 0,
                event_count: 0,
                event_counts_by_type: {},
                engaged_sessions: 0,
                checkout_sessions: 0,
                purchase_sessions: 0,
                purchase_rate_percent: 0,
                avg_duration_min: 0,
                engaged_sessions_per_active_user: 0,
                active_users: 0,
                total_duration_ms: 0,
            }
        );
    };
    const eventTypeOptions = useMemo(() => {
        const map = new Map<string, number>();
        availableEventTypes.forEach(({ type, count }) => {
            map.set(type, (map.get(type) || 0) + (Number(count) || 0));
        });
        aggregatedRows.forEach((row) => {
            Object.entries(row.event_counts_by_type || {}).forEach(([type, count]) => {
                map.set(type, (map.get(type) || 0) + (Number(count) || 0));
            });
        });
        return [...map.entries()]
            .map(([type, count]) => ({ type, count }))
            .sort((a, b) => b.count - a.count);
    }, [availableEventTypes, aggregatedRows]);
    const maxSessions = useMemo(
        () => Math.max(...aggregatedRows.map((r) => r.sessions), 1),
        [aggregatedRows]
    );
    const maxAvgDuration = useMemo(
        () => Math.max(...aggregatedRows.map((r) => Number(r.avg_duration_min) || 0), 0.01),
        [aggregatedRows]
    );

    const showTableLoading = isLoading || (isRefreshing && aggregatedRows.length === 0);

    const primaryLabel = isLanding
        ? 'Landing page'
        : PRIMARY_DIMENSIONS.find((d) => d.id === primaryDimension)?.label || 'Dimension';

    const columns = useMemo<LegacyColumnDef<AcquisitionTableRow>[]>(
        () => [
            {
                id: 'dimension',
                accessorFn: (row) => dimensionLabel(row, primaryDimension),
                header: primaryLabel,
                cell: ({ getValue, row }) => {
                    if (row.original.id === '__total__') {
                        return <span className="font-semibold text-[#202124] dark:text-white">Total</span>;
                    }
                    return <span className={styles.dimensionLink}>{String(getValue() ?? '')}</span>;
                },
            },
            {
                accessorKey: 'sessions',
                header: countMode === 'users' ? 'Users' : 'Sessions',
                cell: ({ getValue, row }) => {
                    const value = Number(getValue());
                    const barWidth =
                        row.original.id === '__total__' ? undefined : (value / maxSessions) * 100;
                    return renderCountMetric(value, totals.sessions, {
                        isTotal: row.original.id === '__total__',
                        barWidth,
                        compareEnabled,
                        previous: previousForRow(row.original)?.sessions,
                    });
                },
            },
            {
                id: 'event_count',
                accessorKey: 'event_count_filtered',
                header: () => (
                    <EventCountHeader
                        selected={eventCountType}
                        options={eventTypeOptions}
                        open={eventCountMenuOpen}
                        search={eventCountSearch}
                        onOpenChange={setEventCountMenuOpen}
                        onSearchChange={setEventCountSearch}
                        onSelect={setEventCountType}
                    />
                ),
                cell: ({ row }) => {
                    const value = resolveEventCount(row.original, eventCountType);
                    const prev = previousForRow(row.original);
                    return renderCountMetric(value, totalEventCountForFilter, {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: prev ? resolveEventCount(prev, eventCountType) : undefined,
                    });
                },
            },
            {
                accessorKey: 'avg_duration_min',
                header: () => (
                    <span title="Average time">Avg time</span>
                ),
                cell: ({ getValue, row }) => {
                    const value = Number(getValue());
                    const barWidth =
                        isLanding && row.original.id !== '__total__'
                            ? (value / maxAvgDuration) * 100
                            : undefined;
                    return renderDurationMetric(value, totals.avg_duration_min, {
                        isTotal: row.original.id === '__total__',
                        barWidth,
                        compareEnabled,
                        previous: previousForRow(row.original)?.avg_duration_min,
                    });
                },
            },
            {
                accessorKey: 'engaged_sessions',
                header: () => <span title={countMode === 'users' ? 'Engaged users' : 'Engaged sessions'}>Engaged</span>,
                cell: ({ getValue, row }) =>
                    renderCountMetric(Number(getValue()), totals.engaged_sessions, {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: previousForRow(row.original)?.engaged_sessions,
                    }),
            },
            {
                accessorKey: 'engaged_sessions_per_active_user',
                header: () => (
                    <span title="Engaged sessions per active user">Engaged / user</span>
                ),
                cell: ({ getValue, row }) =>
                    renderRatioMetric(Number(getValue()), totals.engaged_sessions_per_active_user, {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: previousForRow(row.original)?.engaged_sessions_per_active_user,
                    }),
            },
            {
                accessorKey: 'checkout_sessions',
                header: 'Checkouts',
                cell: ({ getValue, row }) =>
                    renderCountMetric(Number(getValue()), totals.checkout_sessions, {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: previousForRow(row.original)?.checkout_sessions,
                    }),
            },
            {
                accessorKey: 'purchase_sessions',
                header: () => <span title="Purchase">Orders</span>,
                cell: ({ getValue, row }) =>
                    renderCountMetric(Number(getValue()), totals.purchase_sessions, {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: previousForRow(row.original)?.purchase_sessions,
                    }),
            },
            {
                accessorKey: 'purchase_rate_percent',
                header: () => <span title="Purchase rate">Purchase %</span>,
                cell: ({ row, getValue }) =>
                    renderRateMetric(Number(getValue()), {
                        isTotal: row.original.id === '__total__',
                        compareEnabled,
                        previous: previousForRow(row.original)?.purchase_rate_percent,
                    }),
            },
        ],
        [
            isLanding,
            primaryDimension,
            primaryLabel,
            maxSessions,
            maxAvgDuration,
            totals,
            eventCountType,
            eventTypeOptions,
            eventCountMenuOpen,
            eventCountSearch,
            totalEventCountForFilter,
            compareEnabled,
            compareByKey,
            countMode,
        ]
    );

    const table = useLegacyTable({
        data: tableRows,
        columns,
        state: {
            sorting,
            columnVisibility,
            globalFilter,
            pagination,
        },
        onSortingChange: setSorting,
        onColumnVisibilityChange: setColumnVisibility,
        onGlobalFilterChange: setGlobalFilter,
        onPaginationChange: setPagination,
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    });

    const hasActiveFilters = Boolean(
        activeFilters?.channel_group ||
        activeFilters?.utm_source ||
        activeFilters?.utm_medium ||
        activeFilters?.utm_campaign
    );

    if (!hydrated) {
        return (
            <div
                className={`${styles.wrapper} ${isLanding ? styles.wrapperLanding : ''} ${compact && isLanding ? styles.wrapperLandingCompact : ''}`}
            >
                <div className={styles.loadingPanel}>
                    <span className={styles.refreshSpinner} />
                    <p>{isLanding ? 'Memuat tabel landing page...' : 'Memuat tabel acquisition...'}</p>
                </div>
            </div>
        );
    }

    if (showTableLoading) {
        return (
            <div
                className={`${styles.wrapper} ${isLanding ? styles.wrapperLanding : ''} ${compact && isLanding ? styles.wrapperLandingCompact : ''}`}
            >
                <div className={styles.loadingPanel}>
                    <span className={styles.refreshSpinner} />
                    <p>{isLanding ? 'Memuat landing page...' : 'Memuat data...'}</p>
                </div>
            </div>
        );
    }

    const visibleMetricCount =
        METRIC_COLUMNS.filter((m) => table.getColumn(m.id)?.getIsVisible() !== false).length + 1;

    return (
        <div
            className={`${styles.wrapper} ${isLanding ? styles.wrapperLanding : ''} ${compact && isLanding ? styles.wrapperLandingCompact : ''} ${compareEnabled ? styles.wrapperCompare : ''}`}
        >
            {hasActiveFilters && !isLanding ? (
                <div className={styles.filterBanner}>
                    <nav className={styles.breadcrumb} aria-label="Filter acquisition">
                        <button
                            type="button"
                            className={styles.crumb}
                            onClick={() =>
                                onFiltersChange
                                    ? onFiltersChange({ channel_group: '', utm_source: '', utm_medium: '', utm_campaign: '' })
                                    : onClearFilters?.()
                            }
                        >
                            Semua
                        </button>
                        {activeFilters?.channel_group ? (
                            <>
                                <span className={styles.crumbSep}>→</span>
                                <button
                                    type="button"
                                    className={`${styles.crumb} ${!activeFilters.utm_source && !activeFilters.utm_medium && !activeFilters.utm_campaign ? styles.crumbCurrent : ''}`}
                                    onClick={() =>
                                        onFiltersChange?.({
                                            channel_group: activeFilters.channel_group,
                                            utm_source: '',
                                            utm_medium: '',
                                            utm_campaign: '',
                                        })
                                    }
                                >
                                    {activeFilters.channel_group}
                                </button>
                            </>
                        ) : null}
                        {activeFilters?.utm_source ? (
                            <>
                                <span className={styles.crumbSep}>→</span>
                                <button
                                    type="button"
                                    className={`${styles.crumb} ${!activeFilters.utm_medium && !activeFilters.utm_campaign ? styles.crumbCurrent : ''}`}
                                    onClick={() =>
                                        onFiltersChange?.({
                                            channel_group: activeFilters.channel_group,
                                            utm_source: activeFilters.utm_source,
                                            utm_medium: '',
                                            utm_campaign: '',
                                        })
                                    }
                                >
                                    {activeFilters.utm_source}
                                </button>
                            </>
                        ) : null}
                        {activeFilters?.utm_medium ? (
                            <>
                                <span className={styles.crumbSep}>→</span>
                                <button
                                    type="button"
                                    className={`${styles.crumb} ${!activeFilters.utm_campaign ? styles.crumbCurrent : ''}`}
                                    onClick={() =>
                                        onFiltersChange?.({
                                            channel_group: activeFilters.channel_group,
                                            utm_source: activeFilters.utm_source,
                                            utm_medium: activeFilters.utm_medium,
                                            utm_campaign: '',
                                        })
                                    }
                                >
                                    {activeFilters.utm_medium}
                                </button>
                            </>
                        ) : null}
                        {activeFilters?.utm_campaign ? (
                            <>
                                <span className={styles.crumbSep}>→</span>
                                <span className={`${styles.crumb} ${styles.crumbCurrent}`}>
                                    {activeFilters.utm_campaign}
                                </span>
                            </>
                        ) : null}
                    </nav>
                    {onClearFilters ? (
                        <button type="button" className={styles.clearFilterBtn} onClick={onClearFilters}>
                            Hapus filter · kembali ke semua data
                        </button>
                    ) : null}
                </div>
            ) : null}
            <div className={styles.toolbar}>
                <div className={styles.toolbarLeft}>
                    {isLanding ? (
                        <span className={styles.fieldLabel}>{aggregatedRows.length} landing page</span>
                    ) : (
                        <>
                            <span className={styles.fieldLabel}>Primary dimension</span>
                            <select
                                className={styles.select}
                                value={primaryDimension}
                                onChange={(e) => setPrimaryDimension(e.target.value as PrimaryDimension)}
                            >
                                {PRIMARY_DIMENSIONS.map((d) => (
                                    <option key={d.id} value={d.id}>
                                        {d.label}
                                    </option>
                                ))}
                            </select>
                            <span className={styles.fieldLabel}>{aggregatedRows.length} rows</span>
                        </>
                    )}
                </div>
                <div className={styles.toolbarRight}>
                    <input
                        type="search"
                        className={styles.search}
                        placeholder={isLanding ? 'Search landing page...' : 'Search dimension...'}
                        value={globalFilter}
                        onChange={(e) => setGlobalFilter(e.target.value)}
                    />
                    <div className="relative">
                        <button
                            type="button"
                            className={styles.iconBtn}
                            onClick={() => setColumnsOpen((v) => !v)}
                        >
                            Customize columns 
                        </button>
                        {columnsOpen ? (
                            <div className={styles.columnsPanel}>
                                <div className={styles.columnsPanelTitle}>Metrik</div>
                                {METRIC_COLUMNS.map((metric) => {
                                    const col = table.getColumn(metric.id);
                                    if (!col) return null;
                                    return (
                                        <label
                                            key={metric.id}
                                            className="flex items-center gap-2 py-1 text-sm cursor-pointer"
                                        >
                                            <input
                                                type="checkbox"
                                                className="form-checkbox"
                                                checked={col.getIsVisible()}
                                                onChange={col.getToggleVisibilityHandler()}
                                            />
                                            {metric.id === 'sessions' && countMode === 'users'
                                                ? 'Users'
                                                : metric.label}
                                        </label>
                                    );
                                })}
                            </div>
                        ) : null}
                    </div>
                </div>
            </div>

            <div className={styles.tableScroll}>
                <table className={styles.table}>
                    <thead className={styles.thead}>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <tr key={headerGroup.id}>
                                {headerGroup.headers.map((header) => {
                                    const isDimension = header.column.id === 'dimension';
                                    const isEventCount = header.column.id === 'event_count';
                                    return (
                                        <th
                                            key={header.id}
                                            className={`${styles.th} ${isDimension ? `${styles.thDimension} ${styles.thFrozen}` : getMetricThClass(header.column.id)}`}
                                            onClick={
                                                isEventCount
                                                    ? undefined
                                                    : header.column.getToggleSortingHandler()
                                            }
                                        >
                                            {flexRender(header.column.columnDef.header, header.getContext())}
                                            {{
                                                asc: <span className={styles.sortIcon}>▲</span>,
                                                desc: <span className={styles.sortIcon}>▼</span>,
                                            }[header.column.getIsSorted() as string] ?? null}
                                        </th>
                                    );
                                })}
                            </tr>
                        ))}
                    </thead>
                    <tbody key={eventCountType}>
                        <tr className={styles.trTotal}>
                            <td className={`${styles.td} ${styles.tdDimension} ${styles.tdFrozen}`}>Total</td>
                            {table.getColumn('sessions')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('sessions')}`}>
                                    {renderCountMetric(totals.sessions, totals.sessions, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.sessions,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('event_count')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('event_count')}`}>
                                    {renderCountMetric(totalEventCountForFilter, totalEventCountForFilter, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareEventCountTotal,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('avg_duration_min')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('avg_duration_min')}`}>
                                    {renderDurationMetric(totals.avg_duration_min, totals.avg_duration_min, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.avg_duration_min,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('engaged_sessions')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('engaged_sessions')}`}>
                                    {renderCountMetric(totals.engaged_sessions, totals.engaged_sessions, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.engaged_sessions,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('engaged_sessions_per_active_user')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('engaged_sessions_per_active_user')}`}>
                                    {renderRatioMetric(
                                        totals.engaged_sessions_per_active_user,
                                        totals.engaged_sessions_per_active_user,
                                        {
                                            isTotal: true,
                                            compareEnabled,
                                            previous: compareTotals.engaged_sessions_per_active_user,
                                        }
                                    )}
                                </td>
                            ) : null}
                            {table.getColumn('checkout_sessions')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('checkout_sessions')}`}>
                                    {renderCountMetric(totals.checkout_sessions, totals.checkout_sessions, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.checkout_sessions,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('purchase_sessions')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('purchase_sessions')}`}>
                                    {renderCountMetric(totals.purchase_sessions, totals.purchase_sessions, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.purchase_sessions,
                                    })}
                                </td>
                            ) : null}
                            {table.getColumn('purchase_rate_percent')?.getIsVisible() !== false ? (
                                <td className={`${styles.td} ${getMetricTdClass('purchase_rate_percent')}`}>
                                    {renderRateMetric(totals.purchase_rate_percent, {
                                        isTotal: true,
                                        compareEnabled,
                                        previous: compareTotals.purchase_rate_percent,
                                    })}
                                </td>
                            ) : null}
                        </tr>

                        {table.getRowModel().rows.length === 0 ? (
                            <tr>
                                <td colSpan={visibleMetricCount} className={styles.empty}>
                                    {isRefreshing || isLoading
                                        ? 'Memuat data...'
                                        : `Belum ada data ${isLanding ? 'landing page' : 'acquisition'}`}
                                </td>
                            </tr>
                        ) : (
                            table.getRowModel().rows.map((row) => {
                                const isSelected =
                                    hasActiveFilters &&
                                    activeFilters &&
                                    rowMatchesActiveFilters(
                                        row.original,
                                        primaryDimension,
                                        activeFilters
                                    );
                                return (
                                    <tr
                                        key={row.id}
                                        className={`${styles.tr} ${onRowClick && !isLanding ? styles.trClickable : ''} ${isSelected ? styles.trSelected : ''}`}
                                        onClick={() => {
                                            if (!onRowClick || isLanding) return;
                                            onRowClick({
                                                row: row.original,
                                                primaryDimension,
                                                filters: buildAcquisitionFiltersFromRow(
                                                    row.original,
                                                    primaryDimension
                                                ),
                                            });
                                        }}
                                    >
                                        {row.getVisibleCells().map((cell) => {
                                            const isDimension = cell.column.id === 'dimension';
                                            return (
                                                <td
                                                    key={cell.id}
                                                    className={`${styles.td} ${isDimension ? `${styles.tdDimension} ${styles.tdFrozen}` : getMetricTdClass(cell.column.id)}`}
                                                >
                                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                                </td>
                                            );
                                        })}
                                    </tr>
                                );
                            })
                        )}
                    </tbody>
                </table>
            </div>

            <div className={styles.footer}>
                <div className="flex items-center gap-2">
                    <span>Rows per page:</span>
                    <select
                        className={styles.select}
                        value={pagination.pageSize}
                        onChange={(e) => {
                            table.setPageSize(Number(e.target.value));
                        }}
                    >
                        {[10, 25, 50, 100].map((n) => (
                            <option key={n} value={n}>
                                {n}
                            </option>
                        ))}
                    </select>
                    <span>
                        {pagination.pageIndex * pagination.pageSize + 1}-
                        {Math.min(
                            (pagination.pageIndex + 1) * pagination.pageSize,
                            table.getFilteredRowModel().rows.length
                        )}{' '}
                        of {table.getFilteredRowModel().rows.length}
                    </span>
                </div>
                <div className={styles.footerBtns}>
                    <button
                        type="button"
                        className={styles.pageBtn}
                        onClick={() => table.setPageIndex(0)}
                        disabled={!table.getCanPreviousPage()}
                    >
                        ⟨⟨
                    </button>
                    <button
                        type="button"
                        className={styles.pageBtn}
                        onClick={() => table.previousPage()}
                        disabled={!table.getCanPreviousPage()}
                    >
                        ⟨ Prev
                    </button>
                    <button
                        type="button"
                        className={styles.pageBtn}
                        onClick={() => table.nextPage()}
                        disabled={!table.getCanNextPage()}
                    >
                        Next ⟩
                    </button>
                    <button
                        type="button"
                        className={styles.pageBtn}
                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
                        disabled={!table.getCanNextPage()}
                    >
                        ⟩⟩
                    </button>
                </div>
            </div>
            {isRefreshing ? (
                <div className={styles.refreshOverlay} aria-busy="true">
                    <span className={styles.refreshSpinner} />
                </div>
            ) : null}
        </div>
    );
};

export default AcquisitionTable;