<template>
  <div class="card mt-4">
    <div class="table-responsive">
      <table id="client-group-list" class="table table-flush">
        <thead class="thead-light">
          <tr>
            <th>Nom</th>
            <th>Description</th>
            <th>Date de création</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="group in data" :key="group.id">
            <!-- Name -->
            <td>
              <div class="d-flex align-items-center">
                <soft-checkbox class="me-2" />
                <p class="text-sm font-weight-bold ms-2 mb-0">
                  {{ group.name }}
                </p>
              </div>
            </td>

            <!-- Description -->
            <td class="text-sm">
              <span class="text-secondary">
                {{ group.description || "Aucune description" }}
              </span>
            </td>

            <!-- Created At -->
            <td class="text-sm font-weight-bold">
              <span class="my-2 text-xs">{{
                formatDate(group.created_at)
              }}</span>
            </td>

            <!-- Actions -->
            <td class="text-xs font-weight-bold">
              <div class="d-flex align-items-center">
                <button
                  class="btn btn-link text-secondary mb-0 px-2"
                  :data-id="group.id"
                  data-action="view"
                  title="Voir le groupe"
                >
                  <i class="fas fa-eye text-xs" aria-hidden="true"></i>
                </button>
                <button
                  class="btn btn-link text-secondary mb-0 px-2"
                  :data-id="group.id"
                  data-action="edit"
                  title="Modifier le groupe"
                >
                  <i class="fas fa-edit text-xs" aria-hidden="true"></i>
                </button>
                <button
                  class="btn btn-link text-danger mb-0 px-2"
                  :data-id="group.id"
                  data-action="delete"
                  title="Supprimer le groupe"
                >
                  <i class="fas fa-trash text-xs" aria-hidden="true"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  onUnmounted,
  defineProps,
  defineEmits,
} from "vue";
import { DataTable } from "simple-datatables";
import SoftCheckbox from "@/components/SoftCheckbox.vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

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

const dataTableInstance = ref(null);

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

const initializeDataTable = () => {
  const table = document.getElementById("client-group-list");
  if (!table) return;

  if (dataTableInstance.value) {
    dataTableInstance.value.destroy();
  }

  dataTableInstance.value = new DataTable(table, {
    searchable: true,
    fixedHeight: false,
    perPage: 10,
  });

  // Event delegation for action buttons
  table.addEventListener("click", (event) => {
    const btn = event.target.closest("button");
    if (!btn) return;

    const id = btn.getAttribute("data-id");
    const action = btn.getAttribute("data-action");

    if (id && action) {
      if (action === "view") {
        emit("view", parseInt(id));
      } else if (action === "edit") {
        emit("edit", parseInt(id));
      } else if (action === "delete") {
        emit("delete", parseInt(id));
      }
    }
  });
};

onMounted(() => {
  if (props.data && props.data.length > 0) {
    initializeDataTable();
  }
});

watch(
  () => props.data,
  (newData) => {
    if (newData && newData.length > 0) {
      setTimeout(() => {
        initializeDataTable();
      }, 100);
    }
  }
);

onUnmounted(() => {
  if (dataTableInstance.value) {
    dataTableInstance.value.destroy();
  }
});
</script>
