<script setup lang="ts">
import { computed, ref } from 'vue'
import { useSidebar } from '~/composables/useSidebar'
import { Link, usePage } from '@inertiajs/vue3'
import { userProfileIcon } from '~/assets/icons'
import { useAdminMode } from '~/composables/isAdminMode'

const dropdownOpen = ref(false)
const { isOpen } = useSidebar()
const { isAdminActive } = useAdminMode()

function toggleActive() {
  isAdminActive.value = !isAdminActive.value
}

const page = usePage()

const user = computed(() => {
  const userData = (page.props as any).auth?.user || (page.props as any).user
  return userData || { name: 'Guest', email: 'guest@example.com' }
})
</script>

<template>
  <header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
    <div class="flex items-center">
      <button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M4 6H20M4 12H20M4 18H11"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </div>

    <div class="flex items-center">
      <div class="relative">
        <button
          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
          @click="dropdownOpen = !dropdownOpen"
        >
          <img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
        </button>

        <div
          v-show="dropdownOpen"
          class="fixed inset-0 z-10 w-full h-full"
          @click="dropdownOpen = false"
        />

        <transition
          enter-active-class="transition duration-150 ease-out transform"
          enter-from-class="scale-95 opacity-0"
          enter-to-class="scale-100 opacity-100"
          leave-active-class="transition duration-150 ease-in transform"
          leave-from-class="scale-100 opacity-100"
          leave-to-class="scale-95 opacity-0"
        >
          <div
            v-show="dropdownOpen"
            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
          >
            <div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
              <strong>{{ user.name }}</strong>
            </div>
            <hr />

            <div
              class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
              @click="toggleActive"
            >
              <span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
              <button
                :class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
                class="w-10 h-5 rounded-full focus:outline-none relative"
              >
                <span
                  :class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
                  class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
                ></span>
              </button>
            </div>

            <Link
              href="/auth/logout"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
            >
              Logout
            </Link>
          </div>
        </transition>
      </div>
    </div>
  </header>
</template>
