<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from "@inertiajs/vue3";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import CardTitle from "@/Components/ui/card/CardTitle.vue";
import { Button } from "@/Components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/Components/ui/dialog";
import InputLabel from "@/Components/InputLabel.vue";
import InputError from "@/Components/InputError.vue";
import { ref, onMounted, watch, computed } from "vue";
import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { MoreHorizontal, Pencil, Settings } from "lucide-vue-next";

const props = defineProps({
  settings: Array,
  segments: Array,
  decisions: Array,
  actions: Array,
});

const showCreate = ref(false);
const showEdit = ref(false);
const editingId = ref(null);
const segmentOptions = ref([]);
const decisionOptions = ref([]);
const actionOptions = ref([]);

onMounted(() => {
  segmentOptions.value = (props.segments || []).map((s) => ({
    label: s.name,
    value: s.id,
  }));
  decisionOptions.value = (props.decisions || []).map((d) => ({
    label: d.name,
    value: d.id,
  }));
  actionOptions.value = (props.actions || []).map((a) => ({
    label: a.name,
    value: a.id,
  }));
});

const form = useForm({
  segment_id: null,
  initial_decision_id: null,
  assign_decision_id: null,
  complete_decision_id: null,
  cancel_decision_id: null,
  return_segment_id: null,
  queue_segment_id: null,
  action_id: null,
});

const openCreate = () => {
  form.reset();
  showCreate.value = true;
};

const closeCreate = () => {
  showCreate.value = false;
  form.reset();
};

const store = () => {
  form.post(route("settings.fieldjob.store"), {
    preserveScroll: true,
    onSuccess: () => closeCreate(),
  });
};

const editForm = useForm({
  segment_id: null,
  initial_decision_id: null,
  assign_decision_id: null,
  complete_decision_id: null,
  cancel_decision_id: null,
  return_segment_id: null,
  queue_segment_id: null,
  action_id: null,
});

const openEdit = (row) => {
  editingId.value = row.id;
  editForm.segment_id = row.segment_id ?? row.segment?.id ?? null;
  editForm.initial_decision_id =
    row.initial_decision_id ??
    row.initial_decision?.id ??
    row.initialDecision?.id ??
    null;
  editForm.assign_decision_id =
    row.assign_decision_id ?? row.assign_decision?.id ?? row.assignDecision?.id ?? null;
  editForm.complete_decision_id =
    row.complete_decision_id ??
    row.complete_decision?.id ??
    row.completeDecision?.id ??
    null;
  editForm.cancel_decision_id =
    row.cancel_decision_id ?? row.cancel_decision?.id ?? row.cancelDecision?.id ?? null;
  editForm.return_segment_id =
    row.return_segment_id ?? row.return_segment?.id ?? row.returnSegment?.id ?? null;
  editForm.queue_segment_id =
    row.queue_segment_id ?? row.queue_segment?.id ?? row.queueSegment?.id ?? null;
  editForm.action_id = row.action_id ?? row.action?.id ?? null;
  showEdit.value = true;
};

const closeEdit = () => {
  showEdit.value = false;
  editingId.value = null;
  editForm.reset();
  editForm.clearErrors();
};

const update = () => {
  if (!editingId.value) {
    return;
  }
  editForm.put(route("settings.fieldjob.update", { setting: editingId.value }), {
    preserveScroll: true,
    onSuccess: () => closeEdit(),
  });
};

watch(
  () => editForm.action_id,
  (newActionId) => {
    if (newActionId !== null) {
      decisionOptions.value = (props.decisions || [])
        .filter((decision) => decision.actions?.some((a) => a.id === newActionId) ?? true)
        .map((d) => ({ label: d.name, value: d.id }));
    }
  }
);

watch(
  () => form.action_id,
  (newActionId) => {
    form.initial_decision_id = null;
    form.assign_decision_id = null;
    form.complete_decision_id = null;
    if (newActionId !== null) {
      decisionOptions.value = (props.decisions || [])
        .filter((decision) => decision.actions?.some((a) => a.id === newActionId) ?? true)
        .map((d) => ({ label: d.name, value: d.id }));
    }
  }
);

// DataTable state
const sort = ref({ key: null, direction: null });
const page = ref(1);
const pageSize = ref(25);
const columns = [
  { key: "id", label: "ID", sortable: true, class: "w-16" },
  { key: "segment", label: "Segment", sortable: false },
  { key: "action", label: "Action", sortable: false },
  { key: "initial_decision", label: "Initial Decision", sortable: false },
  { key: "assign_decision", label: "Assign Decision", sortable: false },
  { key: "complete_decision", label: "Complete Decision", sortable: false },
  { key: "cancel_decision", label: "Cancel Decision", sortable: false },
  { key: "return_segment", label: "Return Segment", sortable: false },
  { key: "queue_segment", label: "Queue Segment", sortable: false },
];
</script>

<template>
  <AppLayout title="Field Job Settings">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="py-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center justify-between w-full">
              <div class="flex items-center gap-2">
                <Settings :size="18" />
                <CardTitle class="uppercase">Field Job Settings</CardTitle>
              </div>
              <Button @click="openCreate">+ New</Button>
            </div>
          </template>

          <Dialog v-model:open="showCreate">
            <DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Create Field Job Setting</DialogTitle>
              </DialogHeader>
              <div class="space-y-4">
                <div>
                  <InputLabel for="segment" value="Segment" />
                  <AppCombobox
                    id="segment"
                    v-model="form.segment_id"
                    :items="segmentOptions"
                    placeholder="Select segment"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.segment_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="action" value="Action" />
                  <AppCombobox
                    id="action"
                    v-model="form.action_id"
                    :items="actionOptions"
                    placeholder="Select action"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.action_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="initialDecision" value="Initial Decision" />
                  <AppCombobox
                    id="initialDecision"
                    v-model="form.initial_decision_id"
                    :items="decisionOptions"
                    placeholder="Select initial decision"
                    :disabled="!form.action_id"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.initial_decision_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="assignDecision" value="Assign Decision" />
                  <AppCombobox
                    id="assignDecision"
                    v-model="form.assign_decision_id"
                    :items="decisionOptions"
                    placeholder="Select assign decision"
                    :disabled="!form.action_id"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.assign_decision_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="completeDecision" value="Complete Decision" />
                  <AppCombobox
                    id="completeDecision"
                    v-model="form.complete_decision_id"
                    :items="decisionOptions"
                    placeholder="Select complete decision"
                    :disabled="!form.action_id"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.complete_decision_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="cancelDecision" value="Cancel Decision" />
                  <AppCombobox
                    id="cancelDecision"
                    v-model="form.cancel_decision_id"
                    :items="decisionOptions"
                    placeholder="Select cancel decision (optional)"
                    :disabled="!form.action_id"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.cancel_decision_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="returnSegment" value="Return Segment" />
                  <AppCombobox
                    id="returnSegment"
                    v-model="form.return_segment_id"
                    :items="segmentOptions"
                    placeholder="Select return segment (optional)"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.return_segment_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="queueSegment" value="Queue Segment" />
                  <AppCombobox
                    id="queueSegment"
                    v-model="form.queue_segment_id"
                    :items="segmentOptions"
                    placeholder="Select queue segment (optional)"
                    button-class="w-full"
                  />
                  <InputError :message="form.errors.queue_segment_id" class="mt-1" />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" @click="closeCreate">Cancel</Button>
                <Button @click="store" :disabled="form.processing">Create</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <Dialog v-model:open="showEdit">
            <DialogContent class="max-w-2xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Edit Field Job Setting</DialogTitle>
              </DialogHeader>
              <div class="space-y-4">
                <div>
                  <InputLabel for="edit-segment" value="Segment" />
                  <AppCombobox
                    id="edit-segment"
                    v-model="editForm.segment_id"
                    :items="segmentOptions"
                    placeholder="Select segment"
                    button-class="w-full"
                  />
                  <InputError :message="editForm.errors.segment_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="edit-action" value="Action" />
                  <AppCombobox
                    id="edit-action"
                    v-model="editForm.action_id"
                    :items="actionOptions"
                    placeholder="Select action"
                    button-class="w-full"
                  />
                  <InputError :message="editForm.errors.action_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="edit-initialDecision" value="Initial Decision" />
                  <AppCombobox
                    id="edit-initialDecision"
                    v-model="editForm.initial_decision_id"
                    :items="decisionOptions"
                    placeholder="Select initial decision"
                    :disabled="!editForm.action_id"
                    button-class="w-full"
                  />
                  <InputError
                    :message="editForm.errors.initial_decision_id"
                    class="mt-1"
                  />
                </div>
                <div>
                  <InputLabel for="edit-assignDecision" value="Assign Decision" />
                  <AppCombobox
                    id="edit-assignDecision"
                    v-model="editForm.assign_decision_id"
                    :items="decisionOptions"
                    placeholder="Select assign decision"
                    :disabled="!editForm.action_id"
                    button-class="w-full"
                  />
                  <InputError
                    :message="editForm.errors.assign_decision_id"
                    class="mt-1"
                  />
                </div>
                <div>
                  <InputLabel for="edit-completeDecision" value="Complete Decision" />
                  <AppCombobox
                    id="edit-completeDecision"
                    v-model="editForm.complete_decision_id"
                    :items="decisionOptions"
                    placeholder="Select complete decision"
                    :disabled="!editForm.action_id"
                    button-class="w-full"
                  />
                  <InputError
                    :message="editForm.errors.complete_decision_id"
                    class="mt-1"
                  />
                </div>
                <div>
                  <InputLabel for="edit-cancelDecision" value="Cancel Decision" />
                  <AppCombobox
                    id="edit-cancelDecision"
                    v-model="editForm.cancel_decision_id"
                    :items="decisionOptions"
                    placeholder="Select cancel decision (optional)"
                    :disabled="!editForm.action_id"
                    button-class="w-full"
                  />
                  <InputError
                    :message="editForm.errors.cancel_decision_id"
                    class="mt-1"
                  />
                </div>
                <div>
                  <InputLabel for="edit-returnSegment" value="Return Segment" />
                  <AppCombobox
                    id="edit-returnSegment"
                    v-model="editForm.return_segment_id"
                    :items="segmentOptions"
                    placeholder="Select return segment (optional)"
                    button-class="w-full"
                  />
                  <InputError :message="editForm.errors.return_segment_id" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="edit-queueSegment" value="Queue Segment" />
                  <AppCombobox
                    id="edit-queueSegment"
                    v-model="editForm.queue_segment_id"
                    :items="segmentOptions"
                    placeholder="Select queue segment (optional)"
                    button-class="w-full"
                  />
                  <InputError :message="editForm.errors.queue_segment_id" class="mt-1" />
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" @click="closeEdit">Cancel</Button>
                <Button @click="update" :disabled="editForm.processing">Save</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
          <DataTableClient
            :columns="columns"
            :rows="settings"
            :sort="sort"
            :search="''"
            :page="page"
            :pageSize="pageSize"
            :showToolbar="false"
            :showPagination="true"
            @update:sort="(v) => (sort = v)"
            @update:page="(v) => (page = v)"
            @update:pageSize="(v) => (pageSize = v)"
          >
            <template #cell-segment="{ row }">
              {{ row.segment?.name }}
            </template>
            <template #cell-action="{ row }">
              {{ row.action?.name }}
            </template>
            <template #cell-initial_decision="{ row }">
              {{ row.initial_decision?.name || row.initialDecision?.name }}
            </template>
            <template #cell-assign_decision="{ row }">
              {{ row.assign_decision?.name || row.assignDecision?.name }}
            </template>
            <template #cell-complete_decision="{ row }">
              {{ row.complete_decision?.name || row.completeDecision?.name }}
            </template>
            <template #cell-cancel_decision="{ row }">
              {{ row.cancel_decision?.name || row.cancelDecision?.name }}
            </template>
            <template #cell-return_segment="{ row }">
              {{ row.return_segment?.name || row.returnSegment?.name }}
            </template>
            <template #cell-queue_segment="{ row }">
              {{ row.queue_segment?.name || row.queueSegment?.name }}
            </template>
            <template #actions="{ row }">
              <DropdownMenu>
                <DropdownMenuTrigger as-child>
                  <Button variant="ghost" size="icon">
                    <MoreHorizontal class="w-4 h-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem @click="openEdit(row)">
                    <Pencil class="w-4 h-4 mr-2" />
                    Uredi
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </template>
          </DataTableClient>
        </AppCard>
      </div>
    </div>
  </AppLayout>
</template>
