<template>
  <q-layout view="lHh Lpr lFf" class="dynamic-gradient-bg">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>
          THATS ME
        </q-toolbar-title>

        <!-- Add login status indicator -->
        <q-chip v-if="isLoggedIn" color="green" text-color="white" icon="check_circle">
          Logged In
        </q-chip>
        <q-chip v-else color="grey" text-color="white" icon="person_off">
          Not Logged In
        </q-chip>

        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleDrawer" />

      </q-toolbar>
    </q-header>

    <!-- Off-Canvas Drawer -->
    <q-drawer v-model="drawer" show-if-above side="right" :width="280" :breakpoint="768" class="bg-grey-1"
      style="overflow: hidden;">
      <!-- Sliding Menu Container -->
      <div class="menu-container" :style="{ transform: `translateX(${slideOffset}px)` }">

        <!-- Main Menu Panel -->
        <div class="menu-panel">

          <!-- Main Menu List -->
          <q-list>

            <q-item clickable v-ripple @click="navigateTo('login')" v-if="!isLoggedIn" to="/login">
              <q-item-section avatar>
                <q-icon name="login" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Login</q-item-label>
              </q-item-section>
            </q-item>

            <!-- Move password reset to Account submenu and only show when logged in -->

            <q-item clickable v-ripple @click="navigateTo('wave')" v-if="isLoggedIn" to="/wave">
              <q-item-section avatar>
                <q-icon name="line_axis" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Wave</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('new-entry')" v-if="isLoggedIn" to="/edit">
              <q-item-section avatar>
                <q-icon name="add_circle" />
              </q-item-section>
              <q-item-section>
                <q-item-label>New entry</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('my-people', 'My People')" v-if="isLoggedIn">
              <q-item-section avatar>
                <q-icon name="people" />
              </q-item-section>
              <q-item-section>
                <q-item-label>My People</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('messages', 'Messages')" v-if="isLoggedIn">
              <q-item-section avatar>
                <q-icon name="mail" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Messages</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-ripple @click="openSubmenu('profile', 'Profile')" v-if="isLoggedIn">
              <q-item-section avatar>
                <q-icon name="person" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Profile</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('account', 'Account')" v-if="isLoggedIn">
              <q-item-section avatar>
                <q-icon name="account_circle" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Account</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('sign-up')" to="/sign-up" v-if="!isLoggedIn">
              <q-item-section avatar>
              <q-icon name="person_add" />
              </q-item-section>
              <q-item-section>
              <q-item-label>Sign Up</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-ripple @click="openSubmenu('support', 'Need Help?')">
              <q-item-section avatar>
                <q-icon name="help" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Need Help?</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('legal', 'Legal Stuff')">
              <q-item-section avatar>
                <q-icon name="gavel" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Legal Stuff</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>
          </q-list>
        </div>

        <!-- Second Level Menu Panel -->
        <div class="menu-panel">
          <div class="q-pa-md bg-secondary text-white">
            <q-btn flat round icon="arrow_back" @click="goBack" class="q-mr-sm" size="sm" />
            <span class="text-h6">{{ currentSubmenuTitle }}</span>
          </div>

          <!-- My People Submenu -->
          <q-list v-if="currentSubmenu === 'my-people'">
            <q-item clickable v-ripple @click="navigateTo('relatives')">
              <q-item-section avatar>
                <q-icon name="family_restroom" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Relatives</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('friends')">
              <q-item-section avatar>
                <q-icon name="group" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Friends</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Messages Submenu -->
          <q-list v-if="currentSubmenu === 'messages'">
            <q-item clickable v-ripple @click="navigateTo('notifications')">
              <q-item-section avatar>
                <q-icon name="notifications" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Notifications</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('message-center', 'Message Center')">
              <q-item-section avatar>
                <q-icon name="mail" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Messages</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('groups')">
              <q-item-section avatar>
                <q-icon name="group_work" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Groups</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Profile Submenu -->
          <q-list v-if="currentSubmenu === 'profile'">
            <q-item clickable v-ripple @click="navigateTo('personal-data')">
              <q-item-section avatar>
                <q-icon name="badge" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Personal Data</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('portrait', 'Portrait')">
              <q-item-section avatar>
                <q-icon name="portrait" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Portrait</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('voice', 'Voice')">
              <q-item-section avatar>
                <q-icon name="record_voice_over" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Voice</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Account Submenu -->
          <q-list v-if="currentSubmenu === 'account'">
            <q-item clickable v-ripple @click="openSubmenu('plan', 'Plan')">
              <q-item-section avatar>
                <q-icon name="subscriptions" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Plan</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="openSubmenu('billing', 'Billing')">
              <q-item-section avatar>
                <q-icon name="payment" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Billing</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

            <!-- Add a logout button that only appears when logged in -->
            <q-item clickable v-ripple @click="logout" v-if="isLoggedIn">
              <q-item-section avatar>
                <q-icon name="logout" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Logout</q-item-label>
              </q-item-section>
            </q-item>

          </q-list>

          <!-- Login Submenu -->
          <q-list v-if="currentSubmenu === 'login'">
            <q-item clickable v-ripple @click="navigateTo('password-reset')">
              <q-item-section avatar>
                <q-icon name="lock_reset" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Password reset</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="logout">
              <q-item-section avatar>
                <q-icon name="logout" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Logout</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Support Submenu -->
          <q-list v-if="currentSubmenu === 'support'">
            <q-item clickable v-ripple @click="navigateTo('video-tutorials')">
              <q-item-section avatar>
                <q-icon name="play_circle" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Video tutorials</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('knowledge-base')">
              <q-item-section avatar>
                <q-icon name="library_books" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Knowledge base</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('faq')">
              <q-item-section avatar>
                <q-icon name="quiz" />
              </q-item-section>
              <q-item-section>
                <q-item-label>FAQ</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('chatbot')">
              <q-item-section avatar>
                <q-icon name="smart_toy" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Chatbot</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Legal Submenu -->
          <q-list v-if="currentSubmenu === 'legal'">
            <q-item clickable v-ripple @click="navigateTo('legal-terms')">
              <q-item-section avatar>
                <q-icon name="article" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Legal Terms</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('privacy-policy')">
              <q-item-section avatar>
                <q-icon name="privacy_tip" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Privacy Policy</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>

        <!-- Third Level Menu Panel -->
        <div class="menu-panel">
          <div class="q-pa-md bg-accent text-white">
            <q-btn flat round icon="arrow_back" @click="goBack" class="q-mr-sm" size="sm" />
            <span class="text-h6">{{ currentSubmenuTitle }}</span>
          </div>


          <!-- Message Center Submenu -->

          <q-list v-if="currentSubmenu === 'message-center'">
            <q-item clickable v-ripple @click="navigateTo('new-message')">
              <q-item-section avatar>
                <q-icon name="add" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Chat</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('direct-messages')">
              <q-item-section avatar>
                <q-icon name="message" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Direct Messages</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('group-messages')">
              <q-item-section avatar>
                <q-icon name="group" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Group Messages</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('message-requests')">
              <q-item-section avatar>
                <q-icon name="request_page" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Message Requests</q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-icon name="chevron_right" />
              </q-item-section>
            </q-item>

          </q-list>


          <!-- Portrait Submenu -->
          <q-list v-if="currentSubmenu === 'portrait'">
            <q-item clickable v-ripple @click="navigateTo('animated-avatar')">
              <q-item-section avatar>
                <q-icon name="face" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Animated Avatar</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Voice Submenu -->
          <q-list v-if="currentSubmenu === 'voice'">
            <q-item clickable v-ripple @click="navigateTo('voice-cloning')">
              <q-item-section avatar>
                <q-icon name="content_copy" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Voice cloning</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Plan Submenu -->
          <q-list v-if="currentSubmenu === 'plan'">
            <q-item clickable v-ripple @click="navigateTo('upgrade')">
              <q-item-section avatar>
                <q-icon name="upgrade" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Upgrade</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>

          <!-- Billing Submenu -->
          <q-list v-if="currentSubmenu === 'billing'">
            <q-item clickable v-ripple @click="navigateTo('billing-information')">
              <q-item-section avatar>
                <q-icon name="credit_card" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Billing Information</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple @click="navigateTo('invoices')">
              <q-item-section avatar>
                <q-icon name="receipt" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Invoices</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </div>

      </div>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer 
      v-if="!$route.meta.hideFooter" 
      elevated 
      class="bg-white text-black font"
    >
      <q-tabs align="justify" dense>
        <q-route-tab to="/" icon="home" />
        <q-route-tab to="/people" icon="people" />
        <q-route-tab to="/edit" icon="add_circle_outline" />
        <q-route-tab to="/messages" icon="mail" />
        <q-route-tab to="/profile" icon="person" />
      </q-tabs>
    </q-footer>
  </q-layout>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'MultiLevelSlidingMenu',
  setup() {
    const router = useRouter()
    const drawer = ref(false)
    const currentRoute = ref('home')
    const menuLevel = ref(0)
    const currentSubmenu = ref('')
    const currentSubmenuTitle = ref('')
    const menuHistory = ref([])
    
    // Make isLoggedIn reactive to localStorage changes
    const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true')
    
    // Listen for storage changes (when logging in from another tab/component)
    const updateLoginStatus = () => {
      isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true'
    }
    
    onMounted(() => {
      window.addEventListener('storage', updateLoginStatus)
      // Also check on route changes
      router.afterEach(() => {
        updateLoginStatus()
      })
    })

    const slideOffset = computed(() => {
      return menuLevel.value * -280 // Each level slides 280px (drawer width) to the left
    })

    const toggleDrawer = () => {
      drawer.value = !drawer.value
      // Reset menu to main level when drawer is opened
      if (drawer.value) {
        resetMenu()
      }
    }

    const resetMenu = () => {
      menuLevel.value = 0
      currentSubmenu.value = ''
      currentSubmenuTitle.value = ''
      menuHistory.value = []
    }

    const openSubmenu = (submenuKey, title) => {
      console.log(`Opening submenu: ${submenuKey} - ${title}`)

      // Save current state to history
      menuHistory.value.push({
        level: menuLevel.value,
        submenu: currentSubmenu.value,
        title: currentSubmenuTitle.value
      })

      // Navigate to new submenu
      menuLevel.value += 1
      currentSubmenu.value = submenuKey
      currentSubmenuTitle.value = title

      console.log(`New menu level: ${menuLevel.value}, submenu: ${currentSubmenu.value}`)
    }

    const goBack = () => {
      console.log('Going back, history length:', menuHistory.value.length)

      if (menuHistory.value.length > 0) {
        const previousState = menuHistory.value.pop()
        menuLevel.value = previousState.level
        currentSubmenu.value = previousState.submenu
        currentSubmenuTitle.value = previousState.title

        console.log(`Back to level: ${menuLevel.value}, submenu: ${currentSubmenu.value}`)
      } else {
        resetMenu()
      }
    }

    const navigateTo = (route) => {
      console.log(`Navigating to: ${route}`)
      currentRoute.value = route
      // In a real app, you would use Vue Router here
      // this.$router.push('/' + route)

      // Close drawer and reset menu on mobile after navigation
      if (window.innerWidth < 768) {
        drawer.value = false
        resetMenu()
      }
    }

    // Update the login function
    const login = () => {
      isLoggedIn.value = true
      localStorage.setItem('isLoggedIn', 'true')
    }

    // Update the logout function
    const logout = () => {
      console.log('Logging out...')
      isLoggedIn.value = false
      localStorage.setItem('isLoggedIn', 'false')
      currentRoute.value = 'login'
      drawer.value = false
      resetMenu()
      router.push('/login')
    }

    return {
      drawer,
      currentRoute,
      menuLevel,
      currentSubmenu,
      currentSubmenuTitle,
      menuHistory,
      slideOffset,
      toggleDrawer,
      openSubmenu,
      goBack,
      navigateTo,
      logout,
      isLoggedIn,
      login
    }
  }
}
</script>

<style scoped>
.dynamic-gradient-bg {
  /* background: linear-gradient(45deg, #541ba2, #d4890b, #fc1c98);
   background: linear-gradient(45deg, #7317c3, #d2348b, #31e6cb); */
  /*background: linear-gradient(-45deg, #a0197c, #fe4374, #541ba2, #a0197c);*/
  background: linear-gradient(45deg, #8634f9, #ffab1a, #ff2fa2);
  background-size: 300% 300%;
  animation: gradientAnimation 30s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
    /* Start Links Mitte */
  }

  25% {
    background-position: 100% 0%;
    /* Oben Rechts */
  }

  50% {
    background-position: 100% 100%;
    /* Unten Rechts */
  }

  75% {
    background-position: 0% 100%;
    /* Unten Links */
  }

  100% {
    background-position: 0% 0%;
    /* Zurück zum Start Links Mitte */
  }
}

.q-footer .q-tab__label {
  font-size: 0.7rem;
  /* Passe diesen Wert nach Bedarf an */
}


/* Custom styles for the drawer */
/* .q-drawer {
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.1);
} */

/* Menu container for sliding panels */
.menu-container {
  display: flex;
  width: calc(100% * 3);
  /* Width for 3 levels */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Individual menu panel */
.menu-panel {
  width: 280px;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Hover effects for menu items */
.q-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Chevron icon styling */
.q-item-section--side .q-icon {
  color: rgba(0, 0, 0, 0.54);
}

/* Back button styling */
.q-btn[round] {
  min-height: 32px;
  min-width: 32px;
}

/* Header gradient for different levels */
.bg-secondary {
  background: linear-gradient(135deg, #9c27b0, #673ab7) !important;
}

.bg-accent {
  background: linear-gradient(135deg, #ff5722, #f44336) !important;
}

/* Smooth scrolling for menu panels */
.menu-panel {
  scroll-behavior: smooth;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .menu-container {
    width: calc(100vw * 3);
  }

  .menu-panel {
    width: 100vw;
  }
}
</style>
