dashboard/src/components/shared/FileConfigItem.vue

<template>
  <div class="file-config-item">
    <div class="d-flex align-center gap-2">
      <v-btn size="small" color="primary" variant="tonal" @click="dialog = true">
        {{ tm('fileUpload.button') }}
      </v-btn>
      <span class="text-caption text-medium-emphasis ml-2">
        {{ fileCountText }}
      </span>
    </div>

    <v-dialog v-model="dialog" max-width="700">
      <v-card class="file-dialog-card" variant="flat">
        <v-card-title class="d-flex align-center">
          <span class="text-h3">{{ tm('fileUpload.dialogTitle') }}</span>
          <v-spacer />
          <v-btn icon="mdi-close" variant="text" @click="dialog = false" />
        </v-card-title>

        <v-card-text class="file-dialog-body">
          <div v-if="mergedFileItems.length === 0" class="empty-text">
            {{ tm('fileUpload.empty') }}
          </div>

          <v-list density="compact" lines="one">
            <v-list-item v-for="item in mergedFileItems" :key="item.path">
              <template #prepend>
                <v-icon size="18">mdi-file</v-icon>
              </template>
              <v-list-item-title class="file-name">
                {{ getDisplayName(item.path) }}
              </v-list-item-title>
              <template #append>
                <div class="d-flex align-center gap-1">
                  <v-chip v-if="item.status !== 'ok'" size="x-small" :color="getStatusColor(item.status)"
                    variant="tonal">
                    {{ getStatusText(item.status) }}
                  </v-chip>
                  <v-btn v-if="item.status === 'unconfigured'" icon="mdi-plus" size="x-small" variant="text"
                    @click="addToConfig(item.path)" />
                  <v-btn icon="mdi-delete" size="x-small" variant="text"
                    @click="item.status === 'unconfigured' ? deletePhysicalFile(item.path) : deleteFile(item.path)" />
                </div>
              </template>
            </v-list-item>

            <v-divider v-if="mergedFileItems.length > 0" class="my-2" />

            <v-list-item class="upload-item" :class="{ dragover: isDragging }" @drop.prevent="handleDrop"
              @dragover.prevent="isDragging = true" @dragleave="isDragging = false" @click="openFilePicker">
              <template #prepend>
                <v-icon size="18" color="primary">mdi-plus</v-icon>
              </template>
              <v-list-item-title>{{ tm('fileUpload.dropzone') }}</v-list-item-title>
              <v-list-item-subtitle v-if="allowedTypesText" class="upload-hint">
                {{ tm('fileUpload.allowedTypes', { types: allowedTypesText }) }}
              </v-list-item-subtitle>
            </v-list-item>
          </v-list>

          <input ref="fileInput" type="file" multiple hidden :accept="acceptAttr" @change="handleFileSelect" />
        </v-card-text>

        <v-card-actions class="file-dialog-actions">
          <v-spacer />
          <v-btn color="primary" variant="elevated" @click="dialog = false">
            {{ tm('fileUpload.done') }}
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import axios from 'axios'
import { useToast } from '@/utils/toast'
import { useModuleI18n } from '@/i18n/composables'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  itemMeta: {
    type: Object,
    default: null
  },
  pluginName: {
    type: String,
    default: ''
  },
  configKey: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])
const { tm } = useModuleI18n('features/config')
const toast = useToast()

const dialog = ref(false)
const isDragging = ref(false)
const fileInput = ref(null)
const uploading = ref(false)
const loadingFiles = ref(false)
const MAX_FILE_BYTES = 500 * 1024 * 1024
const MAX_FILE_MB = 500
const directoryFiles = ref([])

const fileList = computed({
  get: () => (Array.isArray(props.modelValue) ? props.modelValue : []),
  set: (val) => emit('update:modelValue', val)
})

const mergedFileItems = computed(() => {
  const configured = new Set(fileList.value)
  const existing = new Set(directoryFiles.value)
  const items = []

  for (const path of fileList.value) {
    items.push({
      path,
      status: existing.has(path) ? 'ok' : 'missing'
    })
  }

  for (const path of directoryFiles.value) {
    if (!configured.has(path)) {
      items.push({
        path,
        status: 'unconfigured'
      })
    }
  }

  return items
})

const acceptAttr = computed(() => {
  const types = props.itemMeta?.file_types
  if (!Array.isArray(types) || types.length === 0) {
    return undefined
  }
  return types
    .map((ext) => `.${String(ext).replace(/^\\./, '')}`)
    .join(',')
})

const allowedTypesText = computed(() => {
  const types = props.itemMeta?.file_types
  if (!Array.isArray(types) || types.length === 0) {
    return ''
  }
  return types.map((ext) => String(ext).replace(/^\\./, '')).join(', ')
})

const fileCountText = computed(() => {
  return tm('fileUpload.fileCount', { count: fileList.value.length })
})

const getStatusText = (status) => {
  if (status === 'missing') {
    return tm('fileUpload.statusMissing')
  }
  if (status === 'unconfigured') {
    return tm('fileUpload.statusUnconfigured')
  }
  return ''
}

const getStatusColor = (status) => {
  if (status === 'missing') {
    return 'error'
  }
  if (status === 'unconfigured') {
    return 'warning'
  }
  return 'primary'
}

const openFilePicker = () => {
  fileInput.value?.click()
}

const loadDirectoryFiles = async () => {
  if (!props.pluginName || !props.configKey || loadingFiles.value) {
    return
  }

  loadingFiles.value = true
  try {
    const response = await axios.get(
      `/api/config/file/get?scope=plugin&name=${encodeURIComponent(
        props.pluginName
      )}&key=${encodeURIComponent(props.configKey)}`
    )
    if (response.data.status === 'ok') {
      const files = response.data.data?.files || []
      directoryFiles.value = Array.from(new Set(files))
    } else {
      toast.warning(response.data.message || tm('fileUpload.loadFailed'))
    }
  } catch (error) {
    console.error('Load file list failed:', error)
    toast.warning(tm('fileUpload.loadFailed'))
  } finally {
    loadingFiles.value = false
  }
}

const handleFileSelect = (event) => {
  const target = event.target
  if (target?.files && target.files.length > 0) {
    uploadFiles(Array.from(target.files))
  }
  if (target) {
    target.value = ''
  }
}

const handleDrop = (event) => {
  isDragging.value = false
  if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
    uploadFiles(Array.from(event.dataTransfer.files))
  }
}

const uploadFiles = async (files) => {
  if (!props.pluginName || !props.configKey) {
    toast.warning('Missing plugin config info')
    return
  }
  if (uploading.value) {
    return
  }

  const oversized = files.filter((file) => file.size > MAX_FILE_BYTES)
  if (oversized.length > 0) {
    oversized.forEach((file) => {
      toast.warning(
        tm('fileUpload.fileTooLarge', { name: file.name, max: MAX_FILE_MB })
      )
    })
  }
  const validFiles = files.filter((file) => file.size <= MAX_FILE_BYTES)
  if (validFiles.length === 0) {
    return
  }

  uploading.value = true
  try {
    const formData = new FormData()
    validFiles.forEach((file, index) => {
      formData.append(`file${index}`, file)
    })

    const response = await axios.post(
      `/api/config/file/upload?scope=plugin&name=${encodeURIComponent(
        props.pluginName
      )}&key=${encodeURIComponent(props.configKey)}`,
      formData,
      { headers: { 'Content-Type': 'multipart/form-data' } }
    )

    if (response.data.status === 'ok') {
      const uploaded = response.data.data?.uploaded || []
      const errors = response.data.data?.errors || []

      if (uploaded.length > 0) {
        const merged = [...fileList.value]
        for (const path of uploaded) {
          if (!merged.includes(path)) {
            merged.push(path)
          }
        }
        fileList.value = merged
        const updatedDirectory = new Set(directoryFiles.value)
        uploaded.forEach((path) => updatedDirectory.add(path))
        directoryFiles.value = Array.from(updatedDirectory)
        toast.success(tm('fileUpload.uploadSuccess', { count: uploaded.length }))
      }

      if (errors.length > 0) {
        toast.warning(errors.join('\\n'))
      }
    } else {
      toast.error(response.data.message || tm('fileUpload.uploadFailed'))
    }
  } catch (error) {
    console.error('File upload failed:', error)
    toast.error(tm('fileUpload.uploadFailed'))
  } finally {
    uploading.value = false
  }
}

const addToConfig = (filePath) => {
  if (!fileList.value.includes(filePath)) {
    fileList.value = [...fileList.value, filePath]
    toast.success(tm('fileUpload.addToConfig'))
  }
}

const deleteFile = (filePath) => {
  fileList.value = fileList.value.filter((item) => item !== filePath)
  directoryFiles.value = directoryFiles.value.filter((item) => item !== filePath)

  if (props.pluginName) {
    axios
      .post(
        `/api/config/file/delete?scope=plugin&name=${encodeURIComponent(
          props.pluginName
        )}`,
        { path: filePath }
      )
      .catch((error) => {
        console.warn('Staged file delete failed:', error)
        toast.warning(tm('fileUpload.deleteFailed'))
      })
  }

  toast.success(tm('fileUpload.deleteSuccess'))
}

const deletePhysicalFile = (filePath) => {
  directoryFiles.value = directoryFiles.value.filter((item) => item !== filePath)

  if (props.pluginName) {
    axios
      .post(
        `/api/config/file/delete?scope=plugin&name=${encodeURIComponent(
          props.pluginName
        )}`,
        { path: filePath }
      )
      .catch((error) => {
        console.warn('File delete failed:', error)
        toast.warning(tm('fileUpload.deleteFailed'))
      })
  }

  toast.success(tm('fileUpload.deleteSuccess'))
}

const getDisplayName = (path) => {
  if (!path) return ''
  const parts = String(path).split('/')
  return parts[parts.length - 1] || path
}

watch(
  () => dialog.value,
  (value) => {
    if (value) {
      loadDirectoryFiles()
    }
  }
)
</script>

<style scoped>
.file-config-item {
  width: 100%;
}

.file-dialog-card {
  height: 70vh;
  box-shadow: none;
}

.file-dialog-body {
  overflow-y: auto;
  max-height: calc(70vh - 120px);
}

.file-dialog-actions {
  padding: 16px 24px 20px;
}

.upload-hint {
  font-size: 12px;
  color: rgba(var(--v-theme-on-surface), 0.5);
}

.empty-text {
  font-size: 12px;
  color: rgba(var(--v-theme-on-surface), 0.5);
}

.file-name {
  font-weight: 600;
  word-break: break-word;
}

.upload-item {
  cursor: pointer;
  transition: background 0.2s ease;
}

.upload-item:hover,
.upload-item.dragover {
  background: rgba(var(--v-theme-on-surface), 0.04);
}
</style>