<template>
  <div>
    <DefaultHeaderPage />

    <div class="q-pa-md column q-gutter-lg">

      <q-card flat bordered>
        <q-card-section class="q-pb-none">
          <div class="text-h6 text-weight-medium">
            {{ $t("company_settings.section.hero") }}
          </div>
        </q-card-section>
        <q-card-section>
          <q-form ref="heroFormRef" @submit="saveSettings">
            <div class="row q-col-gutter-md">

              <div class="col-12">
                <div class="text-subtitle2 q-mb-sm">{{ $t("company_settings.hero.background_image") }}</div>
                <div class="row items-center q-col-gutter-sm">
                  <div class="col-auto">
                    <q-btn
                      outline
                      dense
                      color="primary"
                      icon="mdi-upload"
                      padding="8px 10px"
                      :loading="uploadingImage"
                      :title="$t('company_settings.hero.upload_image')"
                      @click="triggerImageUpload"
                    />
                    <input
                      ref="imageInputRef"
                      type="file"
                      accept="image/*"
                      class="hidden"
                      @change="onImageSelected"
                    />
                  </div>
                  <div v-if="settings.hero_background_url" class="col-auto">
                    <q-btn
                      flat
                      dense
                      color="negative"
                      icon="mdi-delete"
                      padding="8px 10px"
                      :loading="removingImage"
                      :title="$t('company_settings.hero.remove_image')"
                      @click="onRemoveImage"
                    />
                  </div>
                  <div v-if="settings.hero_background_url" class="col-12">
                    <img
                      :src="settings.hero_background_url"
                      style="max-height: 160px; border-radius: 8px; object-fit: cover"
                      class="q-mt-xs"
                    />
                  </div>
                </div>
              </div>

              <DefaultInput
                v-model="form.hero_title"
                v-model:error="validationErrors.hero_title"
                :label="$t('company_settings.hero.title')"
                class="col-12"
              />

              <DefaultInput
                v-model="form.hero_subtitle"
                v-model:error="validationErrors.hero_subtitle"
                :label="$t('company_settings.hero.subtitle')"
                type="textarea"
                :rows="3"
                class="col-12"
              />

              <div class="col-12">
                <div class="text-subtitle2 q-mb-sm">{{ $t("company_settings.section.stats") }}</div>
              </div>

              <template v-for="n in 3" :key="n">
                <DefaultInput
                  v-model="form[`stat${n}_value`]"
                  v-model:error="validationErrors[`stat${n}_value`]"
                  :label="$t('company_settings.stat.value', { n })"
                  class="col-md-3 col-6"
                />
                <DefaultInput
                  v-model="form[`stat${n}_label`]"
                  v-model:error="validationErrors[`stat${n}_label`]"
                  :label="$t('company_settings.stat.label', { n })"
                  class="col-md-3 col-6"
                />
              </template>

              <div class="col-12">
                <div class="text-subtitle2 q-mb-sm">{{ $t("company_settings.section.contacts") }}</div>
              </div>

              <DefaultInput
                v-model="form.contact_email"
                v-model:error="validationErrors.contact_email"
                :label="$t('company_settings.contact.email')"
                type="email"
                class="col-md-4 col-12"
              />
              <DefaultInput
                v-model="form.contact_phone"
                v-model:error="validationErrors.contact_phone"
                :label="$t('company_settings.contact.phone')"
                class="col-md-4 col-12"
              />
              <DefaultInput
                v-model="form.contact_location"
                v-model:error="validationErrors.contact_location"
                :label="$t('company_settings.contact.location')"
                :placeholder="$t('company_settings.contact.location_placeholder')"
                class="col-md-4 col-12"
              />

              <div class="col-12 flex justify-end">
                <q-btn
                  dense
                  color="primary"
                  icon="mdi-content-save"
                  type="submit"
                  padding="8px 10px"
                  :loading="savingSettings"
                  :disable="!hasUpdatedFields"
                  :title="$t('common.actions.save')"
                />
              </div>
            </div>
          </q-form>
        </q-card-section>
      </q-card>

      <q-card flat bordered>
        <q-card-section class="q-pb-none">
          <div class="row items-center">
            <div class="text-h6 text-weight-medium col">
              {{ $t("company_settings.section.benefits") }}
            </div>
            <q-btn
              dense
              color="primary"
              icon="mdi-plus"
              padding="8px 8px"
              @click="onAddBenefit"
            />
          </div>
        </q-card-section>
        <q-card-section>
          <div v-if="benefitsLoading" class="flex flex-center q-py-lg">
            <q-spinner color="primary" size="md" />
          </div>

          <template v-else>
            <div class="row items-center q-px-sm q-py-xs text-caption text-grey-7 text-weight-medium q-mb-xs">
              <div style="width: 28px" />
              <div style="width: 52px">{{ $t("company_settings.benefit.icon") }}</div>
              <div class="col">{{ $t("company_settings.benefit.title") }}</div>
              <div class="col-5">{{ $t("company_settings.benefit.description") }}</div>
              <div style="width: 84px">{{ $t("common.terms.actions") }}</div>
            </div>

            <draggable
              v-model="benefits"
              item-key="id"
              handle=".drag-handle"
              :animation="180"
              ghost-class="benefit-row--ghost"
              @end="onDragEnd"
            >
              <template #item="{ element }">
                <div class="benefit-row row items-center q-px-sm q-mb-xs rounded-borders">
                  <div class="drag-handle q-mr-xs">
                    <q-icon name="mdi-drag-vertical" size="sm" color="grey-4"/>
                  </div>
                  <div style="width: 52px">
                    <q-icon :name="element.icon" size="sm" color="primary" />
                  </div>
                  <div class="col text-body2">{{ element.title }}</div>
                  <div class="col-5 text-caption text-grey-7">{{ element.description }}</div>
                  <div style="width: 84px" class="row no-wrap q-gutter-xs">
                    <q-btn
                      outline
                      style="width: 36px"
                      @click="onEditBenefit(element)"
                    >
                      <q-icon name="mdi-file-edit-outline" />
                    </q-btn>
                    <q-btn
                      outline
                      style="width: 36px"
                      @click="onDeleteBenefit(element.id)"
                    >
                      <q-icon name="mdi-trash-can-outline" />
                    </q-btn>
                  </div>
                </div>
              </template>
            </draggable>

            <div v-if="!benefits.length" class="text-center text-grey q-py-md text-body2">
              {{ $t("http.errors.no_records_found") }}
            </div>
          </template>
        </q-card-section>
      </q-card>

    </div>
  </div>
</template>

<script setup>
import { ref, useTemplateRef, onMounted, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import draggable from "vuedraggable";
import {
  getCompanySettings,
  updateCompanySettings,
  uploadCompanyHeroImage,
  removeCompanyHeroImage,
  getCompanyBenefits,
  deleteCompanyBenefit,
  reorderCompanyBenefits,
} from "src/api/companySettings";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
import { useSubmitHandler } from "src/composables/useSubmitHandler";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

const AddEditBenefitDialog = defineAsyncComponent(
  () => import("./components/AddEditBenefitDialog.vue"),
);

const $q = useQuasar();
const { t } = useI18n();
const heroFormRef = useTemplateRef("heroFormRef");
const imageInputRef = useTemplateRef("imageInputRef");

const settings = ref({});
const uploadingImage = ref(false);
const removingImage = ref(false);
const benefits = ref([]);
const benefitsLoading = ref(true);

const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
  hero_title: "",
  hero_subtitle: "",
  stat1_value: "",
  stat1_label: "",
  stat2_value: "",
  stat2_label: "",
  stat3_value: "",
  stat3_label: "",
  contact_email: "",
  contact_phone: "",
  contact_location: "",
});

const { loading: savingSettings, validationErrors, execute: submitForm } = useSubmitHandler({
  formRef: heroFormRef,
});


const loadSettings = async () => {
  try {
    const data = await getCompanySettings();
    if (data) {
      settings.value = data;
      Object.keys(form).forEach((key) => {
        if (key in data) form[key] = data[key] ?? "";
      });
    }
  } catch {
    $q.notify({ type: "negative", message: t("common.ui.messages.error") });
  }
};

const saveSettings = async () => {
  await submitForm(async () => {
    const updated = await updateCompanySettings(getUpdatedFields.value);
    settings.value = { ...settings.value, ...updated };
    $q.notify({ type: "positive", message: t("common.ui.messages.saved") });
  });
};

const triggerImageUpload = () => {
  imageInputRef.value.click();
};

const onImageSelected = async (event) => {
  const file = event.target.files?.[0];
  if (!file) return;
  uploadingImage.value = true;
  try {
    const updated = await uploadCompanyHeroImage(file);
    settings.value = { ...settings.value, ...updated };
    $q.notify({ type: "positive", message: t("common.ui.messages.saved") });
  } catch {
    $q.notify({ type: "negative", message: t("common.ui.messages.error") });
  } finally {
    uploadingImage.value = false;
    event.target.value = "";
  }
};

const onRemoveImage = async () => {
  removingImage.value = true;
  try {
    const updated = await removeCompanyHeroImage();
    settings.value = { ...settings.value, ...updated };
    $q.notify({ type: "positive", message: t("common.ui.messages.saved") });
  } catch {
    $q.notify({ type: "negative", message: t("common.ui.messages.error") });
  } finally {
    removingImage.value = false;
  }
};

const loadBenefits = async () => {
  benefitsLoading.value = true;
  try {
    benefits.value = await getCompanyBenefits() ?? [];
  } catch {
    $q.notify({ type: "negative", message: t("common.ui.messages.error") });
  } finally {
    benefitsLoading.value = false;
  }
};

const onDragEnd = async () => {
  const reordered = benefits.value.map((b, index) => ({ id: b.id, order: index + 1 }));
  try {
    await reorderCompanyBenefits(reordered);
  } catch {
    $q.notify({ type: "negative", message: t("common.ui.messages.error") });
    await loadBenefits();
  }
};

const onAddBenefit = () => {
  $q.dialog({
    component: AddEditBenefitDialog,
    componentProps: {
      title: () => `${t("common.actions.add")} ${t("company_settings.benefit.title_singular")}`,
    },
  }).onOk(() => loadBenefits());
};

const onEditBenefit = (row) => {
  $q.dialog({
    component: AddEditBenefitDialog,
    componentProps: {
      benefit: row,
      title: () => `${t("common.actions.edit")} ${t("company_settings.benefit.title_singular")}`,
    },
  }).onOk(() => loadBenefits());
};

const onDeleteBenefit = (id) => {
  $q.dialog({
    title: t("common.ui.messages.confirm_action"),
    message: t("common.ui.messages.are_you_sure_delete"),
    ok: { color: "negative", label: t("common.actions.delete") },
    cancel: { color: "primary", outline: true, label: t("common.actions.cancel") },
  }).onOk(async () => {
    try {
      await deleteCompanyBenefit(id);
      await loadBenefits();
    } catch {
      $q.notify({ type: "negative", message: t("common.ui.messages.error") });
    }
  });
};

onMounted(() => {
  loadSettings();
  loadBenefits();
});
</script>

<style scoped>
.benefit-row {
  border: 1px solid rgba(0, 0, 0, 0.12);
  min-height: 52px;
  transition: background-color 0.15s;
}

.benefit-row:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.benefit-row--ghost {
  opacity: 0.4;
  background: var(--q-primary);
}

.drag-handle {
  touch-action: none;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:hover .q-icon {
  color: var(--q-primary) !important;
}
</style>
