<template>
  <div class="space-y-6">
    <!-- 转换工具栏 -->
    <div class="card p-4">
      <div class="flex flex-wrap gap-2">
        <button
          @click="() => convertTo('unicode')"
          class="btn-primary"
        >
          <FontAwesomeIcon :icon="['fas', 'arrow-right']" class="mr-2" />
          转为Unicode编码
        </button>
        
        <button
          @click="() => convertTo('text')"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'arrow-left']" class="mr-2" />
          解码为文本
        </button>
        
        <button
          @click="() => convertTo('hex')"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'hashtag']" class="mr-2" />
          转为16进制
        </button>
        
        <button
          @click="clearAll"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'trash']" class="mr-2" />
          清空
        </button>
      </div>
    </div>

    <!-- 输入输出区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 输入区域 -->
      <div class="card p-4">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-lg font-semibold text-primary">输入</h3>
          <button
            @click="pasteFromClipboard"
            class="p-2 rounded text-secondary hover:text-primary transition-colors"
            title="粘贴"
          >
            <FontAwesomeIcon :icon="['fas', 'clipboard']" />
          </button>
        </div>
        
        <textarea
          v-model="inputText"
          placeholder="输入要转换的文本或Unicode编码..."
          class="textarea-field h-80"
        />
        
        <div class="mt-3 text-sm text-tertiary">
          <p>字符数量: {{ inputText.length }}</p>
        </div>
      </div>

      <!-- 输出区域 -->
      <div class="card p-4">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-lg font-semibold text-primary">输出</h3>
          <button
            @click="copyToClipboard"
            :disabled="!outputText"
            class="p-2 rounded text-secondary hover:text-primary transition-colors disabled:opacity-50"
            title="复制"
          >
            <FontAwesomeIcon 
              :icon="copied ? ['fas', 'check'] : ['fas', 'copy']" 
              :class="copied && 'text-success'"
            />
          </button>
        </div>
        
        <textarea
          v-model="outputText"
          placeholder="转换结果将显示在这里..."
          class="textarea-field h-80"
          readonly
        />
      </div>
    </div>

    <!-- 字符信息 -->
    <div v-if="charInfo.length > 0" class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">字符详细信息</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div
          v-for="(char, index) in charInfo"
          :key="index"
          class="bg-block p-3 rounded"
        >
          <div class="text-center space-y-2">
            <div class="text-2xl font-bold text-primary">{{ char.char }}</div>
            <div class="text-sm text-secondary space-y-1">
              <div><strong>Unicode:</strong> {{ char.unicode }}</div>
              <div><strong>UTF-8:</strong> {{ char.utf8 }}</div>
              <div><strong>十进制:</strong> {{ char.decimal }}</div>
              <div><strong>十六进制:</strong> {{ char.hex }}</div>
              <div v-if="char.description"><strong>描述:</strong> {{ char.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速转换示例 -->
    <div class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">快速转换示例</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <h4 class="font-medium text-secondary mb-2">常用字符</h4>
          <div class="space-y-2">
            <button
              v-for="example in examples"
              :key="example.text"
              @click="() => useExample(example.text)"
              class="block w-full text-left p-2 bg-block hover:bg-hover rounded text-sm"
            >
              <span class="font-mono">{{ example.text }}</span>
              <span class="text-secondary ml-2">{{ example.unicode }}</span>
            </button>
          </div>
        </div>
        
        <div>
          <h4 class="font-medium text-secondary mb-2">转换格式说明</h4>
          <div class="space-y-2 text-sm">
            <div class="bg-block p-3 rounded">
              <div><strong>Unicode编码格式:</strong></div>
              <div class="font-mono text-xs">
                \\u4E2D (JavaScript格式)<br>
                U+4E2D (标准格式)<br>
                &#20013; (HTML实体)
              </div>
            </div>
            <div class="bg-block p-3 rounded">
              <div><strong>支持的输入格式:</strong></div>
              <div class="text-xs">
                • 普通文本<br>
                • Unicode编码序列<br>
                • 十六进制编码
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 响应式状态
const inputText = ref('')
const outputText = ref('')
const copied = ref(false)
const charInfo = ref<Array<{
  char: string
  unicode: string
  utf8: string
  decimal: number
  hex: string
  description?: string
}>>([])

// 示例数据
const examples = [
  { text: '中', unicode: '\\u4E2D' },
  { text: '文', unicode: '\\u6587' },
  { text: '😀', unicode: '\\uD83D\\uDE00' },
  { text: '©', unicode: '\\u00A9' },
  { text: '™', unicode: '\\u2122' },
  { text: '€', unicode: '\\u20AC' }
]

// 文本转Unicode
const textToUnicode = (text: string): string => {
  return text.split('').map(char => {
    const code = char.charCodeAt(0)
    if (code > 127) {
      return '\\u' + code.toString(16).toUpperCase().padStart(4, '0')
    }
    return char
  }).join('')
}

// Unicode转文本
const unicodeToText = (unicode: string): string => {
  try {
    // 处理不同格式的Unicode编码
    let processedUnicode = unicode
      .replace(/\\u([0-9a-fA-F]{4})/g, '\\u$1')
      .replace(/U\+([0-9a-fA-F]{4})/g, '\\u$1')
      .replace(/&#(\d+);/g, (match, dec) => {
        const hex = parseInt(dec).toString(16).toUpperCase().padStart(4, '0')
        return '\\u' + hex
      })
    
    return JSON.parse('"' + processedUnicode + '"')
  } catch (error) {
    throw new Error('Unicode格式错误')
  }
}

// 文本转十六进制
const textToHex = (text: string): string => {
  return text.split('').map(char => {
    const code = char.charCodeAt(0)
    return '0x' + code.toString(16).toUpperCase().padStart(4, '0')
  }).join(' ')
}

// 转换函数
const convertTo = (type: 'unicode' | 'text' | 'hex') => {
  if (!inputText.value.trim()) return
  
  try {
    switch (type) {
      case 'unicode':
        outputText.value = textToUnicode(inputText.value)
        break
      case 'text':
        outputText.value = unicodeToText(inputText.value)
        break
      case 'hex':
        outputText.value = textToHex(inputText.value)
        break
    }
  } catch (error) {
    outputText.value = '转换失败: ' + (error instanceof Error ? error.message : '未知错误')
  }
}

// 分析字符信息
const analyzeCharacters = (text: string) => {
  if (!text || text.length > 20) {
    charInfo.value = []
    return
  }
  
  charInfo.value = text.split('').map(char => {
    const code = char.charCodeAt(0)
    const unicode = '\\u' + code.toString(16).toUpperCase().padStart(4, '0')
    
    // UTF-8 编码
    const utf8Bytes = new TextEncoder().encode(char)
    const utf8 = Array.from(utf8Bytes).map(b => '0x' + b.toString(16).toUpperCase()).join(' ')
    
    return {
      char,
      unicode,
      utf8,
      decimal: code,
      hex: '0x' + code.toString(16).toUpperCase(),
      description: getCharDescription(char, code)
    }
  })
}

// 获取字符描述
const getCharDescription = (char: string, code: number): string | undefined => {
  if (code >= 0x4E00 && code <= 0x9FFF) return 'CJK统一汉字'
  if (code >= 0x3040 && code <= 0x309F) return '平假名'
  if (code >= 0x30A0 && code <= 0x30FF) return '片假名'
  if (code >= 0x1F600 && code <= 0x1F64F) return 'Emoji表情'
  if (code >= 0x0020 && code <= 0x007F) return 'ASCII字符'
  if (code >= 0x00A0 && code <= 0x00FF) return 'Latin-1补充'
  return undefined
}

// 使用示例
const useExample = (text: string) => {
  inputText.value = text
  convertTo('unicode')
}

// 清空所有内容
const clearAll = () => {
  inputText.value = ''
  outputText.value = ''
  charInfo.value = []
}

// 粘贴功能
const pasteFromClipboard = async () => {
  try {
    const text = await navigator.clipboard.readText()
    inputText.value = text
  } catch (error) {
    console.error('粘贴失败:', error)
  }
}

// 复制功能
const copyToClipboard = async () => {
  if (!outputText.value) return
  
  try {
    await navigator.clipboard.writeText(outputText.value)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (error) {
    console.error('复制失败:', error)
  }
}

// 监听输入变化，自动分析字符
watch(inputText, (newValue) => {
  analyzeCharacters(newValue)
}, { immediate: true })
</script> 