<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  filePath: String,
  filePreview: String,
  imageInfo: Object,
  originalWidth: Number,
  originalHeight: Number,
  processing: Boolean,
  resultInfo: Object,
  outputPath: String,
  config: Object,
})

const emit = defineEmits(['update:outputPath', 'process', 'selectFile'])

const outputFormat = ref('jpeg')
const qualityInt = ref(75)
const aspectLocked = ref(false)
const customWidth = ref(800)
const customHeight = ref(600)

watch(() => props.originalWidth, (w) => {
  if (w) customWidth.value = w
})
watch(() => props.originalHeight, (h) => {
  if (h) customHeight.value = h
})

function buildRequest() {
  return {
    inputPath: props.filePath,
    outputPath: props.outputPath,
    format: 'compress',
    qualityInt: qualityInt.value,
    width: aspectLocked.value ? customWidth.value : 0,
    height: aspectLocked.value ? customHeight.value : 0,
    outputFormat: outputFormat.value,
  }
}

function onProcess() {
  emit('process', buildRequest())
}

function formatSize(bytes) {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

function getFileName() {
  if (!props.filePath) return ''
  return props.filePath.split(/[/\\]/).pop()
}

function onDragOver(e) {
  e.preventDefault()
  e.currentTarget.classList.add('dragover')
}

function onDragLeave(e) {
  e.currentTarget.classList.remove('dragover')
}

function onDrop(e) {
  e.preventDefault()
  e.currentTarget.classList.remove('dragover')
  const files = e.dataTransfer?.files
  if (files?.length) {
    const ext = files[0].name.split('.').pop().toLowerCase()
    if (!['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'tif', 'webp', 'ico'].includes(ext)) {
      ElMessage.warning('请选择图片文件')
      return
    }
    emit('selectFile', files[0].path)
  }
}
</script>

<template>
  <div v-if="!filePath" class="file-drop-zone" @click="$emit('selectFile')" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
    <el-icon :size="40" class="drop-icon"><UploadFilled /></el-icon>
    <div class="drop-text">点击选择图片</div>
    <div class="drop-hint">支持拖拽图片到此处</div>
  </div>

  <div v-else class="image-workspace">
    <div class="image-canvas-area">
      <div class="canvas-container">
        <div class="canvas-wrapper">
          <img v-if="filePreview" :src="filePreview" class="preview-img" />
        </div>
      </div>
      <div class="image-info-bar">
        <span class="image-dims">{{ originalWidth }} × {{ originalHeight }} px</span>
        <span class="image-filename">{{ getFileName() }}</span>
        <el-button type="danger" text size="small" @click="$emit('selectFile')">
          <el-icon><Delete /></el-icon>
        </el-button>
      </div>
    </div>

    <div class="image-panel">
      <div class="panel-section">
        <div class="panel-title">压缩设置</div>
        <div class="param-group">
          <div class="param-label">输出格式</div>
          <div class="tag-group">
            <div class="tag-option" :class="{ active: outputFormat === 'jpeg' }" @click="outputFormat = 'jpeg'">JPEG</div>
            <div class="tag-option" :class="{ active: outputFormat === 'png' }" @click="outputFormat = 'png'">PNG</div>
          </div>
        </div>
        <div class="param-group">
          <div class="param-label">质量: {{ qualityInt }}</div>
          <el-slider v-model="qualityInt" :min="1" :max="100" :step="1" />
          <div class="slider-hint"><span>最小</span><span>最大</span></div>
        </div>
        <div class="param-group">
          <button class="aspect-lock-btn" :class="{ locked: aspectLocked }" @click="aspectLocked = !aspectLocked">
            <el-icon><Lock v-if="aspectLocked" /><Unlock v-else /></el-icon>
            {{ aspectLocked ? '锁定比例' : '自由比例' }}
          </button>
        </div>
        <div v-if="aspectLocked" class="param-group">
          <div class="param-label">尺寸 (宽 × 高)</div>
          <div class="size-inputs">
            <el-input-number v-model="customWidth" :min="1" :max="10000" size="small" controls-position="right" />
            <span class="size-sep">×</span>
            <el-input-number v-model="customHeight" :min="1" :max="10000" size="small" controls-position="right" />
            <span class="size-unit">px</span>
          </div>
        </div>
        <div v-if="resultInfo && resultInfo.isImageOp" class="estimated-size">
          <span class="estimated-label">处理后大小:</span> {{ resultInfo.size }}
        </div>
      </div>

      <div class="panel-section">
        <div class="panel-title">输出路径</div>
        <div class="output-row">
          <el-input :value="outputPath" :placeholder="config?.defaultOutputDir ? '默认: ' + config.defaultOutputDir : '默认: 与输入文件同目录'" readonly size="small" />
        </div>
      </div>

      <el-button class="process-btn" type="primary" size="large" :loading="processing" :disabled="!filePath" @click="onProcess">
        <el-icon v-if="!processing"><Check /></el-icon>
        {{ processing ? '处理中...' : '开始处理' }}
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.file-drop-zone {
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 80px 40px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  max-width: 600px;
  margin: 40px auto;
}
.file-drop-zone:hover, .file-drop-zone.dragover {
  border-color: var(--accent-primary);
  background: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}
.drop-icon { color: var(--text-muted); margin-bottom: 8px; }
.drop-text { font-size: 15px; color: var(--text-primary); margin-bottom: 4px; }
.drop-hint { font-size: 12px; color: var(--text-muted); }

.image-workspace {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  height: calc(100vh - 160px);
  max-height: 800px;
}
.image-canvas-area {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a25;
  overflow: hidden;
  min-height: 400px;
}
.canvas-wrapper { position: relative; display: inline-block; }
.preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-info-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  font-size: 13px;
}
.image-dims { color: var(--text-secondary); font-family: monospace; }
.image-filename { color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.panel-section { display: flex; flex-direction: column; gap: 4px; }
.panel-title {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--glass-border);
}
.param-group { margin-bottom: 12px; }
.param-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tag-group { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-option {
  display: flex; align-items: center; gap: 4px; padding: 7px 14px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  cursor: pointer; background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--glass-border); transition: all var(--transition-normal); user-select: none;
}
.tag-option:hover { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); }
.tag-option.active { background: var(--accent-primary); color: #ffffff; border-color: var(--accent-primary); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }
.slider-hint { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.aspect-lock-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 500;
  cursor: pointer; background: var(--bg-surface); border: 1px solid var(--glass-border);
  color: var(--text-secondary); transition: all var(--transition-normal);
}
.aspect-lock-btn.locked { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.size-inputs { display: flex; align-items: center; gap: 8px; }
.size-sep { color: var(--text-muted); font-size: 14px; }
.size-unit { color: var(--text-muted); font-size: 13px; }
.output-row { display: flex; gap: 8px; }
.output-row .el-input { flex: 1; }
.process-btn {
  width: 100%; height: 48px; font-size: 15px; font-weight: 600;
  border-radius: var(--radius-md); background: var(--gradient-primary); border: none;
  transition: all var(--transition-normal);
}
.process-btn:hover:not(:disabled) { box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); transform: translateY(-1px); }
.process-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.estimated-size {
  margin-top: 8px; padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary);
}
.estimated-label { font-weight: 500; }
</style>
