<template>
  <div class="drawer lg:drawer-open">
    <input id="main-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />

    <!-- Main content area -->
    <div class="drawer-content flex flex-col h-screen bg-base-300">
      <!-- TopBar -->
      <TopBar
        :session-checked="sessionChecked"
        :logged-in="isLoggedIn"
        :novu-subscriber-id="novuSubscriberId"
        :user-avatar-svg="userAvatarSvg"
        :user-name="userName"
        :user-initials="userInitials"
        @toggle-sidebar="drawerOpen = !drawerOpen"
        @sign-out="onClickSignOut"
        @sign-in="signIn()"
      />

      <!-- Page content - full height for map -->
      <main class="flex-1 flex flex-col min-h-0">
        <slot />
      </main>
    </div>

    <!-- Sidebar drawer -->
    <div class="drawer-side z-50">
      <label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <slot name="sidebar" />
    </div>
  </div>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()

const drawerOpen = ref(false)
const userData = useState<{
  id?: string
  firstName?: string
  lastName?: string
  avatarId?: string
  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string }
  activeTeamId?: string
  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
} | null>('me', () => null)
const sessionChecked = ref(false)
const userAvatarSvg = useState('user-avatar-svg', () => '')
const novuSubscriberId = useState('novu-subscriber-id', () => '')

const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)

const userName = computed(() => {
  return userData.value?.firstName || 'User'
})

const userInitials = computed(() => {
  const first = userData.value?.firstName?.charAt(0) || ''
  const last = userData.value?.lastName?.charAt(0) || ''
  if (first || last) return (first + last).toUpperCase()
  return '?'
})

// Avatar generation
const generateUserAvatar = async () => {
  const seed = userData.value?.avatarId || userData.value?.id || userData.value?.firstName || 'default'
  try {
    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
    if (response.ok) {
      userAvatarSvg.value = await response.text()
    }
  } catch (error) {
    console.error('Error generating avatar:', error)
  }
}

const computeNovuSubscriber = () => {
  const uuid = userData.value?.id
  if (uuid) return uuid
  return ''
}

const { setActiveTeam } = useActiveTeam()

const syncUserUi = async () => {
  if (!userData.value) {
    novuSubscriberId.value = ''
    return
  }

  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
  }

  novuSubscriberId.value = computeNovuSubscriber()

  if (!userAvatarSvg.value) {
    await generateUserAvatar()
  }
}

watch(userData, () => {
  void syncUserUi()
}, { immediate: true })

// Check session (SSR + client navigation)
await fetchSession().catch(() => {})
sessionChecked.value = true

const onClickSignOut = () => {
  signOut(siteUrl)
}

// Close drawer on route change (mobile)
const route = useRoute()
watch(() => route.path, () => {
  drawerOpen.value = false
})
</script>
