<template>
  <div class="space-y-6">
    <!-- 算法选择 -->
    <div class="card p-4">
      <h3 class="text-md font-medium text-primary mb-3">选择加密算法</h3>
      <div class="grid grid-cols-2 md:grid-cols-6 gap-2">
        <button
          v-for="algorithm in algorithms"
          :key="algorithm.type"
          :class="[
            'px-3 py-2 text-sm font-medium rounded transition-all',
            activeAlgorithm === algorithm.type 
              ? 'bg-primary text-white shadow-sm' 
              : 'bg-block text-secondary border hover:bg-hover'
          ]"
          @click="setActiveAlgorithm(algorithm.type)"
        >
          {{ algorithm.name }}
        </button>
      </div>
    </div>

    <!-- 操作模式选择（仅对支持编码/解码的算法显示） -->
    <div v-if="currentAlgorithm?.isEncodeDecode" class="card p-4">
      <h3 class="text-md font-medium text-primary mb-3">操作模式</h3>
      <div class="flex gap-2">
        <button
          :class="[
            'flex-1 px-4 py-2 text-sm font-medium rounded transition-all',
            !isDecoding ? 'bg-primary text-white' : 'bg-block text-secondary border'
          ]"
          @click="isDecoding = false"
        >
          {{ currentAlgorithm?.type === 'aes' ? '加密' : '编码' }}
        </button>
        <button
          :class="[
            'flex-1 px-4 py-2 text-sm font-medium rounded transition-all',
            isDecoding ? 'bg-primary text-white' : 'bg-block text-secondary border'
          ]"
          @click="isDecoding = true"
        >
          {{ currentAlgorithm?.type === 'aes' ? '解密' : '解码' }}
        </button>
      </div>
    </div>

    <!-- 输入和处理区域 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 输入区域 -->
      <div class="card p-4">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-md font-medium text-primary">输入内容</h3>
          <div class="flex gap-2">
            <button @click="loadExample" class="btn-secondary text-sm">
              <FontAwesomeIcon :icon="['fas', 'redo']" class="mr-1" />
              示例
            </button>
            <button @click="clearAll" class="btn-secondary text-sm">
              <FontAwesomeIcon :icon="['fas', 'eraser']" class="mr-1" />
              清空
            </button>
          </div>
        </div>

        <div class="space-y-4">
          <!-- 密钥输入（仅对需要密钥的算法显示） -->
          <div v-if="currentAlgorithm?.needsKey">
            <label class="block text-sm text-secondary font-medium mb-2">密钥</label>
            <input
              v-model="secretKey"
              type="text"
              class="input-field w-full"
              placeholder="请输入加密密钥..."
            />
          </div>

          <!-- 文本输入 -->
          <div>
            <label class="block text-sm text-secondary font-medium mb-2">
              {{ isDecoding && currentAlgorithm?.isEncodeDecode ? '待解密/解码内容' : '待加密/编码内容' }}
            </label>
            <textarea
              v-model="inputText"
              class="textarea-field h-36 w-full font-mono resize-y"
              :placeholder="getInputPlaceholder()"
            />
          </div>

          <!-- 处理按钮 -->
          <button
            @click="processOperation"
            class="btn-primary w-full flex items-center justify-center gap-2"
            :disabled="!inputText.trim() || (currentAlgorithm?.needsKey && !secretKey.trim())"
          >
            <FontAwesomeIcon :icon="['fas', 'lock']" />
            {{ getProcessButtonText() }}
          </button>
        </div>
      </div>

      <!-- 输出区域 -->
      <div class="card p-4">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-md font-medium text-primary">输出结果</h3>
          <button
            v-if="output"
            @click="copyToClipboard"
            class="btn-secondary text-sm"
            :disabled="!output"
          >
            <FontAwesomeIcon :icon="copied ? ['fas', 'check'] : ['fas', 'copy']" class="mr-1" />
            {{ copied ? '已复制' : '复制' }}
          </button>
        </div>

        <div class="space-y-4">
          <!-- 结果显示 -->
          <div>
            <label class="block text-sm text-secondary font-medium mb-2">
              {{ isDecoding && currentAlgorithm?.isEncodeDecode ? '解密/解码结果' : '加密/编码结果' }}
            </label>
            <textarea
              v-model="output"
              readonly
              class="textarea-field h-36 w-full font-mono resize-y bg-block"
              placeholder="结果将在这里显示..."
            />
          </div>

          <!-- 结果信息 -->
          <div v-if="output" class="text-sm text-tertiary">
            <div>字符长度: {{ output.length }}</div>
            <div v-if="currentAlgorithm?.type !== 'aes' && !isDecoding">
              哈希值: {{ currentAlgorithm?.name }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误和成功消息 -->
    <div v-if="error" class="p-3 bg-red-900/20 border border-red-700/30 rounded-lg text-error">
      <FontAwesomeIcon :icon="['fas', 'exclamation-triangle']" class="mr-2" />
      {{ error }}
    </div>

    <div v-if="success" class="p-3 bg-green-900/20 border border-green-700/30 rounded-lg text-green-400">
      <FontAwesomeIcon :icon="['fas', 'check']" class="mr-2" />
      {{ success }}
    </div>

    <!-- 算法说明 -->
    <div class="card p-4">
      <h3 class="text-md font-medium text-primary mb-3">
        <FontAwesomeIcon :icon="['fas', 'info-circle']" class="mr-2" />
        算法说明
      </h3>
      <div class="text-sm text-secondary">
        {{ getAlgorithmDescription() }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import CryptoJS from 'crypto-js'

// 加密算法类型
type CryptoType = 'md5' | 'sha1' | 'sha256' | 'sha512' | 'aes' | 'base64'

// 算法配置
interface AlgorithmConfig {
  type: CryptoType
  name: string
  needsKey: boolean
  isEncodeDecode: boolean
  description: string
}

// 响应式状态
const activeAlgorithm = ref<CryptoType>('md5')
const inputText = ref('')
const secretKey = ref('')
const output = ref('')
const isDecoding = ref(false)
const copied = ref(false)
const error = ref<string | null>(null)
const success = ref<string | null>(null)

// 算法配置
const algorithms: AlgorithmConfig[] = [
  {
    type: 'md5',
    name: 'MD5',
    needsKey: false,
    isEncodeDecode: false,
    description: 'MD5是一种广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值。常用于文件校验和密码存储。'
  },
  {
    type: 'sha1',
    name: 'SHA1',
    needsKey: false,
    isEncodeDecode: false,
    description: 'SHA-1是一种密码散列函数，可以产生一个160位（20字节）的散列值。比MD5更安全，但现在也被认为不够安全。'
  },
  {
    type: 'sha256',
    name: 'SHA256',
    needsKey: false,
    isEncodeDecode: false,
    description: 'SHA-256是SHA-2家族的一种，可以产生一个256位（32字节）的散列值。目前被认为是安全的哈希算法。'
  },
  {
    type: 'sha512',
    name: 'SHA512',
    needsKey: false,
    isEncodeDecode: false,
    description: 'SHA-512是SHA-2家族的一种，可以产生一个512位（64字节）的散列值。比SHA-256更安全，计算量也更大。'
  },
  {
    type: 'aes',
    name: 'AES',
    needsKey: true,
    isEncodeDecode: true,
    description: 'AES（高级加密标准）是一种对称加密算法，需要相同的密钥进行加密和解密。广泛用于数据保护。'
  },
  {
    type: 'base64',
    name: 'Base64',
    needsKey: false,
    isEncodeDecode: true,
    description: 'Base64是一种编码方式，常用于在文本环境中传输二进制数据。不是加密算法，只是编码转换。'
  }
]

// 当前算法配置
const currentAlgorithm = computed(() => 
  algorithms.find(algo => algo.type === activeAlgorithm.value)
)

// 获取输入提示文本
const getInputPlaceholder = (): string => {
  if (isDecoding.value && currentAlgorithm.value?.isEncodeDecode) {
    return currentAlgorithm.value.type === 'aes' 
      ? '请输入要解密的密文...' 
      : '请输入要解码的内容...'
  }
  return '请输入要处理的文本内容...'
}

// 获取处理按钮文本
const getProcessButtonText = (): string => {
  if (!currentAlgorithm.value) return '处理'
  
  if (currentAlgorithm.value.isEncodeDecode) {
    return isDecoding.value 
      ? (currentAlgorithm.value.type === 'aes' ? '解密' : '解码')
      : (currentAlgorithm.value.type === 'aes' ? '加密' : '编码')
  }
  
  return '生成哈希'
}

// 获取算法描述
const getAlgorithmDescription = (): string => {
  return currentAlgorithm.value?.description || ''
}

// 设置活动算法
const setActiveAlgorithm = (type: CryptoType) => {
  activeAlgorithm.value = type
  output.value = ''
  error.value = null
  success.value = null
  
  // 如果不支持编码/解码，重置解码状态
  if (!currentAlgorithm.value?.isEncodeDecode) {
    isDecoding.value = false
  }
}

// 处理操作
const processOperation = () => {
  error.value = null
  success.value = null
  output.value = ''
  
  if (!inputText.value.trim()) {
    error.value = '请输入要处理的内容'
    return
  }
  
  if (currentAlgorithm.value?.needsKey && !secretKey.value.trim()) {
    error.value = '请输入密钥'
    return
  }
  
  try {
    let result = ''
    
    switch (activeAlgorithm.value) {
      case 'md5':
        result = CryptoJS.MD5(inputText.value).toString()
        break
        
      case 'sha1':
        result = CryptoJS.SHA1(inputText.value).toString()
        break
        
      case 'sha256':
        result = CryptoJS.SHA256(inputText.value).toString()
        break
        
      case 'sha512':
        result = CryptoJS.SHA512(inputText.value).toString()
        break
        
      case 'aes':
        if (isDecoding.value) {
          // 解密操作
          try {
            const decrypted = CryptoJS.AES.decrypt(inputText.value, secretKey.value)
            result = decrypted.toString(CryptoJS.enc.Utf8)
            
            if (!result) {
              throw new Error('解密失败，请检查密文和密钥是否正确')
            }
          } catch {
            throw new Error('解密失败，请检查密文和密钥是否正确')
          }
        } else {
          // 加密操作
          result = CryptoJS.AES.encrypt(inputText.value, secretKey.value).toString()
        }
        break
        
      case 'base64':
        if (isDecoding.value) {
          // Base64解码
          try {
            result = CryptoJS.enc.Base64.parse(inputText.value).toString(CryptoJS.enc.Utf8)
          } catch {
            throw new Error('Base64解码失败，请检查输入内容格式')
          }
        } else {
          // Base64编码
          result = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(inputText.value))
        }
        break
    }
    
    output.value = result
    success.value = isDecoding.value ? '解密/解码成功' : '加密/编码成功'
  } catch (err) {
    console.error('处理错误:', err)
    error.value = `处理失败: ${err instanceof Error ? err.message : '未知错误'}`
  }
}

// 复制到剪贴板
const copyToClipboard = async () => {
  if (!output.value) return
  
  try {
    await navigator.clipboard.writeText(output.value)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (err) {
    console.error('复制失败:', err)
    error.value = '复制失败'
  }
}

// 清空所有内容
const clearAll = () => {
  inputText.value = ''
  secretKey.value = ''
  output.value = ''
  error.value = null
  success.value = null
}

// 加载示例
const loadExample = () => {
  const examples: Record<CryptoType, { input: string; key?: string }> = {
    md5: { input: 'Hello, World!' },
    sha1: { input: 'Hello, World!' },
    sha256: { input: 'Hello, World!' },
    sha512: { input: 'Hello, World!' },
    aes: { input: 'Hello, World!', key: 'secret-key-12345' },
    base64: { input: 'Hello, World!' }
  }
  
  const example = examples[activeAlgorithm.value]
  inputText.value = example.input
  if (example.key) {
    secretKey.value = example.key
  }
  
  output.value = ''
  error.value = null
  success.value = null
}

// 清除状态提示的定时器
watch([error, success], () => {
  if (error.value || success.value) {
    setTimeout(() => {
      error.value = null
      success.value = null
    }, 3000)
  }
})
</script> 