<script setup lang="ts">
// Страница-инструкция расширения быстрого захвата (ТЗ 3.18): как скачать
// и загрузить unpacked, куда вставить MCP-токен. В меню — только из
// веб-версии: в установленном PWA пункт меню скрыт (isStandalone).
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

const { t } = useI18n()
const router = useRouter()

// ZIP раздаётся статикой фронта: dev — vite из public/, прод — Docker-образ
const zipUrl = `${window.location.origin}/extension/gntodo-extension.zip`

const isStandalone = window.matchMedia('(display-mode: standalone)').matches

function downloadZip(): void {
  const a = document.createElement('a')
  a.href = zipUrl
  a.download = 'gntodo-extension.zip'
  a.click()
}
</script>

<template>
  <section>
    <GnPageHeader kicker="GNexus Tasks" :title="t('ext.title')" />

    <GnCard v-if="isStandalone">
      <template #title>{{ t('ext.pwaTitle') }}</template>
      <p class="hint">{{ t('ext.pwaNote') }}</p>
    </GnCard>

    <template v-else>
      <GnCard>
        <template #title>{{ t('ext.whatTitle') }}</template>
        <p class="hint">{{ t('ext.whatText') }}</p>
      </GnCard>

      <GnCard>
        <template #title>{{ t('ext.tokenTitle') }}</template>
        <p class="hint">{{ t('ext.tokenText') }}</p>
        <GnButton icon="ph-gear-six" @click="router.push('/settings')">
          {{ t('ext.tokenButton') }}
        </GnButton>
      </GnCard>

      <GnCard>
        <template #title>{{ t('ext.downloadTitle') }}</template>
        <GnButton icon="ph-download-simple" @click="downloadZip">
          {{ t('ext.downloadButton') }}
        </GnButton>
        <p class="hint">{{ t('ext.downloadHint') }}</p>
      </GnCard>

      <GnCard>
        <template #title>{{ t('ext.installTitle') }}</template>
        <p class="hint">{{ t('ext.chromeText') }}</p>
        <p class="hint">{{ t('ext.firefoxText') }}</p>
      </GnCard>

      <GnCard>
        <template #title>{{ t('ext.connectTitle') }}</template>
        <p class="hint">{{ t('ext.connectText') }}</p>
      </GnCard>
    </template>
  </section>
</template>

<style scoped>
.card {
  margin-top: 1.5rem;
}
.hint {
  color: var(--muted, #888);
  margin: 0 0 0.75rem;
}
</style>