<template>
  <v-card elevation="0" border rounded="lg" class="mb-4">
    <v-card-title class="text-subtitle-1">源文件</v-card-title>
    <v-card-text>
      <template v-if="!validatedSource">
        <div v-if="!uploadedSource">
          <div
            class="border-dashed border rounded pa-6 text-center cursor-pointer"
            :class="{ 'border-primary bg-primary-lighten-5': isDragging }"
            @dragover.prevent="$emit('dragover')"
            @dragleave="$emit('dragleave')"
            @drop.prevent="$emit('drop', $event)"
            @click="fileInputRef?.click()"
          >
            <v-icon size="48" color="grey">mdi-cloud-upload-outline</v-icon>
            <div class="text-body-2 mt-2">拖拽文件到此处，或点击选择</div>
            <div class="text-caption text-medium-emphasis">
              支持任意后缀文件（可多选）；ZIP 拖拽/选择时原样上传
            </div>
            <div class="mt-3">
              <v-btn
                size="small"
                variant="tonal"
                prepend-icon="mdi-folder-zip"
                :disabled="sourceUploading"
                @click.stop="zipInputRef?.click()"
              >
                ZIP 解压上传
              </v-btn>
            </div>
          </div>
          <input
            ref="fileInputRef"
            type="file"
            multiple
            hidden
            @change="$emit('file-select', $event)"
          />
          <input
            ref="zipInputRef"
            type="file"
            accept=".zip,application/zip"
            hidden
            @change="$emit('zip-extract-select', $event)"
          />
        </div>
        <div v-else class="d-flex align-center flex-wrap ga-2">
          <v-icon class="mr-1">
            {{ uploadedSource.kind === 'zip' ? 'mdi-folder-zip' : 'mdi-file-multiple' }}
          </v-icon>
          <span>
            {{ uploadedSource.name }}
            ({{ uploadedSource.fileCount }} 个文件, {{ formatSize(uploadedSource.size) }})
          </span>
          <v-spacer />
          <v-btn size="small" variant="text" color="error" @click="$emit('clear')">清除</v-btn>
        </div>
        <v-progress-linear v-if="sourceUploading" indeterminate class="mt-2" />
      </template>
      <v-alert v-else type="success" variant="tonal" density="compact" class="mb-0">
        <div class="d-flex align-center flex-wrap ga-2">
          <v-icon>mdi-folder-check</v-icon>
          <span class="text-body-2">
            {{ validatedSource.path }}
            ({{ validatedSource.fileCount }} 个文件, {{ formatSize(validatedSource.sizeBytes) }})
          </span>
          <v-spacer />
          <v-btn size="small" variant="text" color="error" @click="$emit('clear-validated')">清除</v-btn>
        </div>
      </v-alert>

      <v-divider v-if="!validatedSource" class="my-4" />

      <div v-if="!validatedSource && !uploadedSource">
        <div class="text-caption text-medium-emphasis mb-2">或输入 Nexus 主机源路径（容器内绝对路径）</div>
        <div class="d-flex ga-2 align-start flex-wrap">
          <v-text-field
            :model-value="sourcePath"
            placeholder="/path/to/files"
            variant="outlined"
            density="compact"
            hide-details
            prepend-inner-icon="mdi-folder"
            class="flex-grow-1"
            style="min-width: 240px"
            @update:model-value="$emit('update:sourcePath', $event)"
            @keydown.enter.prevent="$emit('validate')"
          />
          <v-btn
            variant="tonal"
            color="primary"
            :loading="sourcePathValidating"
            :disabled="!sourcePath.trim()"
            @click="$emit('validate')"
          >
            验证路径
          </v-btn>
        </div>
      </div>
      <div v-else-if="uploadedSource" class="text-caption text-medium-emphasis mt-2">
        已使用上传暂存目录作为源；可在下方管理文件，或清除后改用主机源路径
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatSize } from '@/composables/push/labels'
import type { UploadedSource, ValidatedSource } from '@/composables/push/types'

defineProps<{
  uploadedSource: UploadedSource | null
  validatedSource: ValidatedSource | null
  sourcePath: string
  sourcePathValidating: boolean
  isDragging: boolean
  sourceUploading: boolean
}>()

defineEmits<{
  dragover: []
  dragleave: []
  drop: [e: DragEvent]
  'file-select': [e: Event]
  'zip-extract-select': [e: Event]
  clear: []
  'clear-validated': []
  'update:sourcePath': [value: string]
  validate: []
}>()

const fileInputRef = ref<HTMLInputElement | null>(null)
const zipInputRef = ref<HTMLInputElement | null>(null)
</script>
