<script setup lang="ts">
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
import { Head, router } from '@inertiajs/vue3';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Store, Calendar, TrendingUp, ShoppingBag, DollarSign, AlertTriangle, ArrowUpRight, Award, Coffee, Check, Printer } from 'lucide-vue-next';
import VueApexCharts from 'vue3-apexcharts';
import type { ApexOptions } from 'apexcharts';

interface LowStockAlert {
    type: 'Ingredient' | 'Retail Product';
    name: string;
    outlet_name: string;
    stock_qty: number;
    threshold_qty: number;
    unit: string;
}

interface SalesTrendPoint {
    date: string;
    total: number;
    count: number;
}

interface TopProduct {
    name: string;
    category: string;
    qty: number;
    sales: number;
}

interface WaiterData {
    name: string;
    transactions: number;
    sales: number;
}

interface TableTurnoverData {
    number: string;
    transactions: number;
    sales: number;
}

interface PeakHourData {
    hour: string;
    transactions: number;
    sales: number;
}

interface Outlet {
    id: number;
    name: string;
}

const props = defineProps<{
    metrics: {
        total_revenue: number;
        total_transactions: number;
        average_ticket: number;
        low_stock_count: number;
        total_cogs: number;
        food_cost_percentage: number;
        total_waste_cost: number;
    };
    lowStockAlerts: LowStockAlert[];
    salesTrend: SalesTrendPoint[];
    topProducts: TopProduct[];
    outlets: Outlet[];
    filters: {
        outlet_id: number | null;
        start_date: string;
        end_date: string;
    };
    waiterPerformance: WaiterData[];
    tableTurnover: TableTurnoverData[];
    peakHours: PeakHourData[];
}>();

const outletFilter = ref(props.filters.outlet_id || '');
const startDate = ref(props.filters.start_date);
const endDate = ref(props.filters.end_date);

// Apply filters on change
const submitFilters = () => {
    router.get(
        route('reports.index'),
        {
            outlet_id: outletFilter.value,
            start_date: startDate.value,
            end_date: endDate.value,
        },
        { preserveState: true, replace: true }
    );
};

// Watch parameters to auto-submit when changing date or outlet
watch([outletFilter, startDate, endDate], () => {
    submitFilters();
});

// React to dark mode changes
const isDark = ref(false);

onMounted(() => {
    isDark.value = document.documentElement.classList.contains('dark');
    
    const observer = new MutationObserver(() => {
        isDark.value = document.documentElement.classList.contains('dark');
    });
    
    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class']
    });
    
    onUnmounted(() => {
        observer.disconnect();
    });
});

// ApexCharts Configuration
const chartOptions = computed(() => {
    return {
        chart: {
            id: 'sales-trend-chart',
            type: 'area',
            toolbar: {
                show: false
            },
            fontFamily: 'Inter, sans-serif',
            background: 'transparent',
            foreColor: isDark.value ? '#94a3b8' : '#64748b',
        },
        colors: ['#8c5a3c'],
        stroke: {
            curve: 'smooth',
            width: 2.5
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.25,
                opacityTo: 0.02,
                stops: [0, 100]
            }
        },
        markers: {
            size: 4,
            colors: ['#ffffff'],
            strokeColors: '#8c5a3c',
            strokeWidth: 2,
            hover: {
                size: 6
            }
        },
        xaxis: {
            categories: props.salesTrend.map(p => {
                const d = new Date(p.date);
                return `${d.getDate()}/${d.getMonth() + 1}`;
            }),
            axisBorder: {
                show: false
            },
            axisTicks: {
                show: false
            },
            labels: {
                style: {
                    colors: isDark.value ? '#94a3b8' : '#64748b'
                }
            }
        },
        yaxis: {
            labels: {
                style: {
                    colors: isDark.value ? '#94a3b8' : '#64748b'
                },
                formatter: (value: number) => {
                    return `Rp ${(value / 1000).toFixed(0)}k`;
                }
            }
        },
        grid: {
            borderColor: isDark.value ? '#334155' : '#e2e8f0',
            strokeDashArray: 4,
            xaxis: {
                lines: {
                    show: false
                }
            },
            yaxis: {
                lines: {
                    show: true
                }
            }
        },
        tooltip: {
            theme: isDark.value ? 'dark' : 'light',
            y: {
                formatter: (value: number) => {
                    return `Rp ${value.toLocaleString('id-ID')}`;
                }
            }
        },
        dataLabels: {
            enabled: false
        }
    } as ApexOptions;
});

const chartSeries = computed(() => {
    return [
        {
            name: 'Omzet',
            data: props.salesTrend.map(p => p.total)
        }
    ];
});

const maxQtySold = computed(() => {
    return Math.max(...props.topProducts.map(p => p.qty), 1);
});
</script>

<template>
    <Head title="Owner Reports & Analytics" />

    <AdminLayout>
        <div class="space-y-6">
            <!-- Header section & filter toolbar -->
            <div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
                <div>
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-50">Reports & Analytics</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                        Consolidated revenue overview, sales trend graphs, best selling items, and stock warning reports.
                    </p>
                </div>

                <!-- Right Side Toolbar: Filters & Actions -->
                <div class="flex flex-wrap items-center justify-end gap-3 w-full xl:w-auto">
                    <!-- Filter Controls -->
                    <div class="flex flex-wrap items-center gap-3 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-3 shadow-sm">
                        <div class="flex items-center gap-1 text-slate-500 dark:text-slate-400 text-xs font-semibold uppercase pr-2 border-r border-slate-100 dark:border-slate-800">
                            <Store class="h-4 w-4" />
                            <span>Filter</span>
                        </div>

                        <!-- Outlet dropdown -->
                        <select
                            v-model="outletFilter"
                            class="px-2.5 py-1.5 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-medium focus:outline-none text-slate-900 dark:text-slate-100"
                        >
                            <option value="" class="dark:bg-slate-950">All Outlets</option>
                            <option v-for="ot in outlets" :key="ot.id" :value="String(ot.id)" class="dark:bg-slate-950">{{ ot.name }}</option>
                        </select>

                        <!-- Start date picker -->
                        <div class="flex items-center gap-1.5">
                            <input
                                v-model="startDate"
                                type="date"
                                class="px-2.5 py-1.5 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-medium focus:outline-none text-slate-900 dark:text-slate-100"
                            />
                            <span class="text-xs text-slate-400">to</span>
                            <input
                                v-model="endDate"
                                type="date"
                                class="px-2.5 py-1.5 border border-slate-200 dark:border-slate-800 rounded-lg bg-white dark:bg-slate-950 text-xs font-medium focus:outline-none text-slate-900 dark:text-slate-100"
                            />
                        </div>
                    </div>

                    <!-- Print Button (Extracted Primary Action) -->
                    <a
                        :href="route('reports.print', { outlet_id: outletFilter, start_date: startDate, end_date: endDate })"
                        target="_blank"
                        class="px-3.5 py-2.5 bg-red-600 hover:bg-red-500 text-white rounded-xl text-xs font-bold cursor-pointer transition-all duration-200 flex items-center gap-2 shadow-sm hover:shadow-md hover:-translate-y-0.5 flex-shrink-0"
                    >
                        <Printer class="h-4 w-4" />
                        <span>Cetak Laporan</span>
                    </a>
                </div>
            </div>

            <!-- Dashboard Stats Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
                <!-- Omzet -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between xl:col-span-3">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Total Omzet</span>
                            <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-50">
                                Rp {{ Number(metrics.total_revenue).toLocaleString('id-ID') }}
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400 flex items-center justify-center flex-shrink-0">
                            <DollarSign class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] text-slate-450 dark:text-slate-400 mt-4 flex items-center gap-1 font-medium">
                        <TrendingUp class="h-3.5 w-3.5 text-emerald-500" />
                        <span>Sales revenue consolidated.</span>
                    </div>
                </div>

                <!-- Transactions Count -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Total Transaksi</span>
                            <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-50">
                                {{ metrics.total_transactions }} Orders
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400 flex items-center justify-center flex-shrink-0">
                            <ShoppingBag class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] text-slate-450 dark:text-slate-400 mt-4 flex items-center gap-1 font-medium">
                        <Check class="h-3.5 w-3.5 text-emerald-500" />
                        <span>Valid orders processed.</span>
                    </div>
                </div>

                <!-- Average Ticket Value -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Rata-Rata Transaksi</span>
                            <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-50">
                                Rp {{ Number(metrics.average_ticket).toLocaleString('id-ID') }}
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg bg-red-50 dark:bg-red-950/20 text-red-600 dark:text-red-400 flex items-center justify-center flex-shrink-0">
                            <ArrowUpRight class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] text-slate-450 dark:text-slate-400 mt-4 flex items-center gap-1 font-medium">
                        <span>Average spending per ticket.</span>
                    </div>
                </div>

                <!-- Food Cost / COGS HPP -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Total HPP (F&B Cost)</span>
                            <h3 class="text-xl font-extrabold text-slate-900 dark:text-slate-50">
                                Rp {{ Number(metrics.total_cogs).toLocaleString('id-ID') }}
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg bg-[#8c5a3c]/10 text-[#8c5a3c] flex items-center justify-center flex-shrink-0">
                            <Coffee class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] text-slate-450 dark:text-slate-400 mt-4 flex flex-col gap-1 font-medium">
                        <span>Cost of Goods Sold (BOM recipes)</span>
                    </div>
                </div>

                <!-- Food Cost Ratio -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Rasio Food Cost</span>
                            <h3 class="text-xl font-extrabold" :class="metrics.food_cost_percentage > 35 ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-450'">
                                {{ Number(metrics.food_cost_percentage).toFixed(1) }}%
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg bg-[#8c5a3c]/10 text-[#8c5a3c] flex items-center justify-center flex-shrink-0">
                            <TrendingUp class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] text-slate-450 dark:text-slate-400 mt-4 flex flex-col gap-1 font-medium">
                        <div class="flex items-center justify-between text-[9px] font-bold uppercase text-slate-450">
                            <span>Target: 28% - 35%</span>
                        </div>
                        <div class="w-full bg-slate-100 dark:bg-slate-900 rounded-full h-1 mt-1 overflow-hidden">
                            <div 
                                class="h-full rounded-full transition-all duration-300"
                                :class="metrics.food_cost_percentage > 35 ? 'bg-rose-500' : 'bg-emerald-500'"
                                :style="{ width: Math.min(100, metrics.food_cost_percentage) + '%' }"
                            ></div>
                        </div>
                    </div>
                </div>

                <!-- Low Stock Warn count -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-5 shadow-sm relative overflow-hidden flex flex-col justify-between">
                    <div class="flex items-start justify-between">
                        <div class="space-y-1">
                            <span class="text-[10px] font-bold uppercase text-slate-400 tracking-wider">Peringatan Stok</span>
                            <h3 class="text-xl font-extrabold" :class="metrics.low_stock_count > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-slate-900 dark:text-slate-50'">
                                {{ metrics.low_stock_count }} Items Low
                            </h3>
                        </div>
                        <div class="h-10 w-10 rounded-lg flex items-center justify-center flex-shrink-0" :class="metrics.low_stock_count > 0 ? 'bg-amber-50 dark:bg-amber-95/20 text-amber-600' : 'bg-slate-100 dark:bg-slate-900 text-slate-450'">
                            <AlertTriangle class="h-5 w-5" />
                        </div>
                    </div>
                    <div class="text-[10px] mt-4 flex items-center gap-1 font-medium text-slate-450 dark:text-slate-400">
                        <span v-if="metrics.low_stock_count > 0" class="text-amber-600 dark:text-amber-400">Critical ingredients below threshold.</span>
                        <span v-else>Inventory stock levels healthy.</span>
                    </div>
                </div>
            </div>

            <!-- Charts Section (Line Chart & Bar Chart side by side) -->
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                <!-- Sales Trend ApexChart (8 cols) -->
                <div class="lg:col-span-8 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm flex flex-col space-y-4">
                    <h2 class="text-sm font-bold text-slate-900 dark:text-slate-50 uppercase tracking-wider flex items-center gap-2">
                        <TrendingUp class="h-4.5 w-4.5 text-slate-500" />
                        Tren Penjualan (Omzet Harian)
                    </h2>

                    <!-- Chart Box -->
                    <div class="flex-1 min-h-[250px] relative">
                        <div v-if="salesTrend.length === 0" class="absolute inset-0 flex items-center justify-center text-slate-400 text-xs italic">
                            Tidak ada data penjualan untuk rentang waktu terpilih.
                        </div>
                        
                        <div v-else class="absolute inset-0">
                            <VueApexCharts
                                type="area"
                                height="100%"
                                width="100%"
                                :options="chartOptions"
                                :series="chartSeries"
                            />
                        </div>
                    </div>
                </div>

                <!-- Top Products list (4 cols) -->
                <div class="lg:col-span-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm flex flex-col space-y-4">
                    <h2 class="text-sm font-bold text-slate-900 dark:text-slate-50 uppercase tracking-wider flex items-center gap-2">
                        <Award class="h-4.5 w-4.5 text-slate-500" />
                        Menu Terlaris
                    </h2>

                    <div v-if="topProducts.length === 0" class="flex-1 flex items-center justify-center text-slate-400 text-xs italic py-12">
                        Belum ada pesanan yang tercatat.
                    </div>

                    <div v-else class="space-y-4">
                        <div 
                            v-for="(tp, idx) in topProducts" 
                            :key="idx"
                            class="space-y-1.5"
                        >
                            <!-- Label Info -->
                            <div class="flex items-center justify-between text-xs">
                                <div class="flex items-center gap-2 min-w-0">
                                    <span class="font-bold text-red-600 dark:text-red-400">#{{ idx + 1 }}</span>
                                    <span class="font-semibold text-slate-900 dark:text-slate-100 truncate">{{ tp.name }}</span>
                                </div>
                                <span class="font-mono text-slate-500 dark:text-slate-400">{{ tp.qty }} Porsi</span>
                            </div>
                            
                            <!-- Progress Bar -->
                            <div class="w-full bg-slate-100 dark:bg-slate-900 rounded-full h-2 overflow-hidden">
                                <div 
                                    class="bg-gradient-to-r from-red-600 to-orange-500 h-full rounded-full transition-all duration-300"
                                    :style="{ width: (tp.qty / maxQtySold * 100) + '%' }"
                                ></div>
                            </div>
                            
                            <!-- Sub amount -->
                            <div class="text-[9px] text-slate-450 dark:text-slate-400 text-right font-medium">
                                Omzet: Rp {{ Number(tp.sales).toLocaleString('id-ID') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Waiter, Table & Peak Hours Analytics Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Waiter Performance -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm flex flex-col space-y-4">
                    <h2 class="text-sm font-bold text-slate-900 dark:text-slate-50 uppercase tracking-wider flex items-center gap-2">
                        <User class="h-4.5 w-4.5 text-slate-500" />
                        Performa Pelayan (Waiter)
                    </h2>
                    <div v-if="waiterPerformance.length === 0" class="flex-1 flex items-center justify-center text-slate-400 text-xs italic py-12">
                        Tidak ada data pelayan yang tercatat.
                    </div>
                    <div v-else class="overflow-x-auto max-h-[220px] overflow-y-auto pr-1">
                        <table class="w-full text-left text-xs border-collapse">
                            <thead>
                                <tr class="border-b border-slate-200 dark:border-slate-800 text-slate-400 font-semibold">
                                    <th class="pb-2">Nama Staf</th>
                                    <th class="pb-2 text-center">Transaksi</th>
                                    <th class="pb-2 text-right">Total Penjualan</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-900">
                                <tr v-for="w in waiterPerformance" :key="w.name" class="text-slate-700 dark:text-slate-300">
                                    <td class="py-2.5 font-bold text-slate-900 dark:text-slate-100">{{ w.name }}</td>
                                    <td class="py-2.5 text-center font-semibold">{{ w.transactions }}</td>
                                    <td class="py-2.5 text-right font-bold">Rp {{ Number(w.sales).toLocaleString('id-ID') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Table Turnover -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm flex flex-col space-y-4">
                    <h2 class="text-sm font-bold text-slate-900 dark:text-slate-50 uppercase tracking-wider flex items-center gap-2">
                        <Grid class="h-4.5 w-4.5 text-slate-500" />
                        Okupansi & Siklus Meja
                    </h2>
                    <div v-if="tableTurnover.length === 0" class="flex-1 flex items-center justify-center text-slate-400 text-xs italic py-12">
                        Tidak ada transaksi meja yang tercatat.
                    </div>
                    <div v-else class="overflow-x-auto max-h-[220px] overflow-y-auto pr-1">
                        <table class="w-full text-left text-xs border-collapse">
                            <thead>
                                <tr class="border-b border-slate-200 dark:border-slate-800 text-slate-400 font-semibold">
                                    <th class="pb-2">No. Meja</th>
                                    <th class="pb-2 text-center">Frekuensi</th>
                                    <th class="pb-2 text-right">Total Transaksi</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-900">
                                <tr v-for="t in tableTurnover" :key="t.number" class="text-slate-700 dark:text-slate-300">
                                    <td class="py-2.5 font-bold text-slate-900 dark:text-slate-100">Meja {{ t.number }}</td>
                                    <td class="py-2.5 text-center font-semibold">{{ t.transactions }}x</td>
                                    <td class="py-2.5 text-right font-bold">Rp {{ Number(t.sales).toLocaleString('id-ID') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Peak Hours distribution -->
                <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-xl p-6 shadow-sm flex flex-col space-y-4">
                    <h2 class="text-sm font-bold text-slate-900 dark:text-slate-50 uppercase tracking-wider flex items-center gap-2">
                        <Calendar class="h-4.5 w-4.5 text-slate-500" />
                        Jam Sibuk Operasional (Peak Hours)
                    </h2>
                    <div v-if="peakHours.length === 0" class="flex-1 flex items-center justify-center text-slate-400 text-xs italic py-12">
                        Belum ada data jam operasional.
                    </div>
                    <div v-else class="space-y-3.5 max-h-[220px] overflow-y-auto pr-1">
                        <div v-for="h in peakHours" :key="h.hour" class="space-y-1 text-xs">
                            <div class="flex justify-between items-center text-[11px]">
                                <span class="font-bold text-slate-800 dark:text-slate-200">{{ h.hour }}</span>
                                <span class="font-semibold text-slate-500">{{ h.transactions }} Transaksi</span>
                            </div>
                            <div class="w-full bg-slate-100 dark:bg-slate-900 rounded-full h-1.5 overflow-hidden">
                                <div 
                                    class="bg-gradient-to-r from-[#8c5a3c] to-amber-500 h-full rounded-full transition-all duration-300"
                                    :style="{ width: Math.min(100, (h.transactions / Math.max(...peakHours.map(x => x.transactions), 1)) * 100) + '%' }"
                                ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Low Stock Warnings List -->
            <div class="bg-white dark:bg-slate-955 border border-slate-200 dark:border-slate-805 rounded-xl p-6 shadow-sm space-y-4">
                <h2 class="text-sm font-bold text-rose-600 dark:text-rose-450 uppercase tracking-wider flex items-center gap-2">
                    <AlertTriangle class="h-4.5 w-4.5 text-rose-500" />
                    Peringatan Stok Bahan & Produk Menipis
                </h2>

                <div class="overflow-x-auto">
                    <table class="w-full border-collapse text-left text-xs">
                        <thead>
                            <tr class="border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/10 font-semibold text-slate-500 dark:text-slate-400">
                                <th class="p-3">Item Name</th>
                                <th class="p-3">Stock Type</th>
                                <th class="p-3">Outlet Channel</th>
                                <th class="p-3">Current Balance</th>
                                <th class="p-3 text-right">Minimum Level Alert</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                            <tr v-if="lowStockAlerts.length === 0">
                                <td colspan="5" class="p-4 text-center text-slate-400 italic">
                                    Semua stok bahan baku dan produk di seluruh outlet dalam kondisi aman.
                                </td>
                            </tr>
                            <tr 
                                v-for="(warn, idx) in lowStockAlerts" 
                                :key="idx"
                                class="hover:bg-rose-50/10 dark:hover:bg-rose-950/10 transition-colors text-slate-800 dark:text-slate-300"
                            >
                                <td class="p-3 font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-rose-600 animate-ping"></span>
                                    <span>{{ warn.name }}</span>
                                </td>
                                <td class="p-3 font-semibold">
                                    <span 
                                        :class="[
                                            'px-1.5 py-0.5 rounded text-[10px] font-bold uppercase',
                                            warn.type === 'Ingredient'
                                                ? 'bg-indigo-50 dark:bg-indigo-950/20 text-indigo-750 dark:text-indigo-400'
                                                : 'bg-amber-50 dark:bg-amber-950/20 text-amber-700 dark:text-amber-400'
                                        ]"
                                    >
                                        {{ warn.type }}
                                    </span>
                                </td>
                                <td class="p-3 font-medium">{{ warn.outlet_name }}</td>
                                <td class="p-3 font-bold text-rose-600 dark:text-rose-450">
                                    {{ Number(warn.stock_qty).toLocaleString('id-ID') }} {{ warn.unit }}
                                </td>
                                <td class="p-3 text-right font-mono text-slate-500 dark:text-slate-400">
                                    {{ Number(warn.threshold_qty).toLocaleString('id-ID') }} {{ warn.unit }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
