<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import { computed, ref, watch, onMounted } from 'vue'
import { useTheme } from 'vuetify';
import DiscordWarningDialog from '@/components/DiscordWarningDialog.vue';
import OfficialSocials from '@/components/layout/OfficialSocials.vue';
import { useDiscordIntercept } from '@/composables/useDiscordIntercept';

const theme = useTheme();
const router = useRouter();
const isInIframe = computed(() => window.self !== window.top);

const { showDialog, discordUrl, interceptDiscordLinks } = useDiscordIntercept();

function toggleTheme() {
  const newTheme = theme.global.name.value === 'dark' ? 'light' : 'dark';
  theme.change(newTheme);
  localStorage.setItem('theme', newTheme);
}

function handleDiscordProceed(url: string) {
  window.open(url, '_blank');
}

onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    theme.change(savedTheme);
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    theme.change(prefersDark ? 'dark' : 'light');
    localStorage.setItem('theme', theme.global.name.value);
  }
  interceptDiscordLinks();
});

const items = [
  { title: 'Home', icon: 'mdi-home', to: '/' },
  { title: 'Map', icon: 'mdi-map', href: 'https://maps.deflock.org' },
  { title: 'Learn', icon: 'mdi-school', to: '/what-is-an-alpr' },
  { title: 'Store', icon: 'mdi-shopping', to: '/store' },
  { title: 'Donate', icon: 'mdi-cash-multiple', to: '/donate' },
]

const resourceItems = [
  { title: 'Public Records', icon: 'mdi-file-document', to: '/foia' },
  { title: 'City Council', icon: 'mdi-account-voice', to: '/council' },
  { title: 'FAQ', icon: 'mdi-help-circle', to: '/what-is-an-alpr' },
]

const getInvolvedItems = [
  { title: 'Local Groups', icon: 'mdi-account-group', to: '/groups' },
  { title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
  { title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
  { title: 'Submit Cameras', icon: 'mdi-map-marker-plus', to: '/report' },
];
const drawer = ref(false)


watch(() => theme.global.name.value, (newTheme) => {
  const root = document.documentElement;
  if (newTheme === 'dark') {
    root.style.setProperty('--df-background-color', 'rgb(33, 33, 33)');
    root.style.setProperty('--df-text-color', '#ccc');
  } else {
    root.style.setProperty('--df-background-color', 'white');
    root.style.setProperty('--df-text-color', 'black');
  }
});
</script>

<template>
  <v-app>
    <template v-if="!isInIframe">
      <v-app-bar
        flat
        prominent
      >
        <!-- Mobile hamburger menu -->
        <v-app-bar-nav-icon 
          variant="text" 
          @click.stop="drawer = !drawer"
          class="d-md-none"
          aria-label="Toggle Navigation Drawer"
        ></v-app-bar-nav-icon>

        <!-- Logo -->
        <v-toolbar-title style="flex: unset;">
          <div style="display: flex; align-items: center; cursor: pointer;" @click="router.push('/')">
            <v-img height="36" width="36" alt="DeFlock Icon" src="/favicons/apple-icon-144x144.png" />
            <v-img style="margin-left: 8px;" height="36" width="130" alt="DeFlock Logo" src="/deflock-logo.svg" />
          </div>
        </v-toolbar-title>

        <!-- Desktop horizontal navigation -->
        <div class="d-none d-md-flex ml-8 flex-grow-1">
          <!-- Main navigation items -->
          <div class="d-flex align-center">
            <v-btn
              v-for="item in items.slice(1)"
              :key="item.title"
              :to="item.to"
              :href="item.href"
              :target="item.target"
              variant="text"
              class="mx-1"
              :prepend-icon="item.icon"
            >
              {{ item.title }}
            </v-btn>
          </div>

          <v-spacer></v-spacer>

          <!-- Resources section -->
          <div class="d-flex align-center">
            <v-menu offset-y>
              <template v-slot:activator="{ props }">
                <v-btn
                  variant="text"
                  v-bind="props"
                  append-icon="mdi-chevron-down"
                  class="mx-1"
                >
                  Resources
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="item in resourceItems"
                  :key="item.title"
                  :to="item.to"
                  link
                >
                  <template v-slot:prepend>
                    <v-icon>{{ item.icon }}</v-icon>
                  </template>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

            <!-- Get Involved section -->
            <v-menu offset-y>
              <template v-slot:activator="{ props }">
                <v-btn
                  variant="text"
                  v-bind="props"
                  append-icon="mdi-chevron-down"
                  class="mx-1"
                >
                  Get Involved
                </v-btn>
              </template>
              <v-list>
                <v-list-item
                  v-for="item in getInvolvedItems"
                  :key="item.title"
                  :to="item.to"
                  :href="item.href"
                  :target="item.href ? '_blank' : undefined"
                  link
                >
                  <template v-slot:prepend>
                    <v-icon>{{ item.icon }}</v-icon>
                  </template>
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

            <!-- Official Socials section -->
            <v-menu offset-y>
              <template v-slot:activator="{ props }">
                <v-btn
                  variant="text"
                  v-bind="props"
                  append-icon="mdi-chevron-down"
                  class="mx-1"
                >
                  Official Socials
                </v-btn>
              </template>
              <OfficialSocials />
            </v-menu>
          </div>
        </div>


        <v-spacer class="d-md-none" />

        <v-btn icon @click="toggleTheme" aria-label="Toggle Theme">
          <v-icon>mdi-theme-light-dark</v-icon>
        </v-btn>
      </v-app-bar>

      <!-- Mobile navigation drawer -->
      <v-navigation-drawer
        v-model="drawer"
        temporary
        class="d-md-none"
        aria-label="Navigation Drawer"
      >
        <v-list nav aria-label="Main Navigation">
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            :to="item.to"
            :href="item.href"
            :target="item.target"
            role="option"
          >
            <v-icon start>{{ item.icon }}</v-icon>
            {{ item.title }}
          </v-list-item>
        </v-list>

        <v-divider class="my-2" aria-hidden="true" role="presentation" />

        <v-list-subheader class="px-4">Resources</v-list-subheader>
        <v-list nav aria-label="Resource Links">
          <v-list-item
            v-for="item in resourceItems"
            :key="item.title"
            link
            :to="item.to"
            role="option"
          >
            <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
            <span style="vertical-align: middle;">{{ item.title }}</span>
          </v-list-item>
        </v-list>
          
        <v-divider class="my-2" aria-hidden="true" role="presentation" />
          
        <v-list-subheader class="px-4">Get Involved</v-list-subheader>
        <v-list nav aria-label="Get Involved Links">
          <v-list-item
            v-for="item in getInvolvedItems"
            :key="item.title"
            link
            :to="item.to"
            :href="item.href"
            :target="item.href ? '_blank' : undefined"
            role="option"
          >
            <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
            <span style="vertical-align: middle;">{{ item.title }}</span>
          </v-list-item>
        </v-list>

        <v-divider class="my-2" aria-hidden="true" role="presentation" />

        <v-list-subheader class="px-4">Official Socials</v-list-subheader>
        <OfficialSocials />
      </v-navigation-drawer>

    </template>

    <v-main>
      <RouterView />
    </v-main>

    <DiscordWarningDialog
      v-model="showDialog"
      :discordUrl="discordUrl"
      @proceed="handleDiscordProceed"
    />
  </v-app>
</template>

<style lang="css" scoped>
.custom-icon {
  display: inline-block;
  margin-right: 5px;
}
</style>
