<template>
  <v-row no-gutters class="px-5 pt-4">
    <!-- Site Information -->
    <v-col cols="12" class="border-b pb-3 mb-5">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Site Information
      </p>
      <v-row no-gutters class="mt-5">
        <v-col cols="12" sm="6" md="3">
          <InputLabel class="text-capitalize" title="Site" />
          <p class="my-1 text-h6">{{ siteName || "NA" }}</p>
        </v-col>
        <v-col cols="12" sm="6" md="3">
          <InputLabel
            class="text-capitalize"
            title="Incident Reference Number"
          />
          <p class="my-1 text-h6">
            {{ incidentInformation?.siteInfo?.irNumber || "NA" }}
          </p>
        </v-col>
        <v-col cols="12" sm="6" md="3">
          <InputLabel class="text-capitalize" title="Submitted By" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.siteInfo?.submittedBy || "NA" }}
          </p>
        </v-col>
        <v-col cols="12" sm="6" md="3">
          <InputLabel class="text-capitalize" title="Designation" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.siteInfo?.designation || "NA" }}
          </p>
        </v-col>
      </v-row>
    </v-col>

    <!-- Place of Incident -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Place of Incident
      </p>
      <p class="my-1 text-h6 text-capitalize">
        {{ incidentInformation?.placeOfIncident?.incidentLocation || "NA" }}
      </p>
    </v-col>

    <!-- Incident Type / Time -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Incident Type / Time
      </p>
      <v-row no-gutters class="mt-5">
        <v-col cols="12" sm="3" md="3">
          <InputLabel class="text-capitalize" title="Type of Incident" />
          <p class="my-1 text-h6 text-capitalize">
            {{
              incidentInformation?.incidentTypeAndTime?.typeOfIncident || "NA"
            }}
          </p>
        </v-col>
        <v-col cols="12" sm="3" md="3">
          <InputLabel class="text-capitalize" title="Incident Date" />
          <p class="my-1 text-h6">
            {{
              toLocalDate(
                incidentInformation?.incidentTypeAndTime?.dateOfIncident
              ) || "NA"
            }}
          </p>
        </v-col>
        <v-col cols="12" sm="3" md="3">
          <InputLabel class="text-capitalize" title="Incident Start" />
          <p class="my-1 text-h6">
            {{
              incidentInformation?.incidentTypeAndTime?.incidentStart || "NA"
            }}
          </p>
        </v-col>
        <v-col cols="12" sm="3" md="3">
          <v-row no-gutters class="d-flex align-center">
            <v-col cols="10">
              <InputLabel class="text-capitalize" title="Incident End" />
              <p class="my-1 text-h6">
                {{
                  incidentInformation?.incidentTypeAndTime?.incidentEnd || "NA"
                }}
              </p>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <v-row no-gutters class="mt-5">
        <v-col cols="12" sm="3" md="3">
          <InputLabel
            class="text-capitalize"
            title="Time of Response (1st Contact)"
          />
          <p class="my-1 text-h6">
            {{
              incidentInformation?.incidentTypeAndTime?.timeOfResponse || "NA"
            }}
          </p>
        </v-col>
      </v-row>
    </v-col>

    <!-- Response/Submission From (1st Contact) -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Response/Submission From (1st Contact)
      </p>
      <v-row no-gutters class="mt-5">
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Time" />
          <p class="my-1 text-h6">
            {{ incidentInformation?.submissionForm?.time || "NA" }}
          </p>
        </v-col>
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Date" />
          <p class="my-1 text-h6">
            {{
              toLocalDate(incidentInformation?.submissionForm?.dateOfReport) ||
              "NA"
            }}
          </p>
        </v-col>
      </v-row>
    </v-col>

    <!-- Name of Informant/Complainant Information -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Name of Informant/Complainant Information
      </p>
      <v-row no-gutters class="d-flex align-center mt-5">
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Name" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.complaintInfo?.complainant || "NA" }}
          </p>
        </v-col>
        <v-col cols="12" sm="4" md="3">
          <div>
            <InputLabel class="text-capitalize mr-1" title="NRIC/WP Number" />
            <v-icon
              v-if="incidentInformation?.complaintInfo?.nric"
              size="small"
              color="blue"
              class="cursor-pointer"
              @click="toggleNRICComplainant"
            >
              {{ showNRICComplainant ? "mdi-eye-off" : "mdi-eye" }}
            </v-icon>
          </div>
          <p class="my-1 text-h6 text-capitalize">
            {{
              showNRICComplainant
                ? incidentInformation?.complaintInfo?.nric || "NA"
                : maskNRIC(incidentInformation?.complaintInfo?.nric)
            }}
          </p>
        </v-col>
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Contact Number" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.complaintInfo?.contact || "NA" }}
          </p>
        </v-col>
      </v-row>
    </v-col>

    <!-- Name of Recipient of Complaint (1st Contact) -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Name of Recipient of Complaint (1st Contact)
      </p>
      <v-row no-gutters class="d-flex align-center mt-5">
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Name" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.recipientOfComplaint?.recipient || "NA" }}
          </p>
        </v-col>
        <v-col cols="12" sm="4" md="3">
          <div>
            <InputLabel class="text-capitalize" title="NRIC/WP Number" />
            <v-icon
              v-if="incidentInformation?.recipientOfComplaint?.nric"
              size="small"
              color="blue"
              class="cursor-pointer"
              @click="toggleNRICRecipient"
            >
              {{ showNRICRecipient ? "mdi-eye-off" : "mdi-eye" }}
            </v-icon>
          </div>
          <p class="my-1 text-h6 text-capitalize">
            {{
              showNRICRecipient
                ? incidentInformation?.recipientOfComplaint?.nric || "NA"
                : maskNRIC(incidentInformation?.recipientOfComplaint?.nric)
            }}
          </p>
        </v-col>
        <v-col cols="12" sm="4" md="3">
          <InputLabel class="text-capitalize" title="Contact Number" />
          <p class="my-1 text-h6 text-capitalize">
            {{ incidentInformation?.recipientOfComplaint?.contact || "NA" }}
          </p>
        </v-col>
      </v-row>
    </v-col>

    <!-- Complaint Received through -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Complaint Received through
      </p>
      <v-col cols="12">
        <InputLabel class="text-capitalize" title="Received through" />
        <p
          v-if="
            incidentInformation?.complaintReceivedTo?.receivedVia != 'others'
          "
          class="my-1 text-h6 text-capitalize"
        >
          {{ incidentInformation?.complaintReceivedTo?.receivedVia || "NA" }}
        </p>

        <p v-else class="my-1 text-h6">
          {{
            incidentInformation?.complaintReceivedTo?.otherDescription || "NA"
          }}
        </p>
      </v-col>
    </v-col>

    <!-- Brief Description -->
    <v-col cols="12" class="mb-10">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Brief Description
      </p>
      <p class="mt-5 text-h6 text-capitalize">
        {{ incidentInformation?.complaintReceivedTo?.briefDescription || "NA" }}
      </p>
    </v-col>
  </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,
  },
});

const emit = defineEmits(["showNRICComplainant", "showNRICRecipient"]);

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

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

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

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

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 toggleNRICComplainant = () => {
  showNRICComplainant.value = !showNRICComplainant.value;
  emit("showNRICComplainant", showNRICComplainant.value);
};

const toggleNRICRecipient = () => {
  showNRICRecipient.value = !showNRICRecipient.value;
   emit("showNRICRecipient", showNRICRecipient.value);
};

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

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