<template>
  <v-dialog
    v-model="showDialog"
    :max-width="attendance?.checkOut?.timestamp ? 900 : 500"
    persistent
  >
    <v-card>
      <v-toolbar>
        <v-row no-gutters class="fill-height px-6" align="center">
          <span class="font-weight-bold text-h6 text-capitalize"
            >Attendance Details</span
          >
        </v-row>
      </v-toolbar>

      <v-card-text class="pa-6">
        <v-row v-if="attendance" dense>
          <v-col :cols="attendance.checkOut?.timestamp ? 6 : 12">
            <v-row dense>
              <v-col cols="12" class="mb-1">
                <InputLabel title="Check In" />
              </v-col>
              <v-col cols="12" class="mb-1">
                <span class="text-body-1">{{
                  attendance.checkIn?.timestamp
                    ? formatDate(attendance.checkIn.timestamp)
                    : "N/A"
                }}</span>
              </v-col>
              <v-col cols="12" class="mb-2">
                <span class="text-caption text-medium-emphasis">
                  {{
                    attendance.checkIn?.location?.latitude &&
                    attendance.checkIn?.location?.longitude
                      ? `Lat: ${attendance.checkIn.location.latitude}, Lng: ${attendance.checkIn.location.longitude}`
                      : "Lat: N/A, Lng: N/A"
                  }}
                </span>
              </v-col>
              <v-col cols="12">
                <v-card
                  v-if="attendance.checkIn?.img"
                  variant="outlined"
                  class="pa-0"
                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
                >
                  <v-img
                    :src="getFileUrl(attendance.checkIn.img)"
                    height="280"
                    width="100%"
                    cover
                  ></v-img>
                </v-card>
                <v-card
                  v-else
                  variant="outlined"
                  class="pa-8 text-center"
                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
                >
                  <span class="text-caption text-medium-emphasis"
                    >No image</span
                  >
                </v-card>
              </v-col>
            </v-row>
          </v-col>

          <v-col v-if="attendance.checkOut?.timestamp" cols="6">
            <v-row dense>
              <v-col cols="12" class="mb-1">
                <InputLabel title="Check Out" />
              </v-col>
              <v-col cols="12" class="mb-1">
                <span class="text-body-1">{{
                  formatDate(attendance.checkOut.timestamp)
                }}</span>
              </v-col>
              <v-col cols="12" class="mb-2">
                <span class="text-caption text-medium-emphasis">
                  {{
                    attendance.checkOut?.location?.latitude &&
                    attendance.checkOut?.location?.longitude
                      ? `Lat: ${attendance.checkOut.location.latitude}, Lng: ${attendance.checkOut.location.longitude}`
                      : "Lat: N/A, Lng: N/A"
                  }}
                </span>
              </v-col>
              <v-col cols="12">
                <v-card
                  v-if="attendance.checkOut?.img"
                  variant="outlined"
                  class="pa-0"
                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
                >
                  <v-img
                    :src="getFileUrl(attendance.checkOut.img)"
                    height="280"
                    width="100%"
                    cover
                  ></v-img>
                </v-card>
                <v-card
                  v-else
                  variant="outlined"
                  class="pa-8 text-center"
                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
                >
                  <span class="text-caption text-medium-emphasis"
                    >No image</span
                  >
                </v-card>
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <v-row v-else dense>
          <v-col cols="12" class="text-center py-8">
            <v-progress-circular indeterminate color="primary" />
          </v-col>
        </v-row>
      </v-card-text>

      <v-toolbar class="pa-0" density="compact">
        <v-row no-gutters>
          <v-col cols="12" class="pa-0">
            <v-btn
              block
              variant="text"
              class="text-none"
              size="large"
              @click="close"
              height="48"
            >
              Close
            </v-btn>
          </v-col>
        </v-row>
      </v-toolbar>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
const showDialog = defineModel({ type: Boolean, default: false });

const props = defineProps({
  attendanceId: { type: String, default: "" },
  serviceType: { type: String, default: "" },
});

const emit = defineEmits(["close"]);

const attendance = ref<Record<string, any> | null>(null);
const { getMyAttendanceById } = useAttendance();
const { formatDate } = useUtils();
const { getFileUrl } = useFile();

const close = () => {
  showDialog.value = false;
  emit("close");
};

watch(
  () => props.attendanceId,
  async (newId) => {
    if (newId && showDialog.value) {
      attendance.value = null;
      try {
        const res = await getMyAttendanceById(newId);
        attendance.value = res?.data || res;
      } catch (err: any) {
        console.error("Failed to load attendance by id", err);
      }
    }
  },
  { immediate: true }
);

watch(showDialog, (newVal) => {
  if (!newVal) {
    attendance.value = null;
  }
});
</script>
