<script setup lang="ts">
import { Head, usePage } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import { MainService } from '@/Stores/main';
import {
    mdiAccountMultiple,
    mdiDatabaseOutline,
    mdiChartTimelineVariant,
    mdiFinance,
    mdiMonitorCellphone,
    mdiReload,
    mdiChartPie,
    mdiTrendingUp,
} from '@mdi/js';
import LineChart from '@/Components/Charts/LineChart.vue';
import SectionMain from '@/Components/SectionMain.vue';
import CardBoxWidget from '@/Components/CardBoxWidget.vue';
import CardBox from '@/Components/CardBox.vue';
import TableSampleClients from '@/Components/TableSampleClients.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import CardBoxDataset from '@/Components/CardBoxDataset.vue';
import type { User } from '@/Dataset';

const mainService = MainService();

const isLoadingChart = ref(false);

const fillChartData = async () => {
    isLoadingChart.value = true;
    try {
        await mainService.fetchChartData();
    } finally {
        isLoadingChart.value = false;
    }
};

const chartData = computed(() => mainService.graphData);
const authors = computed(() => mainService.authors);
const datasets = computed(() => mainService.datasets);
const datasetBarItems = computed(() => mainService.datasets.slice(0, 5));
const submitters = computed(() => mainService.clients);
const user = computed(() => usePage().props.authUser as User);

// Initialize data
mainService.fetchApi('clients');
mainService.fetchApi('authors');
mainService.fetchApi('datasets');
mainService.fetchChartData();

const userHasRoles = (roleNames: Array<string>): boolean => {
    return user.value.roles.some((role) => roleNames.includes(role.name));
};
</script>

<template>
    <LayoutAuthenticated :showAsideMenu="false">
        <Head title="Dashboard" />

        <SectionMain>
            <SectionTitleLineWithButton :icon="mdiChartTimelineVariant" title="Dashboard Overview" main>
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    Welcome back, <span class="font-semibold">{{ user.login }}</span>
                </div>
            </SectionTitleLineWithButton>

            <!-- Stats Grid -->
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
                <CardBoxWidget
                    trend="12%"
                    trend-type="up"
                    color="text-emerald-500"
                    :icon="mdiAccountMultiple"
                    :number="authors.length"
                    label="Authors"
                    class="hover:shadow-lg transition-shadow duration-300"
                />
                <CardBoxWidget
                    trend-type="info"
                    color="text-blue-500"
                    :icon="mdiDatabaseOutline"
                    :number="datasets.length"
                    label="Publications"
                    class="hover:shadow-lg transition-shadow duration-300"
                />
                <CardBoxWidget
                    trend-type="up"
                    color="text-purple-500"
                    :icon="mdiChartTimelineVariant"
                    :number="submitters.length"
                    label="Submitters"
                    class="hover:shadow-lg transition-shadow duration-300"
                />
            </div>

                 <!-- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
               <div class="flex flex-col justify-between">
                    <CardBoxClient
                        v-for="client in authorBarItems"
                        :key="client.id"
                        :name="client.name"
                        :email="client.email"
                        :date="client.created_at"
                        :text="client.identifier_orcid"
                        :count="client.dataset_count"
                        
                    />
                </div>  <!-- 
                <div class="flex flex-col justify-between">
                    <CardBoxDataset
                        v-for="(dataset, index) in datasetBarItems"
                        :key="index"
                       :dataset="dataset"
                    />
                </div>
            </div> 

            <!-- Recent Datasets Section -->
            <div v-if="datasetBarItems.length > 0" class="mb-6">
                <SectionTitleLineWithButton :icon="mdiTrendingUp" title="Recent Publications">
                    <span class="text-sm text-gray-500 dark:text-gray-400"> Latest {{ datasetBarItems.length }} publications </span>
                </SectionTitleLineWithButton>

                <div class="grid grid-cols-1 gap-4">
                    <CardBoxDataset
                        v-for="(dataset, index) in datasetBarItems"
                        :key="index"
                        :dataset="dataset"
                        class="hover:shadow-md transition-all duration-300"
                    />
                </div>
            </div>

            <!-- <SectionBannerStarOnGitHub /> -->

            <!-- Chart Section -->
            <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends Overview" class="mt-8">
                <span class="text-sm text-gray-500 dark:text-gray-400"> Publications per month </span>
            </SectionTitleLineWithButton>

            <CardBox
                title="Performance"
                :icon="mdiFinance"
                :header-icon="mdiReload"
                class="mb-6 shadow-lg"
                @header-icon-click="fillChartData"
            >
                <div v-if="isLoadingChart" class="flex items-center justify-center h-96">
                    <div class="flex flex-col items-center gap-3">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Loading chart data...</p>
                    </div>
                </div>
                <div v-else-if="chartData" class="relative">
                    <line-chart :data="chartData" class="h-96" />
                </div>
                <div v-else class="flex items-center justify-center h-96 text-gray-500 dark:text-gray-400">
                    <p>No chart data available</p>
                </div>
            </CardBox>

            <!-- Admin Section -->
            <template v-if="userHasRoles(['administrator'])">
                <SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters Management" class="mt-8">
                    <span class="text-sm text-gray-500 dark:text-gray-400"> Administrator view </span>
                </SectionTitleLineWithButton>

                <CardBox :icon="mdiMonitorCellphone" title="All Submitters" has-table class="shadow-lg">
                    <TableSampleClients />
                </CardBox>
            </template>

        </SectionMain>
    </LayoutAuthenticated>
</template>
