import { createApp } from 'vue'
import { createPinia } from 'pinia'

import 'element-plus/theme-chalk/src/index.scss'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
import { useAuthStore } from '@/stores/auth'

// === 强制全局HTTP配置 ===
import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from 'axios'
import { StorageManager } from '@/utils/storage'

// 配置axios默认设置
axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 10000
axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.headers.common['Accept'] = 'application/json'

// 清除可能存在的拦截器，确保配置干净
axios.interceptors.request.clear()
axios.interceptors.response.clear()

// 请求拦截器 - 自动添加Token，防止请求头被截断
axios.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const token = StorageManager.getToken()
    if (token && token.trim()) {
      // 使用完整的Token字符串，确保不被截断
      const authToken = token.trim()

      // 使用AxiosHeaders的set方法确保正确设置
      config.headers.set('Authorization', `Bearer ${authToken}`)
      config.headers.set('X-Requested-With', 'XMLHttpRequest')

      // 打印调试信息（开发环境）
      if (import.meta.env.DEV) {
        console.log('[HTTP] 请求配置:', {
          url: config.url,
          method: config.method,
          authorization: config.headers.get('Authorization'),
          tokenLength: authToken.length,
          tokenPreview: authToken.substring(0, 20) + '...',
        })
      }
    }
    return config
  },
  (error) => {
    console.error('[HTTP] 请求拦截器错误:', error)
    return Promise.reject(error)
  },
)

// 响应拦截器 - 处理认证错误
axios.interceptors.response.use(
  (response: AxiosResponse) => {
    // 在开发环境打印响应信息
    if (import.meta.env.DEV) {
      console.log('[HTTP] 响应成功:', {
        status: response.status,
        url: response.config.url,
        method: response.config.method,
      })
    }
    return response
  },
  (error: any) => {
    console.error('[HTTP] 请求错误:', {
      status: error.response?.status,
      statusText: error.response?.statusText,
      url: error.config?.url,
      method: error.config?.method,
      data: error.response?.data,
    })

    if (error.response?.status === 401) {
      // Token无效，清除存储并跳转错误页面
      StorageManager.clearAuthData()
      window.location.href = '/error?type=auth&message=登录已过期，请重新登录'
    } else if (error.response?.status === 403) {
      // 权限不足 - 不跳转页面，让开发者能看到报错
      console.error('[HTTP] 403 权限不足:', error.response?.data)
    } else if (error.response?.status === 500) {
      // 服务器错误
      window.location.href = '/error?type=500&message=服务器内部错误，请稍后重试'
    } else if (!error.response) {
      // 网络错误
      window.location.href = '/error?type=network&message=网络连接失败，请检查网络设置'
    }
    return Promise.reject(error)
  },
)

console.log('[HTTP] 全局HTTP配置已在main.ts中初始化完成')

// === 导出配置好的axios实例 ===
// 将axios实例挂载到全局对象上，供其他模块使用
declare global {
  interface Window {
    $http: typeof axios
    $axios: typeof axios
  }
}

// 挂载到window对象
window.$http = axios
window.$axios = axios

// 也可以通过模块导出的方式（但建议使用全局挂载）
export { axios }
export { axios as http }
export default axios

const app = createApp(App)

// 创建 Pinia 实例
const pinia = createPinia()
app.use(pinia)

// 初始化高德地图
initAMapApiLoader({
  // 在这里替换成你申请的 Key
  key: '5a5935de1c13991663c5b222e1ad2392',
  // 你需要使用的插件列表
  plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.Geocoder'],
  // 其他安全密钥等配置
  securityJsCode: '52dec9705905111f788fcc1ba9b385d6', // 如果你设置了安全密钥
})

// 注册 Element Plus 图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用插件
app.use(router)
app.use(ElementPlus, {
  locale: zhCn,
})
app.use(VueAMap)

// 初始化认证状态
const authStore = useAuthStore()
authStore.initAuth()

// 挂载应用
app.mount('#app')
