<template>
  <div class="wrapper" v-if="pageStatus === 'draft'">
    <div class="test-wrapper">
      <k-button
        @click="send($event, true)"
        style="width: max-content"
        variant="filled"
        help="test"
        :theme="testBtnState.theme"
        :icon="testBtnState.icon"
        >{{ testBtnState.text }}</k-button
      >
      <footer class="k-field-footer">
        <div class="k-help k-field-help k-text">
          <p>
            Envoie seulement aux
            <a href="/panel/users" title="voir la liste">éditeurs</a>.
          </p>
        </div>
      </footer>
      <k-box
        v-if="testBtnState.error"
        theme="error"
        style="margin-top: var(--spacing-1)"
        >{{ testBtnState.error }}</k-box
      >
    </div>
    <div class="send-wrapper">
      <k-button
        @click="send($event)"
        variant="filled"
        :theme="sendBtnState.theme"
        :icon="sendBtnState.icon"
        >{{ sendBtnState.text }}</k-button
      >
      <k-box
        v-if="sendBtnState.error"
        theme="error"
        style="margin-top: var(--spacing-1)"
        >{{ sendBtnState.error }}</k-box
      >
      <footer class="k-field-footer">
        <div class="k-help k-field-help k-text">
          <strong>⚠ Envoie à tous les abonnés.</strong>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const { pageUri } = defineProps({
  pageUri: String,
  pageStatus: String,
});

const testBtnState = ref({
  icon: "plane",
  text: "Tester",
  theme: "blue",
  error: null,
});

const sendBtnState = ref({
  icon: "plane",
  text: "Envoyer",
  theme: "aqua",
  error: null,
});

async function send(event, isTest = false) {
  event.preventDefault();

  const currentBtnState = isTest ? testBtnState : sendBtnState;

  currentBtnState.value = {
    theme: "orange",
    text: "En cours…",
    icon: "loader",
    error: null,
  };

  const headers = {
    method: "POST",
    body: JSON.stringify({
      pageUri,
      isTest,
    }),
  };

  try {
    const response = await fetch("/send-newsletter.json", headers);
    const data = await response.json();

    if (data.status === "success") {
      currentBtnState.value = {
        theme: "green",
        icon: "check",
        text: isTest ? "Test envoyé" : "Envoi réussi",
        error: null,
      };

      if (!isTest) {
        setTimeout(() => {
          location.href = location.href;
        }, 2000);
      } else {
        currentBtnState.value = {
          icon: "plane",
          text: "Re-tester",
          theme: "blue",
          error: null,
        };
      }
    } else {
      throw new Error(data.message || "Erreur inconnue");
    }
  } catch (error) {
    currentBtnState.value = {
      theme: "red",
      icon: "alert",
      text: isTest ? "Échec du test" : "Erreur",
      error: error.message,
    };
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
  gap: 10vw;
}

.k-field-footer {
  width: 15rem;
}

@media screen and (max-width: 800px) {
  .k-field-footer {
    width: 9rem;
  }
}
@media screen and (min-width: 533px) {
  button {
    margin-top: 2.15rem;
  }
}
</style>
