<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Link, useForm } from '@inertiajs/vue3';
import DialogModal from '@/Components/DialogModal.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import InputLabel from '@/Components/InputLabel.vue';
import InputError from '@/Components/InputError.vue';
import { ref, onMounted } from 'vue';
import Multiselect from 'vue-multiselect';

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

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

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

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,
});

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,
});

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;
  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(),
  });
};
</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">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">Field Job Settings</h2>
            <PrimaryButton @click="openCreate">+ New</PrimaryButton>
          </div>

          <DialogModal :show="showCreate" @close="closeCreate">
            <template #title>
              Create Field Job Setting
            </template>
            <template #content>
              <form @submit.prevent="store">
                <div class="grid grid-cols-1 gap-4">
                  <div>
                    <InputLabel for="segment" value="Segment" />
                    <multiselect
                      id="segment"
                      v-model="form.segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select segment"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.segment_id" class="mt-1" />
                  </div>

                  <div>
                    <InputLabel for="initialDecision" value="Initial Decision" />
                    <multiselect
                      id="initialDecision"
                      v-model="form.initial_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select initial decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.initial_decision_id" class="mt-1" />
                  </div>

                  <div>
                    <InputLabel for="assignDecision" value="Assign Decision" />
                    <multiselect
                      id="assignDecision"
                      v-model="form.assign_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select assign decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.assign_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="completeDecision" value="Complete Decision" />
                    <multiselect
                      id="completeDecision"
                      v-model="form.complete_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select complete decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.complete_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="cancelDecision" value="Cancel Decision" />
                    <multiselect
                      id="cancelDecision"
                      v-model="form.cancel_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select cancel decision (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.cancel_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="returnSegment" value="Return Segment" />
                    <multiselect
                      id="returnSegment"
                      v-model="form.return_segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select return segment (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.return_segment_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="queueSegment" value="Queue Segment" />
                    <multiselect
                      id="queueSegment"
                      v-model="form.queue_segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select queue segment (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="form.errors.queue_segment_id" class="mt-1" />
                  </div>
                </div>

                <div class="flex justify-end gap-2 mt-6">
                  <button type="button" @click="closeCreate" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
                  <PrimaryButton :disabled="form.processing">Create</PrimaryButton>
                </div>
              </form>
            </template>
          </DialogModal>
          <DialogModal :show="showEdit" @close="closeEdit">
            <template #title>
              Edit Field Job Setting
            </template>
            <template #content>
              <form @submit.prevent="update">
                <div class="grid grid-cols-1 gap-4">
                  <div>
                    <InputLabel for="edit-segment" value="Segment" />
                    <multiselect
                      id="edit-segment"
                      v-model="editForm.segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select segment"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.segment_id" class="mt-1" />
                  </div>

                  <div>
                    <InputLabel for="edit-initialDecision" value="Initial Decision" />
                    <multiselect
                      id="edit-initialDecision"
                      v-model="editForm.initial_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select initial decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.initial_decision_id" class="mt-1" />
                  </div>

                  <div>
                    <InputLabel for="edit-assignDecision" value="Assign Decision" />
                    <multiselect
                      id="edit-assignDecision"
                      v-model="editForm.assign_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select assign decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.assign_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="edit-completeDecision" value="Complete Decision" />
                    <multiselect
                      id="edit-completeDecision"
                      v-model="editForm.complete_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select complete decision"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.complete_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="edit-cancelDecision" value="Cancel Decision" />
                    <multiselect
                      id="edit-cancelDecision"
                      v-model="editForm.cancel_decision_id"
                      :options="decisionOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select cancel decision (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.cancel_decision_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="edit-returnSegment" value="Return Segment" />
                    <multiselect
                      id="edit-returnSegment"
                      v-model="editForm.return_segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select return segment (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.return_segment_id" class="mt-1" />
                  </div>

                  <div class="mt-2">
                    <InputLabel for="edit-queueSegment" value="Queue Segment" />
                    <multiselect
                      id="edit-queueSegment"
                      v-model="editForm.queue_segment_id"
                      :options="segmentOptions.map(o=>o.id)"
                      :multiple="false"
                      :searchable="true"
                      placeholder="Select queue segment (optional)"
                      :append-to-body="true"
                      :custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
                    />
                    <InputError :message="editForm.errors.queue_segment_id" class="mt-1" />
                  </div>
                </div>

                <div class="flex justify-end gap-2 mt-6">
                  <button type="button" @click="closeEdit" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
                  <PrimaryButton :disabled="editForm.processing">Save</PrimaryButton>
                </div>
              </form>
            </template>
          </DialogModal>
          <table class="min-w-full text-left text-sm">
            <thead>
              <tr class="border-b">
                <th class="py-2 pr-4">ID</th>
                <th class="py-2 pr-4">Segment</th>
                <th class="py-2 pr-4">Initial Decision</th>
                <th class="py-2 pr-4">Assign Decision</th>
                <th class="py-2 pr-4">Complete Decision</th>
                <th class="py-2 pr-4">Cancel Decision</th>
                <th class="py-2 pr-4">Return Segment</th>
                <th class="py-2 pr-4">Queue Segment</th>
                <th class="py-2 pr-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="row in settings" :key="row.id" class="border-b last:border-0">
                <td class="py-2 pr-4">{{ row.id }}</td>
                <td class="py-2 pr-4">{{ row.segment?.name }}</td>
                <td class="py-2 pr-4">{{ row.initial_decision?.name || row.initialDecision?.name }}</td>
                <td class="py-2 pr-4">{{ row.assign_decision?.name || row.assignDecision?.name }}</td>
                <td class="py-2 pr-4">{{ row.complete_decision?.name || row.completeDecision?.name }}</td>
                <td class="py-2 pr-4">{{ row.cancel_decision?.name || row.cancelDecision?.name }}</td>
                <td class="py-2 pr-4">{{ row.return_segment?.name || row.returnSegment?.name }}</td>
                <td class="py-2 pr-4">{{ row.queue_segment?.name || row.queueSegment?.name }}</td>
                <td class="py-2 pr-4">
                  <button @click="openEdit(row)" class="px-3 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700">
                    Edit
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
