<template>
  <div class="webmailing-list">
    <div v-if="emails.length === 0" class="alert alert-info">
      <i class="fas fa-info-circle"></i> Aucun email envoyé
    </div>
    <div v-else class="table-responsive">
      <table class="table table-hover">
        <thead class="table-light">
          <tr>
            <th>Destinataires</th>
            <th>Sujet</th>
            <th>Date d'envoi</th>
            <th>Statut</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="email in emails" :key="email.id">
            <td>
              <small>{{ email.recipients }}</small>
            </td>
            <td>
              <strong>{{ email.subject }}</strong>
            </td>
            <td>
              <small>{{ formatDate(email.sentDate) }}</small>
            </td>
            <td>
              <span :class="getStatusClass(email.status)">
                {{ getStatusLabel(email.status) }}
              </span>
            </td>
            <td>
              <button class="btn btn-sm btn-info" @click="viewEmail(email.id)">
                <i class="fas fa-eye"></i>
              </button>
              <button class="btn btn-sm btn-danger ms-2" @click="deleteEmail(email.id)">
                <i class="fas fa-trash"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

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

const emit = defineEmits(["view-email", "delete-email"]);

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

const getStatusClass = (status) => {
  const statusClasses = {
    sent: "badge bg-success",
    pending: "badge bg-warning",
    failed: "badge bg-danger",
    scheduled: "badge bg-info",
  };
  return statusClasses[status] || "badge bg-secondary";
};

const getStatusLabel = (status) => {
  const statusLabels = {
    sent: "Envoyé",
    pending: "En attente",
    failed: "Échoué",
    scheduled: "Programmé",
  };
  return statusLabels[status] || "Inconnu";
};

const viewEmail = (id) => {
  emit("view-email", id);
};

const deleteEmail = (id) => {
  emit("delete-email", id);
};
</script>

<style scoped>
.webmailing-list {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}
</style>
