<script setup>
import { ref } from 'vue'
import { SCHEMA_VERSION } from '../db/schema.js'
import ModalDialog from './ModalDialog.vue'
import LicenseDialog from './LicenseDialog.vue'
import noticeText from '../assets/notice.md?raw'
import { renderMarkdown } from '../utils/markdown.js'

defineEmits(['close'])

const appVersion = __APP_VERSION__
const dbVersion = SCHEMA_VERSION
const showLicense = ref(false)
const noticeHtml = renderMarkdown(noticeText)
</script>

<template>
  <ModalDialog :title="$t('about.title')" @close="$emit('close')">
    <div class="about-row">
      <span class="about-label">{{ $t('about.appVersion') }}</span>
      <span class="about-value" data-testid="about-app-version">{{ appVersion }}</span>
    </div>

    <div class="about-row">
      <span class="about-label">{{ $t('about.dbVersion') }}</span>
      <span class="about-value" data-testid="about-db-version">{{ dbVersion }}</span>
    </div>

    <div class="about-row">
      <span class="about-label">{{ $t('about.author') }}</span>
      <span class="about-value">David Florance</span>
    </div>

    <div class="about-row">
      <span class="about-label">{{ $t('about.license') }}</span>
      <span class="about-value" data-testid="about-license-name">GNU AGPL v3</span>
    </div>

    <div class="about-row">
      <span class="about-label">{{ $t('about.links') }}</span>
      <span class="about-value about-links">
        <a
          href="https://kaivalya.eu/app-git/kaivalya/trainUs"
          class="about-link"
          data-testid="about-repo-link"
        >
          <i class="bi bi-github"></i>
          {{ $t('about.repository') }}
        </a>
        <a
          href="https://kaivalya.eu/projects/trainUs"
          class="about-link"
          data-testid="about-website-link"
        >
          <i class="bi bi-globe"></i>
          {{ $t('about.website') }}
        </a>
      </span>
    </div>

    <div class="about-notice" data-testid="about-notice" v-html="noticeHtml"></div>

    <div class="about-license-row">
      <button class="btn" data-testid="about-license-btn" @click="showLicense = true">
        <i class="bi bi-file-text"></i>
        {{ $t('about.licenseBtn') }}
      </button>
    </div>

    <LicenseDialog v-if="showLicense" @close="showLicense = false" />
  </ModalDialog>
</template>

<style scoped>
.about-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}

.about-label {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--front-color2);
  font-weight: 500;
}

.about-value {
  flex: 1;
  font-weight: 600;
  word-break: break-all;
}

.about-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.about-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--front-color1);
  font-weight: 500;
}

.about-link i {
  font-size: 15px;
}

.about-notice {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-color2);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--front-color2);
  word-break: break-word;
}

.about-license-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
}
</style>
