<template>
  <v-row no-gutters class="px-5 pt-4">
    <!-- Authorities (Police/SCDF/Ambulance called in at the scene) -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Authorities (Police/SCDF/Ambulance called in at the scene)?
      </p>
      <p
        v-if="authorities?.authoritiesValue == 'no'"
        class="mt-2 text-h6 text-capitalize"
      >
        {{ authorities?.authoritiesValue }}
      </p>

      <v-data-table
        v-else
        :headers="authoritiesTableHeader"
        :items="authorities?.authoritiesCalled"
        fixed-header
        hide-default-footer
        :hide-default-header="false"
        items-per-page="100"
        style="max-height: calc(100vh - (200px))"
        class="border mt-5"
      >
      </v-data-table>
    </v-col>
    <div class="w-100 my-8 mx-2">
      <v-table class="responsive-table border elevation-0">
        <thead>
          <tr>
            <th
              v-for="(item, index) in concernHeader"
              :key="index"
              class="text-left font-weight-bold text-black border-e"
            >
              {{ item }}
            </th>
          </tr>
        </thead>
        <tbody>
          <!-- 1 -->
          <tr>
            <td class="border-e">1.</td>
            <td class="border-e">
              What was done to address the incident thereafter?
            </td>
            <td class="border-e pa-2">
              {{ authorities?.incidentThereAfter.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.incidentThereAfter.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.incidentThereAfter.time }}
            </td>
          </tr>

          <!-- 2 -->
          <tr>
            <td class="border-e">2.</td>
            <td class="border-e">
              Were the management notified and who was notified?
            </td>
            <td class="border-e pa-2">
              {{ authorities?.managementNotified.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.managementNotified.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.managementNotified.time }}
            </td>
          </tr>

          <!-- 3 -->
          <tr>
            <td class="border-e">3.</td>
            <td class="border-e">How was the incident resolved?</td>
            <td class="border-e pa-2">
              {{ authorities?.incidentResolved.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.incidentResolved.status }}
            </td>
            <td class="pa-2">
              {{ formatDate(authorities?.incidentResolved.time) }}
            </td>
          </tr>

          <!-- 4 -->
          <tr>
            <td class="border-e">4.</td>
            <td class="border-e">What was the cause of the incident?</td>
            <td class="border-e pa-2">
              {{ authorities?.causeOfIncident.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.causeOfIncident.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.causeOfIncident.time }}
            </td>
          </tr>

          <!-- 5 -->
          <tr>
            <td class="border-e">5.</td>
            <td class="border-e">Any systems used to verify the incident?</td>
            <td class="border-e pa-2">
              {{ authorities?.systemUsed.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.systemUsed.status }}
            </td>
            <td class="pa-2">
              {{ formatDate(authorities?.systemUsed.time) }}
            </td>
          </tr>

          <!-- 6 -->
          <tr>
            <td class="border-e">6.</td>
            <td class="border-e">Any CCTV records or pictures taken?</td>
            <td class="border-e pa-2">
              {{ authorities?.cctvRecord.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.cctvRecord.status }}
            </td>
            <td class="pa-2">
              {{ formatDate(authorities?.cctvRecord.time) }}
            </td>
          </tr>

          <!-- 7 -->
          <tr>
            <td class="border-e">7.</td>
            <td class="border-e">Particulars of tenant / owner (if any)</td>
            <td class="border-e pa-2">
              {{ authorities?.particularsOwner.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.particularsOwner.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.particularsOwner.time }}
            </td>
          </tr>

          <!-- 8 -->
          <tr>
            <td class="border-e">8.</td>
            <td class="border-e">When was the incident resolved?</td>
            <td class="border-e pa-2">
              {{ authorities?.whenIncidentResolve.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.whenIncidentResolve.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.whenIncidentResolve.time }}
            </td>
          </tr>

          <!-- 9 -->
          <tr>
            <td class="border-e">9.</td>
            <td class="border-e">Name of Shift In charge</td>
            <td class="border-e pa-2">
              {{ authorities?.nameOfShiftIncharge.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.nameOfShiftIncharge.status }}
            </td>
            <td class="pa-2">
              {{ authorities?.nameOfShiftIncharge.time }}
            </td>
          </tr>

          <!-- 10 -->
          <tr>
            <td class="border-e">10.</td>
            <td class="border-e">
              Any security implication due to the incident?
            </td>
            <td class="border-e pa-2">
              {{ authorities?.securityImplication.actionTaken }}
            </td>
            <td class="border-e pa-2">
              {{ authorities?.securityImplication.status }}
            </td>
            <td class="pa-2">
              {{ formatDate(authorities?.securityImplication.time) }}
            </td>
          </tr>
        </tbody>
      </v-table>
    </div>
  </v-row>
</template>

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

// imports

// utilities

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

// emits

// state
const authoritiesTableHeader = [
  {
    title: "Type of Authorities",
    value: "type",
  },
  {
    title: "Vehicle Number",
    value: "vehicleNumber",
  },
  {
    title: "Person in Charge",
    value: "personInCharge",
  },
  {
    title: "Case Report Reference",
    value: "caseReportReference",
  },
  {
    title: "Description",
    value: "description",
  },
];

const concernHeader = [
  "S/No",
  "Areas of Concern",
  "Actions Taken",
  "Status",
  "Time",
];

const formatDate = (date: Date | string | null) => {
  if (!date) return "";

  const d = typeof date === "string" ? new Date(date) : date;

  if (isNaN(d.getTime())) return ""; // safeguard for invalid date

  return new Intl.DateTimeFormat("en-GB").format(d);
};
</script>
