import { StatCard } from '@/components/card/stat-card';
import { DatePicker } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { useCan } from '@/hooks/use-can';
import { formatRupiah } from '@/lib/rupiah';
import { Head, router } from '@inertiajs/react';
import {
    Banknote,
    Package,
    ShoppingCart,
    UserCheck,
} from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import {
    Bar,
    BarChart,
    CartesianGrid,
    Cell,
    Line,
    LineChart,
    Pie,
    PieChart,
    ResponsiveContainer,
    Tooltip,
    XAxis,
} from 'recharts';

type Filters = {
    start_date?: string;
    end_date?: string;
};

type AnalysisProps = {
    filters: Filters;
    attendance: {
        total_employees: number;
        percentage: number;
        present: number;
        absent: number;
        on_leave: number;
    };
    myAttendance: {
        total_days: number;
        present_days: number;
        absent_days: number;
        leave_days: number;
        percentage: number;
    } | null;
    isManager: boolean;
    cashOverview: {
        total_balance: number;
        total_transactions: number;
        total_deposit: number;
        total_withdrawal: number;
    };
    rawMaterialStock: {
        total_stock: number;
        total_value: number;
        by_unit: {
            yard: number;
            meter: number;
            kilogram: number;
        };
    };
    productStock: {
        total_stock: number;
        total_value: number;
        by_type: {
            good?: number;
            reject?: number;
            retail?: number;
        };
    };
    revenueSummary: {
        total_revenue: number;
        total_discount: number;
        total_deduction: number;
        cogs: number;
        gross: number;
        net: number;
        payroll_total: number;
        expense_total: number;
        total_orders: number;
        avg_order: number;
    };
    monthlyRevenue: Array<{
        month: string;
        total: number;
        gross: number;
        net: number;
        discount: number;
        deduction: number;
        cogs: number;
        payroll: number;
        expense: number;
    }>;
    monthlyRevenueByChannel: Array<{
        month: string;
        store: number;
        shopee: number;
        tiktok: number;
    }>;
    revenueByPaymentType: Array<{
        payment_type: string;
        label: string;
        total: number;
    }>;
    expenseSummary: {
        total: number;
        purchase_total: number;
        expense_total: number;
        advance_total: number;
    };
    monthlyExpense: Array<{
        month: string;
        total: number;
        purchase: number;
        expense: number;
        advance: number;
    }>;
    busyHours: Array<{
        hour: string;
        orders: number;
    }>;
    profitMetrics: {
        total_orders: number;
        total_products_sold: number;
        hpp: number;
        gross_profit: number;
        net_profit: number;
        profit_margin: number;
        aov: number;
        items_per_transaction: number;
        payroll_total: number;
        expense_total: number;
    };
    topSuppliers: Array<{
        name: string;
        total_amount: number;
        purchase_count: number;
    }>;
    topCustomers: Array<{
        name: string;
        total_amount: number;
        order_count: number;
    }>;
    topProducts: Array<{
        name: string;
        total_qty: number;
        total_revenue: number;
    }>;
    marketingSales: Array<{
        marketing_name: string;
        total_orders: number;
        total_products_sold: number;
        total_revenue: number;
        total_subtotal: number;
        total_discount: number;
        avg_order: number;
    }>;
    orderStats: {
        by_channel: Array<{
            channel: string;
            label: string;
            count: number;
            total: number;
        }>;
        by_payment_type: Array<{
            payment_type: string;
            label: string;
            count: number;
            total: number;
        }>;
        by_marketing: Array<{
            name: string;
            count: number;
            total: number;
        }>;
        by_status: Array<{
            status: string;
            label: string;
            count: number;
        }>;
    };
    revenueTrend: Array<{
        date: string;
        qty: number;
    }>;
};

const revenueChartConfig = {
    total: {
        label: 'Total',
        color: 'var(--chart-1)',
    },
    gross: {
        label: 'Keuntungan Kotor',
        color: 'var(--chart-2)',
    },
    net: {
        label: 'Keuntungan Bersih',
        color: 'var(--chart-6)',
    },
    deduction: {
        label: 'Potongan Nego',
        color: 'var(--chart-3)',
    },
    discount: {
        label: 'Diskon',
        color: 'var(--chart-4)',
    },
    cogs: {
        label: 'HPP',
        color: 'var(--chart-5)',
    },
} satisfies ChartConfig;

const revenueKeys = ['total', 'deduction', 'discount', 'cogs', 'gross', 'net'] as const;

const expenseChartConfig = {
    total: {
        label: 'Total',
        color: 'var(--chart-1)',
    },
    purchase: {
        label: 'Belanja',
        color: 'var(--chart-2)',
    },
    expense: {
        label: 'Pengeluaran Toko',
        color: 'var(--chart-3)',
    },
    advance: {
        label: 'Kasbon',
        color: 'var(--chart-4)',
    },
} satisfies ChartConfig;

const expenseKeys = ['total', 'purchase', 'expense', 'advance'] as const;

const revenueTrendChartConfig = {
    qty: {
        label: 'Qty',
        color: 'var(--chart-1)',
    },
} satisfies ChartConfig;

const revenueTrendKeys = ['qty'] as const;

const CHANNEL_COLORS: Record<string, string> = {
    store: '#22c55e',
    shopee: '#ee4d2d',
    tiktok: '#000000',
};

const PAYMENT_COLORS: Record<string, string> = {
    cash: '#22c55e',
    transfer: '#60a5fa',
    qris: '#a855f7',
    marketplace: '#f97316',
};

const PIE_COLORS = [
    'var(--chart-1)',
    'var(--chart-2)',
    'var(--chart-3)',
    'var(--chart-4)',
    'var(--chart-5)',
];

type PieChartItem = {
    name: string;
    count: number;
};

type DashboardPieChartProps = {
    title: string;
    data: PieChartItem[];
    dataKey: string;
    nameKey: string;
};

function DashboardPieChart({ title, data, dataKey, nameKey }: DashboardPieChartProps) {
    const hasData = data.length > 0 && data.some((d) => d.count > 0);

    const chartConfig = useMemo(() => {
        const config: ChartConfig = {};
        data.forEach((item, index) => {
            config[item.name] = {
                label: item.name,
                color: PIE_COLORS[index % PIE_COLORS.length],
            };
        });
        return config;
    }, [data]);

    const chartData = useMemo(() => {
        return data.map((item) => ({
            ...item,
            fill: PIE_COLORS[data.indexOf(item) % PIE_COLORS.length],
        }));
    }, [data]);

    return (
        <Card>
            <CardHeader className="items-center pb-0">
                <CardTitle className="text-base">{title}</CardTitle>
            </CardHeader>
            <CardContent className="flex-1 pb-0">
                {hasData ? (
                    <ChartContainer
                        config={chartConfig}
                        className="mx-auto aspect-square max-h-[250px]"
                    >
                        <PieChart>
                            <ChartTooltip
                                content={
                                    <ChartTooltipContent
                                        nameKey={nameKey}
                                        hideLabel
                                    />
                                }
                            />
                            <Pie
                                data={chartData}
                                dataKey={dataKey}
                                nameKey={nameKey}
                            />
                            <ChartLegend
                                content={<ChartLegendContent nameKey={nameKey} />}
                                className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
                            />
                        </PieChart>
                    </ChartContainer>
                ) : (
                    <div className="flex h-[200px] items-center justify-center text-muted-foreground">
                        Belum ada data
                    </div>
                )}
            </CardContent>
        </Card>
    );
}

type TooltipProps = {
    active?: boolean;
    payload?: Array<{
        name: string;
        value: number;
        color?: string;
        payload: Record<string, unknown>;
    }>;
    label?: string;
};

function BarTooltip({ active, payload, label }: TooltipProps) {
    if (!active || !payload?.length) {
        return null;
    }

    return (
        <div className="rounded-lg border bg-background px-3 py-1.5 shadow-xl">
            <p className="font-medium">{label}</p>
            {payload.map((item, i) => (
                <p key={i} className="flex items-center gap-1 text-sm">
                    <span className="size-2 rounded-full" style={{ backgroundColor: item.color }} />
                    <span className="text-muted-foreground">{item.name}</span>
                    <span className="ml-auto font-medium tabular-nums">
                        {typeof item.value === 'number' && item.value > 1000
                            ? `Rp${formatRupiah(item.value)}`
                            : item.value}
                    </span>
                </p>
            ))}
        </div>
    );
}

function DonutTooltip({ active, payload }: TooltipProps) {
    if (!active || !payload?.length) {
        return null;
    }

    const data = payload[0].payload;

    return (
        <div className="rounded-lg border bg-background px-3 py-1.5 shadow-xl">
            <p className="flex items-center gap-1 text-sm">
                <span className="size-2 rounded-full" style={{ backgroundColor: data.color as string }} />
                <span className="text-muted-foreground">{(data.label as string) ?? ''}</span>
                <span className="ml-auto font-medium tabular-nums">
                    {data.total !== undefined ? `Rp${formatRupiah(data.total as number)}` : (data.value as number)?.toLocaleString('id-ID')}
                </span>
            </p>
        </div>
    );
}

export default function Analysis({
    filters: initialFilters,
    attendance,
    myAttendance,
    isManager,
    cashOverview,
    rawMaterialStock,
    productStock,
    revenueSummary,
    monthlyRevenue,
    monthlyRevenueByChannel,
    revenueByPaymentType,
    expenseSummary,
    monthlyExpense,
    busyHours,
    profitMetrics,
    topSuppliers,
    topCustomers,
    topProducts,
    marketingSales,
    orderStats,
    revenueTrend,
}: AnalysisProps) {
    const { can, hasAnyRole, hasRole } = useCan();
    const [startDate, setStartDate] = useState(initialFilters.start_date ?? '');
    const [endDate, setEndDate] = useState(initialFilters.end_date ?? '');
    const [selectedPreset, setSelectedPreset] = useState('');
    const [activeRevenueKey, setActiveRevenueKey] = useState<keyof typeof revenueChartConfig>('total');
    const [activeExpenseKey, setActiveExpenseKey] = useState<keyof typeof expenseChartConfig>('total');

    const hasActiveFilters = !!startDate || !!endDate;

    const formatDate = useCallback((date: Date): string => date.toISOString().split('T')[0], []);

    const applyFilters = useCallback(() => {
        router.get(
            '/admin/analysis',
            { start_date: startDate, end_date: endDate },
            { preserveState: true, preserveScroll: true },
        );
    }, [startDate, endDate]);

    const clearFilters = useCallback(() => {
        setStartDate('');
        setEndDate('');
        setSelectedPreset('');
    }, []);

    useEffect(() => {
        const timer = setTimeout(applyFilters, 500);

        return () => clearTimeout(timer);
    }, [startDate, endDate, applyFilters]);

    const onPresetChange = useCallback((value: string) => {
        setSelectedPreset(value);

        const now = new Date();
        let start: Date;

        switch (value) {
            case 'today':
                start = new Date(now);
                break;
            case 'week':
                start = new Date(now);
                start.setDate(now.getDate() - now.getDay() + 1);
                break;
            case 'month':
                start = new Date(now.getFullYear(), now.getMonth(), 1);
                break;
            case 'year':
                start = new Date(now.getFullYear(), 0, 1);
                break;
            default:
                return;
        }

        setStartDate(formatDate(start));
        setEndDate(formatDate(now));
    }, [formatDate]);

    const revenueByChannelData = useMemo(() => {
        const totals = monthlyRevenueByChannel.reduce(
            (acc, item) => ({
                store: acc.store + (item.store ?? 0),
                shopee: acc.shopee + (item.shopee ?? 0),
                tiktok: acc.tiktok + (item.tiktok ?? 0),
            }),
            { store: 0, shopee: 0, tiktok: 0 },
        );

        return [
            { channel: 'store', label: 'Toko', total: totals.store, color: CHANNEL_COLORS.store },
            { channel: 'shopee', label: 'Shopee', total: totals.shopee, color: CHANNEL_COLORS.shopee },
            { channel: 'tiktok', label: 'TikTok', total: totals.tiktok, color: CHANNEL_COLORS.tiktok },
        ];
    }, [monthlyRevenueByChannel]);

    const peakHour = useMemo(() => {
        if (busyHours.length === 0) {
            return { hour: '-', orders: 0 };
        }

        return busyHours.reduce((max, item) => (item.orders > max.orders ? item : max), busyHours[0]);
    }, [busyHours]);

    const visibleExpenseCharts = useMemo(() => {
        if (hasAnyRole(['owner', 'developer'])) {
            return expenseKeys;
        }

        return expenseKeys.filter((c) => c !== 'purchase');
    }, [hasAnyRole]);

    const sectionOrder = useMemo(() => {
        if (hasAnyRole(['owner', 'developer'])) {
            return { statCards: 1, revenue: 4, revenueByChannel: 5, orderPie: 6, expense: 7, totalOrder: 8, revenueTrend: 9, marketingSales: 10, topSuppliers: 11, topProducts: 12, topCustomers: 13, busyHours: 14 };
        }

        if (hasAnyRole(['admin_toko', 'direktur'])) {
            return { statCards: 1, revenue: 4, revenueByChannel: 5, orderPie: 6, expense: 7, totalOrder: 8, revenueTrend: 9, marketingSales: 10, topSuppliers: 11, topProducts: 12, topCustomers: 13, busyHours: 14 };
        }

        if (hasRole('marketing')) {
            return { statCards: 1, revenue: 2, revenueByChannel: 3, orderPie: 4, totalOrder: 5, revenueTrend: 6, topProducts: 7, topCustomers: 8 };
        }

        return {};
    }, [hasAnyRole, hasRole]);

    return (
        <>
            <Head title="Analisa" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="space-y-1">
                        <h2 className="text-2xl font-bold tracking-tight">Analisa</h2>
                    </div>
                    <div className="flex flex-wrap items-center gap-3">
                        <Select value={selectedPreset} onValueChange={onPresetChange}>
                            <SelectTrigger className="h-9 w-[140px]">
                                <SelectValue placeholder="Filter Cepat" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    <SelectItem value="today">Hari Ini</SelectItem>
                                    <SelectItem value="week">Minggu Ini</SelectItem>
                                    <SelectItem value="month">Bulan Ini</SelectItem>
                                    <SelectItem value="year">Tahun Ini</SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                        <div className="flex items-center gap-2">
                            <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Mulai:</span>
                            <DatePicker value={startDate} onChange={(d) => setStartDate(d ? formatDate(d) : '')} className="w-[170px]" placeholder="Pilih tanggal" />
                        </div>
                        <div className="flex items-center gap-2">
                            <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Sampai:</span>
                            <DatePicker value={endDate} onChange={(d) => setEndDate(d ? formatDate(d) : '')} className="w-[170px]" placeholder="Pilih tanggal" />
                        </div>
                        {hasActiveFilters && (
                            <Button variant="ghost" size="sm" onClick={clearFilters} className="h-9 px-3">
                                Reset Filter
                            </Button>
                        )}
                    </div>
                </div>

                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3" style={{ order: sectionOrder.statCards ?? 99 }}>
                    {can('analysis.attendance') && !isManager && myAttendance && (
                        <StatCard
                            title="Kehadiran Saya"
                            icon={UserCheck}
                            mainLabel="Hari Kerja"
                            mainValue={myAttendance.total_days}
                            subLabel={`${myAttendance.percentage}% hadir`}
                            items={[
                                { label: 'Hadir', value: myAttendance.present_days },
                                { label: 'Tidak Hadir', value: myAttendance.absent_days },
                                { label: 'Cuti', value: myAttendance.leave_days },
                            ]}
                        />
                    )}

                    {can('analysis.cash') && (
                        <StatCard
                            title="Kas Toko"
                            icon={Banknote}
                            mainLabel="Total Saldo"
                            mainValue={`Rp${formatRupiah(cashOverview.total_balance)}`}
                            subLabel={`${cashOverview.total_transactions} transaksi`}
                            items={[
                                { label: 'Deposit', value: `Rp${formatRupiah(cashOverview.total_deposit)}` },
                                { label: 'Withdrawal', value: `Rp${formatRupiah(cashOverview.total_withdrawal)}` },
                            ]}
                            cols={2}
                        />
                    )}

                    {can('analysis.raw_materials') && (
                        <StatCard
                            title="Bahan Baku"
                            icon={Package}
                            mainLabel="Total Stok"
                            mainValue={rawMaterialStock.total_stock.toLocaleString('id-ID')}
                            subLabel={`Rp${formatRupiah(rawMaterialStock.total_value)}`}
                            description="Tidak terpengaruh filter tanggal"
                            items={[
                                { label: 'Yard', value: rawMaterialStock.by_unit?.yard?.toLocaleString('id-ID') ?? '0' },
                                { label: 'Meter', value: rawMaterialStock.by_unit?.meter?.toLocaleString('id-ID') ?? '0' },
                                { label: 'Kg', value: rawMaterialStock.by_unit?.kilogram?.toLocaleString('id-ID') ?? '0' },
                            ]}
                        />
                    )}

                    {can('analysis.product_stock') && (
                        <StatCard
                            title="Stok Produk"
                            icon={ShoppingCart}
                            mainLabel="Total Stok"
                            mainValue={productStock.total_stock.toLocaleString('id-ID')}
                            subLabel={`Rp${formatRupiah(productStock.total_value)}`}
                            description="Tidak terpengaruh filter tanggal"
                            items={[
                                { label: 'Bagus', value: (productStock.by_type?.good ?? 0).toLocaleString('id-ID') },
                                { label: 'Reject', value: (productStock.by_type?.reject ?? 0).toLocaleString('id-ID') },
                                { label: 'Ecer', value: (productStock.by_type?.retail ?? 0).toLocaleString('id-ID') },
                            ]}
                        />
                    )}
                </div>

                {can('analysis.revenue') && (
                    <Card className="py-0" style={{ order: sectionOrder.revenue ?? 99 }}>
                        <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                            <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
                                <CardTitle>Pendapatan</CardTitle>
                            </div>
                            <div className="flex flex-col sm:flex-row">
                                {revenueKeys.filter((key) => {
                                    if (hasAnyRole(['owner', 'developer'])) return true;
                                    if (hasRole('cashier')) return key === 'total' || key === 'discount' || key === 'deduction' || key === 'cogs';
                                    return key === 'total' || key === 'discount' || key === 'deduction' || key === 'cogs' || key === 'gross' || key === 'net';
                                }).map((key) => {
                                    const value = key === 'total' ? revenueSummary.total_revenue : key === 'discount' ? revenueSummary.total_discount : key === 'net' ? revenueSummary.net : key === 'gross' ? revenueSummary.gross : key === 'cogs' ? revenueSummary.cogs : revenueSummary.total_deduction;
                                    return (
                                        <button
                                            key={key}
                                            data-active={activeRevenueKey === key}
                                            className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l data-[active=true]:bg-muted/30 sm:border-t-0 sm:border-l sm:px-5 sm:py-3"
                                            onClick={() => setActiveRevenueKey(key)}
                                        >
                                            <span className="text-[10px] text-muted-foreground">
                                                {revenueChartConfig[key].label}
                                            </span>
                                            <span className="text-xs leading-none font-semibold sm:text-sm">
                                                Rp{formatRupiah(value)}
                                            </span>
                                        </button>
                                    );
                                })}
                            </div>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {monthlyRevenue.length > 0 ? (
                                <ChartContainer config={revenueChartConfig} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={monthlyRevenue} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">{revenueChartConfig[activeRevenueKey]?.label ?? name}</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                Rp{Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey={activeRevenueKey} fill={`var(--color-${activeRevenueKey})`} radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data pendapatan</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.revenue') && (
                    <div className="grid gap-4 md:grid-cols-2" style={{ order: sectionOrder.revenueByChannel ?? 99 }}>
                        <Card className="py-4 sm:py-0">
                            <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                                <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                                    <CardTitle>Pendapatan per Channel</CardTitle>
                                </div>
                                <div className="flex flex-col sm:flex-row">
                                    {revenueByChannelData.map((item) => (
                                        <div key={item.channel} className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-4">
                                            <span className="text-xs text-muted-foreground">{item.label}</span>
                                            <span className="text-sm">Rp{formatRupiah(item.total)}</span>
                                        </div>
                                    ))}
                                </div>
                            </CardHeader>
                            <CardContent className="px-2 sm:p-6">
                                {revenueByChannelData.length > 0 ? (
                                    <div className="mx-auto aspect-square max-h-[300px]">
                                        <ResponsiveContainer width="100%" height="100%">
                                            <PieChart>
                                                <Pie data={revenueByChannelData} dataKey="total" nameKey="label" cx="50%" cy="50%" outerRadius={100} innerRadius={60} strokeWidth={2} stroke="#374151">
                                                    {revenueByChannelData.map((entry, index) => (
                                                        <Cell key={index} fill={entry.color} />
                                                    ))}
                                                </Pie>
                                                <Tooltip content={<DonutTooltip />} />
                                            </PieChart>
                                        </ResponsiveContainer>
                                    </div>
                                ) : (
                                    <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data pendapatan</div>
                                )}
                            </CardContent>
                        </Card>

                        <Card className="py-4 sm:py-0">
                            <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                                <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
                                    <CardTitle>Pendapatan per Pembayaran</CardTitle>
                                </div>
                                <div className="flex flex-col sm:flex-row">
                                    {revenueByPaymentType.map((item) => (
                                        <div key={item.payment_type} className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-4">
                                            <span className="text-xs text-muted-foreground">{item.label}</span>
                                            <span className="text-sm">Rp{formatRupiah(item.total)}</span>
                                        </div>
                                    ))}
                                </div>
                            </CardHeader>
                            <CardContent className="px-2 sm:p-6">
                                {revenueByPaymentType.length > 0 ? (
                                    <div className="mx-auto aspect-square max-h-[300px]">
                                        <ResponsiveContainer width="100%" height="100%">
                                            <PieChart>
                                                <Pie
                                                    data={revenueByPaymentType.map((item) => ({
                                                        ...item,
                                                        color: PAYMENT_COLORS[item.payment_type] ?? '#94a3b8',
                                                    }))}
                                                    dataKey="total"
                                                    nameKey="label"
                                                    cx="50%"
                                                    cy="50%"
                                                    outerRadius={100}
                                                    innerRadius={60}
                                                    strokeWidth={2}
                                                    stroke="#374151"
                                                >
                                                    {revenueByPaymentType.map((entry, index) => (
                                                        <Cell key={index} fill={PAYMENT_COLORS[entry.payment_type] ?? '#94a3b8'} />
                                                    ))}
                                                </Pie>
                                                <Tooltip content={<DonutTooltip />} />
                                            </PieChart>
                                        </ResponsiveContainer>
                                    </div>
                                ) : (
                                    <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data pendapatan</div>
                                )}
                            </CardContent>
                        </Card>
                    </div>
                )}

                {can('analysis.revenue') && (
                    <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4" style={{ order: sectionOrder.orderPie ?? 99 }}>
                        <DashboardPieChart
                            title="Pesanan per Channel"
                            data={orderStats.by_channel.map((item) => ({
                                name: item.label,
                                count: item.count,
                            }))}
                            dataKey="count"
                            nameKey="name"
                        />

                        <DashboardPieChart
                            title="Pesanan per Pembayaran"
                            data={orderStats.by_payment_type.map((item) => ({
                                name: item.label,
                                count: item.count,
                            }))}
                            dataKey="count"
                            nameKey="name"
                        />

                        <DashboardPieChart
                            title="Pesanan per Marketing"
                            data={orderStats.by_marketing.map((item) => ({
                                name: item.name,
                                count: item.count,
                            }))}
                            dataKey="count"
                            nameKey="name"
                        />

                        <DashboardPieChart
                            title="Pesanan per Status"
                            data={orderStats.by_status.map((item) => ({
                                name: item.label,
                                count: item.count,
                            }))}
                            dataKey="count"
                            nameKey="name"
                        />
                    </div>
                )}

                {can('analysis.expense') && (
                    <Card className="py-0" style={{ order: sectionOrder.expense ?? 99 }}>
                        <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                            <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
                                <CardTitle>Pengeluaran</CardTitle>
                            </div>
                            <div className="flex flex-col sm:flex-row">
                                {visibleExpenseCharts.map((key) => {
                                    const value = key === 'total' ? expenseSummary.total : key === 'purchase' ? expenseSummary.purchase_total : key === 'expense' ? expenseSummary.expense_total : expenseSummary.advance_total;
                                    return (
                                        <button
                                            key={key}
                                            data-active={activeExpenseKey === key}
                                            className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l data-[active=true]:bg-muted/30 sm:border-t-0 sm:border-l sm:px-5 sm:py-3"
                                            onClick={() => setActiveExpenseKey(key)}
                                        >
                                            <span className="text-[10px] text-muted-foreground">
                                                {expenseChartConfig[key].label}
                                            </span>
                                            <span className="text-xs leading-none font-semibold sm:text-sm">
                                                Rp{formatRupiah(value)}
                                            </span>
                                        </button>
                                    );
                                })}
                            </div>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {monthlyExpense.length > 0 ? (
                                <ChartContainer config={expenseChartConfig} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={monthlyExpense} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">{expenseChartConfig[activeExpenseKey]?.label ?? name}</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                Rp{Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey={activeExpenseKey} fill={`var(--color-${activeExpenseKey})`} radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data pengeluaran</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.profit_orders') && (
                    <div style={{ order: sectionOrder.totalOrder ?? 99 }}>
                        <StatCard
                            title="Total Order"
                            icon={ShoppingCart}
                            mainLabel="Pesanan Selesai"
                            mainValue={profitMetrics.total_orders.toLocaleString('id-ID')}
                            items={[
                                { label: 'Produk Terjual', value: profitMetrics.total_products_sold.toLocaleString('id-ID') },
                                { label: 'Item/Transaksi', value: profitMetrics.items_per_transaction },
                                { label: 'Rata-rata/Transaksi', value: `Rp${formatRupiah(profitMetrics.aov)}` },
                            ]}
                        />
                    </div>
                )}

                {can('analysis.revenue_trend') && (
                    <Card className="py-0" style={{ order: sectionOrder.revenueTrend ?? 99 }}>
                        <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                            <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
                                <CardTitle>Trend Penjualan</CardTitle>
                            </div>
                            <div className="flex flex-col sm:flex-row">
                                {revenueTrendKeys.map((key) => {
                                    const total = revenueTrend.reduce((acc, item) => acc + (item[key] ?? 0), 0);
                                    return (
                                        <button
                                            key={key}
                                            data-active={false}
                                            className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l sm:border-t-0 sm:border-l sm:px-5 sm:py-3"
                                        >
                                            <span className="text-[10px] text-muted-foreground">
                                                {revenueTrendChartConfig[key].label}
                                            </span>
                                            <span className="text-xs leading-none font-semibold sm:text-sm">
                                                {total.toLocaleString('id-ID')}
                                            </span>
                                        </button>
                                    );
                                })}
                            </div>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {revenueTrend.length > 0 ? (
                                <ChartContainer config={revenueTrendChartConfig} className="aspect-auto h-[250px] w-full">
                                    <LineChart data={revenueTrend} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis
                                            dataKey="date"
                                            tickLine={false}
                                            axisLine={false}
                                            tickMargin={8}
                                            minTickGap={32}
                                            tickFormatter={(value) => {
                                                const date = new Date(value);
                                                return date.toLocaleDateString('id-ID', { day: 'numeric', month: 'short' });
                                            }}
                                        />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    labelFormatter={(value) => {
                                                        return new Date(value).toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
                                                    }}
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">{revenueTrendChartConfig[item.dataKey as keyof typeof revenueTrendChartConfig]?.label ?? name}</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                {Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Line dataKey="qty" type="monotone" stroke="var(--color-qty)" strokeWidth={2} dot={false} />
                                    </LineChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[300px] items-center justify-center text-muted-foreground">Belum ada data trend pendapatan</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.marketing_sales') && (
                    <Card style={{ order: sectionOrder.marketingSales ?? 99 }}>
                        <CardHeader>
                            <CardTitle>Penjualan Marketing</CardTitle>
                        </CardHeader>
                        <CardContent>
                            {marketingSales.length > 0 ? (
                                <div className="overflow-x-auto">
                                    <table className="w-full text-sm">
                                        <thead>
                                            <tr className="border-b">
                                                <th className="px-4 py-3 text-left font-medium text-muted-foreground">Marketing</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Total Order</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Produk Terjual</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Total Pendapatan</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Total Subtotal</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Total Diskon</th>
                                                <th className="px-4 py-3 text-right font-medium text-muted-foreground">Rata-rata Order</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {marketingSales.map((item, index) => (
                                                <tr key={index} className="border-b last:border-0">
                                                    <td className="px-4 py-3 font-medium">{item.marketing_name}</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">{item.total_orders.toLocaleString('id-ID')}</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">{item.total_products_sold.toLocaleString('id-ID')} pcs</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">Rp{formatRupiah(item.total_revenue)}</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">Rp{formatRupiah(item.total_subtotal)}</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">Rp{formatRupiah(item.total_discount)}</td>
                                                    <td className="px-4 py-3 text-right tabular-nums">Rp{formatRupiah(item.avg_order)}</td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            ) : (
                                <div className="flex h-[150px] items-center justify-center text-muted-foreground">Belum ada data penjualan marketing</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.top_suppliers') && (
                    <Card style={{ order: sectionOrder.topSuppliers ?? 99 }}>
                        <CardHeader>
                            <CardTitle className="text-base">Top 5 Supplier</CardTitle>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {topSuppliers.length > 0 ? (
                                <ChartContainer config={{ amount: { label: 'Total Pembelian', color: 'var(--chart-1)' } }} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={topSuppliers.map((s) => ({ name: s.name.length > 15 ? s.name.substring(0, 15) + '...' : s.name, amount: s.total_amount }))} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">Total Pembelian</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                Rp{Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey="amount" fill="var(--color-amount)" radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[250px] items-center justify-center text-muted-foreground">Belum ada data supplier</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.top_products') && (
                    <Card style={{ order: sectionOrder.topProducts ?? 99 }}>
                        <CardHeader>
                            <CardTitle className="text-base">Top 5 Produk</CardTitle>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {topProducts.length > 0 ? (
                                <ChartContainer config={{ qty: { label: 'Jumlah Terjual', color: 'var(--chart-3)' } }} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={topProducts.map((p) => ({ name: p.name.length > 20 ? p.name.substring(0, 20) + '...' : p.name, qty: p.total_qty }))} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">Jumlah Terjual</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                {Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey="qty" fill="var(--color-qty)" radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[250px] items-center justify-center text-muted-foreground">Belum ada data produk</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.top_customers') && (
                    <Card style={{ order: sectionOrder.topCustomers ?? 99 }}>
                        <CardHeader>
                            <CardTitle className="text-base">Top 5 Pelanggan</CardTitle>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {topCustomers.length > 0 ? (
                                <ChartContainer config={{ amount: { label: 'Total Pesanan', color: 'var(--chart-2)' } }} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={topCustomers.map((c) => ({ name: c.name.length > 15 ? c.name.substring(0, 15) + '...' : c.name, amount: c.total_amount }))} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">Total Pesanan</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                Rp{Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey="amount" fill="var(--color-amount)" radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[250px] items-center justify-center text-muted-foreground">Belum ada data pelanggan</div>
                            )}
                        </CardContent>
                    </Card>
                )}

                {can('analysis.busy_hours') && (
                    <Card className="py-0" style={{ order: sectionOrder.busyHours ?? 99 }}>
                        <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
                            <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
                                <CardTitle>Jam Sibuk Toko</CardTitle>
                            </div>
                            <div className="flex flex-col sm:flex-row">
                                <div className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l sm:border-t-0 sm:border-l sm:px-5 sm:py-3">
                                    <span className="text-[10px] text-muted-foreground">Jam Tersibuk</span>
                                    <span className="text-xs leading-none font-semibold sm:text-sm text-primary">{peakHour.hour}</span>
                                </div>
                                <div className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-2 text-left even:border-l data-[active=true]:bg-muted/30 sm:border-t-0 sm:border-l sm:px-5 sm:py-3">
                                    <span className="text-[10px] text-muted-foreground">Pesanan</span>
                                    <span className="text-xs leading-none font-semibold sm:text-sm">{peakHour.orders.toLocaleString('id-ID')}</span>
                                </div>
                            </div>
                        </CardHeader>
                        <CardContent className="px-2 sm:p-6">
                            {busyHours.length > 0 ? (
                                <ChartContainer config={{ orders: { label: 'Pesanan', color: 'var(--chart-1)' } }} className="aspect-auto h-[250px] w-full">
                                    <BarChart data={busyHours} margin={{ left: 12, right: 12 }}>
                                        <CartesianGrid vertical={false} />
                                        <XAxis dataKey="hour" tickLine={false} axisLine={false} tickMargin={8} />
                                        <ChartTooltip
                                            cursor={false}
                                            content={
                                                <ChartTooltipContent
                                                    className="w-[150px]"
                                                    nameKey="views"
                                                    formatter={(value, name, item, index) => (
                                                        <>
                                                            <div
                                                                className="h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)"
                                                                style={{ "--color-bg": item.payload?.fill ?? item.color, "--color-border": item.payload?.fill ?? item.color } as React.CSSProperties}
                                                            />
                                                            <span className="text-muted-foreground">Pesanan</span>
                                                            <span className="ml-auto font-mono font-medium text-foreground tabular-nums">
                                                                {Number(value).toLocaleString('id-ID')}
                                                            </span>
                                                        </>
                                                    )}
                                                />
                                            }
                                        />
                                        <Bar dataKey="orders" fill="var(--color-orders)" radius={[4, 4, 0, 0]} />
                                    </BarChart>
                                </ChartContainer>
                            ) : (
                                <div className="flex h-[250px] items-center justify-center text-muted-foreground">Belum ada data pesanan</div>
                            )}
                        </CardContent>
                    </Card>
                )}
            </div>
        </>
    );
}