<template>
  <Stack gap="8">
    <Section variant="plain">
      <Stack gap="6">
          <Stack direction="row" align="center" justify="between">
            <Heading :level="1">Отладка токенов</Heading>
            <NuxtLink
              :to="localePath('/dashboard/profile')"
              class="inline-flex items-center gap-1 text-primary hover:text-primary-hover font-semibold text-sm"
            >
              <Icon name="lucide:arrow-left" size="16" />
              Назад в профиль
            </NuxtLink>
          </Stack>

          <Card padding="lg">
            <Stack gap="3">
              <Heading :level="3">Refresh Token (для Bruno)</Heading>
              <Text tone="muted" size="base">Расшифрованный refresh_token для тестирования в Bruno</Text>
              <Textarea :value="refreshToken || 'Загрузка...'" readonly mono />
            </Stack>
          </Card>

          <Card padding="lg">
            <Stack gap="3">
              <Heading :level="3">Серверная сессия (persistent storage)</Heading>
              <Text tone="muted" size="base">Данные из useStorage('oidc') на сервере</Text>
              <Textarea :value="JSON.stringify(serverSession, null, 2)" readonly mono />
            </Stack>
          </Card>

          <Card padding="lg">
            <Stack gap="3">
              <Heading :level="3">ID Token (JWT - информация о пользователе)</Heading>
              <Text tone="muted" size="base">Содержит claims о пользователе: sub, email, name и т.д.</Text>
              <Textarea :value="idToken" readonly :placeholder="'ID токен загружается...'" />
              <Heading :level="4" weight="semibold">Claims:</Heading>
              <Textarea
                :value="JSON.stringify(idTokenClaims, null, 2)"
                readonly
                mono
              />
            </Stack>
          </Card>

          <Card padding="lg">
            <Stack gap="3">
              <Heading :level="3">Access Token (Opaque - для Logto API)</Heading>
              <Text tone="muted" size="base">
                {{ isAccessTokenJwt ? 'JWT токен - можно декодировать' : 'Opaque токен - нельзя декодировать на клиенте' }}
              </Text>
              <Textarea :value="accessToken" readonly :placeholder="'Access токен загружается...'" />
              <template v-if="isAccessTokenJwt">
                <Heading :level="4" weight="semibold">Claims:</Heading>
                <Textarea :value="accessTokenClaims" readonly mono />
              </template>
              <template v-else>
                <Text tone="muted" size="base" align="start" weight="semibold">Opaque токены валидируются на сервере, claims недоступны на клиенте</Text>
              </template>
            </Stack>
          </Card>

          <Stack gap="3">
            <Heading :level="2">JWT Access Tokens для API ресурсов</Heading>
            <Text tone="muted" size="base">
              Используя refresh token, можно получить JWT access токены для конкретных API ресурсов. Каждый токен содержит aud claim с указанием ресурса.
            </Text>
            <Text size="base">
              <strong>activeLogtoOrgId:</strong> {{ activeLogtoOrgId || '(не установлен)' }}
            </Text>
          </Stack>

          <Stack gap="6">
            <Card v-for="resource in resources" :key="resource.url" padding="lg">
              <Stack gap="3">
                <Stack direction="row" align="center" justify="between">
                  <Heading :level="3" weight="semibold">{{ resource.name }}</Heading>
                  <button
                    type="button"
                    class="inline-flex items-center gap-1 text-primary hover:text-primary-hover font-semibold text-sm underline decoration-transparent hover:decoration-inherit disabled:opacity-60 disabled:cursor-not-allowed bg-transparent border-0 p-0"
                    :disabled="resourceTokens[resource.url]?.loading"
                    @click="fetchResourceToken(resource.url)"
                  >
                    <Icon name="lucide:refresh-ccw" size="16" />
                    {{ resourceTokens[resource.url]?.loading ? 'Загрузка...' : 'Получить токен' }}
                  </button>
                </Stack>
                <Text tone="muted" size="base">Resource: {{ resource.url }}</Text>

                <template v-if="resourceTokens[resource.url]?.error">
                  <Text tone="muted" size="base">Ошибка: {{ resourceTokens[resource.url].error }}</Text>
                </template>

                <template v-else-if="resourceTokens[resource.url]?.token">
                  <Textarea :value="resourceTokens[resource.url].token" readonly mono />
                  <Stack direction="row" gap="4" align="center">
                    <Text tone="muted" size="base">Тип: {{ resourceTokens[resource.url].tokenType }}</Text>
                    <Text tone="muted" size="base">Истекает через: {{ resourceTokens[resource.url].expiresIn }}с</Text>
                  </Stack>
                  <Heading :level="4" weight="semibold">Claims:</Heading>
                  <Textarea :value="resourceTokens[resource.url].claims" readonly mono />
                </template>

                <template v-else>
                  <Text tone="muted" size="base">Нажмите "Получить токен" для обмена refresh token на JWT</Text>
                </template>
              </Stack>
            </Card>
          </Stack>
        </Stack>
    </Section>
  </Stack>
</template>

<script setup>
definePageMeta({
  middleware: ['auth-oidc']
})

const localePath = useLocalePath()
const { isAuthenticated, getIdTokenClaims, getIdToken, getAccessToken } = useAuth()

const resources = [
  { name: 'Teams API', url: 'https://teams.optovia.ru' },
  { name: 'Orders API', url: 'https://orders.optovia.ru' },
  { name: 'KYC API', url: 'https://kyc.optovia.ru' },
  { name: 'Exchange API', url: 'https://exchange.optovia.ru' }
]

const serverSession = ref({})
const refreshToken = ref('')
const idToken = ref('')
const accessToken = ref('')
const idTokenClaims = ref({})
const accessTokenClaims = ref('')
const isAccessTokenJwt = ref(false)
const resourceTokens = ref({})

const decodeToken = (token) => {
  if (!token) return null
  const parts = token.split('.')
  if (parts.length !== 3) return null
  try {
    const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')))
    return JSON.stringify(payload, null, 2)
  } catch {
    return null
  }
}

const { activeLogtoOrgId } = useActiveTeam()

const fetchResourceToken = async (resourceUrl) => {
  resourceTokens.value[resourceUrl] = {
    loading: true,
    token: null,
    claims: null,
    error: null
  }

  try {
    const response = await $fetch('/api/auth/exchange-token', {
      method: 'POST',
      body: {
        resource: resourceUrl,
        organization_id: activeLogtoOrgId.value || undefined
      }
    })

    const decoded = decodeToken(response.access_token)

    resourceTokens.value[resourceUrl] = {
      loading: false,
      token: response.access_token,
      tokenType: response.token_type,
      expiresIn: response.expires_in,
      claims: decoded || 'Не удалось декодировать',
      error: null
    }
  } catch (error) {
    resourceTokens.value[resourceUrl] = {
      loading: false,
      token: null,
      claims: null,
      error: error.data?.message || error.message || 'Неизвестная ошибка'
    }
  }
}

onMounted(async () => {
  if (isAuthenticated.value) {
    try {
      // Загружаем серверную сессию
      const sessionData = await $fetch('/api/auth/debug-session')
      serverSession.value = sessionData
      refreshToken.value = sessionData.refreshToken || ''

      const rawIdToken = await getIdToken()
      if (typeof rawIdToken === 'string' && rawIdToken.includes('.')) {
        idToken.value = rawIdToken
      } else {
        idToken.value = '[Raw JWT хранится на сервере, недоступен на клиенте]'
      }
      idTokenClaims.value = await getIdTokenClaims() || {}

      const rawAccessToken = await getAccessToken()
      if (typeof rawAccessToken === 'string' && rawAccessToken.includes('.')) {
        accessToken.value = rawAccessToken
        const decoded = decodeToken(accessToken.value)
        if (decoded) {
          isAccessTokenJwt.value = true
          accessTokenClaims.value = decoded
        }
      } else {
        accessToken.value = rawAccessToken
      }
    } catch (error) {
      console.error('Error loading tokens:', error)
    }
  }
})
</script>
