<template>
  <v-row no-gutters align="center" style="gap: 8px">
    <span class="text-caption text-medium-emphasis mr-1">Available:</span>
    <v-chip
      size="small"
      variant="tonal"
      color="primary"
      prepend-icon="mdi-card-account-details"
      :loading="loading"
    >
      NFC: <strong class="ml-1">{{ availablePhysical }}</strong>
    </v-chip>
    <v-chip
      size="small"
      variant="tonal"
      color="secondary"
      prepend-icon="mdi-qrcode"
      :loading="loading"
    >
      QR Code: <strong class="ml-1">{{ availableNonPhysical }}</strong>
    </v-chip>
  </v-row>
</template>

<script setup lang="ts">
const props = defineProps({
  siteId: {
    type: String,
    required: true,
  },
});

const { getAllAccessCardsCounts } = useAccessManagement();

const availablePhysical = ref(0);
const availableNonPhysical = ref(0);
const loading = ref(false);

async function refresh() {
  loading.value = true;
  try {
    const res = await getAllAccessCardsCounts({ site: props.siteId, userType: "Visitor/Resident" });
    availablePhysical.value = res?.data?.available_physical ?? 0;
    availableNonPhysical.value = res?.data?.available_non_physical ?? 0;
  } catch (error) {
    console.error("Failed to fetch available card counts:", error);
  } finally {
    loading.value = false;
  }
}

onMounted(() => refresh());

defineExpose({ refresh });
</script>
