<template>
  <div class="debug-page p-8">
    <h1 class="text-2xl font-bold mb-6">环境变量调试页面</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- 当前环境信息 -->
      <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold mb-4">当前环境信息</h2>
        <div class="space-y-2">
          <div><strong>环境类型:</strong> {{ currentEnv }}</div>
          <div><strong>环境名称:</strong> {{ envConfig.name }}</div>
          <div><strong>调试模式:</strong> {{ envConfig.debug ? '开启' : '关闭' }}</div>
          <div><strong>Mock模式:</strong> {{ envConfig.mock ? '开启' : '关闭' }}</div>
        </div>
      </div>

      <!-- API配置信息 -->
      <div class="bg-white rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold mb-4">API配置信息</h2>
        <div class="space-y-2">
          <div><strong>API基础URL:</strong> {{ envConfig.apiBaseUrl }}</div>
          <div><strong>WebSocket URL:</strong> {{ envConfig.wsBaseUrl }}</div>
          <div><strong>上传URL:</strong> {{ envConfig.uploadUrl }}</div>
        </div>
      </div>

      <!-- 原始环境变量 -->
      <div class="bg-white rounded-lg shadow p-6 md:col-span-2">
        <h2 class="text-lg font-semibold mb-4">原始环境变量</h2>
        <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto">{{ JSON.stringify(rawEnv, null, 2) }}</pre>
      </div>

      <!-- API测试 -->
      <div class="bg-white rounded-lg shadow p-6 md:col-span-2">
        <h2 class="text-lg font-semibold mb-4">API连接测试</h2>
        <div class="space-y-4">
          <div class="flex space-x-4">
            <button
              @click="testApiConnection"
              :disabled="testing"
              class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
            >
              {{ testing ? '测试中...' : '测试API连接' }}
            </button>
            <router-link
              to="/debug/websocket"
              class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
            >
              WebSocket测试
            </router-link>
            <router-link
              to="/chat"
              class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
            >
              聊天页面
            </router-link>
          </div>

          <div v-if="testResult" class="mt-4">
            <h3 class="font-semibold mb-2">测试结果:</h3>
            <pre class="bg-gray-100 p-4 rounded text-sm overflow-auto">{{ testResult }}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { envConfig, getCurrentEnv } from '@/config/env'
import AuthService from '@/services/auth'

// 响应式数据
const testing = ref(false)
const testResult = ref('')

// 计算属性
const currentEnv = computed(() => getCurrentEnv())
const rawEnv = computed(() => import.meta.env)

/**
 * 测试API连接
 */
const testApiConnection = async () => {
  testing.value = true
  testResult.value = ''
  
  try {
    console.log('开始测试API连接...')
    console.log('使用的API基础URL:', envConfig.apiBaseUrl)
    
    const response = await AuthService.getCaptcha()
    
    testResult.value = JSON.stringify({
      success: true,
      message: 'API连接成功',
      apiUrl: envConfig.apiBaseUrl,
      response: {
        captchaKey: response.captchaKey,
        imageLength: response.captchaImage?.length || 0,
        expiresIn: response.expiresIn,
        imagePreview: response.captchaImage?.substring(0, 100) + '...' // 显示前100个字符
      }
    }, null, 2)
    
  } catch (error: any) {
    console.error('API连接测试失败:', error)
    
    testResult.value = JSON.stringify({
      success: false,
      message: 'API连接失败',
      apiUrl: envConfig.apiBaseUrl,
      error: {
        message: error.message,
        status: error.status,
        code: error.code,
        config: error.config ? {
          url: error.config.url,
          method: error.config.method,
          baseURL: error.config.baseURL
        } : null
      }
    }, null, 2)
  } finally {
    testing.value = false
  }
}

// 组件挂载时输出调试信息
onMounted(() => {
  console.log('=== 环境变量调试信息 ===')
  console.log('当前环境:', currentEnv.value)
  console.log('环境配置:', envConfig)
  console.log('原始环境变量:', import.meta.env)
  console.log('========================')
})
</script>

<style scoped>
.debug-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style>
