<template>
  <div class="container-fluid py-4">
    <div class="d-sm-flex justify-content-between mb-4">
      <div>
        <h5 class="mb-0">Réceptions de Marchandises</h5>
        <p class="text-sm mb-0">
          Gestion des réceptions de marchandises en provenance des fournisseurs.
        </p>
      </div>
      <div class="mt-sm-0 mt-3">
        <soft-button color="info" variant="gradient" @click="handleCreate">
          <i class="fas fa-plus me-2"></i> Nouvelle Réception
        </soft-button>
      </div>
    </div>

    <!-- Filters -->
    <div class="row mb-4">
      <div class="col-md-3">
        <div class="form-group">
          <input
            v-model="searchQuery"
            type="text"
            class="form-control"
            placeholder="Rechercher..."
            @input="handleSearch"
          />
        </div>
      </div>
      <div class="col-md-3">
        <select
          v-model="statusFilter"
          class="form-control"
          @change="handleFilter"
        >
          <option value="">Tous les statuts</option>
          <option value="draft">Brouillon</option>
          <option value="posted">Validée</option>
        </select>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <goods-receipt-table
          :data="receipts"
          :loading="loading"
          @view="handleView"
          @edit="handleEdit"
          @delete="handleDelete"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import GoodsReceiptTable from "@/components/molecules/Tables/Stock/GoodsReceiptTable.vue";
import SoftButton from "@/components/SoftButton.vue";
import { useReceiptStore } from "@/stores/receiptStore";

const router = useRouter();
const receiptStore = useReceiptStore();
const { receipts, loading } = storeToRefs(receiptStore);

const searchQuery = ref("");
const statusFilter = ref("");

let searchTimeout = null;

const handleCreate = () => {
  router.push("/stock/receptions/new");
};

const handleView = (id) => {
  router.push(`/stock/receptions/${id}`);
};

const handleEdit = (id) => {
  router.push(`/stock/receptions/${id}/edit`);
};

const handleDelete = async (id) => {
  if (
    confirm(
      "Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?"
    )
  ) {
    try {
      await receiptStore.deleteReceipt(id);
    } catch (error) {
      console.error("Failed to delete goods receipt", error);
    }
  }
};

const handleSearch = () => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    loadGoodsReceipts();
  }, 300);
};

const handleFilter = () => {
  loadGoodsReceipts();
};

const loadGoodsReceipts = () => {
  const params = {
    search: searchQuery.value || undefined,
    status: statusFilter.value || undefined,
  };
  receiptStore.fetchReceipts(params);
};

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