<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'

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

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 justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
  >
    <div
      class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
    >
      <span class="material-symbols-outlined text-on-surface-variant">search</span>
      <input
        class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
        placeholder="Search builds..."
        type="text"
      />
    </div>

    <div class="flex items-center gap-6">
      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
        <span class="material-symbols-outlined">notifications</span>
      </button>
      <button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
        <span class="material-symbols-outlined">settings</span>
      </button>

      <div class="h-8 w-px bg-outline-variant mx-2"></div>

      <div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
        <div class="text-right hidden sm:block">
          <p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
        </div>
        <img
          class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
          :src="userProfileIcon"
          alt="Avatar"
        />
      </div>

      <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 top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
        >
          <div class="px-4 py-3 border-b border-outline-variant">
            <p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
            <p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
          </div>

          <Link
            href="/auth/logout"
            class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
          >
            <span class="material-symbols-outlined text-[20px]">logout</span>
            Sign Out
          </Link>
        </div>
      </transition>
    </div>
  </header>

  <div
    v-show="dropdownOpen"
    class="fixed inset-0 z-30"
    @click="dropdownOpen = false"
  />
</template>
