<template>
  <q-form ref="formContatoRef" @submit="saveContato">
    <q-card flat class="cadastro-card q-pa-md">
      <div v-if="loading" class="flex flex-center q-pa-xl">
        <q-spinner color="violet-normal" size="40px" />
      </div>

      <div v-else class="row q-col-gutter-sm">
        <DefaultInput
          v-model="formContato.email"
          v-model:error="errorsContato.email"
          :rules="[inputRules.email]"
          :label="$t('common.terms.email')"
          class="col-12"
        />
        <DefaultInput
          v-model="formContato.website"
          v-model:error="errorsContato.website"
          :label="$t('parceiro.website')"
          class="col-12"
        />
        <DefaultInput
          v-model="formContato.phone"
          v-model:error="errorsContato.phone"
          :label="$t('common.terms.phone')"
          :mask="'(##) #####-####'"
          class="col-12"
        />
        <DefaultInput
          v-model="formContato.whatsapp"
          v-model:error="errorsContato.whatsapp"
          :label="$t('common.terms.whatsapp')"
          :mask="'(##) #####-####'"
          class="col-12"
        />
      </div>
    </q-card>

    <div class="row justify-end bg-violet-light q-pt-md">
      <q-btn
        unelevated
        class="btn-gradient"
        :label="$t('common.actions.save')"
        icon="mdi-check"
        type="submit"
        :loading="loadingContato"
        :disable="!hasUpdatedContato"
      />
    </div>
  </q-form>
</template>

<script setup>
import { ref, watch, useTemplateRef } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { useInputRules } from "src/composables/useInputRules";
import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { getPartnerAgreementContato, updatePartnerAgreement } from "src/api/partnerAgreement";

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

const props = defineProps({
  partnerId: { type: Number, required: true },
  active:    { type: Boolean, default: false },
});

const emit = defineEmits(["partner-saved"]);

const $q = useQuasar();
const { t } = useI18n();
const { inputRules } = useInputRules();

const formContatoRef = useTemplateRef("formContatoRef");
const loading = ref(false);
const loaded = ref(false);

const {
  form: formContato,
  getUpdatedFields: updatedContato,
  hasUpdatedFields: hasUpdatedContato,
  setUpdateFormAsOriginal,
} = useFormUpdateTracker({ email: "", phone: "", whatsapp: "", website: "" });

const {
  loading: loadingContato,
  validationErrors: errorsContato,
  execute: execContato,
} = useSubmitHandler({ formRef: formContatoRef });

const populate = (p) => {
  formContato.email    = p.email    ?? "";
  formContato.phone    = p.phone    ?? "";
  formContato.whatsapp = p.whatsapp ?? "";
  formContato.website  = p.website  ?? "";
  setUpdateFormAsOriginal();
};

const loadData = async () => {
  loading.value = true;
  try {
    const p = await getPartnerAgreementContato(props.partnerId);
    populate(p);
    loaded.value = true;
  } catch {
    $q.notify({ type: "negative", message: t("http.errors.failed") });
  } finally {
    loading.value = false;
  }
};

const saveContato = async () => {
  await execContato(async () => {
    const saved = await updatePartnerAgreement(props.partnerId, updatedContato.value);
    populate(saved);
    emit("partner-saved", saved);
    $q.notify({ type: "positive", message: t("http.success") });
  });
};

watch(() => props.active, (isActive) => {
  if (isActive && !loaded.value) loadData();
}, { immediate: true });
</script>

<style lang="scss" scoped>
.cadastro-card {
  border-radius: 12px;
  background: white;
}

.btn-gradient {
  background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 8px 16px;
}

.btn-gradient :deep(.q-icon) {
  color: white !important;
}
</style>
