<template>
  <fournisseur-template>
    

    <template #summary-cards>
      <div class="col-12 col-md-6 col-xl-3">
        <div class="card stat-card border-0">
          <div class="card-body py-3">
            <p class="text-sm text-secondary mb-1">Fournisseurs</p>
            <h5 class="mb-0">{{ totalFournisseurs }}</h5>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3">
        <div class="card stat-card border-0">
          <div class="card-body py-3">
            <p class="text-sm text-secondary mb-1">Actifs</p>
            <h5 class="mb-0 text-success">{{ activeFournisseurs }}</h5>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-xl-3">
        <div class="card stat-card border-0">
          <div class="card-body py-3">
            <p class="text-sm text-secondary mb-1">Inactifs</p>
            <h5 class="mb-0 text-danger">{{ inactiveFournisseurs }}</h5>
          </div>
        </div>
      </div>
    </template>

    <template #fournisseur-new-action>
      <add-button text="Ajouter" @click="goToFournisseur" />
    </template>
    <template #select-filter>
      <filter-table />
    </template>
    <template #fournisseur-other-action>
      <table-action />
    </template>
    <template #fournisseur-table>
      <fournisseur-table
        :data="fournisseurData"
        :loading="loadingData"
        @view="goToDetails"
        @delete="deleteFournisseur"
      />
    </template>
  </fournisseur-template>
</template>
<script setup>
import FournisseurTemplate from "@/components/templates/CRM/FournisseurTemplate.vue";
import FournisseurTable from "@/components/molecules/Tables/CRM/FournisseurTable.vue";
import addButton from "@/components/molecules/new-button/addButton.vue";
import FilterTable from "@/components/molecules/Tables/FilterTable.vue";
import TableAction from "@/components/molecules/Tables/TableAction.vue";
import { computed, defineProps, defineEmits } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const emit = defineEmits(["pushDetails", "deleteFournisseur"]);

const props = defineProps({
  fournisseurData: {
    type: Array,
    default: [],
  },
  loadingData: {
    type: Boolean,
    default: false,
  },
});

const totalFournisseurs = computed(() => props.fournisseurData?.length || 0);
const activeFournisseurs = computed(
  () => props.fournisseurData?.filter((f) => f?.is_active).length || 0
);
const inactiveFournisseurs = computed(
  () => totalFournisseurs.value - activeFournisseurs.value
);
const fournisseursWithEmail = computed(
  () => props.fournisseurData?.filter((f) => !!f?.email).length || 0
);

const goToFournisseur = () => {
  router.push({
    name: "Creation fournisseur",
  });
};

const goToDetails = (fournisseurId) => {
  router.push({
    name: "Fournisseur details",
    params: {
      id: fournisseurId,
    },
  });
};

const deleteFournisseur = (fournisseur) => {
  emit("deleteFournisseur", fournisseur);
};
</script>

<style scoped>
.stat-card {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
</style>
