import axios from 'axios'

const http = axios.create({ baseURL: '/api' })

let isRefreshing = false
// 刷新期间挂起的请求队列
const pendingQueue: Array<(token: string) => void> = []

http.interceptors.response.use(
  res => res,
  async err => {
    const originalRequest = err.config

    if (err.response?.status !== 401 || originalRequest._retry) {
      return Promise.reject(err)
    }

    if (isRefreshing) {
      // 刷新进行中：把当前请求加入等待队列
      return new Promise(resolve => {
        pendingQueue.push((newToken: string) => {
          originalRequest.headers.Authorization = `Bearer ${newToken}`
          resolve(http(originalRequest))
        })
      })
    }

    originalRequest._retry = true
    isRefreshing = true

    try {
      const { data } = await http.post('/auth/refresh', {
        refreshToken: getRefreshToken(),
      })
      const newToken = data.accessToken

      saveToken(newToken)

      // 通知队列里所有挂起的请求
      pendingQueue.forEach(resolve => resolve(newToken))
      pendingQueue.length = 0

      // 重发原始请求
      originalRequest.headers.Authorization = `Bearer ${newToken}`
      return http(originalRequest)
    } catch {
      // 刷新也失败，强制登出
      clearToken()
      router.push('/login')
      return Promise.reject(err)
    } finally {
      isRefreshing = false
    }
  },
)

// 1. 生成 code_verifier（随机字符串）和 code_challenge（其 SHA256 哈希）
async function generatePKCE() {
  const verifier = crypto.randomUUID().replace(/-/g, '') + crypto.randomUUID().replace(/-/g, '')
  const encoder = new TextEncoder()
  const data = encoder.encode(verifier)
  const digest = await crypto.subtle.digest('SHA-256', data)
  const challenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')

  sessionStorage.setItem('pkce_verifier', verifier)
  return { verifier, challenge }
}

// 2. 跳转到授权页
async function startLogin() {
  const { challenge } = await generatePKCE()
  const state = crypto.randomUUID()
  sessionStorage.setItem('oauth_state', state)

  const params = new URLSearchParams({
    response_type: 'code',
    client_id: 'your-client-id',
    redirect_uri: `${location.origin}/callback`,
    scope: 'openid profile email',
    state,
    code_challenge: challenge,
    code_challenge_method: 'S256',
  })

  location.href = `https://auth.example.com/authorize?${params}`
}

// 3. 回调页处理 code，换取 token
async function handleCallback() {
  const params = new URLSearchParams(location.search)
  const code = params.get('code')
  const state = params.get('state')

  // 验证 state 防止 CSRF
  if (state !== sessionStorage.getItem('oauth_state')) {
    throw new Error('Invalid state')
  }

  const verifier = sessionStorage.getItem('pkce_verifier')!

  const { data } = await axios.post('https://auth.example.com/token', {
    grant_type: 'authorization_code',
    code,
    redirect_uri: `${location.origin}/callback`,
    client_id: 'your-client-id',
    code_verifier: verifier,
  })

  saveToken(data.access_token)
  router.push('/')
}

router.beforeEach((to, _from, next) => {
  const isLoggedIn = !!getToken()
  const requiresAuth = to.meta.requiresAuth

  if (requiresAuth && !isLoggedIn) {
    next({ path: '/login', query: { redirect: to.fullPath } })
    return
  }

  // 角色权限：页面需要 admin，但当前用户不是 admin
  const requiredRole = to.meta.role as string | undefined
  const userRole = useAuthStore().role

  if (requiredRole && userRole !== requiredRole) {
    next('/403')
    return
  }

  next()
})

import type { Directive } from 'vue'
import { useAuthStore } from '@/stores/auth'

// 用法：v-permission="'user:delete'"
export const vPermission: Directive<HTMLElement, string> = {
  mounted(el, binding) {
    const authStore = useAuthStore()
    const required = binding.value

    if (!authStore.permissions.includes(required)) {
      // 没权限：移除元素
      el.parentNode?.removeChild(el)
    }
  },
}