webapp/app/layouts/catalog.vue

<template>
  <div class="min-h-screen bg-base-200">
    <!-- Layer 1: Collapsed bar (when scrolled) -->
    <div
      v-if="isHeaderCollapsed"
      class="fixed top-0 left-0 right-0 z-50 bg-base-200 border-b border-base-300 h-8 flex items-center px-4 lg:px-6"
    >
      <button
        class="btn btn-ghost btn-xs btn-circle"
        @click="expandHeader"
      >
        <Icon name="lucide:chevron-down" size="16" />
      </button>
    </div>

    <!-- Layer 1: MainNavigation (fixed) -->
    <div
      v-show="!isHeaderCollapsed"
      class="fixed top-0 left-0 right-0 z-50"
    >
      <MainNavigation
        class="bg-base-200"
        :session-checked="sessionChecked"
        :logged-in="isLoggedIn"
        :user-avatar-svg="userAvatarSvg"
        :user-name="userName"
        :user-initials="userInitials"
        :theme="theme"
        :user-data="userData"
        :is-seller="isSeller"
        @toggle-theme="toggleTheme"
        @sign-out="onClickSignOut"
        @sign-in="signIn()"
        @switch-team="switchToTeam"
      />
    </div>

    <!-- Layer 2: SubNavigation (fixed) -->
    <div
      v-show="!isHeaderCollapsed"
      class="fixed top-16 left-0 right-0 z-40 bg-base-200 border-b border-base-300"
    >
      <div class="flex items-center gap-1 py-2 px-4 lg:px-6">
        <!-- Collapse button -->
        <button
          class="btn btn-ghost btn-xs btn-circle mr-1 flex-shrink-0"
          @click="collapseHeader"
        >
          <Icon name="lucide:chevron-up" size="16" />
        </button>

        <NuxtLink
          v-for="item in subNavItems"
          :key="item.path"
          :to="localePath(item.path)"
          class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-300"
          :class="{ 'text-primary bg-primary/10': isSubNavActive(item.path) }"
        >
          {{ item.label }}
        </NuxtLink>
      </div>
    </div>

    <!-- Layer 3: SearchBar (fixed) - teleport target -->
    <div
      id="catalog-searchbar"
      class="fixed left-0 right-0 z-30 bg-base-100 border-b border-base-300"
      :class="isHeaderCollapsed ? 'top-8' : 'top-[6.75rem]'"
    />

    <!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
    <div
      id="catalog-map"
      class="fixed right-0 bottom-0 w-3/5 z-20 hidden lg:block"
      :class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
    />

    <!-- Content area (left side, with padding for fixed header) -->
    <div
      class="lg:w-2/5 min-h-screen"
      :class="isHeaderCollapsed ? 'pt-[6.75rem]' : 'pt-[10.75rem]'"
    >
      <div class="px-4 lg:px-6 py-4">
        <slot />
      </div>
    </div>

    <!-- Mobile: Full width content + bottom toggle for map -->
    <div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
      <div class="btn-group shadow-lg">
        <button
          class="btn btn-sm"
          :class="{ 'btn-active': mobileView === 'list' }"
          @click="mobileView = 'list'"
        >
          {{ $t('common.list') }}
        </button>
        <button
          class="btn btn-sm"
          :class="{ 'btn-active': mobileView === 'map' }"
          @click="mobileView = 'map'"
        >
          {{ $t('common.map') }}
        </button>
      </div>
    </div>

    <!-- Mobile map view - teleport target -->
    <div
      v-if="mobileView === 'map'"
      id="catalog-map-mobile"
      class="lg:hidden fixed inset-0 z-20"
      :class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
    />
  </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 route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()

// Collapsible header
const { isCollapsed, expand, collapse } = useScrollCollapse(50)
const isHeaderCollapsed = computed(() => isCollapsed.value)

const expandHeader = () => expand()
const collapseHeader = () => collapse()

// Mobile view toggle
const mobileView = ref<'list' | 'map'>('list')

// Theme state
const theme = useState<'default' | 'night'>('theme', () => 'default')

// User data state (shared across layouts)
const userData = useState<{
  id?: string
  firstName?: string
  lastName?: string
  avatarId?: string
  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
  activeTeamId?: string
  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
} | null>('me', () => null)

const sessionChecked = ref(false)
const userAvatarSvg = useState('user-avatar-svg', () => '')
const lastAvatarSeed = useState('user-avatar-seed', () => '')

const isSeller = computed(() => {
  return userData.value?.activeTeam?.teamType === 'SELLER'
})

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 '?'
})

// SubNavigation items for catalog section
const subNavItems = computed(() => [
  { label: t('cabinetNav.offers'), path: '/catalog/offers' },
  { label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
  { label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
])

const isSubNavActive = (path: string) => {
  return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
}

// Provide collapsed state to children
provide('headerCollapsed', isHeaderCollapsed)

// Avatar generation
const generateUserAvatar = async (seed: string) => {
  if (!seed) return
  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()
      lastAvatarSeed.value = seed
    }
  } catch (error) {
    console.error('Error generating avatar:', error)
  }
}

const { setActiveTeam } = useActiveTeam()
const { mutate } = useGraphQL()
const locationStore = useLocationStore()

const syncUserUi = async () => {
  if (!userData.value) {
    locationStore.clear()
    return
  }

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

  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'

  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
    userAvatarSvg.value = ''
    await generateUserAvatar(seed)
  }

  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
}

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

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

const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
  if (!team?.id) return

  try {
    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')

    if (result.switchTeam?.user && userData.value) {
      userData.value.activeTeam = team as typeof userData.value.activeTeam
      userData.value.activeTeamId = team.id
      if (team.logtoOrgId) {
        setActiveTeam(team.id, team.logtoOrgId)
      }
    }
  } catch (err) {
    console.error('Failed to switch team:', err)
  }
}

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

const applyTheme = (value: 'default' | 'night') => {
  if (import.meta.client) {
    if (value === 'default') {
      document.documentElement.removeAttribute('data-theme')
    } else {
      document.documentElement.setAttribute('data-theme', value)
    }
    localStorage.setItem('theme', value)
  }
}

onMounted(() => {
  const stored = import.meta.client ? localStorage.getItem('theme') : null
  if (stored === 'night' || stored === 'default') {
    theme.value = stored
  }
  applyTheme(theme.value)
})

watch(theme, (value) => applyTheme(value))

const toggleTheme = () => {
  theme.value = theme.value === 'night' ? 'default' : 'night'
}
</script>