<script setup>
import { ref } from 'vue'
import { NModal, NButton, NIcon, NProgress } from 'naive-ui'
import { CloudUploadOutline, CloseOutline } from '@vicons/ionicons5'

const props = defineProps({
  show: Boolean,
  uploading: Boolean,
  progress: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:show', 'upload'])

const isDragOver = ref(false)
const selectedFile = ref(null)

function handleDragOver(e) {
  e.preventDefault()
  isDragOver.value = true
}

function handleDragLeave() {
  isDragOver.value = false
}

function handleDrop(e) {
  e.preventDefault()
  isDragOver.value = false
  const files = e.dataTransfer.files
  if (files.length > 0) {
    validateAndSelect(files[0])
  }
}

function handleFileSelect(e) {
  const files = e.target.files
  if (files.length > 0) {
    validateAndSelect(files[0])
  }
}

function validateAndSelect(file) {
  if (!file.name.toLowerCase().endsWith('.zip')) {
    alert('仅支持 .zip 格式文件')
    return
  }
  selectedFile.value = file
}

function submitUpload() {
  if (selectedFile.value) {
    emit('upload', selectedFile.value)
  }
}

function closeModal() {
  if (!props.uploading) {
    selectedFile.value = null
    emit('update:show', false)
  }
}
</script>

<template>
  <n-modal
    :show="show"
    @update:show="closeModal"
    :mask-closable="!uploading"
    :close-on-esc="!uploading"
  >
    <div class="upload-modal">
      <!-- 头部 -->
      <div class="modal-header">
        <h3 class="modal-title">新增技能</h3>
        <button v-if="!uploading" class="close-btn" @click="closeModal">
          <n-icon size="18"><CloseOutline /></n-icon>
        </button>
      </div>

      <!-- 拖拽区域 -->
      <div
        class="drop-zone"
        :class="{ 'drag-over': isDragOver, 'has-file': selectedFile }"
        @dragover="handleDragOver"
        @dragleave="handleDragLeave"
        @drop="handleDrop"
        @click="!uploading && $refs.fileInput.click()"
      >
        <input
          ref="fileInput"
          type="file"
          accept=".zip"
          style="display: none"
          @change="handleFileSelect"
          :disabled="uploading"
        />
        <template v-if="!selectedFile">
          <div class="drop-icon">
            <n-icon size="40"><CloudUploadOutline /></n-icon>
          </div>
          <p class="drop-text">将 .zip 文件拖拽到此处，或<span class="drop-link">点击选择</span></p>
          <p class="drop-hint">压缩包内需包含 SKILL.md 文件</p>
        </template>
        <template v-else>
          <div class="file-info">
            <p class="file-name">{{ selectedFile.name }}</p>
            <p class="file-size">{{ (selectedFile.size / 1024 / 1024).toFixed(2) }} MB</p>
          </div>
        </template>
      </div>

      <!-- 进度条 -->
      <div v-if="uploading" class="progress-area">
        <n-progress
          type="line"
          :percentage="progress"
          :show-indicator="true"
          status="info"
          :height="6"
          :border-radius="3"
        />
      </div>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <n-button @click="closeModal" :disabled="uploading" quaternary>
          取消
        </n-button>
        <n-button
          type="primary"
          @click="submitUpload"
          :disabled="!selectedFile || uploading"
          :loading="uploading"
        >
          {{ uploading ? '上传中...' : '确认上传' }}
        </n-button>
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
.upload-modal {
  width: 480px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 28px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* 拖拽区域 */
.drop-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: rgba(15, 29, 50, 0.4);
}

.drop-zone:hover {
  border-color: var(--border-color-hover);
  background: rgba(15, 29, 50, 0.6);
}

.drop-zone.drag-over {
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
  box-shadow: var(--glow-blue);
}

.drop-zone.has-file {
  border-style: solid;
  border-color: var(--color-primary);
  background: rgba(37, 99, 235, 0.06);
}

.drop-icon {
  color: var(--color-accent);
  margin-bottom: 16px;
}

.drop-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.drop-link {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.drop-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.file-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-name {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.file-size {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* 进度条 */
.progress-area {
  margin-top: 16px;
}

/* 底部 */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
</style>
