<template>
  <Section variant="plain">
    <Stack gap="6">
        <Heading :level="1">Верификация KYC</Heading>

        <Alert v-if="error" variant="error">
          <Stack gap="2">
            <Heading :level="4" weight="semibold">Ошибка</Heading>
            <Text tone="muted">{{ error }}</Text>
            <Button @click="loadKYCStatus">Повторить</Button>
          </Stack>
        </Alert>

        <Card v-else-if="loading" tone="muted" padding="lg">
          <Stack align="center" justify="center" gap="3">
            <Spinner />
            <Text tone="muted">Загружаем статус верификации...</Text>
          </Stack>
        </Card>

        <Card v-else-if="existingKYC" padding="lg">
          <Stack direction="row" gap="4" align="center" justify="between">
            <Stack direction="row" gap="3" align="center">
              <IconCircle :tone="statusTone(existingKYC.status)" size="lg">
                {{ statusIcon(existingKYC.status) }}
              </IconCircle>
              <Stack gap="1">
                <Heading :level="2">{{ getStatusTitle(existingKYC.status) }}</Heading>
                <Text tone="muted" size="base">{{ getStatusDescription(existingKYC.status) }}</Text>
                <Text v-if="existingKYC.status === 'approved' && existingKYC.approvedAt" tone="muted" size="base">
                  Одобрено {{ formatDate(existingKYC.approvedAt) }}
                </Text>
              </Stack>
            </Stack>

            <Button
              v-if="existingKYC.status === 'rejected'"
              :as="'NuxtLink'"
              to="/dashboard/kyc/russia"
              variant="outline"
            >
              Повторить верификацию
            </Button>
          </Stack>
        </Card>

        <template v-else>
          <Card padding="lg">
            <Stack gap="4">
              <Stack gap="1">
                <Heading :level="2">Выберите страну для верификации</Heading>
                <Text tone="muted" size="base">
                  Пройдите процедуру верификации компании для доступа ко всем функциям платформы.
                </Text>
              </Stack>

              <Grid :cols="1" :md="2" :lg="3" :gap="4">
                <Card padding="lg" interactive @click="selectCountry('russia')">
                  <Stack gap="3">
                    <Stack direction="row" gap="2" align="center">
                      <IconCircle tone="primary">🇷🇺</IconCircle>
                      <Heading :level="4" weight="semibold">Россия</Heading>
                    </Stack>
                    <Text tone="muted" size="base">
                      Верификация через ИНН с автозаполнением данных из базы ФНС
                    </Text>
                    <Stack direction="row" align="center" justify="between">
                      <Pill variant="primary">Доступно</Pill>
                      <Text tone="muted" weight="semibold">→</Text>
                    </Stack>
                  </Stack>
                </Card>

                <Card padding="lg" tone="muted">
                  <Stack gap="3">
                    <Stack direction="row" gap="2" align="center">
                      <IconCircle tone="neutral">🇰🇿</IconCircle>
                      <Heading :level="4" weight="semibold">Казахстан</Heading>
                    </Stack>
                    <Text tone="muted" size="base">
                      Верификация через БИН (скоро)
                    </Text>
                    <Stack direction="row" align="center" justify="between">
                      <Pill variant="outline" tone="warning">Скоро</Pill>
                      <Text tone="muted" weight="semibold">→</Text>
                    </Stack>
                  </Stack>
                </Card>
              </Grid>
            </Stack>
          </Card>

          <Card tone="muted" padding="lg">
            <Stack gap="2">
              <Heading :level="4" weight="semibold">О процедуре верификации</Heading>
              <Text tone="muted" size="base">• Проверка займет 1-2 рабочих дня</Text>
              <Text tone="muted" size="base">• Данные заполняются автоматически через официальные источники</Text>
              <Text tone="muted" size="base">• После верификации доступна вся платформа</Text>
            </Stack>
          </Card>
        </template>

        <Stack direction="row" gap="2">
          <Button :as="'NuxtLink'" to="/dashboard/team" variant="outline">
            ← Вернуться к команде
          </Button>
        </Stack>
      </Stack>
  </Section>
</template>

<script setup lang="ts">
import { GetKycRequestsRussiaDocument } from '~/composables/graphql/team/kyc-generated'

definePageMeta({
  middleware: ['auth-oidc']
})

const { execute } = useGraphQL()
const { getIdTokenClaims } = useAuth()

const loading = ref(true)
const error = ref<string | null>(null)
const existingKYC = ref<any>(null)

const statusIcon = (status: string) => {
  if (status === 'approved') return '✅'
  if (status === 'pending' || status === 'in_review') return '⏳'
  if (status === 'rejected') return '⚠️'
  return 'ℹ️'
}

const statusTone = (status: string) => {
  if (status === 'approved') return 'primary'
  if (status === 'pending' || status === 'in_review') return 'neutral'
  if (status === 'rejected') return 'neutral'
  return 'neutral'
}

const getStatusTitle = (status: string) => {
  const titles: Record<string, string> = {
    pending: 'Заявка на рассмотрении',
    in_review: 'Документы проверяются',
    approved: 'Верификация пройдена',
    rejected: 'Верификация отклонена',
    expired: 'Срок заявки истек',
  }
  return titles[status] || 'Неизвестный статус'
}

const getStatusDescription = (status: string) => {
  const descriptions: Record<string, string> = {
    pending: 'Ваша заявка в обработке. Ожидайте результат в течение 1-2 рабочих дней.',
    in_review: 'Специалисты проверяют документы и данные компании.',
    approved: 'Поздравляем! Компания успешно прошла верификацию.',
    rejected: 'Верификация отклонена. Проверьте данные и попробуйте снова.',
    expired: 'Срок действия заявки истек. Подайте новую заявку.',
  }
  return descriptions[status] || 'Неизвестный статус заявки'
}

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const selectCountry = (country: string) => {
  if (country === 'russia') {
    navigateTo('/dashboard/kyc/russia')
  }
}

const loadKYCStatus = async () => {
  try {
    loading.value = true
    error.value = null

    if (!process.client) return

    const userClaims = await getIdTokenClaims()
    const userId = userClaims?.sub

    if (!userId) {
      error.value = 'Пользователь не аутентифицирован'
      return
    }

    const result = await execute(GetKycRequestsRussiaDocument, {}, 'team', 'kyc')
    const requests = result.kycRequestsRussia || []
    const userRequests = requests.filter((req: any) => req?.userId === userId)
    if (userRequests.length > 0) {
      userRequests.sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
      existingKYC.value = userRequests[0]
    }
  } catch (err: any) {
    if (err.message?.includes('недоступно на сервере')) {
      if (process.client) setTimeout(() => loadKYCStatus(), 100)
    } else {
      error.value = 'Ошибка загрузки данных KYC'
    }
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadKYCStatus()
})
</script>
