<script lang="ts" setup>
import { usePage } from '@inertiajs/vue3'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useTheme } from 'vuetify'
import { marketingNavItems } from '@/navigation/marketing'
import { crossDomainUrl } from '@/utils/resolvers'
import logoWhite from '@images/ezscale_logo_white.png'

const theme = useTheme()
const isDark = computed(() => theme.global.current.value.dark)
const isScrolled = ref(false)

function handleScroll(): void {
  isScrolled.value = window.scrollY > 50
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  handleScroll()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

const currentPath = computed<string>(() => {
  if (typeof window !== 'undefined') return window.location.pathname
  return '/'
})


interface PageProps {
  domains: { marketing: string; account: string; admin: string }
}

const page = usePage()
const props = computed(() => page.props as unknown as PageProps)
const accountUrl = computed(() => crossDomainUrl(props.value.domains?.account))

const footerLinks = {
  products: [
    { title: 'VPS Hosting', href: '/vps-hosting' },
    { title: 'Dedicated Servers', href: '/dedicated-servers' },
    { title: 'Web Hosting', href: '/web-hosting' },
    { title: 'Game Servers', href: '/game-servers' },
  ],
  company: [
    { title: 'About', href: '/about' },
    { title: 'Pricing', href: '/pricing' },
    { title: 'Contact', href: '/contact' },
  ],
  support: [
    { title: 'Help Center', href: 'https://ezscale.support' },
    { title: 'Knowledge Base', href: 'https://ezscale.support/en/knowledgebase' },
    { title: 'Status Page', href: 'https://status.ezscale.cloud' },
  ],
  legal: [
    { title: 'Terms of Service', href: '/terms-of-service' },
    { title: 'Privacy Policy', href: '/privacy-policy' },
    { title: 'Acceptable Use', href: '/acceptable-use' },
    { title: 'SLA', href: '/sla' },
  ],
}

const socialLinks = [
  { title: 'discord', icon: 'tabler-brand-discord-filled', href: 'https://discord.gg/ezscale' },
]

const mobileMenuOpen = ref(false)
</script>

<template>
  <VApp>
    <!-- Navbar -->
    <VAppBar
      :elevation="0"
      :class="isScrolled ? 'navbar-scrolled' : 'navbar-transparent'"
      class="marketing-navbar"
      flat
    >
      <VContainer class="d-flex align-center">
        <a href="/" class="d-inline-flex align-center text-decoration-none ga-2">
          <img
            :src="logoWhite"
            alt="EZSCALE"
            :class="{ 'logo-light': !isDark && isScrolled }"
            style="height: 28px; width: auto;"
          >
        </a>

        <VSpacer />

        <!-- Desktop nav -->
        <div class="d-none d-md-flex align-center ga-1">
          <template v-for="item in marketingNavItems" :key="item.title">
            <VMenu v-if="item.children" open-on-hover>
              <template #activator="{ props: menuProps }">
                <VBtn variant="text" size="small" v-bind="menuProps">
                  {{ item.title }}
                  <VIcon icon="tabler-chevron-down" end size="small" />
                </VBtn>
              </template>
              <VList>
                <VListItem
                  v-for="child in item.children"
                  :key="child.href"
                  :href="child.href"
                >
                  <template #prepend>
                    <VIcon v-if="child.icon" :icon="child.icon" />
                  </template>
                  <VListItemTitle>{{ child.title }}</VListItemTitle>
                  <VListItemSubtitle v-if="child.description">
                    {{ child.description }}
                  </VListItemSubtitle>
                </VListItem>
              </VList>
            </VMenu>

            <a v-else :href="item.href" class="text-decoration-none">
              <VBtn
                variant="text"
                size="small"
                :color="item.href === currentPath ? 'primary' : undefined"
              >
                {{ item.title }}
              </VBtn>
            </a>
          </template>
        </div>

        <VSpacer />

        <div class="d-flex align-center ga-2">
          <a :href="accountUrl + '/login'" class="text-decoration-none d-none d-sm-inline">
            <VBtn variant="text" size="small">Login</VBtn>
          </a>

          <a :href="accountUrl + '/register'" class="text-decoration-none d-none d-sm-inline">
            <VBtn variant="flat" size="small" color="primary">Sign Up</VBtn>
          </a>

          <!-- Mobile hamburger -->
          <VBtn
            icon
            variant="text"
            size="small"
            class="d-md-none"
            @click="mobileMenuOpen = true"
          >
            <VIcon icon="tabler-menu-2" />
          </VBtn>
        </div>
      </VContainer>
    </VAppBar>

    <!-- Mobile slide-in menu -->
    <VNavigationDrawer
      v-model="mobileMenuOpen"
      temporary
      location="end"
      width="280"
    >
      <VList>
        <template v-for="item in marketingNavItems" :key="item.title">
          <template v-if="item.children">
            <VListItem
              v-for="child in item.children"
              :key="child.href"
              :href="child.href"
            >
              <template #prepend>
                <VIcon v-if="child.icon" :icon="child.icon" />
              </template>
              <VListItemTitle>{{ child.title }}</VListItemTitle>
            </VListItem>
          </template>
          <VListItem v-else :href="item.href">
            <VListItemTitle>{{ item.title }}</VListItemTitle>
          </VListItem>
        </template>
        <VDivider class="my-2" />
        <VListItem :href="accountUrl + '/login'">
          <VListItemTitle>Login</VListItemTitle>
        </VListItem>
        <VListItem :href="accountUrl + '/register'">
          <VListItemTitle class="text-primary font-weight-bold">Sign Up</VListItemTitle>
        </VListItem>
      </VList>
    </VNavigationDrawer>

    <VMain>
      <slot />
    </VMain>

    <!-- Mega Footer -->
    <footer class="mega-footer">
      <VContainer>
        <VRow>
          <VCol cols="12" md="4">
            <div class="mb-4" :class="$vuetify.display.smAndDown ? 'w-100' : 'w-75'">
              <div class="d-flex align-center mb-6">
                <img :src="logoWhite" alt="EZSCALE" style="height: 28px; width: auto;" />
              </div>
              <div style="color: rgba(255,255,255,0.5);" class="mb-6 text-body-2">
                Reliable hosting with enterprise-grade infrastructure. VPS, dedicated servers, and web hosting at fair prices.
              </div>
              <a href="/contact" class="text-decoration-none">
                <VBtn variant="outlined" size="small" color="primary">
                  Questions? Contact Us
                  <VIcon icon="tabler-arrow-right" end size="16" />
                </VBtn>
              </a>
            </div>
          </VCol>

          <VCol md="2" sm="4" xs="6">
            <div class="footer-title">Products</div>
            <a v-for="link in footerLinks.products" :key="link.href" :href="link.href" class="footer-link">
              {{ link.title }}
            </a>
          </VCol>

          <VCol md="2" sm="4" xs="6">
            <div class="footer-title">Company</div>
            <a v-for="link in footerLinks.company" :key="link.href" :href="link.href" class="footer-link">
              {{ link.title }}
            </a>
          </VCol>

          <VCol md="2" sm="4" xs="6">
            <div class="footer-title">Support</div>
            <a v-for="link in footerLinks.support" :key="link.href" :href="link.href" class="footer-link">
              {{ link.title }}
            </a>
          </VCol>

          <VCol md="2" sm="4" xs="6">
            <div class="footer-title">Legal</div>
            <a v-for="link in footerLinks.legal" :key="link.href" :href="link.href" class="footer-link">
              {{ link.title }}
            </a>
          </VCol>
        </VRow>

        <div class="footer-bottom d-flex justify-space-between flex-wrap gap-y-4 align-center">
          <div class="text-body-2" style="color: rgba(255,255,255,0.4);">
            &copy; {{ new Date().getFullYear() }}
            <span class="font-weight-bold ms-1" style="color: rgba(255,255,255,0.7);">EZSCALE</span>,
            All rights reserved.
          </div>
          <div class="d-flex gap-x-4">
            <a
              v-for="item in socialLinks"
              :key="item.title"
              :href="item.href"
              target="_blank"
              rel="noopener noreferrer"
            >
              <VIcon :icon="item.icon" size="16" color="white" />
            </a>
          </div>
        </div>
      </VContainer>
    </footer>
  </VApp>
</template>

<style lang="scss" scoped>
.marketing-navbar {
  transition: all 0.3s ease;
}

.navbar-transparent {
  background: transparent !important;
}

.navbar-scrolled {
  background: rgba(var(--v-theme-surface), 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.06);
}
</style>
