<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"
                >
                  <h1
                    class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold"
                  >
                    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': isCoopBuilderSection,
                  }"
                >
                  Co-Op Builder
                </NuxtLink>
                <!-- Coach feature - hidden for now -->
                <!-- <NuxtLink
                  to="/coach/skills-to-offers"
                  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.startsWith('/coach'),
                  }"
                >
                  Coach
                </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>
                <NuxtLink
                  to="/resources"
                  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 === '/resources',
                  }"
                >
                  More Resources & Templates
                </NuxtLink>
              </nav>
              <div class="py-8">
                <CoopBuilderSubnav v-if="isCoopBuilderSection" />
                <WizardSubnav v-if="isWizardSection" />
              </div>
            </header>
            <NuxtPage />
          </UContainer>
        </template>
        <template v-else>
          <NuxtPage />
        </template>
      </NuxtLayout>
      <NuxtRouteAnnouncer />
    </div>
  </UApp>
</template>

<script setup lang="ts">
const route = useRoute();
const isCoopBuilderSection = computed(
  () =>
    route.path === "/coop-planner" ||
    route.path === "/coop-builder" ||
    route.path === "/" ||
    route.path === "/dashboard" ||
    route.path === "/mix" ||
    route.path === "/budget" ||
    route.path === "/cash-flow" ||
    route.path === "/settings" ||
    route.path === "/glossary"
);

const isWizardSection = computed(
  () => route.path === "/wizards" || route.path.startsWith("/templates/")
);

// Run migrations on app startup
onMounted(() => {
  const { migrate, needsMigration } = useMigrations();
  if (needsMigration()) {
    migrate();
  }
});
</script>
