<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { openURL } from 'quasar'
import { useI18n } from 'vue-i18n'

import docsectorConfig from 'docsector.config.js'
import { pageValueI18nPath, routeTitleI18nPath } from '../i18n/path'

const store = useStore()
const route = useRoute()
const router = useRouter()
const { t, locale, availableLocales, te, tm } = useI18n()

function normalizeEditBaseUrl (url = '') {
  const normalized = String(url).trim().replace(/\/+$/, '')
  return normalized.replace(/(github\.com\/[^/]+\/[^/]+)\/(blob|tree)\//, '$1/edit/')
}

const base = normalizeEditBaseUrl(docsectorConfig.github?.editBaseUrl || '')

function getCurrentSubpageName () {
  const relative = store.state.page.relative || '/overview'
  return String(relative).replace(/^\/+|\/+$/g, '') || 'overview'
}

function routePathToSourcePath (path = '') {
  const sourcePathBase = route.matched?.[0]?.meta?.sourcePathBase
  if (typeof sourcePathBase === 'string' && sourcePathBase.length > 0) {
    return `/${sourcePathBase}.${getCurrentSubpageName()}`
  }

  const cleanPath = String(path)
    .replace(/\/index\.html$/, '')
    .replace(/\/+$/, '')

  if (cleanPath === '' || cleanPath === '/') {
    return '/Homepage'
  }

  const segments = cleanPath.replace(/^\//, '').split('/').filter(Boolean)
  if (segments.length < 2) {
    return `/${segments.join('/')}`
  }

  const subpage = segments.pop()
  return `/${segments.join('/')}.${subpage}`
}

const status = computed(() => route.meta.status)
const URL = computed(() => {
  const path = routePathToSourcePath(route.path)
  return `${base}${path}.${locale.value}.md`
})
const color = computed(() => {
  if (status.value === 'done' || status.value === 'new') {
    return 'white'
  } else if (status.value === 'draft') {
    return 'warning'
  } else {
    return 'red-6'
  }
})
const icon = computed(() => {
  if (status.value === 'done' || status.value === 'new') {
    return 'edit'
  } else if (status.value === 'draft') {
    return 'border_color'
  } else {
    return 'note_add'
  }
})

const progress = computed(() => {
  const i18nPathAbsolute = store.state.i18n.absolute

  if (!i18nPathAbsolute) {
    return '?%'
  }

  const defaultLang = docsectorConfig.defaultLanguage || 'en-US'
  const currentLang = locale.value

  // Count headers (## and ###) in the default language source
  const defaultSourcePath = pageValueI18nPath(i18nPathAbsolute, 'source')
  const defaultSource = te(defaultSourcePath, defaultLang) ? tm(defaultSourcePath, defaultLang) : ''

  if (!defaultSource || typeof defaultSource !== 'string') {
    return '?%'
  }

  const headerRegex = /^#{2,6}\s+.+/gm
  const defaultHeaders = (defaultSource.match(headerRegex) || []).length

  if (defaultHeaders === 0) {
    return '100%'
  }

  // If current lang is the default, progress is always 100%
  if (currentLang === defaultLang) {
    return '100%'
  }

  // Count headers in the current language source
  const currentSource = te(defaultSourcePath, currentLang) ? tm(defaultSourcePath, currentLang) : ''

  if (!currentSource || typeof currentSource !== 'string') {
    return '0%'
  }

  const currentHeaders = (currentSource.match(headerRegex) || []).length
  const percent = Math.min(100, Math.floor((currentHeaders / defaultHeaders) * 100))

  return `${percent}%`
})

const languages = computed(() => {
  const i18nPathAbsolute = store.state.i18n.absolute
  const i18nLocales = availableLocales
  const sourcePath = pageValueI18nPath(i18nPathAbsolute, 'source')

  if (!i18nPathAbsolute || i18nLocales.length === 0) {
    return `0/${i18nLocales.length}`
  }

  let i18nLocalesAvailable = 0
  for (let i = 0; i < i18nLocales.length; i++) {
    const currentLocale = i18nLocales[i]

    if (!te(sourcePath, currentLocale)) {
      continue
    }

    const source = tm(sourcePath, currentLocale)
    if (typeof source === 'string' && source.trim().length > 0) {
      i18nLocalesAvailable++
    }
  }

  return `${i18nLocalesAvailable}/${i18nLocales.length}`
})

const normalizeRoutePath = (path) => {
  const normalized = String(path || '').trim()
  if (normalized === '' || normalized === '/') {
    return '/'
  }

  const sanitized = normalized.replace(/\/+$/, '')
  return sanitized === '' ? '/' : sanitized
}

const getVersionSiblingPath = (offset) => {
  const versionId = route.matched?.[0]?.meta?.version ?? null
  const currentPath = normalizeRoutePath(route.matched?.[0]?.path || `/${store.state.page.base}`)
  const routes = router.options.routes
    .slice(0, -2)
    .filter(item => item?.meta?.menu?.hidden !== true)
    .filter(item => !versionId || item?.meta?.version === versionId)

  const index = routes.findIndex(item => normalizeRoutePath(item.path) === currentPath)
  if (index < 0) return ''

  const sibling = routes[index + offset]
  if (!sibling) return ''

  return sibling.path
}

const prev = computed(() => {
  return getVersionSiblingPath(-1)
})

const next = computed(() => {
  return getVersionSiblingPath(1)
})

const hideRemoteHomeFooterMeta = computed(() => {
  const homePage = docsectorConfig.homePage || {}
  const isRemoteHome = homePage.source === 'remote-readme' && typeof homePage.remoteReadmeUrl === 'string' && homePage.remoteReadmeUrl.length > 0
  const isHomePage = route.path === '/' || store.state.page.base === 'home'

  return isRemoteHome && isHomePage
})

const getRouteTitle = (path) => {
  return t(routeTitleI18nPath(path))
}
</script>

<template>
<div id="d-page-meta">
  <div v-if="!hideRemoteHomeFooterMeta" class="row justify-between q-mt-lg">
    <div id="d-page-edit" class="col">
      <q-btn dense no-caps text-color="black" :color="color" @click="openURL(URL)" aria-label="Edit page on Github">
        <q-icon class="q-mr-xs" name="fab fa-github" size="20px" />
        <span class="hm" v-if="status === 'done' || status === 'new'">{{ $t('page.edit.github.edit') }}</span>
        <span class="hm" v-else-if="status === 'draft'">{{ $t('page.edit.github.complete') }}</span>
        <span class="hm" v-else-if="status === 'empty'">{{ $t('page.edit.github.start') }}</span>
      </q-btn>
    </div>
    <div id="d-page-translation" class="col-auto">
      <q-chip class="languages-progress q-mr-xs q-ml-none" dense square>
        <q-icon class="q-mr-xs" name="translate" size="20px" />
        <span>{{ $i18n.locale }}:<b>{{ ' ' + progress }}</b></span>
        <q-tooltip anchor="top middle" self="bottom middle" :offset="[10, 10]">{{ $t('page.edit.progress') }}</q-tooltip>
      </q-chip>

      <q-chip class="languages-available q-ma-none" dense square>
        <q-icon class="q-mr-xs" name="language" size="20px" />
        <span>{{ '#' + languages }}</span>
        <q-tooltip anchor="top end" self="bottom end" :offset="[10, 10]">{{ $t('page.edit.translations') }}</q-tooltip>
      </q-chip>
    </div>
  </div>

  <nav id="d-page-nav" class="row">
    <router-link class="link col" v-if="prev" :to="`${prev}/overview/`">
      <div class="text-caption">{{ $t('page.nav.prev') }}</div>
      <q-icon name="navigate_before" />
      <span>{{ getRouteTitle(prev) }}</span>
    </router-link>
    <router-link class="link col" v-if="next" :to="`${next}/overview/`">
      <div class="text-caption">{{ $t('page.nav.next') }}</div>
      <span>{{ getRouteTitle(next) }}</span>
      <q-icon name="navigate_next" />
    </router-link>
  </nav>
</div>
</template>

<style lang="sass">
#d-page-meta
  max-width: 1200px
  display: block
  width: 100%
  min-height: 36px
  margin: 24px auto 40px auto
  border-top: 3px solid #e0e0e0

  #d-page-translation
    .q-chip
      padding: 16px 0.4em
      margin-top: 0
      margin-bottom: 0

  #d-page-nav
    &:first-child
      margin-top: calc(100vh - 200px)

    .link
      margin-top: 20px
      border: 1px solid #e0e0e0
      padding: 15px !important
</style>
