<template>
  <div
    class="relative flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
    :class="isSidebarCollapsed ? 'w-12' : 'w-[220px]'"
  >
    <div class="p-2">
      <div
        class="flex items-center gap-2 px-2 py-1.5 transition-all duration-300 ease-in-out"
        :class="isSidebarCollapsed ? 'justify-center' : ''"
      >
        <PortalLogo class="h-6 w-6 flex-shrink-0" />
        <span
          v-if="!isSidebarCollapsed"
          class="text-lg font-semibold text-ink-gray-9"
        >
          Cloud Portal
        </span>
      </div>
    </div>

    <div class="flex-1 overflow-y-auto">
      <nav class="flex flex-col gap-0.5 px-2">
        <SidebarLink
          v-for="link in navLinks"
          :key="link.label"
          :icon="link.icon"
          :label="link.label"
          :to="link.to"
          :isCollapsed="isSidebarCollapsed"
        />
      </nav>
    </div>

    <div class="m-2 flex flex-col gap-1">
      <!-- User info -->
      <div
        v-if="!isSidebarCollapsed && session.user"
        class="flex items-center gap-2 px-2 py-1.5 mb-2 text-sm text-ink-gray-7 truncate"
      >
        <FeatherIcon name="user" class="h-4 w-4 flex-shrink-0" />
        <span class="truncate">{{ session.user }}</span>
      </div>

      <!-- Logout button -->
      <SidebarLink
        label="Logout"
        :isCollapsed="isSidebarCollapsed"
        @click="handleLogout"
      >
        <template #icon>
          <span class="grid h-4 w-4 flex-shrink-0 place-items-center">
            <FeatherIcon name="log-out" class="h-4 w-4 text-ink-gray-7" />
          </span>
        </template>
      </SidebarLink>

      <!-- Collapse button -->
      <SidebarLink
        :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
        :isCollapsed="isSidebarCollapsed"
        @click="isSidebarCollapsed = !isSidebarCollapsed"
      >
        <template #icon>
          <span class="grid h-4 w-4 flex-shrink-0 place-items-center">
            <FeatherIcon
              name="chevrons-left"
              class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
              :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
            />
          </span>
        </template>
      </SidebarLink>
    </div>
  </div>
</template>

<script setup>
import { useStorage } from '@vueuse/core'
import { FeatherIcon } from 'frappe-ui'
import SidebarLink from '@/components/Common/SidebarLink.vue'
import PortalLogo from '@/components/Icons/PortalLogo.vue'
import SitesIcon from '@/components/Icons/SitesIcon.vue'
import BillingIcon from '@/components/Icons/BillingIcon.vue'
import SettingsIcon from '@/components/Icons/SettingsIcon.vue'
import { session } from '@/session'

function handleLogout() {
  session.logout()
}

const isSidebarCollapsed = useStorage('portal-sidebar-collapsed', false)

const navLinks = [
  {
    label: 'Sites',
    icon: SitesIcon,
    to: 'Sites',
  },
  {
    label: 'Billing',
    icon: BillingIcon,
    to: 'Billing',
  },
  {
    label: 'Settings',
    icon: SettingsIcon,
    to: 'Settings',
  },
]
</script>
