<script setup lang="ts">
import IconLogout from '#adata-ui/icons/logout.vue'
import { useMediaQuery } from '@vueuse/core'
import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'

const isLargeScreen = useMediaQuery('(min-width: 1024px)')

interface Props {
  rate: string
  daysRemaining: number
  limitRemaining: number
  balance: number
  replenish?: string
  oldVersion?: string
}

const props = withDefaults(defineProps<Props>(), {
  daysRemaining: 0,
  limitRemaining: 0
})

defineEmits(['logout'])

const { t } = useI18n()

const { myLayer }: any = useAppConfig()
const { locale } = useI18n()

const items = useHeaderMenuLinks()

const onReplenish = () => {
  if (window) {
    window.location.href =
      buildLocalizedUrl(locale.value, myLayer.landingUrl, '/profile?popupBalance=1')
  }
}
</script>

<template>
  <div class="max-w-full lg:w-[300px]">
    <!--    desktop  -->
    <div
      class="gradient-bg hidden px-4 py-4 text-white dark:text-gray-900 lg:block lg:rounded-t-[0.5rem] lg:px-8 lg:dark:text-white"
    >
      <div class="hidden text-sm lg:block">
        {{ t('header.profile.tariff') }}
      </div>
      <div class="flex items-center justify-between gap-4 lg:mt-2">
        <div class="flex items-center justify-between lg:w-full">
          <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
          <a-status-badge
            type="success"
            class="!px-3 font-semibold text-white"
            size="sm"
          >
            {{ t('header.profile.connected') }}
          </a-status-badge>
        </div>
        <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString('RU-ru') }} ₸</span>
      </div>
      <div class="mt-2 hidden items-center justify-between lg:flex lg:flex-col">
        <div class="items-center justify-between lg:flex lg:w-full text-xs">
          {{ t('header.profile.currentBalance') }}
          <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString('RU-ru') }} ₸</span>
        </div>
        <a-button
          size="sm"
          class="w-full mt-4"
          view="outline"
          variant="ghost"
          @click="onReplenish"
        >
          <a-icon-plus-circle />
          {{ t('header.profile.addBalance') }}
        </a-button>
      </div>
    </div>
    <!--    mobile  -->
    <div class="gradient-bg px-4 py-4 text-white dark:text-gray-900 lg:hidden">
      <div class="flex justify-between gap-4 lg:mt-2">
        <div class="flex flex-col items-center">
          <div class="font-semibold">
            {{ rate }}
          </div>
          <a-status-badge
            type="success"
            class="!px-3 font-semibold text-white dark:text-gray-900"
            size="sm"
          >
            {{ t('header.profile.connected') }}
          </a-status-badge>
        </div>
        <div class="flex min-w-[90px] flex-col">
          <div class="font-semibold">
            {{ t('header.profile.balance') }}
          </div>
          <div class="flex gap-1">
            <a-status-badge
              size="sm"
              class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
              type="gray"
            >
              {{ balance.toLocaleString('RU-ru') }} ₸
            </a-status-badge>
            <button
              class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
              @click="onReplenish"
            >
              <a-icon-plus
                width="16px"
                height="16px"
              />
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
      <div class="mb-2 flex justify-between gap-2 lg:hidden">
        <a-status-badge
          size="sm"
          class="w-full py-[6px] font-semibold"
          :class="daysRemaining > 1 ? '': 'h-auto'"
        >
          <span>
            {{ t('header.profile.requests') }}
          </span>
          {{ limitRemaining }}
        </a-status-badge>
        <a-status-badge
          size="sm"
          class="w-full py-[6px] font-semibold"
          :class="daysRemaining > 1 ? '': 'flex flex-col h-fit'"
        >
          <span>
            {{ t('header.profile.daysLeft') }}
          </span>
          {{ daysRemaining }}
        </a-status-badge>
      </div>
      <div class="grid grid-cols-2 gap-2 lg:flex lg:flex-col">
        <nuxt-link-locale
          v-for="item in items"
          :key="item.title"
          class="hover:text-blue-700 dark:hover:text-blue-500 flex flex-col lg:flex-row lg:gap-3 items-center rounded-[6px] bg-gray-50 lg:bg-white lg:dark:bg-[#232324] lg:hover:bg-blue-100 py-[10px] text-center text-sm hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-[#161617] active:dark:bg-[#E3E5E8] active:dark:text-gray-900 lg:px-4  lg:dark:hover:bg-gray-900"
          :to="item.to"
          target="_blank"
        >
          <component
            :is="item.icon"
            class="h-[24px] w-[24px]"
          />
          <span class="dark:text-[#E3E5E8] text-[#2C3E50]">{{ item.title }}</span>
        </nuxt-link-locale>
      </div>
      <div class="mt-2">
        <a-change-version
          v-if="oldVersion"
          :url="oldVersion"
        />
      </div>
      <div
        v-if="!isLargeScreen"
        class="my-4 flex items-center justify-between text-sm"
      >
        <span>
          {{ t('header.profile.colorScheme') }}
        </span>
        <a-color-mode />
      </div>

      <div
        class="flex items-center justify-center lg:justify-start gap-3 pb-2 pt-4 px-4 cursor-pointer text-red-500 hover:text-red-700 border-t"
        @click="$emit('logout')"
      >
        <icon-logout class="h-5 w-5" />
        <span>
          {{ t('header.profile.logout') }}
        </span>
      </div>
    </div>
  </div>
</template>
<style scoped>
.gradient-bg {
  background: linear-gradient(236.46deg, #479fff -2.39%, #0070eb 79.1%);
}
</style>
