<template>
  <pn-page-card>
    <template #title>
      {{ $t('software__title') }}
    </template>

    <pn-scroll-list>
      <template #card-body-header>
        <div class="q-pa-md">
          {{ $t('software__description') }}
        </div>
      </template>

      <q-list separator>
        <q-expansion-item
          v-for="item in software"
          group="somegroup"
          >
          <template #header>
            <q-item-section avatar>
              <q-avatar square size="sm" v-if="item.logo">
                <img :src="'3software/logo/' + item.logo">
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <div class="flex items-baseline">
                <span class="text-h6">
                  {{ item.name }}
                </span>
                <span v-if = "item.ver" class="text-caption q-pl-xs">
                   {{ 'v.' + item.ver }}
                </span>
              </div>
            </q-item-section>
          </template>
          <div class="w100 flex column q-px-md q-gutter-y-md q-py-sm">
            <div class="flex row no-wrap items-center">
              <q-icon name="mdi-scale-balance" size="sm" class="q-pr-lg" color="grey"/>
              <div
                @click="downloadFile('3software/license/' + item.license_file)"
                class="flex w100 column q-pl-sm cursor-pointer"
                >
                <span> {{ item.license }} </span>
                <span
                  class="text-caption"
                  style="white-space: pre-line;"
                  >
                  {{ item.license_copyright }}
                </span>
              </div>
            </div>

            <div class="flex row no-wrap items-center" v-if="item.web">
              <q-icon name="mdi-web" size="sm" class="q-pr-lg" color="grey"/>
              <span
                class="q-pl-sm cursor-pointer"
                @click="tg.openLink(item.web_url)"
                > 
                {{ item.web }}
              </span>
            </div>

            <div class="flex row no-wrap items-center" v-if="item.git">
              <q-icon name="mdi-github" size="sm" class="q-pr-lg" color="grey"/>
              <span
                class="q-pl-sm cursor-pointer"
                @click="tg.openLink(item.git_url)"
                > 
                {{ item.git }}
              </span>
            </div>

          </div>
        </q-expansion-item>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { inject } from 'vue'
  import type { WebApp } from '@twa-dev/types'

  const tg = inject('tg') as WebApp

  const software = [
    {
      id: 1,
      name: 'Vue',
      ver: '3.4',
      logo: 'vue.webp',
      web: 'vuejs.org',
      web_url: 'https://vuejs.org/',
      git: 'vuejs/core',
      git_url: 'https://github.com/vuejs/core',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors',
      license_file: 'vue/LICENSE.txt'
    },
    {
      id: 2,
      name: 'Quasar',
      ver: '2.x',
      logo: 'quasar.png',
      web: 'quasar.dev',
      web_url: 'https://quasar.dev/',
      git: 'quasarframework/quasar',
      git_url: 'https://github.com/quasarframework/quasar',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2015-present Razvan Stoenescu',
      license_file: 'quasar/LICENSE.txt'
    },
    {
      id: 3,
      name: 'Pinia',
      ver: '2.x',
      logo: 'pinia.svg',
      web: 'pinia.vuejs.org',
      web_url: 'https://pinia.vuejs.org/',
      git: 'vuejs/pinia',
      git_url: 'https://github.com/vuejs/pinia',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2019-present Eduardo San Martin Morote',
      license_file: 'pinia/LICENSE.txt'
    },
    {
      id: 4,
      name: 'Vue Router',
      ver: '4.x',
      logo: 'vue.webp',
      web: 'router.vuejs.org',
      web_url: 'https://router.vuejs.org/',
      git: 'vuejs/router',
      git_url: 'https://github.com/vuejs/router',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2019-present Eduardo San Martin Morote',
      license_file: 'vue-router/LICENSE.txt'
    },
    {
      id: 5,
      name: 'Vue i18n',
      ver: '9.x',
      logo: 'vue-i18n.svg',
      web: 'vue-i18n.intlify.dev',
      web_url: 'https://vue-i18n.intlify.dev/',
      git: 'intlify/vue-i18n',
      git_url: 'https://github.com/intlify/vue-i18n',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2016-present kazuya kawaguchi and contributors',
      license_file: 'vue-i18n/LICENSE.txt'
    },
    {
      id: 6,
      name: 'Axios',
      ver: '1.x',
      logo: 'axios.svg',
      web: 'axios-http.com',
      web_url: 'https://axios-http.com/',
      git: 'axios/axios',
      git_url: 'https://github.com/axios/axios',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2014-present Matt Zabriskie & Collaborators',
      license_file: 'axios/LICENSE.txt'
    },
    {
      id: 7,
      name: 'better-sqlite3',
      ver: '11.x',
      logo: '',
      web: '',
      web_url: '',
      git: 'WiseLibs/better-sqlite3',
      git_url: 'https://github.com/WiseLibs/better-sqlite3',
      license: 'MIT License',
      license_copyright: 'Copyright (c) 2017 Joshua Wise',
      license_file: 'better-sqlite3/LICENSE.txt'
    },
    {
      id: 8,
      name: 'Express',
      ver: '4.x',
      logo: 'express.svg',
      web: 'expressjs.com',
      web_url: 'https://expressjs.com/',
      git: 'expressjs/express',
      git_url: 'https://github.com/expressjs/express',
      license: 'MIT License',
      license_copyright: `Copyright (c) 2009-2014 TJ Holowaychuk <tj@vision-media.ca>
      Copyright (c) 2013-2014 Roman Shtylman <shtylman+expressjs@gmail.com>
      Copyright (c) 2014-2015 Douglas Christopher Wilson <doug@somethingdoug.com>`,
      license_file: 'express/LICENSE.txt'
    }
  ]


  const downloadFile = async (url: string) => {
    try {
      const fullUrl = '/admin/' + url;
      const fileUrl = new URL(fullUrl, window.location.origin).href;
      
      const response = await fetch(fileUrl)
      
      if (!response.ok) throw new Error(`HTTP error: ${response.status}`)
      
      const blob = await response.blob()
      const downloadUrl = URL.createObjectURL(blob)
      const link = document.createElement('a')
      
      const extractFileName = (url: string): string => {
        return url.substring(url.lastIndexOf('/') + 1)
      }
      
      link.href = downloadUrl
      link.download = extractFileName(url)
      link.style.display = 'none'
      
      document.body.appendChild(link)
      link.click()
      
      setTimeout(() => {
        document.body.removeChild(link)
        URL.revokeObjectURL(downloadUrl)
      }, 100)
      
    } catch (error) {
      console.error('Download error:', error)
    }
  }

</script>

<style scope>
</style>
