<template>
  <v-app-bar :color="appBarColors.background" aria-label="Main Navigation" role="navigation">
    <v-container :class="containerClasses" :style="{ maxWidth: maxContainerWidth }" fluid>
      <v-row align="center">
        <v-app-bar-title class="app-title">
          <span aria-label="Home" class="home-link" role="button" tabindex="0">
            {{ appTitle }}
          </span>
          <a
            :href="repoUrl"
            aria-label="ALHP GitHub Repository"
            class="ms-2 gitea-link"
            rel="noopener noreferrer"
            target="_blank">
            <i aria-hidden="true" class="fa fa-gitea"></i>
          </a>
        </v-app-bar-title>

        <v-spacer v-if="isDesktop"></v-spacer>

        <build-stats v-if="isDesktop || isTablet" :show-lto="isDesktop" />

        <!-- Mobile menu button could be added here -->
      </v-row>
    </v-container>
  </v-app-bar>
</template>

<script lang="ts" setup>
import BuildStats from '@/components/MainNav/BuildStats.vue'
import { useDisplay } from 'vuetify'
import { computed } from 'vue'

const { mobile, width } = useDisplay()
const isTablet = computed(() => mobile && width.value >= 650 && width.value < 960)
const isDesktop = computed(() => !mobile.value && !isTablet.value)

interface AppBarColors {
  background: string
  accent: string
}

const appTitle = 'ALHP Status'
const repoUrl = 'https://somegit.dev/ALHP/ALHP.GO'
const maxContainerWidth = '1440px'
const appBarColors: AppBarColors = {
  background: '#0d1538',
  accent: '#609926'
}

const containerClasses = computed(() => ({
  'ms-3': width.value < 1440,
  'mx-auto': width.value >= 1440
}))
</script>

<style scoped>
.app-title {
  align-self: center;
  font-size: 20px;
  display: flex;
  align-items: center;
}

.home-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.home-link:hover,
.home-link:focus {
  opacity: 0.9;
  outline: none;
}

.gitea-link {
  color: white;
  font-size: 25px;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}

.gitea-link:hover,
.gitea-link:focus {
  color: v-bind('appBarColors.accent');
  outline: none;
}

@media (max-width: 600px) {
  .app-title {
    font-size: 18px;
  }

  .gitea-link {
    font-size: 22px;
  }
}
</style>
