<template>
  <v-row no-gutters class="px-5 pt-4">
    <!-- Site Information -->
    <p
      class="text-uppercase text-center w-100 text-h6"
      style="background: #aa212a; color: #fff; padding: 10px"
    >
      Incident Report
    </p>
    <v-row no-gutters class="mt-5 border pb-5">
      <p
        class="w-100 text-h6 pa-2 text-white text-center"
        style="background: #fcbf49"
      >
        Incident Information
      </p>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Site</p>
        <p>{{ siteName || "-" }}</p>
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Reference</p>
        <p>{{ incidentInformation?.siteInfo?.irNumber || "-" }}</p>
      </v-col>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Place of Incident</p>
        <p>
          {{ incidentInformation?.placeOfIncident?.incidentLocation || "-" }}
        </p>
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Type of Incident</p>
        <p>
          {{ incidentInformation?.incidentTypeAndTime?.typeOfIncident || "-" }}
        </p>
      </v-col>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Date of Incident</p>
        <p>
          {{
            toLocalDate(
              incidentInformation?.incidentTypeAndTime?.dateOfIncident
            ) || "NA"
          }}
        </p>
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Incident Start Time</p>
        <p>
          {{ incidentInformation?.incidentTypeAndTime?.incidentStart || "-" }}
        </p>
      </v-col>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Time of Response (From 1st Contact)</p>
        <p>
          {{ incidentInformation?.incidentTypeAndTime?.timeOfResponse || "-" }}
        </p>
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Incident End Time</p>
        <p>
          {{ incidentInformation?.incidentTypeAndTime?.incidentEnd || "-" }}
        </p>
      </v-col>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Date of Report Submission</p>
        {{
          toLocalDate(incidentInformation?.submissionForm?.dateOfReport) || "NA"
        }}
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Time of Report Submission</p>
        <p>{{ incidentInformation?.submissionForm?.time || "-" }}</p>
      </v-col>

      <v-col cols="6" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Report Submitted By</p>
        <p>{{ incidentInformation?.siteInfo?.submittedBy || "-" }}</p>
      </v-col>
      <v-col cols="6" class="pa-3 border-b">
        <p class="font-weight-bold">Designation</p>
        <p>{{ incidentInformation?.siteInfo?.designation || "-" }}</p>
      </v-col>

      <v-col cols="4" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Name of Informant/Complainant</p>
        <p>{{ incidentInformation?.complaintInfo?.complainant || "-" }}</p>
      </v-col>
      <v-col cols="4" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Contact No.</p>
        <p>{{ incidentInformation?.complaintInfo?.contact || "-" }}</p>
      </v-col>
      <v-col cols="4" class="pa-3 border-b">
        <p class="font-weight-bold">NRIC/WP No.</p>
        <p>
          {{
            showNRICComplainant
              ? incidentInformation?.complaintInfo?.nric || "-"
              : maskNRIC(incidentInformation?.complaintInfo?.nric)
          }}
        </p>
      </v-col>

      <v-col cols="4" class="pa-3 border-b border-e">
        <p class="font-weight-bold">
          Name of Recipient of Complaint (1st Contact)
        </p>
        <p>{{ incidentInformation?.recipientOfComplaint?.recipient || "-" }}</p>
      </v-col>
      <v-col cols="4" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Contact No.</p>
        <p>{{ incidentInformation?.recipientOfComplaint?.contact || "-" }}</p>
      </v-col>
      <v-col cols="4" class="pa-3 border-b">
        <p class="font-weight-bold">NRIC/WP No.</p>
        <p>
          {{
            showNRICRecipient
              ? incidentInformation?.recipientOfComplaint?.nric || "-"
              : maskNRIC(incidentInformation?.recipientOfComplaint?.nric)
          }}
        </p>
      </v-col>

      <v-col cols="12" class="pa-3 border-b border-e">
        <p class="font-weight-bold">Complaint Received through</p>
        <p
          v-if="
            incidentInformation?.complaintReceivedTo?.receivedVia != 'others'
          "
        >
          {{ incidentInformation?.complaintReceivedTo?.receivedVia || "-" }}
        </p>

        <p v-else>
          {{
            incidentInformation?.complaintReceivedTo?.otherDescription || "-"
          }}
        </p>
      </v-col>
      <v-col cols="6" class="pa-3">
        <p class="font-weight-bold">Brief Description</p>
        <p>
          {{
            incidentInformation?.complaintReceivedTo?.briefDescription || "-"
          }}
        </p>
      </v-col>
    </v-row>
  </v-row>
</template>

<script lang="ts" setup>
definePageMeta({
  middleware: ["01-auth", "02-org"],
  memberOnly: true,
});

// props
const props = defineProps({
  incidentInformation: {
    type: Object as PropType<Record<string, any> | null>,
    required: true,
  },
});

// utilities
const { getSiteById } = useSiteSettings();
const route = useRoute();

// state
const siteName = ref("");

const siteId = computed(() => props.incidentInformation?.siteInfo?.site);

const showNRICComplainant = ref(false);
const showNRICRecipient = ref(false);

watch(
  () => route.query.nricComp,
  (val) => {
    showNRICComplainant.value = val === "true";
  },
  { immediate: true }
);

watch(
  () => route.query.nricRec,
  (val) => {
    showNRICRecipient.value = val === "true";
  },
  { immediate: true }
);

watch(
  siteId,
  async (newSiteId) => {
    if (!newSiteId) return;

    const siteDataValue = await getSiteById(newSiteId);

    siteName.value = siteDataValue?.name ?? "";
  },
  { immediate: true }
);

function toLocalDate(utcString: string) {
  return new Date(utcString).toLocaleString("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
}

const maskNRIC = (value: any) => {
  if (!value) return "NA";

  return value.replace(/.(?=.{3})/g, "*");
};
</script>
