<template>
  <UApp>
    <div class="min-h-screen bg-white dark:bg-neutral-950">
      <UToaster />
      <NuxtLayout>
        <template v-if="$route.meta.layout !== 'template'">
          <UContainer class="bg-transparent">
            <header class="py-6">
              <div class="relative flex items-center justify-center">
                <NuxtLink
                  to="/"
                  class="flex items-center gap-2 hover:opacity-80 transition-opacity">
                  <UIcon
                    name="i-heroicons-rocket-launch"
                    class="text-primary-500" />
                  <h1
                    class="font-semibold text-black dark:text-white text-center">
                    Urgent Tools
                  </h1>
                </NuxtLink>
                <div class="absolute right-0">
                  <ColorModeToggle />
                </div>
              </div>
              <nav
                class="mt-4 flex items-center justify-center gap-1"
                role="navigation"
                aria-label="Main navigation">
                <NuxtLink
                  to="/coop-planner"
                  class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                  :class="{
                    'bg-neutral-100 dark:bg-neutral-800': isCoopSection,
                  }">
                  Co-Op in 6 Months
                </NuxtLink>
                <NuxtLink
                  to="/wizards"
                  class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                  :class="{
                    'bg-neutral-100 dark:bg-neutral-800':
                      $route.path === '/wizards',
                  }">
                  Wizards
                </NuxtLink>
                <UButton
                  color="gray"
                  variant="ghost"
                  disabled
                  class="px-3 py-2 text-sm text-black dark:text-white rounded-md opacity-60 cursor-not-allowed">
                  Downloads
                </UButton>
              </nav>
              <nav
                v-if="isCoopSection"
                class="mt-2 flex items-center justify-center gap-1"
                role="navigation"
                aria-label="Co-Op in 6 Months sub navigation">
                <NuxtLink
                  v-for="item in coopMenu[0]"
                  :key="item.to"
                  :to="item.to"
                  class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                  :class="{
                    'bg-neutral-100 dark:bg-neutral-800':
                      route.path === item.to,
                  }">
                  {{ item.label }}
                </NuxtLink>
              </nav>
            </header>
            <NuxtPage />
          </UContainer>
        </template>
        <template v-else>
          <NuxtPage />
        </template>
      </NuxtLayout>
      <NuxtRouteAnnouncer />
    </div>
  </UApp>
</template>

<script setup lang="ts">
const coopMenu = [
  [
    { label: "Dashboard", to: "/" },
    { label: "Revenue Mix", to: "/mix" },
    { label: "Budget", to: "/budget" },
    { label: "Scenarios", to: "/scenarios" },
    { label: "Cash", to: "/cash" },
    { label: "Glossary", to: "/glossary" },
  ],
];

const route = useRoute();
const isCoopSection = computed(() => route.path === "/coop-planner");
</script>
