<template>
  <v-dialog :model-value="modelValue" width="480" persistent>
    <v-card width="100%">
      <v-toolbar density="compact" color="black">
        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
          Card Details — {{ card?.cardNo ?? "N/A" }}
        </v-toolbar-title>
        <v-btn icon @click="emit('update:modelValue', false)">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
        <div v-if="pending" class="d-flex justify-center align-center py-8">
          <v-progress-circular indeterminate color="black" />
        </div>

        <div v-else-if="!details" class="text-center text-grey py-8">
          No details available.
        </div>

        <div v-else class="d-flex flex-column ga-3">
          <div>
            <div class="text-caption text-grey">Card No</div>
            <div class="text-body-2 font-weight-medium">{{ details.cardNo ?? "N/A" }}</div>
          </div>

          <div>
            <div class="text-caption text-grey">Type</div>
            <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
          </div>

          <div>
            <div class="text-caption text-grey">Status</div>
            <v-chip
              :color="statusColor(details.status)"
              variant="flat"
              size="x-small"
              class="text-capitalize font-weight-medium mt-1"
            >
              {{ details.status ?? "N/A" }}
            </v-chip>
          </div>

          <div>
            <div class="text-caption text-grey">Activated</div>
            <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
          </div>

          <div>
            <div class="text-caption text-grey">Site</div>
            <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
          </div>

          <div>
            <div class="text-caption text-grey">User</div>
            <div class="text-body-2 font-weight-medium">{{ details.user?.name ?? "N/A" }} ({{ details.user?.email ?? "N/A" }})</div>
          </div>

          <div>
            <div class="text-caption text-grey">Created At</div>
            <div class="text-body-2 font-weight-medium">{{ formatDate(details.createdAt) }}</div>
          </div>

          <div>
            <div class="text-caption text-grey">Updated At</div>
            <div class="text-body-2 font-weight-medium">{{ formatDate(details.updatedAt) }}</div>
          </div>

          <div v-if="details.remarks">
            <div class="text-caption text-grey">Remarks</div>
            <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
          </div>
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  card: {
    type: Object as PropType<Record<string, any> | null>,
    default: null,
  },
  siteId: {
    type: String,
    default: "",
  },
});

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
}>();

const { getCardDetails } = useAccessManagement();

const details = ref<Record<string, any> | null>(null);
const pending = ref(false);

watch(
  () => props.modelValue,
  async (val) => {
    if (val && props.card?._id && props.siteId) {
      pending.value = true;
      try {
        const res = await getCardDetails({ siteId: props.siteId, cardId: props.card._id });
        details.value = res?.data ?? null;
      } finally {
        pending.value = false;
      }
    } else {
      details.value = null;
    }
  }
);

function statusColor(status: string) {
  const map: Record<string, string> = {
    active: "success",
    assigned: "primary",
    replaced: "orange",
    deleted: "error",
    available: "grey",
  };
  return map[status] ?? "grey";
}

function formatDate(date: string) {
  if (!date) return "N/A";
  return new Intl.DateTimeFormat("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    hour12: true,
  }).format(new Date(date));
}
</script>
