<script setup>
import {NSkeleton, NStatistic, NRow, NCol, NSpace, NCard, NButton, NTag, NDatePicker, NFlex, NSelect, NText, NNumberAnimation} from "naive-ui";
import {computed, ref} from "vue";
import {format} from "date-fns";
import {useNow} from "@vueuse/core";
import {ru} from "date-fns/locale";
import {useAuthStore} from "../../../Stores/auth.js";
import {storeToRefs} from "pinia";
import {RiAddCircleLine} from 'vue-icons-plus/ri'
import {TbAlertCircle} from 'vue-icons-plus/tb'
import {useReportStore} from "../../../Stores/report.js";
import ReportSelectDate from "../../../Components/ReportSelectDate.vue";
import DepartmentSelect from "../../../Components/DepartmentSelect.vue";
import UnwantedEventModal from "./UnwantedEventModal.vue";
import DatePickerQuery from "../../../Components/DatePickerQuery.vue";

const props = defineProps({
    mode: {
        type: String,
        default: 'fillable' // 'fillable', 'readonly'
    },
    isShowDepartmentSelect: {
        type: Boolean,
        default: false
    },
})

const departments = [
    {
        label: 'Все отделения',
        value: 0
    }
]
const authStore = useAuthStore()
const reportStore = useReportStore()
const {user, availableDepartments} = storeToRefs(authStore)
const {reportInfo} = storeToRefs(reportStore)

const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')

const openUnwantedEventModal = ref(false)

const selectDepartment = ref(0)

const currentDate = computed(() => {
    const formatted = format(useNow().value, 'PPPPpp', {
        locale: ru
    })

    return formatted.charAt(0).toUpperCase() + formatted.slice(1)
})

const exportUrl = computed(() => {
    const [startAt, endAt] = reportStore.timestampCurrentRange || []
    const departmentId = reportStore.reportInfo?.department?.department_id
    const params = new URLSearchParams()

    if (startAt) params.set('startAt', String(startAt))
    if (endAt) params.set('endAt', String(endAt))
    if (departmentId) params.set('departmentId', String(departmentId))

    const query = params.toString()
    return query ? `/report/export?${query}` : '/report/export'
})
</script>

<template>
    <NCard>
        <NFlex vertical>
            <div class="grid grid-cols-[auto_1fr_auto] items-center">
                <NSpace align="center">
                    <NTag type="info" :bordered="false">
                        {{ reportStore.reportInfo.department.department_name }}
                    </NTag>
<!--                    <DepartmentSelect v-if="isReadonlyMode" />-->
                    <NTag v-if="authStore.isDoctor && reportStore.reportInfo.report.isActiveSendButton" type="warning">
                        Ответственный: {{ reportStore.reportInfo.report.userName }}
                    </NTag>
                </NSpace>

                <div class="col-3 w-full">
                    <DatePickerQuery class="text-lg!"
                                     :is-head-or-admin="reportStore.reportInfo.report?.isHeadOrAdmin"
                                     :is-show-current-date-switch="reportStore.reportInfo.report?.isHeadOrAdmin"
                                     v-model:date="reportStore.timestampCurrentRange" />
                </div>
            </div>

            <NFlex justify="space-between" align="center" :wrap="false">
                <NRow class="grow">
                    <NCol :span="4">
                        <NStatistic label="Коек">
                            <template #default>
                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
                                <NNumberAnimation v-else :from="0" :to="reportStore.reportInfo?.department?.beds" />
                            </template>
                        </NStatistic>
                    </NCol>
                    <NCol :span="5">
                        <NStatistic label="Загруженность">
                            <template #default>
                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
                                <div v-else>
                                    <NNumberAnimation :from="0" :to="reportStore.reportInfo?.department?.percentLoadedBeds" />
                                    <span>%</span>
                                </div>
                            </template>
                        </NStatistic>
                    </NCol>
                    <NCol :span="5">
                        <NStatistic label="Поступило">
                            <template #default>
                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
                                <NNumberAnimation v-else :from="0" :to="reportStore.reportInfo?.department?.recipientCount" />
                            </template>
                        </NStatistic>
                    </NCol>
                    <NCol :span="5">
                        <NStatistic label="Выбыло">
                            <template #default>
                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
                                <NNumberAnimation v-else :from="0" :to="reportStore.reportInfo?.department?.extractCount" />
                            </template>
                        </NStatistic>
                    </NCol>
                    <NCol :span="5">
                        <NStatistic label="Состоит">
                            <template #default>
                                <NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
                                <NNumberAnimation v-else :from="0" :to="reportStore.reportInfo?.department?.currentCount" />
                            </template>
                        </NStatistic>
                    </NCol>
                </NRow>

                <NButton type="error" secondary @click="openUnwantedEventModal = true">
                    <template #icon>
                        <TbAlertCircle />
                    </template>
                    Нежелательные события ({{ reportStore.unwantedEvents.length }})
                </NButton>
                <NButton type="info" secondary tag="a" :href="exportUrl">
                    Скачать Excel
                </NButton>
            </NFlex>
        </NFlex>
    </NCard>

    <UnwantedEventModal v-model:open="openUnwantedEventModal" />
</template>

<style scoped>
:deep(.n-statistic__label),
:deep(.n-statistic-value__content) {
    @apply text-center;
}
:deep(.n-statistic-value) {
    @apply flex justify-center items-center;
}
</style>
