<template>
    <div class="content-wrapper">
        <app-breadcrumb :page-title="pageTitle" :icon="pageIcon" />
        <div class="row" v-if="$can('view_completion_overview') || $can('view_top_token_consumer')">
            <div class="mb-primary" v-if="$can('view_completion_overview')" :class="$can('view_top_token_consumer')? 'col-xl-8':'col-xl-12'">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ $t("completion_overview") }}</h5>
                        <ul class="nav tab-filter-menu justify-content-flex-end">
                            <li class="nav-item" v-for="(item, index) in chartFilterOptions" :key="index">
                                <a href="#" class="nav-link py-0" :class="[
                                        completionFilter == item.id
                                            ? 'active'
                                            : index === 0 && completionFilter === ''
                                                ? 'active'
                                                : '',
                                    ]" @click.prevent="completionsFilterValue(item.id)">
                                    {{ item.value }}
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body min-height-300">
                        <app-overlay-loader v-if="completionOverviewPreloader" />
                        <template v-else>
                            <app-chart class="mb-primary" type="custom-line-chart" :height="230"
                                :labels="completionLineChartLabels" :data-sets="completionLineChartData" />

                            <div class="chart-data-list d-flex flex-wrap justify-content-center">
                                <div class="data-group-item" style="color: #4466f2">
                                    <span class="square d-inline-block mr-2" style="background-color: #4466f2" />
                                    {{ $t("total_token") }}

                                    <span class="value d-inline-block ml-2">{{ totalToken }}</span>
                                </div>
                                <div class="data-group-item" style="color: #27ae60">
                                    <span class="square d-inline-block mr-2" style="background-color: #27ae60" />
                                    {{ $t("completion_token") }}

                                    <span class="value d-inline-block ml-2">{{ completionToken }}</span>
                                </div>
                                <div class="data-group-item" style="color: #a45ffd">
                                    <span class="square d-inline-block mr-2" style="background-color: #a45ffd" />
                                    {{ $t("prompt_token") }}

                                    <span class="value d-inline-block ml-2">{{ promptToken }}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 mb-primary" v-if="$can('view_top_token_consumer')">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ $t("top_three_token_consumer") }}</h5>
                    </div>
                    <div class="card-body min-height-315">
                        <app-overlay-loader v-if="topConsumerPreloader" />
                        <app-chart v-else type="bar-chart" :height="260" :labels="topTokenConsumer.label"
                            :data-sets="topTokenConsumer.data" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row"
            v-if="$can('view_user_summary') || $can('view_completion_summary') || $can('view_top_3_post_creator')">
            <div class="col-xl-4 mb-primary" v-if="$can('view_user_summary')">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            {{ $t("total_user") }}
                        </h5>
                    </div>
                    <div class="card-body p-primary">
                        <app-overlay-loader v-if="userCardPreloader" />
                        <div v-else>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-check" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ userCard.total_active }}</h6>
                                    <p>{{ $t("active_user") }}</p>
                                </div>
                            </div>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-x" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ userCard.total_de_active }}</h6>
                                    <p>{{ $t("de_active_user") }}</p>
                                </div>
                            </div>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-plus" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ userCard.total_invited }}</h6>
                                    <p>{{ $t("invited_user") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 mb-primary" v-if="$can('view_completion_summary')">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            {{ $t("total_completion") }}
                        </h5>
                    </div>
                    <div class="card-body p-primary">
                        <app-overlay-loader v-if="completionSummeryPreloader" />
                        <div v-else>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-check" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ completionSummary.prompt_token ?? 0 }}</h6>
                                    <p>{{ $t("total_prompt_token") }}</p>
                                </div>
                            </div>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-x" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ completionSummary.completion_token ?? 0 }}</h6>
                                    <p>{{ $t("total_completion_token") }}</p>
                                </div>
                            </div>
                            <div class="dashboard-widgets dashboard-icon-widget pb-primary">
                                <div class="icon-wrapper">
                                    <app-icon key="user-plus" name="user-check" />
                                </div>
                                <div class="widget-data">
                                    <h6>{{ completionSummary.total_token ?? 0 }}</h6>
                                    <p>{{ $t("total_token") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4 mb-primary" v-if="$can('view_top_token_consumer')">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ $t("top_three_documenter") }}</h5>
                    </div>
                    <div class="card-body min-height-315">
                        <app-overlay-loader v-if="topDocumenterPreloader" />
                        <app-chart v-else type="bar-chart" :height="260" :labels="topDocumenter.label"
                            :data-sets="topDocumenter.data" />
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="$can('view_document_overview')">
            <div class="col-xl-12 mb-primary">
                <div class="card card-with-shadow border-0 h-100">
                    <div class="card-header bg-transparent p-primary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ $t("document_overview") }}</h5>
                        <ul class="nav tab-filter-menu justify-content-flex-end">
                            <li class="nav-item" v-for="(item, index) in chartFilterOptions" :key="index">
                                <a href="#" class="nav-link py-0" :class="[
                                        documentFilter == item.id
                                            ? 'active'
                                            : index === 0 && documentFilter === ''
                                                ? 'active'
                                                : '',
                                    ]" @click.prevent="documentFilterValue(item.id)">
                                    {{ item.value }}
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body min-height-300">
                        <app-overlay-loader v-if="documentOverviewPreloader" />
                        <template v-else>
                            <app-chart class="mb-primary" type="custom-line-chart" :height="230"
                                :labels="documentLineChartLabels" :data-sets="documentLineChartData" />

                            <div class="chart-data-list d-flex flex-wrap justify-content-center">
                                <div class="data-group-item" style="color: #4466f2">
                                    <span class="square d-inline-block mr-2" style="background-color: #4466f2" />
                                    {{ $t("total_document") }}

                                    <span class="value d-inline-block ml-2">{{ totalDocument }}</span>
                                </div>
                                <div class="data-group-item" style="color: #27ae60">
                                    <span class="square d-inline-block mr-2" style="background-color: #27ae60" />
                                    {{ $t("total_completion") }}

                                    <span class="value d-inline-block ml-2">{{ totalCompletion }}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { axiosGet } from "../../helpers/AxiosHelper";

import { COMPLETION_SUMMARY } from "../../config/ApiUrl";

export default {
    data() {
        return {
            pageTitle: 'Dashboard',
            pageIcon: 'settings',
            userCardPreloader: false,
            postCardPreloader: false,
            topDocumenterPreloader: false,
            topConsumerPreloader: false,
            completionOverviewPreloader: false,
            documentOverviewPreloader: false,
            completionSummeryPreloader: false,
            userCard: {},
            postCard: {},
            completionSummary: {},
            chartFilterOptions: [
                { id: "last_seven_days", value: this.$t("last_seven_days") },
                { id: "this_week", value: this.$t("this_week") },
                { id: "last_week", value: this.$t("last_week") },
                { id: "this_month", value: this.$t("this_month") },
                { id: "last_month", value: this.$t("last_month") },
                { id: "this_year", value: this.$t("this_year") },
                { id: "total", value: this.$t("total") },
            ],
            completionFilter: "last_seven_days",
            completionLineChartLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            completionLineChartData: [
                {
                    title: this.$t("total_token"),
                    fill: false,
                    borderWidth: 1.5,
                    borderColor: "#4466F2",
                    backgroundColor: "#4466F2",
                    data: [],
                },
                {
                    title: this.$t("completion_token"),
                    fill: false,
                    borderWidth: 1.5,
                    borderColor: "#27AE60",
                    backgroundColor: "#27AE60",
                    data: [],
                },
                {
                    title: this.$t("prompt_token"),
                    fill: false,
                    borderWidth: 1.5,
                    borderColor: "#A45FFD",
                    backgroundColor: "#A45FFD",
                    data: [],
                },
            ],
            totalToken: 0,
            completionToken: 0,
            promptToken: 0,

            totalDocument: 0,
            totalCompletion: 0,
            documentFilter: "last_seven_days",
            documentLineChartLabels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
            documentLineChartData: [
                {
                    title: this.$t("total_document"),
                    fill: false,
                    borderWidth: 1.5,
                    borderColor: "#4466F2",
                    backgroundColor: "#4466F2",
                    data: [],
                },
                {
                    title: this.$t("total_completion"),
                    fill: false,
                    borderWidth: 1.5,
                    borderColor: "#27AE60",
                    backgroundColor: "#27AE60",
                    data: [],
                },
            ],
            // Top token cosumer - bar chart
            topTokenConsumer: {
                label: [],
                data: [
                    {
                        label: "Token",
                        backgroundColor: "#4466F2",
                        barThickness: 15,
                        data: [],
                        borderWidth: 0,
                    },
                ],
            },
            topDocumenter: {
                label: [],
                data: [
                    {
                        label: "Document",
                        backgroundColor: "#4466F2",
                        barThickness: 15,
                        data: [],
                        borderWidth: 0,
                    },
                ],
            },
        }
    },
    methods: {
        getUserCard() {
            this.userCardPreloader = true;
            axiosGet(`user-card`).then(({ data }) => {
                this.userCard = data;
            }).finally(() => this.userCardPreloader = false)
        },
        getCompletionSummary() {
            this.completionSummeryPreloader = true;
            axiosGet(COMPLETION_SUMMARY).then(({ data }) => {
                this.completionSummary = data.data;
            }).finally(() => this.completionSummeryPreloader = false)
        },
        getPostCard() {
            this.postCardPreloader = true;
            axiosGet(`post-card`).then(({ data }) => {
                this.postCard = data;
            }).finally(() => this.postCardPreloader = false)
        },
        getTopDocumenter() {
            this.topDocumenterPreloader = true;
            axiosGet(`top-documenter`).then(({ data }) => {
                this.topDocumenter.label = data.labels
                this.topDocumenter.data[0].data = data.documents
            }).finally(() => this.topDocumenterPreloader = false)
        },
        getTopTokenConsumer() {
            this.topConsumerPreloader = true;
            axiosGet(`top-token-consumer`).then(({ data }) => {
                this.topTokenConsumer.label = data.labels
                this.topTokenConsumer.data[0].data = data.consumers
            }).finally(() => this.topConsumerPreloader = false)
        },
        completionsFilterValue(value) {
            this.completionFilter = value;
            this.completionOverviewPreloader = true;
            axiosGet(`completion-overview` + "?" + this.completionFilter)
                .then((response) => {
                    if (
                        this.completionFilter === "last_seven_days" ||
                        this.completionFilter === "this_week" ||
                        this.completionFilter === "last_week"
                    ) {
                        this.completionLineChartLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                    } else if (
                        this.completionFilter === "this_month" ||
                        this.completionFilter === "last_month"
                    ) {
                        this.completionLineChartLabels = response.data.completion_overview[0].map((e, i) => {
                            return i + 1;
                        });
                    } else if (this.completionFilter === "this_year" || this.completionFilter === "total") {
                        this.completionLineChartLabels = [
                            "Jan",
                            "Feb",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ];
                    }

                    this.completionLineChartData.forEach((element, index) => {
                        element.data = response.data.completion_overview[index];
                    });

                    this.totalToken = response.data.total_tokens; // Total public post
                    this.completionToken = response.data.completion_tokens; // Total team post
                    this.promptToken = response.data.prompt_tokens; // Total post
                })
                .finally(() => {
                    this.completionOverviewPreloader = false;
                });
        },
        documentFilterValue(value) {
            this.documentFilter = value;
            this.documentOverviewPreloader = true;
            axiosGet(`document-overview` + "?" + this.documentFilter)
                .then((response) => {
                    if (
                        this.documentFilter === "last_seven_days" ||
                        this.documentFilter === "this_week" ||
                        this.documentFilter === "last_week"
                    ) {
                        this.documentLineChartLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
                    } else if (
                        this.documentFilter === "this_month" ||
                        this.documentFilter === "last_month"
                    ) {
                        this.documentLineChartLabels = response.data.document_overview[0].map((e, i) => {
                            return i + 1;
                        });
                    } else if (this.documentFilter === "this_year" || this.documentFilter === "total") {
                        this.documentLineChartLabels = [
                            "Jan",
                            "Feb",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ];
                    }

                    this.documentLineChartData.forEach((element, index) => {
                        element.data = response.data.document_overview[index];
                    });

                    this.totalDocument = response.data.total_documents;
                    this.totalCompletion = response.data.total_completions;
                })
                .finally(() => {
                    this.documentOverviewPreloader = false;
                });
        },
    },
    created() {
        if (this.$can("view_completion_overview")) {
            this.completionsFilterValue('last_seven_days');
        }
        if (this.$can("view_document_overview")) {
            this.documentFilterValue('last_seven_days');
        }
        if (this.$can("view_top_documenter")) {
            this.getTopDocumenter();
        }
        if (this.$can("view_user_summary")) {
            this.getUserCard();
        }
        if (this.$can("view_completion_summary")) {
            this.getCompletionSummary();
        }
        if (this.$can("view_top_token_consumer")) {
            this.getTopTokenConsumer();
        }
    }
}
</script>

<style scoped>
.dashboard-badge {
    background-color: var(--base-color) !important;
    color: #4466F2 !important;
    height: 40px !important;
    font-size: 20px;
    padding: 0.52em 0.95em !important;
}

.min-height-315 {
    min-height: 315px !important;
}
</style>