<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import {computed} from "vue";
import VueApexCharts from 'vue3-apexcharts'

const props = defineProps<{
    metrics?: {
        total: number;
        new: number;
        in_progress: number;
        done: number;
        cancelled: number;
        overdue: number;
        done_today: number;
    };
}>();

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Панель управления',
        href: '/dashboard',
    },
];

const chartSeries = computed(() => [
    {
        name: 'Заявки',
        data: [props.metrics?.overdue ?? 0, props.metrics?.done_today ?? 0]
    }
])

const chartOptions = computed(() => ({
    chart: { type: 'bar', height: 350, toolbar: { show: false } },
    colors: ['#f97316', '#10b981'], // Оранжевый и зелёный
    plotOptions: { bar: { borderRadius: 6, horizontal: false, columnWidth: '50%' } },
    dataLabels: { enabled: false },
    xaxis: { categories: ['Просрочено (3+ дней)', 'Выполнено сегодня'] },
    yaxis: { title: { text: 'Количество заявок' }, max: Math.max(props.metrics?.overdue ?? 0, props.metrics?.done_today ?? 0, 1) + 1, decimalsInFloat: 0, },
    tooltip: { enabled: true },
}))
</script>

<template>
    <Head title="Панель управления" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 flex-col gap-6 p-4">

            <!-- GRID KPI -->
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">

                <div
                    class="flex flex-col justify-between p-4 rounded-xl shadow-md bg-white dark:bg-gray-900 hover:shadow-xl transition-all duration-300 border-l-4 border-gray-300"
                >
                    <span class="text-xs text-gray-500 uppercase">Всего заявок</span>
                    <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ props.metrics?.total ?? 0 }}</span>
                </div>

                <div
                    class="flex flex-col justify-between p-4 rounded-xl shadow-md bg-blue-50 dark:bg-blue-950/20 hover:shadow-xl transition-all duration-300 border-l-4 border-blue-400"
                >
                    <span class="text-xs uppercase font-medium text-blue-700 dark:text-blue-300">Новые</span>
                    <span class="text-3xl font-bold text-blue-700 dark:text-blue-300">{{ props.metrics.new }}</span>
                </div>

                <div
                    class="flex flex-col justify-between p-4 rounded-xl shadow-md bg-amber-50 dark:bg-amber-950/20 hover:shadow-xl transition-all duration-300 border-l-4 border-amber-400"
                >
                    <span class="text-xs uppercase font-medium text-amber-700 dark:text-amber-300">В работе</span>
                    <span class="text-3xl font-bold text-amber-700 dark:text-amber-300">{{ props.metrics.in_progress }}</span>
                </div>

                <div
                    class="flex flex-col justify-between p-4 rounded-xl shadow-md bg-green-50 dark:bg-green-950/20 hover:shadow-xl transition-all duration-300 border-l-4 border-green-400"
                >
                    <span class="text-xs uppercase font-medium text-green-700 dark:text-green-300">Выполнено</span>
                    <span class="text-3xl font-bold text-green-700 dark:text-green-300">{{ props.metrics.done }}</span>
                </div>

                <div
                    class="flex flex-col justify-between p-4 rounded-xl shadow-md bg-red-50 dark:bg-red-950/20 hover:shadow-xl transition-all duration-300 border-l-4 border-red-400"
                >
                    <span class="text-xs uppercase font-medium text-red-700 dark:text-red-300">Отменено</span>
                    <span class="text-3xl font-bold text-red-700 dark:text-red-300">{{ props.metrics.cancelled }}</span>
                </div>

            </div>

            <!-- Нижний большой блок -->
            <div class="relative min-h-[50vh] flex-1 rounded-xl border border-sidebar-border/70 dark:border-sidebar-border overflow-hidden">
                <div class="flex flex-col gap-6 p-4">

                    <!-- KPI карточки -->
                    <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2">
                        <div class="flex flex-col justify-between p-6 rounded-xl shadow-md
                    bg-orange-50 dark:bg-orange-950/20
                    hover:shadow-xl transition-all duration-300">
                          <span class="text-xs uppercase font-medium text-orange-700 dark:text-orange-300">
                            Просрочено (3+ дней)
                          </span>
                                            <span class="text-3xl font-bold text-orange-700 dark:text-orange-300">
                            {{ props.metrics.overdue }}
                          </span>
                        </div>

                        <div class="flex flex-col justify-between p-6 rounded-xl shadow-md
                    bg-emerald-50 dark:bg-emerald-950/20
                    hover:shadow-xl transition-all duration-300">
          <span class="text-xs uppercase font-medium text-emerald-700 dark:text-emerald-300">
            Выполнено сегодня
          </span>
                            <span class="text-3xl font-bold text-emerald-700 dark:text-emerald-300">
            {{ props.metrics.done_today }}
          </span>
                        </div>
                    </div>

                    <!-- График -->
                    <div class="rounded-xl border bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 p-6 shadow-md">
                        <h2 class="text-lg font-semibold mb-4">Сводка по заявкам</h2>
                        <div v-if="props.metrics" class="h-[350px]">
                            <VueApexCharts
                                type="bar"
                                width="100%"
                                height="100%"
                                :options="chartOptions"
                                :series="chartSeries"
                            />
                        </div>
                    </div>

                </div>
                <!-- Здесь можно добавить график или другую визуализацию -->
            </div>
        </div>
    </AppLayout>
</template>

<style scoped>

</style>
