<script setup>
import { onMounted, ref } from "vue";
import { useAuthStore } from "../../stores/auth.js";
import AdminImageUpload from "../../components/oem/OemImageUpload.vue";
import {
  loadOemAppBrandingApi,
  saveOemAppBrandingApi,
} from "../../api/oemAppBranding.js";

const auth = useAuthStore();

const form = ref({
  softwareName: "",
  logo: "",
  contactWechat: "",
  contactQq: "",
  wechatQr: "",
  qqQr: "",
});

const loading = ref(false);
const saving = ref(false);
const feedback = ref({ severity: "", message: "" });

function showMessage(severity, message) {
  feedback.value = { severity, message };
}

function onImageError(message) {
  showMessage("warn", message);
}

async function loadSettings() {
  loading.value = true;
  feedback.value = { severity: "", message: "" };
  const res = await loadOemAppBrandingApi(auth.token);
  loading.value = false;

  if (!res.ok) {
    showMessage("error", res.message || "加载失败");
    return;
  }

  form.value = { ...res.data.form };
}

async function saveSettings() {
  saving.value = true;
  feedback.value = { severity: "", message: "" };
  const res = await saveOemAppBrandingApi(auth.token, form.value);
  saving.value = false;

  if (!res.ok) {
    showMessage("error", res.message || "保存失败");
    return;
  }

  showMessage("success", res.message || "已保存");
  await loadSettings();
}

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

<template>
  <div class="admin-page admin-overview">
    <div class="admin-users__header">
      <div>
        <h1 class="admin-page__title gradient-text">软件配置</h1>
        <p class="text-sm text-text-muted">
          欢迎，{{ auth.currentUser?.username }}
        </p>
      </div>
      <Button label="保存配置" :loading="saving" :disabled="loading" @click="saveSettings" />
    </div>

    <Message
      v-if="feedback.message"
      :severity="feedback.severity"
      :closable="true"
      class="admin-users__message"
      @close="feedback.message = ''"
    >
      {{ feedback.message }}
    </Message>

    <div v-if="loading" class="py-12 text-center text-sm text-text-muted">加载中…</div>

    <form
      v-else
      class="admin-overview__form"
      @submit.prevent="saveSettings"
    >
      <div class="admin-overview__field">
        <label class="admin-overview__label">软件名称</label>
        <InputText
          v-model="form.softwareName"
          class="admin-overview__input"
          placeholder="请输入软件名称"
        />
      </div>

      <AdminImageUpload
        v-model="form.logo"
        label="软件 logo"
        @error="onImageError"
      />

      <div class="admin-overview__field">
        <label class="admin-overview__label">联系微信</label>
        <InputText
          v-model="form.contactWechat"
          class="admin-overview__input"
          placeholder="微信号或联系方式"
        />
      </div>

      <div class="admin-overview__field">
        <label class="admin-overview__label">联系 QQ</label>
        <InputText
          v-model="form.contactQq"
          class="admin-overview__input"
          placeholder="QQ 号或联系方式"
        />
      </div>

      <AdminImageUpload
        v-model="form.wechatQr"
        label="微信二维码"
        @error="onImageError"
      />

      <AdminImageUpload
        v-model="form.qqQr"
        label="QQ 二维码"
        @error="onImageError"
      />
    </form>
  </div>
</template>
