<template>
    <NuxtLayout name="main">
        <main class="p-4 md:p-6">
            <h1 class="text-2xl font-bold mb-6">Dashboard Overview</h1>

            <MyUiHomeStatsCard />

            <MyUiHomeChartSession />

            <MyUiHomeLowStock />

            <!-- Prediction Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <NuxtUiCard class="bg-white dark:bg-gray-800">
                    <div class="p-4">
                        <h3 class="text-lg font-medium mb-4">Next Week Prediction</h3>
                        <div class="space-y-4">
                            <div v-for="(prediction, index) in weeklyPredictions" :key="index"
                                class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="w-8 h-8 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                        <Icon name="lucide:package" class="w-4 h-4 text-gray-500 dark:text-gray-400" />
                                    </div>
                                    <div>
                                        <p class="font-medium">{{ prediction.name }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">{{
                                            prediction.category }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium">{{ prediction.predicted }} units</p>
                                    <p class="text-sm"
                                        :class="prediction.change > 0 ? 'text-green-500' : 'text-red-500'">
                                        {{ prediction.change > 0 ? '+' : '' }}{{ prediction.change }}%
                                    </p>
                                </div>
                            </div>
                        </div>
                        <NuxtUiButton variant="outline" class="w-full mt-4">View Detailed Forecast
                        </NuxtUiButton>
                    </div>
                </NuxtUiCard>

                <NuxtUiCard class="bg-white dark:bg-gray-800">
                    <div class="p-4">
                        <h3 class="text-lg font-medium mb-4">Next Month Prediction</h3>
                        <div class="space-y-4">
                            <div v-for="(prediction, index) in monthlyPredictions" :key="index"
                                class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div
                                        class="w-8 h-8 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                        <Icon name="lucide:package" class="w-4 h-4 text-gray-500 dark:text-gray-400" />
                                    </div>
                                    <div>
                                        <p class="font-medium">{{ prediction.name }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">{{
                                            prediction.category }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="font-medium">{{ prediction.predicted }} units</p>
                                    <p class="text-sm"
                                        :class="prediction.change > 0 ? 'text-green-500' : 'text-red-500'">
                                        {{ prediction.change > 0 ? '+' : '' }}{{ prediction.change }}%
                                    </p>
                                </div>
                            </div>
                        </div>
                        <NuxtUiButton variant="outline" class="w-full mt-4">View Detailed Forecast
                        </NuxtUiButton>
                    </div>
                </NuxtUiCard>
            </div>
        </main>
    </NuxtLayout>
</template>
<script lang="ts" setup>
import { MyUiHomeStatsCard } from '#components';

definePageMeta({
    middleware: 'authentication'
})

// Chart references
const salesChart = ref(null);
const forecastChart = ref(null);

// Dropdown options
const forecastTimeframe = ref('Next Week');
const timeframeOptions = ['This Week', 'This Month', 'This Quarter', 'This Year'];
const forecastOptions = ['Next Week', 'Next Month', 'Next Quarter'];

// Sample data for low stock products
const lowStockProducts = ref([
    { name: 'Laptop Asus ROG', category: 'Electronics', stock: 5, threshold: 10 },
    { name: 'Samsung Galaxy S21', category: 'Smartphones', stock: 3, threshold: 15 },
    { name: 'Logitech MX Master', category: 'Accessories', stock: 2, threshold: 8 },
    { name: 'Sony WH-1000XM4', category: 'Audio', stock: 0, threshold: 5 },
    { name: 'iPad Pro 12.9"', category: 'Tablets', stock: 4, threshold: 10 }
]);

// Sample data for weekly predictions
const weeklyPredictions = ref([
    { name: 'Laptop Asus ROG', category: 'Electronics', predicted: 12, change: -15 },
    { name: 'Samsung Galaxy S21', category: 'Smartphones', predicted: 25, change: 10 },
    { name: 'Logitech MX Master', category: 'Accessories', predicted: 18, change: 5 },
    { name: 'Sony WH-1000XM4', category: 'Audio', predicted: 8, change: -8 }
]);

// Sample data for monthly predictions
const monthlyPredictions = ref([
    { name: 'Laptop Asus ROG', category: 'Electronics', predicted: 45, change: 12 },
    { name: 'Samsung Galaxy S21', category: 'Smartphones', predicted: 120, change: 25 },
    { name: 'Logitech MX Master', category: 'Accessories', predicted: 75, change: -5 },
    { name: 'Sony WH-1000XM4', category: 'Audio', predicted: 30, change: 18 }
]);

onMounted(() => {
    // This would be replaced with actual Chart.js implementation
    // For this example, we're just simulating the charts would be initialized here
    console.log('Charts would be initialized here with Chart.js');

    // In a real implementation, you would have:
    // import Chart from 'chart.js/auto'
    // new Chart(salesChart.value.getContext('2d'), { 
    //   type: 'line',
    //   data: { ... },
    //   options: { ... }
    // })

    // new Chart(forecastChart.value.getContext('2d'), { 
    //   type: 'bar',
    //   data: { ... },
    //   options: { ... }
    // })
});
</script>