<template>
  <div>
    <!-- Mobile sidebar -->
    <TransitionRoot as="template" :show="open">
      <Dialog class="relative z-50 lg:hidden" @close="close()">
        <TransitionChild
          as="template"
          enter="transition-opacity ease-linear duration-300"
          enter-from="opacity-0"
          enter-to="opacity-100"
          leave="transition-opacity ease-linear duration-300"
          leave-from="opacity-100"
          leave-to="opacity-0"
        >
          <div class="fixed inset-0 bg-gray-900/80" />
        </TransitionChild>

        <div class="fixed inset-0 flex">
          <TransitionChild
            as="template"
            enter="transition ease-in-out duration-300 transform"
            enter-from="-translate-x-full"
            enter-to="translate-x-0"
            leave="transition ease-in-out duration-300 transform"
            leave-from="translate-x-0"
            leave-to="-translate-x-full"
          >
            <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
              <TransitionChild
                as="template"
                enter="ease-in-out duration-300"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="ease-in-out duration-300"
                leave-from="opacity-100"
                leave-to="opacity-0"
              >
                <div
                  class="absolute top-0 left-full flex w-16 justify-center pt-5"
                >
                  <button type="button" class="-m-2.5 p-2.5" @click="close()">
                    <span class="sr-only">Close sidebar</span>
                    <XMarkIcon class="h-6 w-6 text-white" aria-hidden="true" />
                  </button>
                </div>
              </TransitionChild>

              <div
                class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 dark:bg-gray-800 px-6 pb-4"
              >
                <!-- LOGO -->
                <div class="flex h-16 shrink-0 items-center">
                  <img
                    class="h-8 w-auto"
                    src="https://tailwindcss.com/img/logos/mark.svg?color=white"
                    alt="Your Company"
                  />
                </div>

                <!-- NAVIGATION -->
                <nav class="flex flex-1 flex-col">
                  <ul role="list" class="flex flex-1 flex-col gap-y-7">
                    <!-- top-level links -->
                    <li>
                      <ul role="list" class="-mx-2 space-y-1">
                        <li v-for="item in navigation" :key="item.name">
                          <NuxtLink
                            :to="item.href"
                            :class="[
                              item.current
                                ? 'bg-indigo-700 text-white dark:bg-indigo-900'
                                : 'text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white',
                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                            ]"
                          >
                            <component
                              :is="item.icon"
                              :class="[
                                item.current
                                  ? 'text-white dark:text-indigo-100'
                                  : 'text-indigo-200 group-hover:text-white dark:text-gray-300 dark:group-hover:text-indigo-100',
                                'h-6 w-6 shrink-0',
                              ]"
                              aria-hidden="true"
                            />
                            {{ item.name }}
                          </NuxtLink>
                        </li>
                      </ul>
                    </li>

                    <!-- teams -->
                    <li>
                      <div
                        class="text-xs font-semibold leading-6 text-indigo-200 dark:text-gray-400"
                      >
                        Your teams
                      </div>
                      <ul role="list" class="-mx-2 mt-2 space-y-1">
                        <li v-for="team in teams" :key="team.name">
                          <NuxtLink
                            :to="team.href"
                            :class="[
                              team.current
                                ? 'bg-indigo-700 text-white dark:bg-indigo-900'
                                : 'text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white',
                              'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                            ]"
                          >
                            <span
                              class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white dark:border-gray-600 dark:bg-gray-700"
                            >
                              {{ team.initial }}
                            </span>
                            <span class="truncate">{{ team.name }}</span>
                          </NuxtLink>
                        </li>
                      </ul>
                    </li>

                    <!-- settings -->
                    <li class="mt-auto">
                      <NuxtLink
                        to="./"
                        class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white"
                      >
                        <Cog6ToothIcon
                          class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white dark:text-gray-300 dark:group-hover:text-white"
                          aria-hidden="true"
                        />
                        Settings
                      </NuxtLink>
                    </li>
                  </ul>
                </nav>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </Dialog>
    </TransitionRoot>

    <!-- Desktop sidebar -->
    <div
      class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col"
    >
      <div
        class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 dark:bg-gray-800 px-6 pb-4 ring-1 ring-white/10 dark:ring-black/10"
      >
        <!-- LOGO -->
        <div class="flex h-16 shrink-0 items-center">
          <img
            class="h-8 w-auto"
            src="https://tailwindcss.com/img/logos/mark.svg?color=white"
            alt="Your Company"
          />
        </div>

        <!-- NAVIGATION (desktop) -->
        <nav class="flex flex-1 flex-col">
          <ul role="list" class="flex flex-1 flex-col gap-y-7">
            <!-- duplicate same blocks as mobile -->
            <li v-for="item in navigation" :key="item.name">
              <NuxtLink
                :to="item.href"
                :class="[
                  item.current
                    ? 'bg-indigo-700 text-white dark:bg-indigo-900'
                    : 'text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white',
                  'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                ]"
              >
                <component
                  :is="item.icon"
                  :class="[
                    item.current
                      ? 'text-white dark:text-indigo-100'
                      : 'text-indigo-200 group-hover:text-white dark:text-gray-300 dark:group-hover:text-indigo-100',
                    'h-6 w-6 shrink-0',
                  ]"
                  aria-hidden="true"
                />
                {{ item.name }}
              </NuxtLink>
            </li>

            <!-- teams -->
            <li>
              <div
                class="text-xs font-semibold leading-6 text-indigo-200 dark:text-gray-400"
              >
                Your teams
              </div>
              <ul role="list" class="-mx-2 mt-2 space-y-1">
                <li v-for="team in teams" :key="team.name">
                  <NuxtLink
                    :to="team.href"
                    :class="[
                      team.current
                        ? 'bg-indigo-700 text-white dark:bg-indigo-900'
                        : 'text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white',
                      'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                    ]"
                  >
                    <span
                      class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white dark:border-gray-600 dark:bg-gray-700"
                    >
                      {{ team.initial }}
                    </span>
                    <span class="truncate">{{ team.name }}</span>
                  </NuxtLink>
                </li>
              </ul>
            </li>

            <!-- settings -->
            <li class="mt-auto">
              <NuxtLink
                to="./"
                class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white"
              >
                <Cog6ToothIcon
                  class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white dark:text-gray-300 dark:group-hover:text-white"
                  aria-hidden="true"
                />
                Settings
              </NuxtLink>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'; // ← make sure you have this
import {
  Dialog,
  DialogPanel,
  TransitionChild,
  TransitionRoot,
} from '@headlessui/vue';
import {
  Cog6ToothIcon,
  DocumentDuplicateIcon,
  FolderIcon,
  HomeIcon,
  XMarkIcon,
} from '@heroicons/vue/24/outline';

const props = defineProps({
  open: { type: Boolean, default: false },
});
const emit = defineEmits(['close']);
// we’ll just call `emit('close')` whenever you want to hide
const close = () => emit('close');

// your nav data
const navigation = [
  { name: 'Dashboard', href: '/cms/dashboard', icon: HomeIcon, current: true },
  { name: 'Upload New', href: '/cms/upload', icon: FolderIcon, current: false },
  {
    name: 'Posts',
    href: '/cms/posts',
    icon: DocumentDuplicateIcon,
    current: false,
  },
];
const teams = [
  { name: 'Content Writers', href: '#', initial: 'CW', current: false },
  { name: 'Editors', href: '#', initial: 'E', current: false },
];

// expose `open` to the template
const open = computed(() => props.open);
</script>
