<script setup>
import { computed, ref, watch } from "vue";
import BaseButton from "../../../components/base/BaseButton.vue";
import BaseInputNumber from "../../../components/base/BaseInputNumber.vue";
import BaseInputText from "../../../components/base/BaseInputText.vue";
import BaseSelect from "../../../components/base/BaseSelect.vue";
import { fetchTasks } from "../composables/useHoursApi.js";
import { useHoursTimer } from "../composables/useHoursTimer.js";
import strings from "../strings.js";

const props = defineProps({
  weekLocked: { type: Boolean, default: false },
  hasInternalCategories: { type: Boolean, default: false },
  hasCustomers: { type: Boolean, default: false },
  hasProjects: { type: Boolean, default: false },
  registry: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["add-entry"]);

const timer = useHoursTimer();

const manualHours = ref(null);
const description = ref("");
const registrationType = ref("internal");

const internalId = ref(null);
const customerId = ref(null);
const projectId = ref(null);
const taskId = ref(null);
const taskPickList = ref([]);

const typePickOptions = computed(() => {
  const out = [];
  if (props.hasInternalCategories) {
    out.push({ label: strings.quickInternal, value: "internal" });
  }
  if (props.hasCustomers) {
    out.push({ label: strings.quickCustomer, value: "customer" });
  }
  if (props.hasProjects) {
    out.push({ label: strings.quickProject, value: "project" });
  }

  if (out.length === 0) {
    return [{ label: strings.quickInternal, value: "internal", disabled: true }];
  }

  return out;
});

const navDisabled = computed(
  () =>
    props.weekLocked ||
    (!props.hasInternalCategories && !props.hasCustomers && !props.hasProjects),
);

watch(
  () => [props.hasInternalCategories, props.hasCustomers, props.hasProjects],
  () => {
    if (props.hasInternalCategories) {
      registrationType.value = "internal";
      internalId.value = props.registry.internalCategories?.[0]?.id ?? null;
      return;
    }
    if (props.hasCustomers) {
      registrationType.value = "customer";
      customerId.value = props.registry.customers?.[0]?.id ?? null;
      return;
    }
    if (props.hasProjects) {
      registrationType.value = "project";
      projectId.value = props.registry.projects?.[0]?.id ?? null;
    }
    taskId.value = null;
  },
  { immediate: true },
);

watch(
  projectId,
  async (pid) => {
    taskId.value = null;
    if (!pid || registrationType.value !== "project") {
      taskPickList.value = [];
      return;
    }
    try {
      taskPickList.value = await fetchTasks(pid);
    } catch {
      taskPickList.value = [];
    }
  },
);

watch(registrationType, async (rt) => {
  taskPickList.value = [];
  taskId.value = null;
  if (rt === "internal") {
    internalId.value = props.registry.internalCategories?.[0]?.id ?? null;
    return;
  }
  if (rt === "customer") {
    customerId.value = props.registry.customers?.[0]?.id ?? null;
    return;
  }
  projectId.value = props.registry.projects?.[0]?.id ?? null;
  if (projectId.value) {
    taskPickList.value = await fetchTasks(projectId.value);
  }
});

function stopTimerIntoManual() {
  const hrs = timer.stopAndDrainHours();
  manualHours.value = (Number(manualHours.value) || 0) + hrs;
}

function submitEntry() {
  const fromTimer = timer.stopAndDrainHours();
  let dec = (Number(manualHours.value) || 0) + fromTimer;
  dec = Math.round(dec * 100) / 100;

  if (dec <= 0) return;

  const trimmed = description.value.trim();

  if (registrationType.value === "internal") {
    if (!internalId.value) return;
    emit("add-entry", {
      registration_type: "internal",
      internal_category_id: internalId.value,
      hours: dec,
      description: trimmed,
    });
    manualHours.value = null;
    description.value = "";
    return;
  }

  if (registrationType.value === "customer") {
    if (!customerId.value) return;
    emit("add-entry", {
      registration_type: "customer",
      customer_id: customerId.value,
      hours: dec,
      description: trimmed,
    });
    manualHours.value = null;
    description.value = "";
    return;
  }

  if (!projectId.value) return;

  if (taskId.value) {
    emit("add-entry", {
      registration_type: "task",
      hour_task_id: taskId.value,
      hours: dec,
      description: trimmed,
      _preset_project_ui: projectId.value,
    });
  } else {
    emit("add-entry", {
      registration_type: "project",
      hour_project_id: projectId.value,
      hours: dec,
      description: trimmed,
    });
  }

  manualHours.value = null;
  description.value = "";
}
</script>

<template>
  <div class="rounded-xl border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 p-4 flex flex-wrap gap-3 items-end">
    <div class="flex flex-wrap gap-3 items-end flex-grow">
      <div class="w-[9rem]">
        <BaseInputNumber
          v-model="manualHours"
          :label="strings.quickAddHours"
          suffix=" h"
          :use-grouping="false"
          mode="decimal"
          :min="0"
          :max-fraction-digits="2"
          :disabled="weekLocked"
          placeholder="0"
        />
      </div>

      <div class="w-[11rem] min-w-[10rem]">
        <BaseSelect
          v-model="registrationType"
          :label="strings.quickRegistrationType"
          option-label="label"
          option-value="value"
          :options="typePickOptions"
          :show-clear="false"
          :disabled="navDisabled"
        />
      </div>

      <div v-if="registrationType === 'internal'" class="w-[14rem] min-w-[12rem]">
        <BaseSelect
          v-model="internalId"
          :label="strings.quickInternal"
          option-label="name"
          option-value="id"
          :options="registry.internalCategories"
          :show-clear="false"
          :disabled="weekLocked || !hasInternalCategories"
        />
      </div>

      <div v-else-if="registrationType === 'customer'" class="w-[14rem] min-w-[12rem]">
        <BaseSelect
          v-model="customerId"
          :label="strings.quickCustomer"
          option-label="name"
          option-value="id"
          :options="registry.customers"
          :show-clear="false"
          :disabled="weekLocked || !hasCustomers"
        />
      </div>

      <div v-else class="flex flex-wrap gap-2 items-end">
        <div class="w-[14rem] min-w-[12rem]">
          <BaseSelect
            v-model="projectId"
            :label="strings.quickProject"
            option-label="name"
            option-value="id"
            :options="registry.projects"
            :show-clear="false"
            :disabled="weekLocked || !hasProjects"
          />
        </div>
        <div class="w-[14rem] min-w-[12rem]">
          <BaseSelect
            v-model="taskId"
            :label="strings.quickTask"
            option-label="title"
            option-value="id"
            :show-clear="true"
            :options="taskPickList"
            :disabled="weekLocked || !hasProjects || !projectId"
            placeholder="—"
          />
        </div>
      </div>

      <div class="min-w-[12rem] flex-grow max-w-[28rem]">
        <BaseInputText
          v-model="description"
          :label="strings.quickDescription"
          :disabled="weekLocked"
        />
      </div>
    </div>

    <div class="flex flex-wrap gap-2">
      <BaseButton
        v-if="!timer.running"
        variant="secondary"
        outlined
        size="small"
        :label="strings.startTimer"
        :disabled="weekLocked"
        @click="timer.start"
      />
      <BaseButton
        v-else
        variant="warning"
        size="small"
        :label="strings.stopTimer"
        :disabled="weekLocked"
        @click="stopTimerIntoManual"
      />
      <BaseButton
        variant="primary"
        size="small"
        :label="strings.addEntry"
        :disabled="weekLocked"
        @click="submitEntry"
      />
    </div>
  </div>
</template>
