<script setup>
// flowbite-vue table imports removed; using DataTableClient
import { EditIcon, TrashBinIcon } from "@/Utilities/Icons";
import DialogModal from "@/Components/DialogModal.vue";
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
import { computed, onMounted, ref, watch } from "vue";
import { router, useForm } from "@inertiajs/vue3";
import InputLabel from "@/Components/InputLabel.vue";
import TextInput from "@/Components/TextInput.vue";
import Multiselect from "vue-multiselect";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import ActionMessage from "@/Components/ActionMessage.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import InlineColorPicker from "@/Components/InlineColorPicker.vue";

const props = defineProps({
  decisions: Array,
  actions: Array,
  emailTemplates: { type: Array, default: () => [] },
});

const drawerEdit = ref(false);
const drawerCreate = ref(false);
const showDelete = ref(false);
const toDelete = ref(null);

const search = ref("");
const selectedTemplateId = ref(null);
const onlyAutoMail = ref(false);

const actionOptions = ref([]);

// DataTable state
const sort = ref({ key: null, direction: null });
const page = ref(1);
const pageSize = ref(25);
const columns = [
  { key: "id", label: "#", sortable: true, class: "w-16" },
  { key: "name", label: "Ime", sortable: true },
  { key: "color_tag", label: "Barva", sortable: false },
  { key: "belongs", label: "Pripada akcijam", sortable: false, class: "w-40" },
  { key: "auto_mail", label: "Auto mail", sortable: false, class: "w-46" },
];

const form = useForm({
  id: 0,
  name: "",
  color_tag: "",
  actions: [],
  auto_mail: false,
  email_template_id: null,
});

const createForm = useForm({
  name: "",
  color_tag: "",
  actions: [],
  auto_mail: false,
  email_template_id: null,
});

// When auto mail is disabled, also detach email template selection (edit form)
watch(
  () => form.auto_mail,
  (enabled) => {
    if (!enabled) {
      form.email_template_id = null;
    }
  }
);

// Same behavior for create form for consistency
watch(
  () => createForm.auto_mail,
  (enabled) => {
    if (!enabled) {
      createForm.email_template_id = null;
    }
  }
);

const openEditDrawer = (item) => {
  form.actions = [];
  form.id = item.id;
  form.name = item.name;
  form.color_tag = item.color_tag;
  form.auto_mail = !!item.auto_mail;
  form.email_template_id = item.email_template_id || null;
  drawerEdit.value = true;

  item.actions.forEach((a) => {
    form.actions.push({
      name: a.name,
      id: a.id,
    });
  });
};

const closeEditDrawer = () => {
  drawerEdit.value = false;
  form.reset();
};

const openCreateDrawer = () => {
  createForm.reset();
  drawerCreate.value = true;
};

const closeCreateDrawer = () => {
  drawerCreate.value = false;
  createForm.reset();
};

onMounted(() => {
  props.actions.forEach((a) => {
    actionOptions.value.push({
      name: a.name,
      id: a.id,
    });
  });
});

const filtered = computed(() => {
  const term = search.value?.toLowerCase() ?? "";
  const tplId = selectedTemplateId.value ? Number(selectedTemplateId.value) : null;
  return (props.decisions || []).filter((d) => {
    const matchesSearch =
      !term ||
      d.name?.toLowerCase().includes(term) ||
      d.color_tag?.toLowerCase().includes(term);
    const matchesAuto = !onlyAutoMail.value || !!d.auto_mail;
    const matchesTemplate = !tplId || Number(d.email_template_id || 0) === tplId;
    return matchesSearch && matchesAuto && matchesTemplate;
  });
});

const update = () => {
  form.put(route("settings.decisions.update", { id: form.id }), {
    onSuccess: () => {
      closeEditDrawer();
    },
  });
};

const store = () => {
  createForm.post(route("settings.decisions.store"), {
    onSuccess: () => {
      closeCreateDrawer();
    },
  });
};

const confirmDelete = (decision) => {
  toDelete.value = decision;
  showDelete.value = true;
};

const cancelDelete = () => {
  toDelete.value = null;
  showDelete.value = false;
};

const destroyDecision = () => {
  if (!toDelete.value) return;
  router.delete(route("settings.decisions.destroy", { id: toDelete.value.id }), {
    preserveScroll: true,
    onFinish: () => cancelDelete(),
  });
};
</script>
<template>
  <div class="p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
      <TextInput v-model="search" placeholder="Iskanje..." class="w-full sm:w-72" />
      <select
        v-model="selectedTemplateId"
        class="block w-full sm:w-64 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
      >
        <option :value="null">Vse predloge</option>
        <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
          {{ t.name }}
        </option>
      </select>
      <label class="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          v-model="onlyAutoMail"
          class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
        />
        Samo auto mail
      </label>
    </div>
    <PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
  </div>
  <div class="px-4 pb-4">
    <DataTableClient
      :columns="columns"
      :rows="filtered"
      :sort="sort"
      :search="''"
      :page="page"
      :pageSize="pageSize"
      :showToolbar="false"
      @update:sort="(v) => (sort = v)"
      @update:page="(v) => (page = v)"
      @update:pageSize="(v) => (pageSize = v)"
    >
      <template #cell-color_tag="{ row }">
        <div class="flex items-center gap-2">
          <span
            v-if="row.color_tag"
            class="inline-block h-4 w-4 rounded"
            :style="{ backgroundColor: row.color_tag }"
          ></span>
          <span>{{ row.color_tag || "" }}</span>
        </div>
      </template>
      <template #cell-belongs="{ row }">
        {{ row.actions?.length ?? 0 }}
      </template>
      <template #cell-auto_mail="{ row }">
        <div class="flex flex-col text-sm">
          <span :class="row.auto_mail ? 'text-green-700' : 'text-gray-500'">{{
            row.auto_mail ? "Enabled" : "Disabled"
          }}</span>
          <span v-if="row.auto_mail && row.email_template_id" class="text-gray-600">
            Template:
            {{ emailTemplates.find((t) => t.id === row.email_template_id)?.name || "—" }}
          </span>
        </div>
      </template>
      <template #actions="{ row }">
        <button class="px-2" @click="openEditDrawer(row)">
          <EditIcon size="md" css="text-gray-500" />
        </button>
        <button
          class="px-2 disabled:opacity-40"
          :disabled="(row.activities_count ?? 0) > 0"
          @click="confirmDelete(row)"
        >
          <TrashBinIcon size="md" css="text-red-500" />
        </button>
      </template>
    </DataTableClient>
  </div>
  <DialogModal :show="drawerEdit" @close="closeEditDrawer">
    <template #title>
      <span>Spremeni odločitev</span>
    </template>
    <template #content>
      <form @submit.prevent="update">
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="name" value="Ime" />
          <TextInput
            id="name"
            v-model="form.name"
            type="text"
            class="mt-1 block w-full"
            autocomplete="name"
          />
        </div>

        <div class="mt-4 flex items-center gap-2">
          <input
            id="autoMailEdit"
            type="checkbox"
            v-model="form.auto_mail"
            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
          />
          <label for="autoMailEdit" class="text-sm">Samodejna pošta (auto mail)</label>
        </div>

        <div class="col-span-6 sm:col-span-4 mt-2">
          <InputLabel for="emailTemplateEdit" value="Email predloga" />
          <select
            id="emailTemplateEdit"
            v-model="form.email_template_id"
            :disabled="!form.auto_mail"
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <option :value="null">— Brez —</option>
            <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
              {{ t.name }}
            </option>
          </select>
          <p v-if="form.email_template_id" class="text-xs text-gray-500 mt-1">
            <span
              v-if="
                (
                  emailTemplates.find((t) => t.id === form.email_template_id)
                    ?.entity_types || []
                ).includes('contract')
              "
              >Ta predloga zahteva pogodbo.</span
            >
          </p>
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="colorTag" value="Barva" />
          <div class="mt-1">
            <InlineColorPicker v-model="form.color_tag" />
          </div>
        </div>

        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="actionsSelect" value="Akcije" />
          <multiselect
            id="actionsSelect"
            v-model="form.actions"
            :options="actionOptions"
            :multiple="true"
            track-by="id"
            :taggable="true"
            placeholder="Dodaj akcijo"
            :append-to-body="true"
            label="name"
          />
        </div>

        <div class="flex justify-end mt-4">
          <ActionMessage :on="form.recentlySuccessful" class="me-3">
            Shranjuje.
          </ActionMessage>

          <PrimaryButton
            :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing"
          >
            Shrani
          </PrimaryButton>
        </div>
      </form>
    </template>
  </DialogModal>

  <DialogModal :show="drawerCreate" @close="closeCreateDrawer">
    <template #title>
      <span>Dodaj odločitev</span>
    </template>
    <template #content>
      <form @submit.prevent="store">
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="nameCreate" value="Ime" />
          <TextInput
            id="nameCreate"
            v-model="createForm.name"
            type="text"
            class="mt-1 block w-full"
            autocomplete="name"
          />
        </div>

        <div class="mt-4 flex items-center gap-2">
          <input
            id="autoMailCreate"
            type="checkbox"
            v-model="createForm.auto_mail"
            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
          />
          <label for="autoMailCreate" class="text-sm">Samodejna pošta (auto mail)</label>
        </div>

        <div class="col-span-6 sm:col-span-4 mt-2">
          <InputLabel for="emailTemplateCreate" value="Email predloga" />
          <select
            id="emailTemplateCreate"
            v-model="createForm.email_template_id"
            :disabled="!createForm.auto_mail"
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <option :value="null">— Brez —</option>
            <option v-for="t in emailTemplates" :key="t.id" :value="t.id">
              {{ t.name }}
            </option>
          </select>
          <p v-if="createForm.email_template_id" class="text-xs text-gray-500 mt-1">
            <span
              v-if="
                (
                  emailTemplates.find((t) => t.id === createForm.email_template_id)
                    ?.entity_types || []
                ).includes('contract')
              "
              >Ta predloga zahteva pogodbo.</span
            >
          </p>
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="colorTagCreate" value="Barva" />
          <div class="mt-1">
            <InlineColorPicker v-model="createForm.color_tag" />
          </div>
        </div>

        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="actionsCreate" value="Akcije" />
          <multiselect
            id="actionsCreate"
            v-model="createForm.actions"
            :options="actionOptions"
            :multiple="true"
            track-by="id"
            :taggable="true"
            placeholder="Dodaj akcijo"
            :append-to-body="true"
            label="name"
          />
        </div>

        <div class="flex justify-end mt-4">
          <ActionMessage :on="createForm.recentlySuccessful" class="me-3">
            Shranjuje.
          </ActionMessage>

          <PrimaryButton
            :class="{ 'opacity-25': createForm.processing }"
            :disabled="createForm.processing"
          >
            Dodaj
          </PrimaryButton>
        </div>
      </form>
    </template>
  </DialogModal>

  <ConfirmationModal :show="showDelete" @close="cancelDelete">
    <template #title> Delete decision </template>
    <template #content>
      Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be
      undone.
    </template>
    <template #footer>
      <button
        @click="cancelDelete"
        class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2"
      >
        Cancel
      </button>
      <PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
    </template>
  </ConfirmationModal>
</template>
