<template>
  <v-card elevation="0" border rounded="lg" class="mb-4">
    <v-card-title class="text-subtitle-1">源文件</v-card-title>
    <v-card-text>
      <div v-if="!uploadedZip">
        <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="zipInputRef?.click()"
        >
          <v-icon size="48" color="grey">mdi-cloud-upload-outline</v-icon>
          <div class="text-body-2 mt-2">拖拽 ZIP 文件到此处，或点击选择</div>
          <div class="text-caption text-medium-emphasis">支持 .zip 格式</div>
        </div>
        <input ref="zipInputRef" type="file" accept=".zip" hidden @change="$emit('file-select', $event)" />
      </div>
      <div v-else class="d-flex align-center">
        <v-icon class="mr-2">mdi-folder-zip</v-icon>
        <span>{{ uploadedZip.name }} ({{ uploadedZip.fileCount }} 个文件, {{ formatSize(uploadedZip.size) }})</span>
        <v-spacer />
        <v-btn size="small" variant="text" color="error" @click="$emit('clear')">清除</v-btn>
      </div>
      <v-progress-linear v-if="zipUploading" indeterminate class="mt-2" />
    </v-card-text>
  </v-card>
</template>

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

defineProps<{
  uploadedZip: UploadedZip | null
  isDragging: boolean
  zipUploading: boolean
}>()

defineEmits<{
  dragover: []
  dragleave: []
  drop: [e: DragEvent]
  'file-select': [e: Event]
  clear: []
}>()

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