<script setup lang="ts">
import { Check, CheckCircle, Eye, FileArchive, FilePlus, GitBranch, Loader2, Upload, UploadCloud, X } from 'lucide-vue-next'
import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import { toast } from 'vue-sonner'

import { BasicPage } from '@/components/global-layout'
import api from '@/services/api'

const { t } = useI18n()

interface Application {
  id: number
  name: string
}

interface VersionFileInfo {
  file_path: string
  file_name: string
  file_size: number
  file_hash: string
  file_type: string
}

interface UploadResponse {
  file_path: string
  file_size: number
  file_hash: string
  files: VersionFileInfo[]
}

const route = useRoute()
const router = useRouter()

const versionId = computed(() => route.params.id as string)
const loading = ref(true)
const saving = ref(false)
const uploading = ref(false)
const uploadProgress = ref(0)
const uploadSpeed = ref('')
const applications = ref<Application[]>([])
const baseVersions = ref<{ id: number, version: string }[]>([])
const loadingBaseVersions = ref(false)

const formData = ref({
  application_id: '',
  version: '',
  description: '',
  update_strategy: 'optional' as 'optional' | 'forced',
  update_type: 'full' as 'full' | 'patch',
  update_method: 'auto' as 'auto' | 'manual',
  custom_download_url: '',
  changelog: '',
  entry_file: '',
  file: null as File | null,
  base_version_id: '' as string,
})

const uploadedData = ref<UploadResponse | null>(null)
const fileInputRef = ref<HTMLInputElement | null>(null)

const selectedApplication = computed(() => {
  return applications.value.find(app => String(app.id) === formData.value.application_id)
})

const executableFiles = computed(() => {
  if (!uploadedData.value)
    return []
  return uploadedData.value.files.filter(f => f.file_type === 'executable')
})

const fileSize = computed(() => {
  if (formData.value.file) {
    return formatFileSize(formData.value.file.size)
  }
  return null
})

const isForcedUpdate = computed({
  get: () => formData.value.update_strategy === 'forced',
  set: (val: boolean) => {
    formData.value.update_strategy = val ? 'forced' : 'optional'
  },
})

function formatFileSize(size: number): string {
  if (size < 1024)
    return `${size} B`
  if (size < 1024 * 1024)
    return `${(size / 1024).toFixed(2)} KB`
  return `${(size / (1024 * 1024)).toFixed(2)} MB`
}

async function fetchVersion() {
  loading.value = true
  try {
    const ver = await api.get<any>(`/dev/versions/${versionId.value}`)
    if (ver) {
      formData.value.application_id = String(ver.application_id || '')
      formData.value.version = ver.version || ''
      formData.value.description = ver.description || ''
      formData.value.update_strategy = ver.update_strategy || 'optional'
      formData.value.update_type = ver.update_type || 'full'
      formData.value.update_method = ver.update_method || 'auto'
      formData.value.custom_download_url = ver.custom_download_url || ''
      formData.value.changelog = ver.changelog || ''
      formData.value.entry_file = ver.entry_file || ''
      formData.value.base_version_id = ver.base_version_id ? String(ver.base_version_id) : ''

      // 加载已有文件信息
      if (ver.file_path && ver.file_size) {
        uploadedData.value = {
          file_path: ver.file_path,
          file_size: ver.file_size,
          file_hash: ver.file_hash || '',
          files: ver.files || [],
        }
        // 保存原始数据
        originalUploadedData.value = { ...uploadedData.value }
      }
    }
  }
  catch (error) {
    console.error('获取版本信息失败:', error)
    toast.error(t('admin.versions.createForm.fetchFailed'))
  }
  finally {
    loading.value = false
  }
}

async function fetchApplications() {
  try {
    const data = await api.get<{ applications: Application[] }>('/dev/applications')
    applications.value = data?.applications || []
  }
  catch (error) {
    console.error('获取应用列表失败:', error)
  }
}

async function fetchBaseVersions(appId: string) {
  if (!appId) {
    baseVersions.value = []
    return
  }
  loadingBaseVersions.value = true
  try {
    const data = await api.get<{ versions: { id: number, version: string, update_type: string }[] }>(
      `/dev/versions?application_id=${appId}&update_type=full&page_size=100`
    )
    const versions = data?.versions || []
    baseVersions.value = versions.filter(v => v.update_type === 'full')
  }
  catch (error) {
    console.error('获取基础版本列表失败:', error)
    baseVersions.value = []
  }
  finally {
    loadingBaseVersions.value = false
  }
}

// 监听应用变化
watch(
  () => formData.value.application_id,
  (newAppId) => {
    if (newAppId && formData.value.update_type === 'patch') {
      fetchBaseVersions(newAppId)
    } else if (!newAppId) {
      baseVersions.value = []
      formData.value.base_version_id = ''
    }
  },
  { immediate: true }
)

// 监听更新类型变化
watch(
  () => formData.value.update_type,
  (newType) => {
    if (newType === 'patch' && formData.value.application_id) {
      fetchBaseVersions(formData.value.application_id)
    } else if (newType !== 'patch') {
      baseVersions.value = []
      formData.value.base_version_id = ''
    }
  },
  { immediate: true }
)

function handleFileSelect(event: Event) {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const file = target.files[0]
    if (!file.name.toLowerCase().endsWith('.zip')) {
      toast.error(t('admin.versions.createForm.zipOnly'))
      return
    }
    formData.value.file = file
    uploadedData.value = null
  }
}

// 保存原始文件数据，用于取消重新上传时恢复
const originalUploadedData = ref<UploadResponse | null>(null)

function removeFile() {
  formData.value.file = null
  if (fileInputRef.value) {
    fileInputRef.value.value = ''
  }
  // 如果有原始文件数据，恢复显示
  if (originalUploadedData.value) {
    uploadedData.value = originalUploadedData.value
  }
}

async function uploadZipFile() {
  if (!formData.value.file) {
    toast.error(t('admin.versions.createForm.selectZipFirst'))
    return
  }

  uploading.value = true
  uploadProgress.value = 0
  uploadSpeed.value = ''
  try {
    const formDataObj = new FormData()
    formDataObj.append('file', formData.value.file)

    const response = await api.postFormDataWithProgress<UploadResponse>(
      '/dev/versions/upload-zip',
      formDataObj,
      (progress, speed) => {
        uploadProgress.value = progress
        uploadSpeed.value = speed
      }
    )
    uploadedData.value = response
    toast.success(t('admin.versions.createForm.uploadSuccess'))
  }
  catch (error: any) {
    console.error('上传文件失败:', error)
    toast.error(error.message || t('admin.versions.createForm.uploadFailed'))
  }
  finally {
    uploading.value = false
    uploadProgress.value = 0
    uploadSpeed.value = ''
  }
}

async function handleSubmit() {
  if (!formData.value.application_id) {
    toast.error(t('admin.versions.createForm.selectAppRequired'))
    return
  }
  if (!formData.value.version) {
    toast.error(t('admin.versions.createForm.versionRequired'))
    return
  }

  saving.value = true
  try {
    const payload: any = {
      application_id: Number(formData.value.application_id),
      version: formData.value.version,
      description: formData.value.description,
      update_strategy: formData.value.update_strategy,
      update_type: formData.value.update_type,
      update_method: formData.value.update_method,
      custom_download_url: formData.value.custom_download_url,
      changelog: formData.value.changelog,
      entry_file: formData.value.entry_file,
    }

    // 如果是补丁版本，添加基础版本ID
    if (formData.value.update_type === 'patch' && formData.value.base_version_id) {
      payload.base_version_id = Number(formData.value.base_version_id)
    }

    console.log('[DEBUG] handleSubmit payload:', JSON.stringify(payload))

    if (uploadedData.value) {
      payload.file_path = uploadedData.value.file_path
      payload.file_size = uploadedData.value.file_size
      payload.file_hash = uploadedData.value.file_hash
      payload.files = uploadedData.value.files || []
    }

    const response = await api.put(`/dev/versions/${versionId.value}`, payload)
    console.log('[DEBUG] handleSubmit response:', response)

    // 更新原始数据为最新保存的数据
    if (uploadedData.value) {
      originalUploadedData.value = { ...uploadedData.value }
    }

    toast.success(t('admin.versions.createForm.updateSuccess'))
    router.push('/admin/versions')
  }
  catch (error: any) {
    console.error('更新版本失败:', error)
    toast.error(error.message || t('admin.versions.createForm.updateFailed'))
  }
  finally {
    saving.value = false
  }
}

onMounted(() => {
  fetchApplications()
  fetchVersion()
})
</script>

<template>
  <BasicPage
    :title="t('admin.versions.createForm.editTitle')"
    :description="t('admin.versions.createForm.editDescription')"
    :breadcrumbs="[
      { title: t('admin.versions.title'), href: '/admin/versions' },
      { title: t('admin.versions.createForm.editTitle') },
    ]"
    sticky
  >
    <div v-if="loading" class="flex items-center justify-center py-12">
      <Loader2 class="size-8 animate-spin text-muted-foreground" />
    </div>

    <div v-else class="space-y-6">
      <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-6">
          <UiCard>
            <UiCardHeader>
              <UiCardTitle class="flex items-center gap-2">
                <GitBranch class="size-5" />
                {{ t('admin.versions.createForm.versionConfig') }}
              </UiCardTitle>
              <UiCardDescription>{{ t('admin.versions.createForm.versionConfigDesc') }}</UiCardDescription>
            </UiCardHeader>
            <UiCardContent class="space-y-6">
              <div class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.selectApp') }}</UiLabel>
                <UiSelect v-model="formData.application_id" :disabled="saving">
                  <UiSelectTrigger>
                    <UiSelectValue :placeholder="t('admin.versions.createForm.selectAppPlaceholder')" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem
                      v-for="app in applications"
                      :key="app.id"
                      :value="String(app.id)"
                    >
                      {{ app.name }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </div>

              <div class="space-y-2">
                <UiLabel for="version">
                  {{ t('admin.versions.createForm.versionNumber') }}
                </UiLabel>
                <UiInput
                  id="version"
                  v-model="formData.version"
                  :placeholder="t('admin.versions.createForm.versionPlaceholder')"
                  :disabled="saving"
                />
              </div>

              <div class="space-y-2">
                <UiLabel for="description">
                  {{ t('admin.versions.createForm.versionDesc') }}
                </UiLabel>
                <UiInput
                  id="description"
                  v-model="formData.description"
                  :placeholder="t('admin.versions.createForm.versionDescPlaceholder')"
                  :disabled="saving"
                />
              </div>

              <div class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.updateFile') }}</UiLabel>
                <div class="border-2 border-dashed rounded-lg p-4">
                  <input
                    ref="fileInputRef"
                    type="file"
                    accept=".zip"
                    class="hidden"
                    @change="handleFileSelect"
                  >
                  <!-- 显示已上传的文件 -->
                  <div v-if="!formData.file && uploadedData" class="space-y-3">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center gap-3">
                        <FileArchive class="size-8 text-primary" />
                        <div>
                          <p class="text-sm font-medium text-green-600">
                            {{ t('admin.versions.createForm.fileUploaded') }}
                          </p>
                          <p class="text-xs text-muted-foreground">
                            {{ formatFileSize(uploadedData.file_size) }}
                          </p>
                        </div>
                      </div>
                      <UiButton variant="outline" size="sm" :disabled="saving || uploading" @click="fileInputRef?.click()">
                        <Upload class="h-4 w-4 mr-2" />
                        {{ t('admin.versions.createForm.reupload') }}
                      </UiButton>
                    </div>
                    <div class="rounded-lg bg-muted/50 p-3">
                      <div class="text-xs text-muted-foreground space-y-1">
                        <p>{{ t('admin.versions.createForm.fileHash') }}: {{ uploadedData.file_hash.substring(0, 16) }}...</p>
                        <p>{{ t('admin.versions.createForm.containsFiles', { count: uploadedData.files.length }) }}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 没有文件时显示上传区域 -->
                  <div v-if="!formData.file && !uploadedData" class="text-center">
                    <UploadCloud class="size-10 mx-auto text-muted-foreground mb-2" />
                    <p class="text-sm text-muted-foreground mb-2">
                      {{ t('admin.versions.createForm.dragOrClick') }}
                    </p>
                    <UiButton variant="outline" size="sm" :disabled="saving || uploading" @click="fileInputRef?.click()">
                      <FilePlus class="h-4 w-4 mr-2" />
                      {{ t('admin.versions.createForm.selectFile') }}
                    </UiButton>
                  </div>
                  <!-- 选择新文件后显示 -->
                  <div v-if="formData.file" class="space-y-3">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center gap-3">
                        <FileArchive class="size-8 text-primary" />
                        <div>
                          <p class="text-sm font-medium">
                            {{ formData.file.name }}
                          </p>
                          <p class="text-xs text-muted-foreground">
                            {{ fileSize }}
                          </p>
                        </div>
                      </div>
                      <div class="flex items-center gap-2">
                        <UiButton
                          size="sm"
                          :disabled="uploading"
                          @click="uploadZipFile"
                        >
                          <Loader2 v-if="uploading" class="h-4 w-4 mr-2 animate-spin" />
                          <Upload v-else class="h-4 w-4 mr-2" />
                          {{ uploading ? `${uploadProgress}%` : t('admin.versions.createForm.uploadAndParse') }}
                        </UiButton>
                        <UiButton variant="ghost" size="icon" :disabled="saving" @click="removeFile">
                          <X class="size-4" />
                        </UiButton>
                      </div>
                    </div>
                    <!-- 上传进度条 -->
                    <div v-if="uploading" class="space-y-1">
                      <div class="w-full bg-muted rounded-full h-2 overflow-hidden">
                        <div
                          class="bg-primary h-full transition-all duration-300 ease-out"
                          :style="{ width: `${uploadProgress}%` }"
                        />
                      </div>
                      <div class="flex justify-between text-xs text-muted-foreground">
                        <span>{{ t('admin.versions.createForm.uploading') }}</span>
                        <span class="font-medium">{{ uploadSpeed }}</span>
                      </div>
                    </div>
                    <div v-if="uploadedData && uploadedData.file_hash !== formData.file?.name" class="rounded-lg bg-muted/50 p-3">
                      <div class="flex items-center gap-2 text-sm text-green-600 mb-2">
                        <CheckCircle class="size-4" />
                        <span>{{ t('admin.versions.createForm.fileUploaded') }}</span>
                      </div>
                      <div class="text-xs text-muted-foreground space-y-1">
                        <p>{{ t('admin.versions.createForm.fileHash') }}: {{ uploadedData.file_hash.substring(0, 16) }}...</p>
                        <p>{{ t('admin.versions.createForm.containsFiles', { count: uploadedData.files.length }) }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="uploadedData && uploadedData.files.length > 0" class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.fileList') }}</UiLabel>
                <div class="border rounded-lg max-h-[300px] overflow-auto">
                  <table class="w-full text-sm">
                    <thead class="bg-muted/50 sticky top-0">
                      <tr>
                        <th class="text-left p-2 font-medium">
                          {{ t('admin.versions.createForm.fileName') }}
                        </th>
                        <th class="text-left p-2 font-medium">
                          {{ t('admin.versions.createForm.filePath') }}
                        </th>
                        <th class="text-right p-2 font-medium">
                          {{ t('admin.versions.createForm.fileSize') }}
                        </th>
                        <th class="text-left p-2 font-medium">
                          {{ t('admin.versions.createForm.fileType') }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr
                        v-for="(file, index) in uploadedData.files"
                        :key="index"
                        class="border-t"
                      >
                        <td class="p-2 truncate max-w-[150px]">
                          {{ file.file_name }}
                        </td>
                        <td class="p-2 truncate max-w-[200px] text-muted-foreground">
                          {{ file.file_path }}
                        </td>
                        <td class="p-2 text-right text-muted-foreground">
                          {{ formatFileSize(file.file_size) }}
                        </td>
                        <td class="p-2">
                          <span class="px-2 py-0.5 rounded text-xs bg-muted">
                            {{ file.file_type }}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div v-if="executableFiles.length > 0" class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.entryFile') }}</UiLabel>
                <UiSelect v-model="formData.entry_file" :disabled="saving">
                  <UiSelectTrigger>
                    <UiSelectValue :placeholder="t('admin.versions.createForm.entryFilePlaceholder')" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem
                      v-for="file in executableFiles"
                      :key="file.file_path"
                      :value="file.file_path"
                    >
                      {{ file.file_name }} ({{ formatFileSize(file.file_size) }})
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </div>

              <div class="flex items-center justify-between rounded-lg border p-4">
                <div class="space-y-0.5">
                  <UiLabel class="text-base">
                    {{ t('admin.versions.createForm.forcedUpdate') }}
                  </UiLabel>
                  <p class="text-sm text-muted-foreground">
                    {{ t('admin.versions.createForm.forcedUpdateDesc') }}
                  </p>
                </div>
                <UiSwitch
                  v-model="isForcedUpdate"
                  :disabled="saving"
                />
              </div>

              <div class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.updateType') }}</UiLabel>
                <UiSelect v-model="formData.update_type" :disabled="saving">
                  <UiSelectTrigger>
                    <UiSelectValue />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="full">
                      {{ t('admin.versions.types.full') }}
                    </UiSelectItem>
                    <UiSelectItem value="patch">
                      {{ t('admin.versions.types.patch') }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </div>

              <!-- 基础版本选择（仅补丁类型） -->
              <div v-if="formData.update_type === 'patch'" class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.baseVersion') }}</UiLabel>
                <p class="text-sm text-muted-foreground">
                  {{ t('admin.versions.createForm.baseVersionDesc') }}
                </p>
                <UiSelect v-model="formData.base_version_id" :disabled="saving || loadingBaseVersions">
                  <UiSelectTrigger>
                    <UiSelectValue :placeholder="t('admin.versions.createForm.baseVersionPlaceholder')" />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem
                      v-for="v in baseVersions"
                      :key="v.id"
                      :value="String(v.id)"
                    >
                      {{ v.version }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
                <p v-if="baseVersions.length === 0 && !loadingBaseVersions" class="text-sm text-destructive">
                  {{ t('admin.versions.createForm.noBaseVersion') }}
                </p>
              </div>

              <div class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.updateMethod') }}</UiLabel>
                <UiSelect v-model="formData.update_method" :disabled="saving">
                  <UiSelectTrigger>
                    <UiSelectValue />
                  </UiSelectTrigger>
                  <UiSelectContent>
                    <UiSelectItem value="auto">
                      {{ t('admin.versions.methods.auto') }}
                    </UiSelectItem>
                    <UiSelectItem value="manual">
                      {{ t('admin.versions.methods.manual') }}
                    </UiSelectItem>
                  </UiSelectContent>
                </UiSelect>
              </div>

              <div v-if="formData.update_method === 'manual'" class="space-y-2">
                <UiLabel>{{ t('admin.versions.createForm.customDownloadUrl') }}</UiLabel>
                <p class="text-sm text-muted-foreground">
                  {{ t('admin.versions.createForm.customDownloadUrlDesc') }}
                </p>
                <UiInput
                  v-model="formData.custom_download_url"
                  :placeholder="t('admin.versions.createForm.customDownloadUrlPlaceholder')"
                  :disabled="saving"
                />
              </div>

              <div class="space-y-2">
                <UiLabel for="changelog">
                  {{ t('admin.versions.createForm.changelog') }}
                </UiLabel>
                <textarea
                  id="changelog"
                  v-model="formData.changelog"
                  class="flex min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                  :placeholder="t('admin.versions.createForm.changelogPlaceholder')"
                  :disabled="saving"
                />
              </div>
            </UiCardContent>
          </UiCard>
        </div>

        <div class="space-y-6">
          <UiCard>
            <UiCardHeader>
              <UiCardTitle class="flex items-center gap-2">
                <Eye class="size-5" />
                {{ t('admin.versions.createForm.preview') }}
              </UiCardTitle>
            </UiCardHeader>
            <UiCardContent class="space-y-4">
              <div class="space-y-3">
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewApp') }}</span>
                  <span>{{ selectedApplication?.name || '-' }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewVersion') }}</span>
                  <span>{{ formData.version || '-' }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewDesc') }}</span>
                  <span class="truncate max-w-[120px]">{{ formData.description || '-' }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewForcedUpdate') }}</span>
                  <span>{{ formData.update_strategy === 'forced' ? t('common.yes') : t('common.no') }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewUpdateType') }}</span>
                  <span>{{
                    formData.update_type === 'full' ? t('admin.versions.types.full')
                    : t('admin.versions.types.patch')
                  }}</span>
                </div>
                <div class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewUpdateMethod') }}</span>
                  <span>{{
                    formData.update_method === 'auto' ? t('admin.versions.methods.auto')
                    : t('admin.versions.methods.manual')
                  }}</span>
                </div>
                <div v-if="formData.update_method === 'manual'" class="flex justify-between text-sm">
                  <span class="text-muted-foreground">{{ t('admin.versions.createForm.previewCustomDownloadUrl') }}</span>
                  <span class="truncate max-w-[120px]">{{ formData.custom_download_url || t('admin.versions.createForm.useDefault') }}</span>
                </div>
              </div>

              <div class="border-t pt-4 mt-4">
                <p class="text-sm text-muted-foreground mb-2">
                  {{ t('admin.versions.createForm.changelogPreview') }}
                </p>
                <div class="rounded-lg bg-muted/50 p-3 min-h-[80px]">
                  <p class="text-sm whitespace-pre-wrap">
                    {{ formData.changelog || t('admin.versions.createForm.noChangelog') }}
                  </p>
                </div>
              </div>
            </UiCardContent>
          </UiCard>

          <UiCard>
            <UiCardContent class="pt-6">
              <div class="flex flex-col gap-3">
                <UiButton
                  class="w-full"
                  size="lg"
                  :disabled="saving || !formData.application_id || !formData.version"
                  @click="handleSubmit"
                >
                  <Loader2 v-if="saving" class="mr-2 h-4 w-4 animate-spin" />
                  <Check v-else class="mr-2 h-4 w-4" />
                  {{ t('admin.versions.createForm.updateVersion') }}
                </UiButton>
                <UiButton
                  variant="outline"
                  class="w-full"
                  @click="router.back()"
                >
                  {{ t('common.cancel') }}
                </UiButton>
              </div>
            </UiCardContent>
          </UiCard>
        </div>
      </div>
    </div>
  </BasicPage>
</template>
