<template>
  <div class="app-version" :class="{ 'dev-mode': isDev }">
    <small class="text-muted">
      <i class="fas fa-code-branch me-1"></i>
      v{{ packageVersion }}
      <span v-if="isDev" class="badge bg-warning text-dark ms-1">DEV</span>
      <span v-if="buildInfo" class="ms-1" :title="buildInfo">
        ({{ shortHash }})
      </span>
    </small>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { getAppVersion } from '@/infrastructure/utilities/cacheHelper';

// Lấy thông tin version
const appVersion = getAppVersion();
const packageVersion = typeof __PACKAGE_VERSION__ !== 'undefined' ? __PACKAGE_VERSION__ : '0.0.0';
const buildTimestamp = typeof __BUILD_TIMESTAMP__ !== 'undefined' ? __BUILD_TIMESTAMP__ : '';

// Kiểm tra môi trường
const isDev = import.meta.env.DEV;

// Tạo short hash từ version
const shortHash = computed(() => {
  if (appVersion.length > 8) {
    return appVersion.slice(-8);
  }
  return appVersion;
});

// Thông tin build chi tiết
const buildInfo = computed(() => {
  if (buildTimestamp) {
    const date = new Date(parseInt(buildTimestamp));
    return `Built: ${date.toLocaleString('vi-VN')}`;
  }
  return '';
});
</script>

<style scoped>
.app-version {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.app-version:hover {
  opacity: 1;
}

.dev-mode {
  border: 1px dashed #ffc107;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(255, 193, 7, 0.1);
}

.badge {
  font-size: 0.6rem;
}
</style>
