<template>
  <div>
    <DefaultHeaderPage title="Integração Asaas" :show-filter-icon="false" />

    <div class="q-pa-md">
      <q-card flat bordered class="q-pa-md" style="max-width: 720px">
        <div class="row items-center no-wrap q-mb-xs">
          <q-icon name="mdi-cash-multiple" size="sm" color="secondary" class="q-mr-sm" />
          <div class="text-subtitle1 text-weight-medium">Asaas — Conta da Unidade</div>
          <q-space />
          <q-badge
            :color="account.asaas_configured ? 'positive' : 'grey-6'"
            :label="account.asaas_configured ? 'Configurada' : 'Não configurada'"
            class="q-px-sm q-py-xs"
          />
        </div>

        <div class="text-body2 text-grey-7 q-mb-md">
          Informe a chave da API da conta Asaas desta unidade para emitir cobranças
          dos alunos. Sem uma chave configurada, as cobranças continuam disponíveis
          para controle e baixa manual.
        </div>

        <DefaultForm ref="formRef" @submit.prevent="onSave">
          <DefaultPasswordInput
            v-model="apiKey"
            :error="!!validationErrors.asaas_api_key"
            :error-message="validationErrors.asaas_api_key"
            :label="account.asaas_configured ? 'Nova chave (deixe em branco para manter)' : 'Chave da API do Asaas'"
            :placeholder="account.asaas_api_key_masked || ''"
            autocomplete="off"
          />

          <div class="row justify-end items-center q-mt-md q-gutter-sm">
            <q-btn
              v-if="canEdit && account.asaas_configured"
              outline
              color="negative"
              label="Remover chave"
              no-caps
              :disable="loading"
              @click="onRemove"
            />
            <q-btn
              v-if="canEdit"
              color="secondary"
              label="Salvar"
              type="submit"
              no-caps
              unelevated
              :disable="!apiKey"
              :loading="loading"
            />
          </div>
        </DefaultForm>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useSubmitHandler } from "src/composables/useSubmitHandler";
import { getPaymentAccountMe, savePaymentAccountMe } from "src/api/unit_payment_account";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
import { permissionStore } from "src/stores/permission";

const permissions = permissionStore();
const canEdit = computed(() => permissions.getAccess("franchisee_financial", "edit"));
const formRef = ref(null);
const apiKey = ref("");
const account = ref({ asaas_configured: false, asaas_api_key_masked: null });
const { loading, validationErrors, execute } = useSubmitHandler({ formRef });

const fetchData = async () => {
  account.value = (await getPaymentAccountMe()) ?? account.value;
};

const persist = async (value) => {
  await execute(async () => {
    account.value = await savePaymentAccountMe({ asaas_api_key: value });
    apiKey.value = "";
  });
};

const onSave = () => apiKey.value && persist(apiKey.value);
const onRemove = () => persist("");

onMounted(fetchData);
</script>
