<template>
  <PageLayout title="General Settings" description="General settings for your Lofty IDX plugin.">
    <div class="lofty-content">
      <div class="setting-block">
        <div class="block-title">Email Logo</div>
        <div class="block-desc">This logo will be used across emails sent from your website, such as Home Valuation and Property Alert.</div>
        <ImgUpload v-model="emailLogo" :loading="loading" tip="PNG / JPG, up to 2MB" :max-size="2" fit="contain" />
        <div class="save-tip">Format: PNG / JPG · Max size: 2MB</div>
        <button
          class="btn-save block-save"
          :class="{ disable: loading || saving }"
          :disabled="loading || saving"
          @click.prevent="onSave"
        >{{ saving ? 'Saving..' : 'Save' }}</button>
      </div>
    </div>
  </PageLayout>
</template>

<script setup>
import PageLayout from "@/admin/common/PageLayout.vue";
import ImgUpload from "@/components/upload/imgUpload.vue";
import http from "@/api/index.js";
import { showToast } from "@/admin/ui/constant.js";

const emailLogo = ref('');
const saving = ref(false);
const loading = ref(false);

getEmailLogo();

async function getEmailLogo() {
  loading.value = true;
  try {
    const res = await http.get('/save-data/email-logo');
    emailLogo.value = res.data || '';
  } finally {
    loading.value = false;
  }
}

async function onSave() {
  if (loading.value || saving.value) {
    return;
  }
  saving.value = true;
  const res = await http.post('/save-data/email-logo', { data: { logoUrl: emailLogo.value } });
  saving.value = false;
  if (res.data) {
    showToast("Saved Successfully");
  } else {
    showToast("Save failed. Please try again.", { duration: 3000, err: true });
  }
}
</script>

<style scoped lang="scss">
.lofty-content {
  padding: 22px 20px 20px;
}
.setting-block {
  .block-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  .block-desc {
    font-size: 12px;
    color: $gray-700;
    margin-bottom: 12px;
  }
  .save-tip {
    margin-top: 16px;
    font-size: 12px;
    color: $gray-700;
  }
  .block-save {
    margin-top: 10px;
    padding: 7px 25px;
    background-color: $color-theme;
    color: $white;
    border: none;
    border-radius: $radius-small;
    outline: none;
    cursor: pointer;
    &:hover {
      background-color: $color-theme-darker-10;
    }
    &.disable {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}
</style>
