<template>
  <div class="space-y-6">
    <!-- 工具栏 -->
    <div class="card p-4">
      <div class="flex flex-wrap gap-2">
        <button
          @click="() => convert('encode')"
          class="btn-primary"
        >
          <FontAwesomeIcon :icon="['fas', 'lock']" class="mr-2" />
          URL编码
        </button>
        
        <button
          @click="() => convert('decode')"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'unlock']" class="mr-2" />
          URL解码
        </button>
        
        <button
          @click="() => convert('component-encode')"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'compress']" class="mr-2" />
          组件编码
        </button>
        
        <button
          @click="() => convert('component-decode')"
          class="btn-secondary"
        >
          <FontAwesomeIcon :icon="['fas', 'expand']" class="mr-2" />
          组件解码
        </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="输入要编码或解码的URL或文本..."
          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>

    <!-- URL 分析 -->
    <div v-if="urlParts" class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">URL 分析</h3>
      <div class="space-y-3">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div v-if="urlParts.protocol" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">协议</div>
            <div class="font-mono text-sm">{{ urlParts.protocol }}</div>
          </div>
          
          <div v-if="urlParts.hostname" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">主机名</div>
            <div class="font-mono text-sm">{{ urlParts.hostname }}</div>
          </div>
          
          <div v-if="urlParts.port" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">端口</div>
            <div class="font-mono text-sm">{{ urlParts.port }}</div>
          </div>
          
          <div v-if="urlParts.pathname" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">路径</div>
            <div class="font-mono text-sm">{{ urlParts.pathname }}</div>
          </div>
          
          <div v-if="urlParts.search" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">查询参数</div>
            <div class="font-mono text-sm">{{ urlParts.search }}</div>
          </div>
          
          <div v-if="urlParts.hash" class="bg-block p-3 rounded">
            <div class="text-sm font-medium text-secondary mb-1">锚点</div>
            <div class="font-mono text-sm">{{ urlParts.hash }}</div>
          </div>
        </div>
        
        <div v-if="queryParams.length > 0" class="mt-4">
          <h4 class="text-lg font-semibold text-primary mb-2">查询参数详情</h4>
          <div class="space-y-2">
            <div
              v-for="(param, index) in queryParams"
              :key="index"
              class="bg-block p-3 rounded flex justify-between"
            >
              <div class="font-mono text-sm">
                <span class="text-primary">{{ param.key }}</span>
                <span class="text-secondary mx-2">=</span>
                <span class="text-secondary">{{ param.value }}</span>
              </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-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
        <div
          v-for="char in commonChars"
          :key="char.original"
          class="bg-block p-3 rounded text-center"
        >
          <div class="text-lg font-bold text-primary">{{ char.original }}</div>
          <div class="text-sm text-secondary font-mono">{{ char.encoded }}</div>
        </div>
      </div>
    </div>

    <!-- 快速示例 -->
    <div class="card p-4">
      <h3 class="text-lg font-semibold text-primary mb-3">快速示例</h3>
      <div class="space-y-3">
        <div
          v-for="example in examples"
          :key="example.name"
          class="bg-block p-3 rounded"
        >
          <div class="flex items-center justify-between mb-2">
            <h4 class="font-medium text-secondary">{{ example.name }}</h4>
            <button
              @click="() => useExample(example.url)"
              class="btn-secondary text-sm"
            >
              使用此示例
            </button>
          </div>
          <div class="font-mono text-sm break-all">{{ example.url }}</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 urlParts = ref<any>(null)
const queryParams = ref<Array<{ key: string, value: string }>>([])

// 常用字符编码对照
const commonChars = [
  { original: ' ', encoded: '%20' },
  { original: '!', encoded: '%21' },
  { original: '#', encoded: '%23' },
  { original: '$', encoded: '%24' },
  { original: '&', encoded: '%26' },
  { original: "'", encoded: '%27' },
  { original: '(', encoded: '%28' },
  { original: ')', encoded: '%29' },
  { original: '+', encoded: '%2B' },
  { original: ',', encoded: '%2C' },
  { original: '/', encoded: '%2F' },
  { original: ':', encoded: '%3A' },
  { original: ';', encoded: '%3B' },
  { original: '=', encoded: '%3D' },
  { original: '?', encoded: '%3F' },
  { original: '@', encoded: '%40' }
]

// 示例URL
const examples = [
  {
    name: 'Google搜索',
    url: 'https://www.google.com/search?q=URL编码&hl=zh-CN'
  },
  {
    name: '包含中文的URL',
    url: 'https://example.com/用户/信息?姓名=张三&年龄=25'
  },
  {
    name: '包含特殊字符',
    url: 'https://api.example.com/data?filter=name eq "John Doe"&sort=created_at desc'
  },
  {
    name: '已编码的URL',
    url: 'https://example.com/%E7%94%A8%E6%88%B7?name=%E5%BC%A0%E4%B8%89'
  }
]

// 转换函数
const convert = (type: 'encode' | 'decode' | 'component-encode' | 'component-decode') => {
  if (!inputText.value.trim()) return
  
  try {
    switch (type) {
      case 'encode':
        outputText.value = encodeURI(inputText.value)
        break
      case 'decode':
        outputText.value = decodeURI(inputText.value)
        break
      case 'component-encode':
        outputText.value = encodeURIComponent(inputText.value)
        break
      case 'component-decode':
        outputText.value = decodeURIComponent(inputText.value)
        break
    }
  } catch (error) {
    outputText.value = '转换失败: ' + (error instanceof Error ? error.message : '未知错误')
  }
}

// 分析URL结构
const analyzeURL = (url: string) => {
  try {
    const urlObj = new URL(url)
    
    urlParts.value = {
      protocol: urlObj.protocol,
      hostname: urlObj.hostname,
      port: urlObj.port || '默认端口',
      pathname: urlObj.pathname,
      search: urlObj.search,
      hash: urlObj.hash
    }
    
    // 解析查询参数
    queryParams.value = []
    urlObj.searchParams.forEach((value, key) => {
      queryParams.value.push({ key, value })
    })
  } catch (error) {
    urlParts.value = null
    queryParams.value = []
  }
}

// 使用示例
const useExample = (url: string) => {
  inputText.value = url
}

// 清空所有内容
const clearAll = () => {
  inputText.value = ''
  outputText.value = ''
  urlParts.value = null
  queryParams.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)
  }
}

// 监听输入变化，分析URL
watch(inputText, (newValue) => {
  if (newValue.trim()) {
    analyzeURL(newValue)
  } else {
    urlParts.value = null
    queryParams.value = []
  }
}, { immediate: true })
</script> 