<template>
  <div class="space-y-6">
    <!-- 工具栏 -->
    <div class="card p-4">
      <div class="flex flex-wrap gap-2">
        <button
          @click="convertBase64ToImage"
          :disabled="!base64Input.trim() || isConverting"
          class="btn-primary"
        >
          <FontAwesomeIcon 
            :icon="isConverting ? ['fas', 'spinner'] : ['fas', 'image']" 
            :class="['mr-2', isConverting && 'animate-spin']"
          />
          {{ t('tools.base64_to_image.base64_to_image') }}
        </button>
        
        <button
          @click="downloadImage"
          :disabled="!imageDataUrl"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'download']" class="mr-2" />
          {{ t('tools.base64_to_image.download_image') }}
        </button>
        
        <button
          @click="clearAll"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'trash']" class="mr-2" />
          {{ t('tools.base64_to_image.clear') }}
        </button>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- Base64 输入区域 -->
      <div class="space-y-4">
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.base64_to_image.base64_input') }}</h3>
          <textarea
            v-model="base64Input"
            :placeholder="t('tools.base64_to_image.base64_placeholder')"
            class="textarea-field h-40"
            @input="handleBase64Change"
          />
          <div class="text-sm text-secondary mt-2">
            字符数: {{ base64Input.length }}
          </div>
        </div>

        <!-- 图片上传区域 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.base64_to_image.image_to_base64') }}</h3>
          <div 
            @click="triggerFileUpload"
            @dragover.prevent="handleDragOver"
            @dragleave.prevent="handleDragLeave"
            @drop.prevent="handleFileDrop"
            :class="[
              'border-2 border-dashed rounded-lg p-8 cursor-pointer transition-colors text-center',
              isDragging ? 'border-primary bg-primary bg-opacity-5' : 'border-tertiary hover:border-primary-light'
            ]"
          >
            <FontAwesomeIcon :icon="['fas', 'cloud-upload-alt']" class="text-4xl text-tertiary mb-4" />
            <div class="text-secondary">
              <p>{{ t('tools.base64_to_image.click_or_drag') }}</p>
              <p class="text-sm text-tertiary mt-1">支持 JPG, PNG, GIF, WebP 格式</p>
            </div>
          </div>
          <input
            ref="fileInput"
            type="file"
            accept="image/*"
            class="hidden"
            @change="handleFileSelect"
          >
        </div>
      </div>

      <!-- 预览和结果区域 -->
      <div class="space-y-4">
        <!-- 图片预览 -->
        <div class="card p-4">
          <h3 class="text-lg font-semibold text-primary mb-3">{{ t('tools.base64_to_image.image_preview') }}</h3>
          
          <div class="flex justify-center items-center min-h-[200px] bg-block rounded-lg">
            <div v-if="imageDataUrl" class="text-center max-w-full">
              <img 
                :src="imageDataUrl" 
                :alt="t('tools.base64_to_image.preview_image')"
                class="max-w-full max-h-64 mx-auto rounded border border-primary border-opacity-20"
                @load="handleImageLoad"
                @error="handleImageError"
              >
              <div v-if="imageInfo" class="text-sm text-secondary mt-2">
                <div>尺寸: {{ imageInfo.width }} × {{ imageInfo.height }}px</div>
                <div>大小: {{ imageInfo.size }}</div>
                <div>格式: {{ imageInfo.format }}</div>
              </div>
            </div>
            
            <div v-else-if="isConverting" class="text-center">
              <FontAwesomeIcon :icon="['fas', 'spinner']" class="text-4xl text-primary animate-spin mb-4" />
              <div class="text-secondary">{{ t('tools.base64_to_image.converting') }}</div>
            </div>
            
            <div v-else class="text-center">
              <FontAwesomeIcon :icon="['fas', 'image']" class="text-6xl text-tertiary mb-4" />
              <div class="text-secondary">{{ t('tools.base64_to_image.no_preview') }}</div>
            </div>
          </div>
        </div>

        <!-- Base64 输出 -->
        <div v-if="base64Output" class="card p-4">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-lg font-semibold text-primary">{{ t('tools.base64_to_image.base64_output') }}</h3>
            <button
              @click="copyBase64ToClipboard"
              class="p-2 rounded text-secondary hover:text-primary transition-colors"
              title="复制"
            >
              <FontAwesomeIcon 
                :icon="base64Copied ? ['fas', 'check'] : ['fas', 'copy']" 
                :class="base64Copied && 'text-success'"
              />
            </button>
          </div>
          <textarea
            v-model="base64Output"
            class="textarea-field h-32"
            readonly
          />
          <div class="text-sm text-secondary mt-2">
            字符数: {{ base64Output.length }}
          </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, nextTick } from 'vue'
import { useLanguage } from '@/composables/useLanguage'

const { t } = useLanguage()

// 响应式状态
const base64Input = ref('')
const base64Output = ref('')
const imageDataUrl = ref('')
const isDragging = ref(false)
const isConverting = ref(false)
const base64Copied = ref(false)
const statusMessage = ref('')
const statusType = ref<'success' | 'error'>('success')

// 文件输入引用
const fileInput = ref<HTMLInputElement>()

// 图片信息
const imageInfo = ref<{
  width: number
  height: number
  size: string
  format: string
} | null>(null)

// 将Base64转换为图片
const convertBase64ToImage = async () => {
  if (!base64Input.value.trim()) {
    showStatus('请输入Base64编码', 'error')
    return
  }

  isConverting.value = true
  statusMessage.value = ''

  await nextTick()

  try {
    let base64Data = base64Input.value.trim()
    
    // 如果没有data URI前缀，尝试添加
    if (!base64Data.startsWith('data:')) {
      // 检测图片格式
      const firstChar = base64Data.charAt(0)
      let mimeType = 'image/png' // 默认
      
      if (firstChar === '/') {
        mimeType = 'image/jpeg'
      } else if (firstChar === 'R') {
        mimeType = 'image/gif'
      } else if (firstChar === 'U') {
        mimeType = 'image/webp'
      }
      
      base64Data = `data:${mimeType};base64,${base64Data}`
    }

    // 验证Base64格式
    const base64Pattern = /^data:image\/(png|jpe?g|gif|webp);base64,/
    if (!base64Pattern.test(base64Data)) {
      throw new Error('无效的Base64图片格式')
    }

    imageDataUrl.value = base64Data
    showStatus('Base64转换成功', 'success')
    
  } catch (error) {
    console.error('Base64转换失败:', error)
    showStatus('转换失败: ' + (error instanceof Error ? error.message : '未知错误'), 'error')
    imageDataUrl.value = ''
    imageInfo.value = null
  } finally {
    isConverting.value = false
  }
}

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    convertFileToBase64(file)
  }
}

// 处理文件拖拽
const handleFileDrop = (event: DragEvent) => {
  isDragging.value = false
  const files = event.dataTransfer?.files
  if (files && files.length > 0) {
    const file = files[0]
    if (file.type.startsWith('image/')) {
      convertFileToBase64(file)
    } else {
      showStatus('请选择图片文件', 'error')
    }
  }
}

const handleDragOver = () => {
  isDragging.value = true
}

const handleDragLeave = () => {
  isDragging.value = false
}

// 将文件转换为Base64
const convertFileToBase64 = (file: File) => {
  if (!file.type.startsWith('image/')) {
    showStatus('请选择图片文件', 'error')
    return
  }

  isConverting.value = true
  statusMessage.value = ''

  const reader = new FileReader()
  
  reader.onload = (e) => {
    try {
      const result = e.target?.result as string
      base64Output.value = result
      imageDataUrl.value = result
      
      // 更新图片信息
      imageInfo.value = {
        width: 0, // 将在图片加载后更新
        height: 0,
        size: formatFileSize(file.size),
        format: file.type.split('/')[1].toUpperCase()
      }
      
      showStatus('图片转Base64成功', 'success')
    } catch (error) {
      console.error('文件转换失败:', error)
      showStatus('文件转换失败', 'error')
    } finally {
      isConverting.value = false
    }
  }
  
  reader.onerror = () => {
    showStatus('文件读取失败', 'error')
    isConverting.value = false
  }
  
  reader.readAsDataURL(file)
}

// 触发文件上传
const triggerFileUpload = () => {
  fileInput.value?.click()
}

// 下载图片
const downloadImage = () => {
  if (!imageDataUrl.value) return

  try {
    const link = document.createElement('a')
    link.download = `base64-image-${Date.now()}.png`
    link.href = imageDataUrl.value
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    showStatus('图片下载成功', 'success')
  } catch (error) {
    console.error('下载失败:', error)
    showStatus('下载失败', 'error')
  }
}

// 复制Base64到剪贴板
const copyBase64ToClipboard = async () => {
  if (!base64Output.value) return
  
  try {
    await navigator.clipboard.writeText(base64Output.value)
    base64Copied.value = true
    showStatus('Base64已复制到剪贴板', 'success')
    setTimeout(() => {
      base64Copied.value = false
    }, 2000)
  } catch (error) {
    console.error('复制失败:', error)
    showStatus('复制失败', 'error')
  }
}

// 清除所有内容
const clearAll = () => {
  base64Input.value = ''
  base64Output.value = ''
  imageDataUrl.value = ''
  imageInfo.value = null
  statusMessage.value = ''
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

// 处理Base64输入变化
const handleBase64Change = () => {
  if (statusMessage.value) {
    statusMessage.value = ''
  }
}

// 图片加载完成
const handleImageLoad = (event: Event) => {
  const img = event.target as HTMLImageElement
  if (imageInfo.value) {
    imageInfo.value.width = img.naturalWidth
    imageInfo.value.height = img.naturalHeight
  }
}

// 图片加载错误
const handleImageError = () => {
  showStatus('图片加载失败，请检查Base64编码是否正确', 'error')
  imageDataUrl.value = ''
  imageInfo.value = null
}

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

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script> 