<template>
  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >
    <div class="py-4 container-fluid">
      <!-- Header -->
      <div class="row mb-4">
        <div class="col-12">
          <div class="d-flex align-items-center justify-content-between">
            <div>
              <h4 class="mb-0 font-weight-bolder">Statistiques stock</h4>
              <p class="mb-0 text-sm text-secondary">
                Analyse des stocks, rotations, et mouvements d'entrepôt
              </p>
            </div>
            <button
              class="btn btn-sm btn-outline-secondary mb-0"
              :disabled="store.isLoading"
              @click="store.fetchStatistics()"
            >
              <i class="fas fa-sync-alt me-1" />
              Actualiser
            </button>
          </div>
        </div>
      </div>

      <!-- Loading -->
      <div v-if="store.isLoading" class="row">
        <div class="col-12 text-center py-6">
          <div class="spinner-border text-secondary" role="status">
            <span class="visually-hidden">Chargement…</span>
          </div>
          <p class="mt-3 text-secondary">Chargement des statistiques…</p>
        </div>
      </div>

      <!-- Error -->
      <div v-else-if="store.hasError" class="row">
        <div class="col-12">
          <div class="alert alert-danger" role="alert">
            <i class="fas fa-exclamation-triangle me-2" />
            {{ store.getError }}
          </div>
        </div>
      </div>

      <!-- Dashboard -->
      <stock-stats-dashboard
        v-else-if="store.hasData"
        :stats="store.statistics"
      />

      <app-footer />
    </div>
  </main>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { useStockStatisticsStore } from "@/stores/stockStatisticsStore";
import StockStatsDashboard from "@/components/Organism/Stock/StockStatsDashboard.vue";
import AppFooter from "@/examples/Footer.vue";

export default defineComponent({
  name: "StatistiquesStock",
  components: {
    StockStatsDashboard,
    AppFooter,
  },
  setup() {
    const store = useStockStatisticsStore();

    onMounted(() => {
      store.fetchStatistics();
    });

    return { store };
  },
});
</script>
