---
import { Astronav, Dropdown, DropdownItems, MenuItems } from 'astro-navbar'
import { motion } from 'motion/react'
import Button from '~/components/Button.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import ChevronDownIcon from '~/icons/ChevronDownIcon.astro'
import DownloadIcon from '~/icons/DownloadIcon.astro'
import MenuIcon from '~/icons/MenuIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import { getTitleAnimation } from '../animations.ts'
import Logo from './Logo.astro'
import MobileMenu from './MobileMenu.astro'
import ThemeSwitch from './ThemeSwitch.astro'

const locale = getLocale(Astro)
const getLocalePath = getPath(locale)
const {
  components: {
    nav: { brand, menu },
  },
} = getUI(locale)
---

<!-- Desktop Navigation -->
<Astronav>
  <MenuItems
    class="container relative z-20 grid w-full grid-cols-2 items-center gap-2 bg-paper py-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:py-6"
  >
    <a
      class="flex items-center gap-2 text-lg font-bold"
      href={getLocalePath('/')}
    >
      <Logo class="text-coral" />
      <span>{brand}</span>
    </a>
    <div
      class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base"
    >
      <Dropdown class="group">
        <button class="flex items-center">
          <span>{menu.gettingStarted}</span>
          <ChevronDownIcon
            class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
          />
        </button>
        <DropdownItems>
          <motion.div
            className="navbar-dropdown"
            {...getTitleAnimation(0, 0.3, false)}
            client:load
          >
            <a
              class="dropdown-item bg-dark/5 row-span-2"
              href={getLocalePath('/mods')}
            >
              <div class="dropdown-title">{menu.zenMods}</div>
              <div class="dropdown-description">
                {menu.zenModsDesc}
              </div>
              <Button isPrimary class="mt-auto">
                {menu.tryZenMods}
                <ArrowRightIcon class="size-4" />
              </Button>
            </a>
            <a class="dropdown-item" href={getLocalePath('/release-notes')}>
              <div class="dropdown-title">{menu.releaseNotes}</div>
              <div class="dropdown-description">
                {menu.releaseNotesDesc}
              </div>
            </a>
            <a class="dropdown-item" href="https://discord.gg/zen-browser">
              <div class="dropdown-title">{menu.discord}</div>
              <div class="dropdown-description">
                {menu.discordDesc}
              </div>
            </a>
          </motion.div>
        </DropdownItems>
      </Dropdown>
      <Dropdown class="group">
        <button class="flex items-center">
          <span>{menu.usefulLinks}</span>
          <ChevronDownIcon
            class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
          />
        </button>
        <DropdownItems>
          <motion.div
            className="navbar-dropdown !grid-cols-1 gap-1"
            {...getTitleAnimation(0, 0.3, false)}
            client:load
          >
            <a class="dropdown-item" href={getLocalePath('/donate')}>
              <div class="dropdown-title">{menu.donate}</div>
              <div class="dropdown-description">
                {menu.donateDesc}
              </div>
            </a>
            <a class="dropdown-item" href={getLocalePath('/about')}>
              <div class="dropdown-title">{menu.aboutUs}</div>
              <div class="dropdown-description">
                {menu.aboutUsDesc}
              </div>
            </a>
            <a class="dropdown-item" href="https://docs.zen-browser.app">
              <div class="dropdown-title">{menu.documentation}</div>
              <div class="dropdown-description">
                {menu.documentationDesc}
              </div>
            </a>
            <a
              class="dropdown-item"
              href="https://github.com/zen-browser"
              target="_blank"
            >
              <div class="dropdown-title">{menu.github}</div>
              <div class="dropdown-description">
                {menu.githubDesc}
              </div>
            </a>
          </motion.div>
        </DropdownItems>
      </Dropdown>
      <a class="hidden items-center lg:block" href={getLocalePath('/mods')}>
        <span>{menu.mods}</span>
      </a>
    </div>
    <div class="flex items-center gap-2 place-self-end lg:gap-4">
      <div id="theme-switcher">
        <ThemeSwitch label="Toggle theme" />
      </div>
      <Button href="/download" class="hidden lg:flex" isPrimary>
        <span class="hidden items-center gap-2 lg:flex">
          {menu.download}
          <ArrowRightIcon class="size-4" />
        </span>
        <span class="flex items-center gap-2 lg:hidden">
          <DownloadIcon class="size-4" />
        </span>
      </Button>
      <label
        for="mobile-menu-toggle"
        class="cursor-pointer p-2 text-dark lg:hidden"
        aria-label="Open menu"
      >
        <MenuIcon class="h-6 w-6" />
      </label>
    </div>
  </MenuItems>
</Astronav>

<!-- Mobile Hamburger Menu Content -->
<MobileMenu />

<style>
  .navbar-dropdown {
    @apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm;
    & .dropdown-item {
      @apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200;

      &:hover {
        @apply bg-muted;
      }

      & .dropdown-title {
        @apply font-bold;
      }

      & .dropdown-description {
        @apply text-sm;
      }
    }
  }
</style>
<style is:global>
  #theme-switcher * {
    @apply text-dark;
  }
</style>
