<template>
  <v-row no-gutters align="center" justify="center">
    <v-col cols="12" lg="10">
      <TableMain
        :title="'Schedule Tasks'"
        :items="items"
        :headers="headers"
        :loading="loading"
        :show-header="true"
        v-model:page="page"
        :pages="pages"
        :pageRange="pageRange"
        :no-data-text="'No Schedule Tasks found'"
        @row-click="onRowClick"
      >
        <template #item.task="{ item }">
          {{ item.task || "N/A" }}
        </template>

        <template #item.createdAt="{ value }">
          {{
            formatDate
              ? formatDate(value)
              : value
              ? new Date(value).toLocaleDateString()
              : ""
          }}
        </template>

        <template #item.area="{ value }">
          {{ value || "N/A" }}
        </template>

        <template #item.createdBy="{ item }">
          <v-avatar
            size="32"
            class="mr-2"
            :color="getAvatarColor(item.createdBy)"
          >
            <span class="white--text">{{ getInitials(item.createdBy) }}</span>
          </v-avatar>
          {{ item.createdBy || "N/A" }}
        </template>

        <template #item.cleaners="{ value }">
          {{ value || "N/A" }}
        </template>

        <template #item.status="{ value }">
          <v-chip
            :color="getStatusColor(value)"
            class="font-weight-bold"
            style="background: #ffe6c2; color: #ff9800"
          >
            {{ value || "To-Do" }}
          </v-chip>
        </template>
        <!-- Completion Date/Time -->
        <template #item.completionDate="{ value }">
          {{ value ? formatDate(value) : "N/A" }}
        </template>
        <!-- Action (Accept button) -->
        <template #item.action="{ item }">
          <v-btn outlined class="accept-btn" @click.stop="acceptTask(item)">
            Accept
          </v-btn>
        </template>
      </TableMain>

      <!-- Accept Confirmation Dialog -->
      <AcceptDialog
        :model-value="showAcceptDialog"
        title="Accept Scheduled Task"
        message="Are you sure you want to Accept this Scheduled Task?"
        @confirm="confirmAccept"
        @cancel="showAcceptDialog = false"
      />

      <!-- ScheduleTaskForm Dialog -->
      <ScheduleTaskForm v-model:show="showForm" />
    </v-col>
  </v-row>
</template>

<script lang="ts" setup>
const props = defineProps({
  orgId: { type: String, required: true },
  site: { type: String, required: true },
  type: { type: String, required: true },
});
const loading = ref(false);
const page = ref(1);
const pages = ref(1);
const pageRange = ref("1-3 of 3");
const showForm = ref(false);

const showAcceptDialog = ref(false);
const selectedTask = ref(null);

const items = ref([
  {
    _id: "1",
    task: "Clean Windows",
    createdAt: "2025-10-28T10:00:00Z",
    area: "",
    createdBy: "Demo Smith",
    cleaners: "N/A",
    status: "To-Do",
    completionDate: "2025-10-28T10:00:00Z",
  },
  {
    _id: "2",
    task: "Clean The 3",
    createdAt: "2025-10-28T10:00:00Z",
    area: "",
    createdBy: "Hygiene SP",
    cleaners: "N/A",
    status: "To-Do",
    completionDate: "2025-10-28T10:00:00Z",
  },
]);

const headers = [
  { title: "Task", value: "task" },
  { title: "Date Created", value: "createdAt" },
  { title: "Area", value: "area" },
  { title: "Created By", value: "createdBy" },
  { title: "Cleaners", value: "cleaners" },
  { title: "Status", value: "status" },
  { title: "Completion Date/Time", value: "completionDate" },
  { title: "Action", value: "action" },
];

const { formatDate } = useUtils();

function getInitials(name: string) {
  if (!name) return "";
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase();
}
function getAvatarColor(name: string) {
  if (name === "Demo Smith") return "purple";
  if (name === "Hygiene SP") return "blue";
  return "grey";
}
function getStatusColor(status: string) {
  if (status === "To-Do") return "orange";
  if (status === "Completed") return "green";
  return "grey";
}
function acceptTask(item: any) {
  selectedTask.value = item;
  showAcceptDialog.value = true;
}
function confirmAccept() {
  // Handle accept logic here (e.g., update status, API call)
  showAcceptDialog.value = false;
}
function onRowClick(data: any) {
  const item = data?.item ?? data;
  const id = item?._id || item?.id;
  if (id) {
    const path = `/${props.orgId}/${props.site}/schedule-tasks-ticket/${id}`;
    navigateTo(path);
  } else {
    console.warn("Row clicked but no id found to navigate:", item);
  }
}
</script>

<style scoped>
.accept-btn {
  border: 1px solid #333;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  min-width: 80px;
}
</style>
