<template>
  <div v-if="loading" class="text-center py-5">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div v-else-if="error" class="text-center py-5 text-danger">
    {{ error }}
  </div>
  <div v-else-if="clientGroup" class="container-fluid py-4">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <div class="d-flex justify-content-between align-items-center">
              <h6>Détails du groupe</h6>
              <div>
                <soft-button
                  color="secondary"
                  variant="outline"
                  class="me-2"
                  @click="goBack"
                >
                  Retour
                </soft-button>
                <soft-button
                  color="info"
                  variant="gradient"
                  @click="handleEdit"
                >
                  Modifier
                </soft-button>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-12 mb-3">
                <h6 class="text-sm text-uppercase text-muted">Nom</h6>
                <p class="text-lg font-weight-bold">{{ clientGroup.name }}</p>
              </div>
              <div class="col-md-12 mb-3">
                <h6 class="text-sm text-uppercase text-muted">Description</h6>
                <p class="text-sm">
                  {{ clientGroup.description || "Aucune description" }}
                </p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-sm text-uppercase text-muted">
                  Date de création
                </h6>
                <p class="text-sm">{{ formatDate(clientGroup.created_at) }}</p>
              </div>
              <div class="col-md-6 mb-3">
                <h6 class="text-sm text-uppercase text-muted">
                  Dernière modification
                </h6>
                <p class="text-sm">{{ formatDate(clientGroup.updated_at) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";
import { useRouter } from "vue-router";
import { useClientGroupStore } from "@/stores/clientGroupStore";
import SoftButton from "@/components/SoftButton.vue";

const props = defineProps({
  groupId: {
    type: [String, Number],
    required: true,
  },
});

const router = useRouter();
const clientGroupStore = useClientGroupStore();
const clientGroup = ref(null);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
  loading.value = true;
  try {
    const fetchedGroup = await clientGroupStore.fetchClientGroup(props.groupId);
    clientGroup.value = fetchedGroup;
  } catch (e) {
    error.value = "Impossible de charger le groupe.";
    console.error(e);
  } finally {
    loading.value = false;
  }
});

const goBack = () => {
  router.back();
};

const handleEdit = () => {
  router.push(`/clients/groups/${props.groupId}/edit`);
};

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