<template>
  <n-modal v-model:show="show" preset="card" style="width: 500px">
    <template #header>
      <h3>{{ t('Installing App') }}</h3>
    </template>
    
    <div class="progress-content">
      <n-progress
        :percentage="progress"
        :show-indicator="true"
        color="#10b981"
      />
      <n-text class="progress-text">{{ message }}</n-text>
    </div>
    
    <template #action>
      <n-button @click="handleClose" :disabled="installing">
        {{ installing ? t('Installing...') : t('Close') }}
      </n-button>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { NModal, NProgress, NText, NButton, useMessage } from 'naive-ui'
import { t } from '@/shared/i18n'

interface Props {
  modelValue: boolean
  progress: number
  message: string
  status: 'success' | 'error' | 'info'
  installing: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const show = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
  show.value = newVal
})

watch(show, (newVal) => {
  emit('update:modelValue', newVal)
})

function handleClose() {
  if (!props.installing) {
    show.value = false
  }
}
</script>

<style scoped>
.progress-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

.progress-text {
  text-align: center;
  color: #666;
}
</style>
