<template>
    <v-row class="mb-3">
        <v-col cols="12" md="6" lg="3" v-for="card in metricCards" :key="card.title">
            <v-card variant="tonal">
                <v-card-title class="text-subtitle-2">{{ card.title }}</v-card-title>
                <v-card-text class="text-h6">{{ card.value }}</v-card-text>
            </v-card>
        </v-col>
    </v-row>

    <v-row>
        <v-col cols="12" md="6" class="d-flex">
            <MembersBarChart
                class="flex-grow-1"
                :data="workLoadAnalysis.data"
                :thresholds="workLoadAnalysis.thresholds"
            />
        </v-col>
        <v-col cols="12" md="6" class="d-flex">
            <TopApplicationsChart
                class="flex-grow-1"
                :apps="applications"
            />
        </v-col>
        <v-col cols="12" md="6" class="d-flex">
            <TopBrowserHostsChart
                class="flex-grow-1"
                :hosts="topBrowserHosts"
            />
        </v-col>
    </v-row>
</template>

<script setup>
import axios from "axios"
import {computed, onMounted, ref} from "vue"
import {currentUser} from "../auth"
import {apiEndpoints} from "../apiEndpoints"
import TopApplicationsChart from "../components/TopApplicationsChart.vue"
import MembersBarChart from "../components/MembersBarChart.vue";
import TopBrowserHostsChart from "../components/TopBrowserHostsChart.vue";
import {useStore} from "vuex";

const metrics = ref({activeUsers: 0})
const workLoadAnalysis = ref([])
const applications = ref([])
const topBrowserHosts = ref([])
const store = useStore()
const organizationId = computed(() => store.getters["auth/organizationId"])

const metricCards = computed(() => [{title: "Total Team Members", value: metrics.value.activeUsers}])

async function fetchDashboard() {
    try {
        const [matricsRes, workLoadAnalysisRes, appsRes, browserHostsRes] = await Promise.all([
            axios.get(`${apiEndpoints.organizations.metrics(organizationId.value)}`),
            axios.get(`${apiEndpoints.organizations.workLoadAnalysis(organizationId.value)}`),
            axios.get(`${apiEndpoints.organizations.applications(organizationId.value)}`),
            axios.get(`${apiEndpoints.organizations.browserHosts(organizationId.value)}`)
        ])
        metrics.value = matricsRes.data
        workLoadAnalysis.value = workLoadAnalysisRes.data
        applications.value = appsRes.data.items || []
        topBrowserHosts.value = browserHostsRes.data.items || []
    } catch (error) {
        if (error?.response?.status === 403 && currentUser.value?.id) {
            const [appsRes] = await Promise.all([
                axios.get(`${apiEndpoints.dashboard.applications}`),
            ])
            metrics.value = {
                activeUsers: 1
            }
            applications.value = appsRes.data.items || []
            topBrowserHosts.value = []
        } else {
            throw error
        }
    }
}

onMounted(fetchDashboard)
</script>
