<template>
  <div class="space-y-6">
    <!-- 工具栏 -->
    <div class="card p-4">
      <div class="flex flex-wrap gap-2">
        <button
          @click="triggerFileInput"
          class="btn-primary"
        >
          <FontAwesomeIcon :icon="['fas', 'upload']" class="mr-2" />
          上传图片
        </button>
        
        <button
          @click="addTextWatermark"
          :disabled="!originalImage"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'font']" class="mr-2" />
          文字水印
        </button>
        
        <button
          @click="triggerWatermarkInput"
          :disabled="!originalImage"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'image']" class="mr-2" />
          图片水印
        </button>
        
        <button
          @click="downloadImage"
          :disabled="!processedImage"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'download']" class="mr-2" />
          下载图片
        </button>
        
        <button
          @click="resetImage"
          :disabled="!originalImage"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'undo']" class="mr-2" />
          重置
        </button>
      </div>
      
      <!-- 隐藏的文件输入 -->
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        class="hidden"
        @change="handleImageUpload"
      >
      
      <input
        ref="watermarkInput"
        type="file"
        accept="image/*"
        class="hidden"
        @change="handleWatermarkUpload"
      >
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 设置区域 -->
      <div class="space-y-4">
        <!-- 文字水印设置 -->
        <div v-if="watermarkType === 'text'" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">文字水印设置</h3>
          
          <div class="space-y-4">
            <!-- 水印文字 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">水印文字</label>
              <input
                v-model="textWatermark.text"
                type="text"
                placeholder="请输入水印文字"
                class="input-field"
                @input="updateWatermark"
              >
            </div>
            
            <!-- 字体大小 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                字体大小: {{ textWatermark.fontSize }}px
              </label>
              <input
                v-model.number="textWatermark.fontSize"
                type="range"
                min="12"
                max="120"
                step="2"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
            
            <!-- 字体颜色 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">字体颜色</label>
              <div class="flex space-x-2">
                <input
                  v-model="textWatermark.color"
                  type="color"
                  class="w-12 h-8 rounded border border-primary border-opacity-20"
                  @input="updateWatermark"
                >
                <input
                  v-model="textWatermark.color"
                  type="text"
                  class="input-field flex-1"
                  @input="updateWatermark"
                >
              </div>
            </div>
            
            <!-- 透明度 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                透明度: {{ Math.round(textWatermark.opacity * 100) }}%
              </label>
              <input
                v-model.number="textWatermark.opacity"
                type="range"
                min="0.1"
                max="1"
                step="0.1"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
            
            <!-- 字体样式 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">字体样式</label>
              <div class="flex space-x-2">
                <button
                  @click="toggleFontStyle('bold')"
                  :class="['btn-sm', textWatermark.fontWeight === 'bold' ? 'btn-primary' : 'btn-secondary']"
                >
                  <FontAwesomeIcon :icon="['fas', 'bold']" />
                </button>
                <button
                  @click="toggleFontStyle('italic')"
                  :class="['btn-sm', textWatermark.fontStyle === 'italic' ? 'btn-primary' : 'btn-secondary']"
                >
                  <FontAwesomeIcon :icon="['fas', 'italic']" />
                </button>
              </div>
            </div>
            
            <!-- 旋转角度 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                旋转角度: {{ textWatermark.rotation }}°
              </label>
              <input
                v-model.number="textWatermark.rotation"
                type="range"
                min="-45"
                max="45"
                step="5"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
          </div>
        </div>

        <!-- 图片水印设置 -->
        <div v-if="watermarkType === 'image'" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">图片水印设置</h3>
          
          <div class="space-y-4">
            <!-- 水印图片预览 -->
            <div v-if="watermarkImage">
              <label class="block text-sm font-medium text-secondary mb-2">水印图片</label>
              <div class="bg-block rounded-lg p-4">
                <img :src="watermarkImage" alt="水印图片" class="max-w-full h-20 object-contain mx-auto">
              </div>
            </div>
            
            <!-- 缩放比例 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                缩放比例: {{ Math.round(imageWatermark.scale * 100) }}%
              </label>
              <input
                v-model.number="imageWatermark.scale"
                type="range"
                min="0.1"
                max="2"
                step="0.1"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
            
            <!-- 透明度 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                透明度: {{ Math.round(imageWatermark.opacity * 100) }}%
              </label>
              <input
                v-model.number="imageWatermark.opacity"
                type="range"
                min="0.1"
                max="1"
                step="0.1"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
            
            <!-- 旋转角度 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                旋转角度: {{ imageWatermark.rotation }}°
              </label>
              <input
                v-model.number="imageWatermark.rotation"
                type="range"
                min="-180"
                max="180"
                step="15"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
          </div>
        </div>

        <!-- 位置设置 -->
        <div v-if="originalImage" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">位置设置</h3>
          
          <div class="space-y-4">
            <!-- 预设位置 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">快速定位</label>
              <div class="grid grid-cols-3 gap-2">
                <button
                  v-for="(pos, key) in positions"
                  :key="key"
                  @click="setPosition(key)"
                  :class="['btn-sm text-xs', currentPosition.key === key ? 'btn-primary' : 'btn-secondary']"
                >
                  {{ pos.name }}
                </button>
              </div>
            </div>
            
            <!-- 自定义位置 -->
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                X坐标: {{ currentPosition.x }}px
              </label>
              <input
                v-model.number="currentPosition.x"
                type="range"
                :min="0"
                :max="canvasWidth"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
            
            <div>
              <label class="block text-sm font-medium text-secondary mb-2">
                Y坐标: {{ currentPosition.y }}px
              </label>
              <input
                v-model.number="currentPosition.y"
                type="range"
                :min="0"
                :max="canvasHeight"
                class="w-full"
                @input="updateWatermark"
              >
            </div>
          </div>
        </div>

        <!-- 批量水印设置 -->
        <div v-if="originalImage" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">批量水印</h3>
          
          <div class="space-y-3">
            <label class="flex items-center space-x-2">
              <input
                v-model="batchSettings.enabled"
                type="checkbox"
                class="form-checkbox"
                @change="updateWatermark"
              >
              <span class="text-secondary">启用平铺水印</span>
            </label>
            
            <div v-if="batchSettings.enabled" class="space-y-3">
              <div>
                <label class="block text-sm font-medium text-secondary mb-2">
                  水平间距: {{ batchSettings.spacingX }}px
                </label>
                <input
                  v-model.number="batchSettings.spacingX"
                  type="range"
                  min="50"
                  max="300"
                  step="10"
                  class="w-full"
                  @input="updateWatermark"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-secondary mb-2">
                  垂直间距: {{ batchSettings.spacingY }}px
                </label>
                <input
                  v-model.number="batchSettings.spacingY"
                  type="range"
                  min="50"
                  max="300"
                  step="10"
                  class="w-full"
                  @input="updateWatermark"
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 预览区域 -->
      <div class="lg:col-span-2 space-y-4">
        <!-- 原图预览 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">图片预览</h3>
          
          <div v-if="!originalImage" class="bg-block rounded-lg p-8 text-center">
            <FontAwesomeIcon :icon="['fas', 'cloud-upload-alt']" class="text-4xl text-tertiary mb-4" />
            <p class="text-secondary mb-4">请上传图片或拖拽图片到此处</p>
            <button @click="triggerFileInput" class="btn-primary">
              选择图片
            </button>
          </div>
          
          <div v-else class="relative">
            <canvas
              ref="previewCanvas"
              class="max-w-full border border-primary border-opacity-20 rounded-lg cursor-crosshair"
              @click="handleCanvasClick"
            />
            
            <!-- 图片信息 -->
            <div class="mt-4 flex justify-between items-center text-sm text-secondary">
              <span>{{ imageInfo.width }} × {{ imageInfo.height }}</span>
              <span>{{ imageInfo.size }}</span>
              <span>{{ imageInfo.format }}</span>
            </div>
          </div>
        </div>

        <!-- 处理结果 -->
        <div v-if="processedImage" class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">处理结果</h3>
          
          <div class="bg-block rounded-lg p-4">
            <img :src="processedImage" alt="处理后的图片" class="max-w-full mx-auto">
          </div>
          
          <div class="mt-4 flex justify-between items-center text-sm text-secondary">
            <span>质量: {{ outputQuality }}%</span>
            <span>大小: {{ outputSize }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态消息 -->
    <div v-if="statusMessage" class="card p-4">
      <div :class="[
        'flex items-center space-x-2',
        statusType === 'success' ? 'text-success' : 'text-error'
      ]">
        <FontAwesomeIcon 
          :icon="statusType === 'success' ? ['fas', 'check'] : ['fas', 'times']" 
        />
        <span>{{ statusMessage }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
import { useLanguage } from '@/composables/useLanguage'

const { t } = useLanguage()

// DOM引用
const fileInput = ref<HTMLInputElement>()
const watermarkInput = ref<HTMLInputElement>()
const previewCanvas = ref<HTMLCanvasElement>()

// 响应式状态
const originalImage = ref('')
const processedImage = ref('')
const watermarkImage = ref('')
const watermarkType = ref<'text' | 'image' | null>(null)
const statusMessage = ref('')
const statusType = ref<'success' | 'error'>('success')

// 图片信息
const imageInfo = reactive({
  width: 0,
  height: 0,
  size: '',
  format: ''
})

// Canvas尺寸
const canvasWidth = ref(0)
const canvasHeight = ref(0)

// 文字水印设置
const textWatermark = reactive({
  text: 'Sample Watermark',
  fontSize: 36,
  color: '#ffffff',
  opacity: 0.7,
  fontWeight: 'normal',
  fontStyle: 'normal',
  rotation: 0
})

// 图片水印设置
const imageWatermark = reactive({
  scale: 0.3,
  opacity: 0.7,
  rotation: 0
})

// 位置设置
const currentPosition = reactive({
  x: 0,
  y: 0,
  key: 'center'
})

// 批量水印设置
const batchSettings = reactive({
  enabled: false,
  spacingX: 150,
  spacingY: 150
})

// 预设位置
const positions = {
  'top-left': { name: '左上', x: 0.1, y: 0.1 },
  'top-center': { name: '居上', x: 0.5, y: 0.1 },
  'top-right': { name: '右上', x: 0.9, y: 0.1 },
  'center-left': { name: '居左', x: 0.1, y: 0.5 },
  'center': { name: '居中', x: 0.5, y: 0.5 },
  'center-right': { name: '居右', x: 0.9, y: 0.5 },
  'bottom-left': { name: '左下', x: 0.1, y: 0.9 },
  'bottom-center': { name: '居下', x: 0.5, y: 0.9 },
  'bottom-right': { name: '右下', x: 0.9, y: 0.9 }
}

// 输出设置
const outputQuality = computed(() => 90)
const outputSize = computed(() => {
  if (!processedImage.value) return ''
  return '估算大小'
})

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click()
}

const triggerWatermarkInput = () => {
  watermarkInput.value?.click()
}

// 处理图片上传
const handleImageUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return

  if (!file.type.startsWith('image/')) {
    showStatus('请选择有效的图片文件', 'error')
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    originalImage.value = e.target?.result as string
    loadImageInfo(file)
    nextTick(() => {
      setupCanvas()
    })
  }
  reader.readAsDataURL(file)
}

// 处理水印图片上传
const handleWatermarkUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return

  if (!file.type.startsWith('image/')) {
    showStatus('请选择有效的图片文件', 'error')
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    watermarkImage.value = e.target?.result as string
    watermarkType.value = 'image'
    updateWatermark()
  }
  reader.readAsDataURL(file)
}

// 加载图片信息
const loadImageInfo = (file: File) => {
  const img = new Image()
  img.onload = () => {
    imageInfo.width = img.width
    imageInfo.height = img.height
    imageInfo.size = formatFileSize(file.size)
    imageInfo.format = file.type.split('/')[1].toUpperCase()
  }
  img.src = originalImage.value
}

// 设置Canvas
const setupCanvas = () => {
  if (!previewCanvas.value || !originalImage.value) return

  const img = new Image()
  img.onload = () => {
    const canvas = previewCanvas.value!
    const ctx = canvas.getContext('2d')!
    
    // 设置画布尺寸
    const maxWidth = 600
    const maxHeight = 400
    let { width, height } = img
    
    if (width > maxWidth) {
      height = (height * maxWidth) / width
      width = maxWidth
    }
    if (height > maxHeight) {
      width = (width * maxHeight) / height
      height = maxHeight
    }
    
    canvas.width = width
    canvas.height = height
    canvasWidth.value = width
    canvasHeight.value = height
    
    // 绘制原图
    ctx.drawImage(img, 0, 0, width, height)
    
    // 设置默认水印位置
    setPosition('bottom-right')
  }
  img.src = originalImage.value
}

// 添加文字水印
const addTextWatermark = () => {
  watermarkType.value = 'text'
  updateWatermark()
}

// 更新水印
const updateWatermark = () => {
  if (!previewCanvas.value || !originalImage.value || !watermarkType.value) return

  const canvas = previewCanvas.value
  const ctx = canvas.getContext('2d')!
  
  // 重新绘制原图
  const img = new Image()
  img.onload = () => {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    
    // 绘制水印
    if (watermarkType.value === 'text') {
      drawTextWatermark(ctx)
    } else if (watermarkType.value === 'image' && watermarkImage.value) {
      drawImageWatermark(ctx)
    }
    
    // 生成处理后的图片
    processedImage.value = canvas.toDataURL('image/jpeg', outputQuality.value / 100)
  }
  img.src = originalImage.value
}

// 绘制文字水印
const drawTextWatermark = (ctx: CanvasRenderingContext2D) => {
  ctx.save()
  
  // 设置字体
  const fontStyle = textWatermark.fontStyle === 'italic' ? 'italic ' : ''
  const fontWeight = textWatermark.fontWeight === 'bold' ? 'bold ' : ''
  ctx.font = `${fontStyle}${fontWeight}${textWatermark.fontSize}px Arial`
  
  // 设置颜色和透明度
  ctx.fillStyle = textWatermark.color
  ctx.globalAlpha = textWatermark.opacity
  
  if (batchSettings.enabled) {
    // 平铺水印
    for (let x = 0; x < canvasWidth.value; x += batchSettings.spacingX) {
      for (let y = 0; y < canvasHeight.value; y += batchSettings.spacingY) {
        drawSingleTextWatermark(ctx, x + 50, y + 50)
      }
    }
  } else {
    // 单个水印
    drawSingleTextWatermark(ctx, currentPosition.x, currentPosition.y)
  }
  
  ctx.restore()
}

// 绘制单个文字水印
const drawSingleTextWatermark = (ctx: CanvasRenderingContext2D, x: number, y: number) => {
  ctx.save()
  
  ctx.translate(x, y)
  ctx.rotate((textWatermark.rotation * Math.PI) / 180)
  
  // 添加阴影效果
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'
  ctx.shadowBlur = 3
  ctx.shadowOffsetX = 1
  ctx.shadowOffsetY = 1
  
  ctx.fillText(textWatermark.text, 0, 0)
  
  ctx.restore()
}

// 绘制图片水印
const drawImageWatermark = (ctx: CanvasRenderingContext2D) => {
  const watermarkImg = new Image()
  watermarkImg.onload = () => {
    ctx.save()
    ctx.globalAlpha = imageWatermark.opacity
    
    const scaledWidth = watermarkImg.width * imageWatermark.scale
    const scaledHeight = watermarkImg.height * imageWatermark.scale
    
    if (batchSettings.enabled) {
      // 平铺水印
      for (let x = 0; x < canvasWidth.value; x += batchSettings.spacingX) {
        for (let y = 0; y < canvasHeight.value; y += batchSettings.spacingY) {
          drawSingleImageWatermark(ctx, watermarkImg, x, y, scaledWidth, scaledHeight)
        }
      }
    } else {
      // 单个水印
      drawSingleImageWatermark(ctx, watermarkImg, currentPosition.x, currentPosition.y, scaledWidth, scaledHeight)
    }
    
    ctx.restore()
  }
  watermarkImg.src = watermarkImage.value
}

// 绘制单个图片水印
const drawSingleImageWatermark = (ctx: CanvasRenderingContext2D, img: HTMLImageElement, x: number, y: number, width: number, height: number) => {
  ctx.save()
  
  ctx.translate(x, y)
  ctx.rotate((imageWatermark.rotation * Math.PI) / 180)
  
  ctx.drawImage(img, -width / 2, -height / 2, width, height)
  
  ctx.restore()
}

// 设置位置
const setPosition = (key: string) => {
  const pos = positions[key as keyof typeof positions]
  if (pos) {
    currentPosition.x = canvasWidth.value * pos.x
    currentPosition.y = canvasHeight.value * pos.y
    currentPosition.key = key
    updateWatermark()
  }
}

// 处理Canvas点击
const handleCanvasClick = (event: MouseEvent) => {
  if (!previewCanvas.value) return
  
  const rect = previewCanvas.value.getBoundingClientRect()
  const scaleX = canvasWidth.value / rect.width
  const scaleY = canvasHeight.value / rect.height
  
  currentPosition.x = (event.clientX - rect.left) * scaleX
  currentPosition.y = (event.clientY - rect.top) * scaleY
  currentPosition.key = 'custom'
  
  updateWatermark()
}

// 切换字体样式
const toggleFontStyle = (style: 'bold' | 'italic') => {
  if (style === 'bold') {
    textWatermark.fontWeight = textWatermark.fontWeight === 'bold' ? 'normal' : 'bold'
  } else {
    textWatermark.fontStyle = textWatermark.fontStyle === 'italic' ? 'normal' : 'italic'
  }
  updateWatermark()
}

// 下载图片
const downloadImage = () => {
  if (!processedImage.value) return
  
  const link = document.createElement('a')
  link.download = `watermarked-image-${Date.now()}.jpg`
  link.href = processedImage.value
  link.click()
  
  showStatus('图片下载完成', 'success')
}

// 重置图片
const resetImage = () => {
  originalImage.value = ''
  processedImage.value = ''
  watermarkImage.value = ''
  watermarkType.value = null
  statusMessage.value = ''
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) 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]
}

// 显示状态消息
const showStatus = (message: string, type: 'success' | 'error') => {
  statusMessage.value = message
  statusType.value = type
  setTimeout(() => {
    statusMessage.value = ''
  }, 3000)
}
</script> 