<template>
  <v-row no-gutters align="center" justify="center">
    <v-col cols="12">
      <v-card class="mx-auto">
        <v-toolbar
          density="compact"
          color="grey-lighten-4"
          class="d-flex align-center px-4 py-3"
        >
          <v-btn icon variant="plain" @click="back()" class="mr-2">
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>
          <span class="text-h6 font-weight-bold">Area Checklist</span>
        </v-toolbar>

        <v-divider />

        <v-card-text class="pa-0">
          <v-row no-gutters>
            <v-col
              cols="12"
              md="6"
              lg="5"
              xl="4"
              style="border-right: 1px solid rgba(0, 0, 0, 0.12)"
            >
              <v-row no-gutters class="pa-6">
                <v-col cols="12" class="mb-4">
                  <h3 class="text-h6 font-weight-bold">Checklist Details</h3>
                </v-col>

                <v-col cols="12" class="mb-4">
                  <v-row no-gutters>
                    <v-col cols="12" class="mb-3">
                      <div class="text-body-2 mb-1">Date Created:</div>
                      <div class="text-body-1 font-weight-bold">
                        {{ createdAt }}
                      </div>
                    </v-col>

                    <v-col cols="12" class="mb-3">
                      <div class="text-body-2 mb-1">Date Completed:</div>
                      <div class="text-body-1 font-weight-bold">
                        {{ timeOut }}
                      </div>
                    </v-col>

                    <v-col cols="12" class="mb-3">
                      <div class="text-body-2 mb-1">Status:</div>
                      <v-chip
                        class="text-capitalize text-body-2 font-weight-medium"
                      >
                        {{ status || "N/A" }}
                      </v-chip>
                    </v-col>
                  </v-row>
                </v-col>

                <!-- <v-col cols="12" class="mb-4">
                  <v-sheet
                    height="220"
                    rounded
                    border
                    class="d-flex align-center justify-center"
                  >
                    <v-img
                      v-if="signatureUrl"
                      :src="signatureUrl"
                      height="220"
                      contain
                      class="rounded"
                    >
                      <template v-slot:placeholder>
                        <div
                          class="d-flex align-center justify-center fill-height"
                        >
                          <v-progress-circular
                            color="grey-lighten-4"
                            indeterminate
                          ></v-progress-circular>
                        </div>
                      </template>
                    </v-img>
                    <span v-else class="text-body-2 text-grey">
                      Completion / Signature
                    </span>
                  </v-sheet>
                </v-col> -->

                <!-- <v-col cols="12">
                  <v-row no-gutters align="center">
                    <v-col cols="auto">
                      <v-avatar size="40" color="primary" class="mr-3">
                        <span class="text-body-1 font-weight-bold">HS</span>
                      </v-avatar>
                    </v-col>
                    <v-col>
                      <span class="text-body-1 font-weight-medium"
                        >Cleaner</span
                      >
                    </v-col>
                  </v-row>
                </v-col> -->
              </v-row>
            </v-col>

            <v-col cols="12" md="6" lg="7" xl="8">
              <v-row no-gutters class="pa-6">
                <v-col cols="12">
                  <h4 class="text-subtitle-1 font-weight-bold mb-3">Units</h4>

                  <v-list class="pa-0">
                    <template
                      v-for="(checklistSet, setIndex) in unitSets"
                      :key="`set-${setIndex}`"
                    >
                      <v-list-subheader
                        v-if="checklistSet.set !== undefined"
                        class="text-subtitle-2 font-weight-bold px-0"
                      >
                        Set {{ checklistSet.set }}
                        <v-chip
                          v-if="checklistSet.isScheduleTask"
                          size="x-small"
                          color="info"
                          variant="tonal"
                          class="text-none ml-2"
                        >
                          Schedule Task
                        </v-chip>
                      </v-list-subheader>

                      <v-list-item
                        v-for="(unit, idx) in checklistSet.units"
                        :key="`${setIndex}-${idx}`"
                        class="px-0"
                      >
                        <v-row no-gutters align="center" class="py-2">
                          <v-col cols="12" sm="3">
                            <div class="text-body-2 font-weight-medium">
                              {{ unit.name }}
                            </div>
                          </v-col>
                          <v-col cols="12" sm="2">
                            <div class="text-body-2 text-medium-emphasis">
                              {{ unit.remarks || "N/A" }}
                            </div>
                          </v-col>
                          <v-col cols="12" sm="2">
                            <div class="text-body-2 text-medium-emphasis">
                              {{ unit.completedByName || "N/A" }}
                            </div>
                          </v-col>
                          <v-col cols="12" sm="3">
                            <div class="text-body-2 text-medium-emphasis">
                              {{
                                unit.timestamp
                                  ? formatDate(String(unit.timestamp))
                                  : "N/A"
                              }}
                            </div>
                          </v-col>
                          <v-col cols="12" sm="2" class="text-right">
                            <v-chip
                              :color="
                                unit.status?.toLowerCase() === 'completed'
                                  ? 'success'
                                  : 'grey'
                              "
                              :variant="
                                unit.status?.toLowerCase() === 'completed'
                                  ? 'flat'
                                  : 'outlined'
                              "
                              size="small"
                              class="text-capitalize"
                            >
                              {{ unit.status || "Open" }}
                            </v-chip>
                          </v-col>
                        </v-row>
                      </v-list-item>

                      <v-divider
                        v-if="setIndex < unitSets.length - 1"
                        class="my-2"
                      />
                    </template>
                  </v-list>
                </v-col>
              </v-row>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
const props = defineProps({
  orgId: { type: String, required: true, default: "" },
  site: { type: String, required: true, default: "" },
  scheduleAreaId: { type: String, required: true, default: "" },
  type: { type: String, required: true, default: "cleaner" },
});

const { back, formatDate } = useUtils();
const { getFileUrl } = useFile();

const { getAreaChecklistHistoryById } = useCleaningSchedules();
const unitSets = ref<TChecklistSet[]>([]);

const { data: getAreaChecklistHistoryReq } = await useLazyAsyncData(
  "get-area-checklist-history-by-id",
  () => getAreaChecklistHistoryById(props.scheduleAreaId)
);

watchEffect(() => {
  if (getAreaChecklistHistoryReq.value) {
    const data = getAreaChecklistHistoryReq.value;
    const area = data.area;
    unitSets.value = data.units || [];

    createdAt.value = area?.createdAt
      ? formatDate(String(area.createdAt))
      : "N/A";
    timeOut.value = area?.completedAt
      ? formatDate(String(area.completedAt))
      : "N/A";
    status.value = area?.status || "N/A";

    if (area?.signature) {
      signatureUrl.value = getFileUrl(area.signature);
    }
  }
});

const createdAt = ref<string>("N/A");
const createdBy = ref<string>("N/A");
const timeOut = ref<string>("N/A");
const status = ref<string>("N/A");
const signatureUrl = ref<string>("");
</script>
