<template>
  <div>
    <k-info-field :label="infoLabel" :text="infoText" theme="info" />

    <k-button
      style="margin-top: 1rem"
      :theme="theme"
      variant="dimmed"
      :icon="icon"
      title="Synchroniser le cache des produits Shopify"
      @click="refreshCache()"
      :disabled="isProcessing"
    >
      {{ text }}
    </k-button>
  </div>
</template>

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

const props = defineProps({
  products: {
    type: Array,
    default: () => [],
  },
});

const text = ref("Synchroniser depuis Shopify");
const icon = ref("refresh");
const theme = ref("aqua-icon");
const isProcessing = ref(false);
const currentProducts = ref([]);

onMounted(() => {
  currentProducts.value = props.products || [];
});

const infoLabel = computed(() => {
  const count = currentProducts.value.length;
  return `${count} produit${count > 1 ? "s" : ""} Shopify en cache`;
});

const infoText = computed(() => {
  if (currentProducts.value.length === 0) {
    return "Aucun produit trouvé. Cliquez sur 'Rafraîchir Shopify' pour récupérer les produits.";
  }

  return currentProducts.value.map((p) => `• ${p.title}<br/>`).join("\n");
});

async function refreshCache() {
  isProcessing.value = true;
  icon.value = "loader";
  theme.value = "orange-icon";
  text.value = "En cours…";

  try {
    const res = await fetch("/shopify/refresh-cache.json", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const json = await res.json();

    if (json.status === "error") {
      throw new Error(json.message);
    }

    currentProducts.value = json.products || [];
    text.value = `Terminé - ${json.count} produit${json.count > 1 ? "s" : ""}`;
    icon.value = "check";
    theme.value = "green-icon";

    setTimeout(() => {
      text.value = "Synchroniser depuis Shopify";
      icon.value = "refresh";
      theme.value = "aqua-icon";
      isProcessing.value = false;
    }, 3000);
  } catch (error) {
    console.error(error);
    text.value = "Erreur";
    icon.value = "alert";
    theme.value = "red-icon";

    setTimeout(() => {
      text.value = "Synchroniser depuis Shopify";
      icon.value = "refresh";
      theme.value = "aqua-icon";
      isProcessing.value = false;
    }, 3000);
  }
}
</script>
