<script setup lang="ts">
import { ref } from 'vue';
import {
  IconLayoutDashboard,
  IconArticle,
  IconForms,
  IconMenu2,
  IconX,
  IconBell,
  IconLogout,
  IconChevronLeft,
  IconChevronRight,
  IconLayoutSidebarLeftCollapse,
  IconLayoutSidebarLeftExpand,
} from '@tabler/icons-vue';
import { Button, Avatar, Badge, Tooltip } from '@idds/vue';

const props = defineProps<{
  currentPage: string;
}>();

const emit = defineEmits<{
  (e: 'navigate', page: string): void;
}>();

const isSidebarOpen = ref(false);
const isCollapsed = ref(false);

const menuItems = [
  { id: 'dashboard', label: 'Dashboard', icon: IconLayoutDashboard },
  { id: 'articles', label: 'Artikel & Berita', icon: IconArticle },
  { id: 'form', label: 'Form Pengajuan', icon: IconForms },
];

const handleNavigate = (page: string) => {
  emit('navigate', page);
  isSidebarOpen.value = false;
};
</script>

<template>
  <div class="min-h-screen bg-gray-50 flex">
    <!-- Sidebar Overlay (Mobile) -->
    <div
      v-if="isSidebarOpen"
      class="fixed inset-0 bg-black/50 z-40 lg:hidden"
      @click="isSidebarOpen = false"
    ></div>

    <!-- Sidebar -->
    <aside
      :class="[
        'fixed lg:sticky top-0 left-0 h-screen bg-white border-r border-gray-200 z-50 transform transition-[width,transform] duration-300 lg:translate-x-0 flex flex-col',
        isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
        isCollapsed ? 'lg:w-[72px] w-[280px]' : 'w-[280px]',
      ]"
    >
      <!-- Sidebar Header -->
      <div
        class="h-16 flex items-center border-b border-gray-200"
        :class="
          isCollapsed
            ? 'lg:justify-center px-6 lg:px-2'
            : 'justify-between px-6'
        "
      >
        <div class="flex items-center gap-2 overflow-hidden">
          <div
            class="w-8 h-8 min-w-[32px] bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold"
          >
            ID
          </div>
          <span
            v-if="!isCollapsed || isSidebarOpen"
            class="font-bold text-lg text-text-primary whitespace-nowrap"
            :class="{ 'lg:hidden': isCollapsed }"
            >IDDS Starter</span
          >
        </div>
        <div class="flex items-center gap-1">
          <!-- Collapse Toggle Button (Header) -->
          <button
            type="button"
            class="hidden lg:flex ml-1 rounded-md hover:bg-gray-100 text-text-secondary transition-colors"
            @click="isCollapsed = !isCollapsed"
            :aria-label="isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'"
          >
            <component
              :is="
                isCollapsed
                  ? IconLayoutSidebarLeftExpand
                  : IconLayoutSidebarLeftCollapse
              "
              size="20"
            />
          </button>
        </div>
        <button
          class="lg:hidden text-text-secondary hover:text-text-primary"
          @click="isSidebarOpen = false"
        >
          <IconX size="20" />
        </button>
      </div>

      <!-- Sidebar Navigation -->
      <nav
        class="flex-1 p-4 space-y-1"
        :class="
          isCollapsed
            ? 'lg:overflow-visible overflow-y-auto overflow-x-hidden'
            : 'overflow-y-auto overflow-x-hidden'
        "
      >
        <div
          v-if="!isCollapsed || isSidebarOpen"
          class="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-2 px-2 whitespace-nowrap"
          :class="{ 'lg:hidden': isCollapsed }"
        >
          Menu Utama
        </div>
        <template v-for="item in menuItems" :key="item.id">
          <!-- Collapsed State: Split for Desktop (Tooltip) and Mobile (No Tooltip) -->
          <template v-if="isCollapsed">
            <!-- Desktop: Tooltip, Icon Only -->
            <div class="hidden lg:block w-full">
              <Tooltip
                variant="basic"
                placement="right"
                :title="item.label"
                :showArrow="true"
              >
                <button
                  @click="handleNavigate(item.id)"
                  :class="[
                    'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                    currentPage === item.id
                      ? 'bg-primary-50 text-primary-700'
                      : 'text-text-secondary hover:bg-gray-100 hover:text-text-primary',
                    'justify-center' /* Icon only centered */,
                  ]"
                >
                  <component
                    :is="item.icon"
                    size="20"
                    :class="[
                      'min-w-[20px]',
                      currentPage === item.id
                        ? 'text-primary-600'
                        : 'text-text-tertiary',
                    ]"
                  />
                  <!-- No text in desktop collapsed -->
                </button>
              </Tooltip>
            </div>

            <!-- Mobile: No Tooltip, Full Width (matches expanded style) -->
            <div class="lg:hidden w-full">
              <button
                @click="handleNavigate(item.id)"
                :class="[
                  'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                  currentPage === item.id
                    ? 'bg-primary-50 text-primary-700'
                    : 'text-text-secondary hover:bg-gray-100 hover:text-text-primary',
                ]"
              >
                <component
                  :is="item.icon"
                  size="20"
                  :class="[
                    'min-w-[20px]',
                    currentPage === item.id
                      ? 'text-primary-600'
                      : 'text-text-tertiary',
                  ]"
                />
                <span class="truncate">{{ item.label }}</span>
                <Badge
                  v-if="item.id === 'form'"
                  variant="error"
                  size="sm"
                  class="ml-auto"
                >
                  New
                </Badge>
              </button>
            </div>
          </template>

          <!-- Expanded State: Always Full Width -->
          <template v-else>
            <button
              @click="handleNavigate(item.id)"
              :class="[
                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                currentPage === item.id
                  ? 'bg-primary-50 text-primary-700'
                  : 'text-text-secondary hover:bg-gray-100 hover:text-text-primary',
              ]"
            >
              <component
                :is="item.icon"
                size="20"
                :class="[
                  'min-w-[20px]',
                  currentPage === item.id
                    ? 'text-primary-600'
                    : 'text-text-tertiary',
                ]"
              />
              <span class="truncate">{{ item.label }}</span>
              <Badge
                v-if="item.id === 'form'"
                variant="error"
                size="sm"
                class="ml-auto"
              >
                New
              </Badge>
            </button>
          </template>
        </template>
      </nav>

      <!-- Sidebar Footer -->
      <div class="p-4 border-t border-gray-200 flex flex-col gap-2">
        <div
          :class="[
            'flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer',
            isCollapsed ? 'lg:justify-center' : '',
          ]"
        >
          <Avatar
            alt="User Profile"
            initials="AD"
            class="bg-primary-100 text-primary-700 min-w-[32px]"
          />
          <template v-if="!isCollapsed || isSidebarOpen">
            <div
              class="flex-1 min-w-0 flex items-center justify-between"
              :class="{ 'lg:hidden': isCollapsed }"
            >
              <div class="flex-1 min-w-0 mr-2">
                <p class="text-sm font-medium text-text-primary truncate">
                  Admin User
                </p>
                <p class="text-xs text-text-tertiary truncate">
                  admin@inadigital.co.id
                </p>
              </div>
              <IconLogout
                size="18"
                class="text-text-tertiary hover:text-error-600 min-w-[18px]"
              />
            </div>
          </template>
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col min-w-0 transition-[margin] duration-300">
      <!-- Header -->
      <header
        class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 lg:px-8 sticky top-0 z-30"
      >
        <div class="flex items-center gap-3">
          <button
            class="lg:hidden p-2 text-text-secondary hover:bg-gray-100 rounded-lg"
            @click="isSidebarOpen = true"
          >
            <IconMenu2 size="24" />
          </button>
        </div>

        <div class="flex items-center gap-4">
          <button
            class="relative p-2 text-text-secondary hover:bg-gray-100 rounded-full transition-colors"
          >
            <IconBell size="20" />
            <span
              class="absolute top-2 right-2 w-2 h-2 bg-error-500 rounded-full border border-white"
            ></span>
          </button>
          <div class="h-8 w-px bg-gray-200 hidden sm:block"></div>
          <Button size="sm" hierarchy="secondary" class="hidden sm:flex">
            Bantuan
          </Button>
        </div>
      </header>

      <!-- Page Content -->
      <main class="flex-1 p-4 lg:p-8 overflow-y-auto">
        <div class="max-w-7xl mx-auto animate-fadeIn">
          <slot></slot>
        </div>
      </main>
    </div>
  </div>
</template>
