<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import QRCode from 'qrcode'
import logoUrl from '@/assets/images/logo-original.svg'
import { displayCardValue } from '../utils/member-digital-card.utils'

const props = withDefaults(
  defineProps<{
    profileUrl?: string | null
    memberNumber?: string | number | null
    expanded?: boolean
  }>(),
  { expanded: false },
)

const qrDataUrl = ref('')
const qrError = ref(false)

const qrPixelSize = computed(() => (props.expanded ? 220 : 120))

async function renderQrCode() {
  if (!props.profileUrl) {
    qrDataUrl.value = ''
    qrError.value = false
    return
  }

  try {
    qrDataUrl.value = await QRCode.toDataURL(props.profileUrl, {
      margin: 1,
      width: qrPixelSize.value,
      color: {
        dark: '#0f172a',
        light: '#ffffff',
      },
    })
    qrError.value = false
  } catch {
    qrDataUrl.value = ''
    qrError.value = true
  }
}

watch([() => props.profileUrl, () => props.expanded], renderQrCode, { immediate: true })
</script>

<template>
  <div :class="[
    'relative h-full w-full overflow-hidden rounded-2xl bg-linear-to-br from-primary/90 via-primary to-primary/80 text-primary-foreground shadow-lg ring-1 ring-white/20',
    expanded ? 'p-5 sm:p-6' : 'p-3 sm:p-4',
  ]">
    <div class="pointer-events-none absolute inset-0 bg-noise opacity-30" />
    <div class="pointer-events-none absolute -right-12 -top-12 rounded-full bg-white/10"
      :class="expanded ? 'size-44' : 'size-32'" />
    <div class="pointer-events-none absolute -bottom-16 -left-10 rounded-full bg-white/5"
      :class="expanded ? 'size-48' : 'size-36'" />

    <div class="relative flex h-full min-h-0 flex-col">
      <div class="flex shrink-0 items-center justify-between gap-2">
        <img :src="logoUrl" alt="" class="w-auto shrink-0 brightness-0 invert"
          :class="expanded ? 'h-7 sm:h-9' : 'h-5 sm:h-6'" />
        <div class="text-right font-semibold uppercase opacity-75"
          :class="expanded ? 'text-sm tracking-[0.18em]' : 'text-[9px] tracking-[0.18em]'">
          Belakang · Kod QR
        </div>
      </div>

      <div class="flex min-h-0 flex-1 items-center" :class="expanded ? 'mt-5 gap-6' : 'mt-3 gap-3'">
        <div class="shrink-0 rounded-lg bg-white shadow-sm" :class="expanded ? 'p-3' : 'p-1.5'">
          <img v-if="qrDataUrl" :src="qrDataUrl" alt="Kod QR profil anggota" class="block"
            :class="expanded ? 'size-32 sm:size-36' : 'size-18 sm:size-20'" />
          <div v-else class="flex items-center justify-center"
            :class="expanded ? 'size-32 sm:size-36' : 'size-18 sm:size-20'">
            <span class="px-1 text-center leading-tight text-slate-500" :class="expanded ? 'text-sm' : 'text-[9px]'">
              {{ qrError ? 'Kod QR tidak tersedia.' : 'Memuatkan...' }}
            </span>
          </div>
        </div>

        <div class="flex min-w-0 flex-1 flex-col justify-center" :class="expanded ? 'gap-5' : 'gap-3'">
          <p class="leading-snug opacity-85" :class="expanded ? 'text-base sm:text-lg' : 'text-[9px] sm:text-[10px]'">
            Imbas untuk sahkan profil anggota MyKOPKB.
          </p>

          <div>
            <div class="font-medium uppercase tracking-widest opacity-60" :class="expanded ? 'text-sm' : 'text-[9px]'">
              No. Anggota
            </div>
            <div class="mt-0.5 font-mono font-semibold tracking-widest"
              :class="expanded ? 'text-3xl sm:text-4xl' : 'text-base sm:text-lg'">
              {{ displayCardValue(memberNumber) }}
            </div>
          </div>
        </div>
      </div>

      <div class="shrink-0 border-t border-white/15 text-center" :class="expanded ? 'mt-4 pt-3' : 'mt-2 pt-2'">
        <p class="uppercase opacity-50" :class="expanded ? 'text-xs tracking-[0.2em]' : 'text-[8px] tracking-[0.2em]'">
          Koperasi Permodalan Kelantan Berhad (KOPKB)
        </p>
      </div>
    </div>
  </div>
</template>
