<template>
  <div>
    <h6 class="mb-3">Suivi de la Facture</h6>
    <div class="timeline-scrollable">
      <div class="timeline timeline-one-side">
        <div
          v-for="(item, index) in history"
          :key="index"
          class="timeline-block mb-3"
        >
          <span class="timeline-step">
            <i :class="getStatusIcon(item.new_status)"></i>
          </span>
          <div class="timeline-content">
            <h6 class="text-dark text-sm font-weight-bold mb-0">
              {{ getStatusLabel(item.new_status) }}
            </h6>
            <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">
              {{ formatDate(item.changed_at) }}
              <span v-if="item.changed_by">par {{ item.changed_by }}</span>
            </p>
            <p v-if="item.comment" class="text-sm mt-2 mb-0">
              {{ item.comment }}
            </p>
          </div>
        </div>
        <div v-if="history.length === 0" class="text-sm text-secondary">
          Aucun historique disponible.
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const formatDate = (dateString) => {
  if (!dateString) return "-";
  const date = new Date(dateString);
  const options = {
    day: "numeric",
    month: "short",
    hour: "2-digit",
    minute: "2-digit",
  };
  return date.toLocaleDateString("fr-FR", options);
};

const getStatusIcon = (status) => {
  const map = {
    brouillon: "ni ni-bell-55 text-secondary",
    emise: "ni ni-send text-info",
    envoyee: "ni ni-email-83 text-info",
    partiellement_payee: "ni ni-money-coins text-warning",
    payee: "ni ni-check-bold text-success text-gradient",
    echue: "ni ni-time-alarm text-danger",
    annulee: "ni ni-fat-remove text-danger text-gradient",
    avoir: "ni ni-archive-2 text-dark",
  };
  return map[status] || "ni ni-bell-55 text-secondary";
};

const getStatusLabel = (status) => {
  const labels = {
    brouillon: "Facture créée (Brouillon)",
    emise: "Facture émise",
    envoyee: "Facture envoyée",
    partiellement_payee: "Partiellement payée",
    payee: "Facture payée",
    echue: "Facture échue",
    annulee: "Facture annulée",
    avoir: "Avoir généré",
  };
  return labels[status] || status;
};
</script>

<style scoped>
.timeline-scrollable {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

.timeline-scrollable::-webkit-scrollbar {
  width: 6px;
}

.timeline-scrollable::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.timeline-scrollable::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.timeline-scrollable::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
