<script setup>
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import isoWeek from "dayjs/plugin/isoWeek";
import isBetween from "dayjs/plugin/isBetween";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
import {useCreateWorkingTimesPdf} from "~/composables/useWorkingTimePDFGenerator.js";
import {useFunctions} from "~/composables/useFunctions.js";
dayjs.extend(customParseFormat)
dayjs.extend(isoWeek)
dayjs.extend(isBetween)
dayjs.extend(isSameOrAfter)
dayjs.extend(isSameOrBefore)



const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()

const itemInfo = ref({})
const oldItemInfo = ref({})

const workingtimes = ref([])
const absencerequests = ref([])

const workingTimeInfo = ref(null)
const selectedPresetRange = ref("Dieser Monat bis heute")
const selectedStartDay = ref("")
const selectedEndDay = ref("")

const setupPage = async () => {
  if(route.params.id) itemInfo.value = profileStore.getProfileById(route.params.id)
  if(itemInfo.value.id) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
  workingtimes.value = (await supabase.from("workingtimes").select().eq("profile",itemInfo.value.id).order("startDate",{ascending:false})).data
  absencerequests.value = (await supabase.from("absencerequests").select().eq("profile",itemInfo.value.id).order("startDate",{ascending: false})).data

  await loadWorkingTimeInfo()

}

const loadWorkingTimeInfo = async () => {
  workingTimeInfo.value = await useFunctions().getWorkingTimesEvaluationData(route.params.id,selectedStartDay.value,selectedEndDay.value)
  console.log(workingTimeInfo.value)
  openTab.value = 0
}


const changeRange = () => {
  let selector = "M"
  let subtract = 0

  if(selectedPresetRange.value === "Diese Woche") {
    selector = "isoWeek"
    subtract = 0

  } else if(selectedPresetRange.value === "Dieser Monat") {
    selector = "M"
    subtract = 0

  } else if(selectedPresetRange.value === "Dieser Monat bis heute") {
    selector = "M"
    subtract = 0

  } else if(selectedPresetRange.value === "Dieses Jahr") {
    selector = "y"
    subtract = 0
  } else if(selectedPresetRange.value === "Letzte Woche") {
    selector = "isoWeek"
    subtract = 1
  } else if(selectedPresetRange.value === "Letzter Monat") {
    selector = "M"
    subtract = 1
  } else if(selectedPresetRange.value === "Letztes Jahr") {
    selector = "y"
    subtract = 1
  }

  selectedStartDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).startOf(selector).format("YYYY-MM-DD")
  if(selectedPresetRange.value === "Dieser Monat bis heute") {
    selectedEndDay.value = dayjs().format("YYYY-MM-DD")
  } else {
    selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")

  }

  openTab.value = 0
  loadWorkingTimeInfo()
}

/*const workingTimeInfo = computed(() => {

  let times = workingtimes.value

  //times = times.filter(i => dayjs(i.date).isBetween(dayjs(selectedStartDay.value).subtract(1,"days"),selectedEndDay.value,'day') && i.end)
  times = times.filter(i => dayjs(i.startDate).isSameOrAfter(selectedStartDay.value) && dayjs(i.endDate).subtract(1,"day").isSameOrBefore(selectedEndDay.value))


  let weekFactor = 4.33
  let monthlyWorkingMinutes = itemInfo.value.weeklyWorkingHours * weekFactor * 60

  let workingMinutesTarget = Math.ceil(Number((Number(dayjs(selectedEndDay.value).add(1,"days").diff(dayjs(selectedStartDay.value),'month',true).toFixed(2)) * 4.33 * itemInfo.value.weeklyWorkingHours * 60).toFixed(2)))





  //Eingreicht
  let sumWorkingMinutesEingereicht = 0
  times.forEach(time => {
    const minutes = dayjs(time.endDate).diff(dayjs(time.startDate),'minutes')
    sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
  })

  //Bestätigt
  let sumWorkingMinutesApproved = 0
  times.filter(i => i.approved).forEach(time => {
    const minutes = dayjs(time.endDate).diff(dayjs(time.startDate),'minutes')
    sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
  })
  //console.log(times.filter(i => i.approved).length)
  //console.log(sumWorkingMinutesApproved)

  let recreationDays = ["2025-01-01","2025-04-18","2025-04-21","2025-05-01","2025-05-29","2025-06-09","2024-10-03","2024-10-31","2024-12-25","2024-12-26"]

  //Feiertagsausgleich
  let sumWorkingMinutesRecreationDays = 0
  let sumRecreationDays = 0
  recreationDays.filter(i => dayjs(i).isSameOrAfter(selectedStartDay.value) && dayjs(i).isSameOrBefore(selectedEndDay.value)).forEach(day => {
    let compensationTime = itemInfo.value.weeklyRegularWorkingHours[dayjs(day).day()] || 0
    sumWorkingMinutesRecreationDays += compensationTime * 60
    sumRecreationDays++
  })

  //Urlaubsausgleich
  let sumWorkingMinutesVacationDays = 0
  let sumVacationDays = 0
  let dailyMinutes = (itemInfo.value.weeklyWorkingHours / 6 * 60).toFixed(2)

  let isBetween = (date,start,end) => {
    return dayjs(date).isSameOrAfter(start) && dayjs(date).isSameOrBefore(end)
  }

  absencerequests.value.filter(i => (dayjs(i.startDate).isBetween(dayjs(selectedStartDay.value),dayjs(selectedEndDay.value)) || dayjs(i.endDate).isBetween(dayjs(selectedStartDay.value),dayjs(selectedEndDay.value)) ) && (i.reason === "Urlaub" || i.reason === "Berufsschule") && i.approved === "Genehmigt").forEach(absenceRequest => {
    let durationInDays = 0

    console.log(absenceRequest)

    if(isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
      //Full in Range
      console.log("Full in Range")
      durationInDays = dayjs(absenceRequest.endDate).diff(absenceRequest.startDate, "days") + 1
      console.log(durationInDays)
    } else if(isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && !isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
      //Start in Range
      console.log("Start in Range")
      durationInDays = dayjs(selectedEndDay.value).diff(absenceRequest.startDate, "days") + 1
    } else if(!isBetween(absenceRequest.startDate,selectedStartDay.value,selectedEndDay.value) && isBetween(absenceRequest.endDate,selectedStartDay.value,selectedEndDay.value)) {
      //End in Range
      console.log("End in Range")
      durationInDays = dayjs(absenceRequest.endDate).diff(selectedStartDay.value, "days") + 1

    }
    sumVacationDays += durationInDays
    sumWorkingMinutesVacationDays += dailyMinutes * durationInDays
  })





  //Saldo
  let saldo = (sumWorkingMinutesApproved + sumWorkingMinutesRecreationDays +sumWorkingMinutesVacationDays - workingMinutesTarget).toFixed(2)
  let saldoInOfficial = (sumWorkingMinutesEingereicht + sumWorkingMinutesRecreationDays + sumWorkingMinutesVacationDays - workingMinutesTarget).toFixed(2)

  return {
    monthlyWorkingMinutes,
    workingMinutesTarget,
    sumWorkingMinutesEingereicht,
    sumWorkingMinutesApproved,
    sumWorkingMinutesRecreationDays,
    sumRecreationDays,
    sumWorkingMinutesVacationDays,
    sumVacationDays,
    saldo,
    saldoInOfficial,
    times,
  }
})*/

const getDuration = (time) => {
  const minutes = Math.floor(dayjs(time.endDate).diff(dayjs(time.startDate),'minutes',true))
  const hours = Math.floor(minutes/60)
  return {
    //dezimal: dez,
    hours: hours,
    minutes: minutes,
    composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
  }
}

const showDocument = ref(false)
const uri = ref("")
const generateDocument = async () => {
  const ownTenant = profileStore.ownTenant
  const path = ownTenant.letterheadConfig["workingTimesEvaluation"]

  const {data,error} = await supabase.storage.from("files").download(path)

  uri.value = await useCreateWorkingTimesPdf({
    profile: profileStore.getProfileById(route.params.id).fullName,
    ...workingTimeInfo.value}, await data.arrayBuffer())
  //alert(uri.value)
  showDocument.value = true
}

const generateEvaluation = async () => {
  await generateDocument()
}

const openTab = ref(0)
const onTabChange = async (index) => {
  if(index === 1) {
    await generateEvaluation()
  }
}


setupPage()
changeRange()

</script>

<template>
  <UDashboardNavbar
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/workingtimes`)"
      >
        Anwesenheiten
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="itemInfo"
          :class="['text-xl','font-medium']"
      >{{itemInfo ? `Auswertung Anwesenheiten: ${itemInfo.fullName}` : ``}}</h1>
    </template>
    <template #right>
<!--      <UButton
          v-if="mode === 'edit'"
          @click="dataStore.updateItem('customers',itemInfo,oldItemInfo)"
      >
        Speichern
      </UButton>
      <UButton
          v-else-if="mode === 'create'"
          @click="dataStore.createNewItem('customers',itemInfo)"
      >
        Erstellen
      </UButton>
      <UButton
          @click="cancelEditorCreate"
          color="red"
          class="ml-2"
          v-if="mode === 'edit' || mode === 'create'"
      >
        Abbrechen
      </UButton>
      <UButton
          v-if="mode === 'show'"
          @click="editItem"
      >
        Bearbeiten
      </UButton>-->
    </template>

  </UDashboardNavbar>
  <UDashboardToolbar>
    <template #left>
      <UFormGroup
          label="Vorlage:"
      >
        <USelectMenu
            :options="['Dieser Monat bis heute','Diese Woche', 'Dieser Monat', 'Dieses Jahr', 'Letzte Woche', 'Letzter Monat', 'Letztes Jahr']"
            v-model="selectedPresetRange"
            @change="changeRange"
        />
      </UFormGroup>
      <UFormGroup label="Start:" >
        <UPopover :popper="{ placement: 'bottom-start' }">
          <UButton
              icon="i-heroicons-calendar-days-20-solid"
              :label="selectedStartDay ? dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum auswählen'"
          />

          <template #panel="{ close }">
            <LazyDatePicker v-model="selectedStartDay" @close="loadWorkingTimeInfo" />
          </template>
        </UPopover>
      </UFormGroup>
      <UFormGroup label="Ende:">
        <UPopover :popper="{ placement: 'bottom-start' }">
          <UButton
              icon="i-heroicons-calendar-days-20-solid"
              :label="selectedEndDay ? dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum auswählen'"
          />

          <template #panel="{ close }">
            <LazyDatePicker v-model="selectedEndDay" @close="loadWorkingTimeInfo" />
          </template>
        </UPopover>
      </UFormGroup>
    </template>
  </UDashboardToolbar>
  <UDashboardPanelContent>
    <UTabs
        :items="[{label: 'Information'},{label: 'Bericht'}]"
        @change="onTabChange"
        v-model="openTab"
    >
      <template #item="{item}">
        <div v-if="item.label === 'Information'">
          <UCard class="truncate my-5" v-if="workingTimeInfo">
            <template #header>
              Zusammenfassung
            </template>
            <p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
            <p>Genehmigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
            <p>Feiertagsausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesRecreationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesRecreationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumRecreationDays}} Tage</p>
            <p>Urlaubs-/Berufsschulausgleich: {{Math.floor(workingTimeInfo.sumWorkingMinutesVacationDays/60)}}:{{String(workingTimeInfo.sumWorkingMinutesVacationDays % 60).padStart(2,"0")}} h / {{workingTimeInfo.sumVacationDays}} Tage</p>
            <p>Soll Stunden: {{Math.floor(workingTimeInfo.timeSpanWorkingMinutes/60)}}:{{String(workingTimeInfo.timeSpanWorkingMinutes % 60 ).padStart(2,"0")}} h</p>

            <!--         <p>Abwesend: </p>

                     <p>Ausgleich:</p>
           -->
            <p>Inoffizielles Saldo(eingereichte Stunden): {{Math.sign(workingTimeInfo.saldoInOfficial) === 1 ? "+" : "-"}} {{Math.floor(Math.abs(workingTimeInfo.saldoInOfficial/60))}}:{{String(Math.abs(workingTimeInfo.saldoInOfficial)  % 60).padStart(2,"0")}} h</p>
            <p>Saldo(genehmigte Stunden): {{Math.sign(workingTimeInfo.saldo) === 1 ? "+" : "-"}} {{Math.floor(Math.abs(workingTimeInfo.saldo/60))}}:{{String(Math.abs(workingTimeInfo.saldo)  % 60).padStart(2,"0")}} h</p>
          </UCard>

          <div style="overflow-y: scroll; height: 45vh">
            <UTable
                v-if="workingTimeInfo"
                :rows="workingTimeInfo.times"
                @select="(row) => router.push(`/workingtimes/edit/${row.id}`)"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Anwesenheiten anzuzeigen` }"
                :columns="[
                {
                  key: 'state',
                  label: 'Status'
                }, {
                  key: 'approved',
                  label: 'Genehmigt'
                }, {
                  key: 'start',
                  label: 'Start'
                }, {
                  key: 'end',
                  label: 'Ende'
                }, {
                  key: 'duration',
                  label: 'Dauer'
                }, {
                  key: 'notes',
                  label: 'Notizen'
                }
            ]"
            >
              <template #profile-data="{row}">
                {{profileStore.profiles.find(profile => profile.id === row.profile) ? profileStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
              </template>
              <template #approved-data="{row}">
                <span v-if="row.approved" class="text-primary-500">Ja</span>
                <span v-else class="text-rose-600">Nein</span>
              </template>

              <template #start-data="{row}">
                {{dayjs(row.startDate).format("HH:mm DD.MM.YY")}} Uhr
              </template>
              <template #end-data="{row}">
                {{dayjs(row.endDate).format("HH:mm DD.MM.YY")}} Uhr
              </template>
              <template #duration-data="{row}">
                {{getDuration(row).composed}}
              </template>
            </UTable>
          </div>


        </div>
        <div v-else-if="item.label === 'Bericht'">
          <UProgress animation="carousel" v-if="!showDocument"/>
          <object
              :data="uri"
              v-else
              type="application/pdf"
              class="w-full previewDocument"
          />
        </div>
      </template>
    </UTabs>
  </UDashboardPanelContent>
</template>

<style scoped>
.previewDocument {
  height: 80vh;
}
</style>