<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"

import dayjs from "dayjs";
import {useAuthStore} from "~/stores/auth.js";

const route = useRoute()
const auth = useAuthStore()

const month = dayjs().format("MM")


const hideNav = ref(false)
let lastScrollY = 0
let scrollElement = null
let returnTimer = null

const SHOW_DELAY = 1000 // 1 Sekunden

function showNavAfterDelay() {
  clearTimeout(returnTimer)
  returnTimer = setTimeout(() => {
    hideNav.value = false
  }, SHOW_DELAY)
}

const handleScroll = () => {
  const current = scrollElement.scrollTop

  // Runter scrollen -> verstecken
  if (current > lastScrollY + 10) {
    hideNav.value = true
    showNavAfterDelay()
  }

  // Hoch scrollen -> sofort zeigen
  if (current < lastScrollY - 10) {
    hideNav.value = false
    clearTimeout(returnTimer)
  }

  lastScrollY = current
}

onMounted(() => {
  scrollElement = document.querySelector('.mobile-scroll-area')
  if (scrollElement) {
    scrollElement.addEventListener('scroll', handleScroll)
  }
})

onBeforeUnmount(() => {
  if (scrollElement) scrollElement.removeEventListener('scroll', handleScroll)
  clearTimeout(returnTimer)
})


</script>

<template>
  <div v-if="!auth.loading">
    <div v-if="auth.activeTenantData?.locked === 'maintenance_tenant'">
      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <UCard class="max-w-lg text-center p-10">
          <UColorModeImage
              light="/Logo_Hell_Weihnachten.png"
              dark="/Logo_Dunkel_Weihnachten.png"
              class=" mx-auto my-10"
              v-if="month === '12'"
          />
          <UColorModeImage
              light="/Logo.png"
              dark="/Logo_Dark.png"
              class="mx-auto my-10"
              v-else
          />
          <div class="flex justify-center mb-6">
            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
          </div>

          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            Wartungsarbeiten
          </h1>
          <p class="text-gray-600 dark:text-gray-300 mb-8">
            Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen anderen Mandanten.
          </p>
          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
            {{tenant.name}}
            <UButton
                :disabled="tenant.locked"
                @click="auth.switchTenant(tenant.id)"
            >Wählen</UButton>
          </div>


        </UCard>
      </UContainer>
    </div>
    <div v-else-if="auth.activeTenantData?.locked === 'maintenance'">
      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <UCard class="max-w-lg text-center p-10">
          <UColorModeImage
              light="/Logo_Hell_Weihnachten.png"
              dark="/Logo_Dunkel_Weihnachten.png"
              class=" mx-auto my-10"
              v-if="month === '12'"
          />
          <UColorModeImage
              light="/Logo.png"
              dark="/Logo_Dark.png"
              class="mx-auto my-10"
              v-else
          />
          <div class="flex justify-center mb-6">
            <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
          </div>

          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            Wartungsarbeiten
          </h1>
          <p class="text-gray-600 dark:text-gray-300 mb-8">
            FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut.
          </p>


        </UCard>
      </UContainer>
    </div>
    <div v-else-if="auth.activeTenantData?.locked === 'no_subscription'">
      <UContainer class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
        <UCard class="max-w-lg text-center p-10">
          <UColorModeImage
              light="/Logo_Hell_Weihnachten.png"
              dark="/Logo_Dunkel_Weihnachten.png"
              class=" mx-auto my-10"
              v-if="month === '12'"
          />
          <UColorModeImage
              light="/Logo.png"
              dark="/Logo_Dark.png"
              class="mx-auto my-10"
              v-else
          />
          <div class="flex justify-center mb-6">
            <UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600" />
          </div>

          <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            Kein Aktives Abonnement für diesen Mandant.
          </h1>
          <p class="text-gray-600 dark:text-gray-300 mb-8">
            Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Mandanten.
          </p>
          <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
            {{tenant.name}}
            <UButton
                :disabled="tenant.locked"
                @click="auth.switchTenant(tenant.id)"
            >Wählen</UButton>
          </div>


        </UCard>
      </UContainer>
    </div>
    <UDashboardLayout class="safearea" v-else>

      <UDashboardPage style="height: 90vh">
        <UDashboardPanel grow>
          <slot />
        </UDashboardPanel>
      </UDashboardPage>

      <!-- Modernisierte Mobile Navigation -->
      <nav
          :class="[
    'fixed bottom-0 left-0 right-0 z-50',   // ← bottom-0 hinzugefügt!
    'h-[70px] bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl',
    'border-t border-gray-200 dark:border-gray-800',
    'flex justify-around items-center pt-2 pb-[max(env(safe-area-inset-bottom),0.5rem)]',
    'transition-transform duration-300 ease-in-out',
    hideNav ? 'translate-y-full' : 'translate-y-0'
  ]"
      >
        <UButton
            icon="i-heroicons-home"
            to="/mobile/"
            variant="ghost"
            :color="route.fullPath === '/mobile' ? 'primary' : 'gray'"
            class="nav-btn"
        />

        <UButton
            icon="i-heroicons-clipboard-document-check"
            to="/standardEntity/tasks"
            variant="ghost"
            :color="route.fullPath === '/standardEntity/tasks' ? 'primary' : 'gray'"
            class="nav-btn"
        />

        <UButton
            icon="i-heroicons-rectangle-stack"
            to="/standardEntity/projects"
            variant="ghost"
            :color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
            class="nav-btn"
        />

        <UButton
            icon="i-heroicons-bars-4"
            to="/mobile/menu"
            variant="ghost"
            :color="route.fullPath === '/mobile/menu' ? 'primary' : 'gray'"
            class="nav-btn"
        />
      </nav>


    </UDashboardLayout>
  </div>

  <div
      v-else
      class="flex flex-col"
  >
    <UColorModeImage
        light="/Logo_Hell_Weihnachten.png"
        dark="/Logo_Dunkel_Weihnachten.png"
        class="w-1/3 mx-auto my-10"
        v-if="month === '12'"
    />
    <UColorModeImage
      light="/Logo.png"
      dark="/Logo_Dark.png"
      class="w-1/3 mx-auto my-10"
      v-else
    />
    <div v-if="!auth.activeTenant && auth.tenants?.length > 0 " class="w-full mx-auto text-center">
      <!-- Tenant Selection      -->
      <h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. <br>Bitte wählen Sie ein Mandant.</h3>
      <div class="mx-auto w-5/6 flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
        <span class="text-left">{{tenant.name}}</span>
        <UButton
            @click="auth.switchTenant(tenant.id)"
        >Wählen</UButton>
      </div>
      <UButton
          variant="outline"
          color="rose"
          @click="auth.logout()"
      >Abmelden</UButton>


    </div>
    <div v-else>
      <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />Test
      {{auth.tenants}}

      <UButton
          variant="outline"
          color="rose"
          @click="auth.logout()"
      >Abmelden</UButton>
    </div>
  </div>

</template>

<style scoped>
.nav-btn {
  @apply w-12 h-12 flex justify-center items-center rounded-xl active:scale-95 transition;
}


</style>