<template>
  <base-route-card :route="reservation" class="mb-5 yesrat">
    <template v-slot:origin-name>
      {{ reservation.origin_city.name }}
    </template>
    <template v-slot:destination-name>
      {{ reservation.destination_city.name }}
    </template>

    <template v-slot:main>
      <div class="flex justify-between">
        <div class="mr-12">
          <div class="text-primary text-2xl font-medium">
            {{ reservation.distance }} km
          </div>
          <div>Distance</div>
        </div>
        <div>
          <div class="text-primary font-medium">
            <price :pricing="reservation.pricing" />
          </div>
        </div>
      </div>
    </template>
    <template v-slot:footer>

 <div class="rating-section align-item-center mt-5 flex justify-center" style="display:none">
    <!-- Rating Display -->
    <div class="rating-display" @click="showRatingsPopup(reservation)">
      <!-- Display full star icons -->
      <span
        v-for="n in Math.floor(reservation.average_rating)"
        :key="'full-' + n"
        class="star-icon filled"
      >
        ★
      </span>

      <!-- Display half star icon if there's a fractional part -->
      <span v-if="reservation.average_rating % 1 >= 0.5" class="star-icon half-filled">
        ★
      </span>

      <!-- Display empty star icons -->
      <span
        v-for="n in 5 - Math.ceil(reservation.average_rating)"
        :key="'empty-' + n"
        class="star-icon"
      >
        ★
      </span>
       
      <span style="font-size:12px"> ({{ reservation.average_rating }})</span>
      <span style="font-size:12px"> - {{ reservation.review_count }} reviews</span>
    </div>

    <!-- Ratings Popup -->
    <div v-if="showPopup" class="rating-popup-overlay">
      <div class="rating-popup-content">
        <button @click="closePopup">Close</button>
        <h3>Reviews:</h3>
        <ul>
          <li v-for="review in reviews" :key="review.id">
            <strong>{{ review.user.name }}:</strong> {{ review.comment }} - {{ review.rating }} ★
          </li>
        </ul>
      </div>
    </div>
  </div>


      <div
        class="flex justify-center gap-3"
        v-if="reservation.status == 'pending'"
      >

        <Button
          severity="danger"
          type="button"
          outlined
          label="Refuser la demande"
          icon="pi pi-times"
          @click="refuse(reservation)"
        />

        <Button
          @click="accept(reservation)"
          severity="success"
          type="button"
          outlined
          label="Accepter la demande"
          icon="pi pi-check"
        />
      </div>

      <div v-else>
        <Message
          v-if="reservation.status === 'refused'"
          severity="error"
          :closable="false"
        >
          Réservation refusée
        </Message>

        <Message
          v-else-if="reservation.status === 'accepted'"
          severity="success"
          :closable="false"
        >
          Réservation acceptée
        </Message>

        <Message
          v-else-if="reservation.status === 'expired'"
          severity="error"
          :closable="false"
        >
          Réservation expirée
        </Message>
      </div>
    </template>
  </base-route-card>
</template>

<script setup>

import { defineProps } from "vue";
const showPopup = ref(false);
const reviews = ref([]);

const showRatingsPopup = (reservation) => {
  reviews.value = reservation.reviews; // Load reviews for the reservation
  showPopup.value = true;
};
const closePopup = () => {
  showPopup.value = false;
};
const props = defineProps({
  reservation: {
    type: Object,
    required: true,
  },
  route: {
    type: Object,
    required: false,
  },
});

const emit = defineEmits(["accept", "refuse"]);

const accept = (reservation) => {
  emit("accept", reservation);
};

const refuse = (reservation) => {
  emit("refuse", reservation);
};
</script>
<style scoped>
.rating-display {
  cursor: pointer;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.star-icon {
  color: lightgray;
  font-size: 20px;
  display: inline-block;
}

.star-icon.filled {
  color: gold;
}

.star-icon.half-filled {
  position: relative;
  display: inline-block;
  color: lightgray;
}

.star-icon.half-filled::before {
  content: '★';
  position: absolute;
  top: 0;
  left: 0;
  color: gold;
  width: 50%;
  overflow: hidden;
}

.rating-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.rating-popup-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
  max-width: 600px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.rating-popup-content button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
}

.rating-popup-content button:hover {
  background-color: #0056b3;
}

.rating-popup-content h3 {
  margin-top: 0;
}

.rating-popup-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rating-popup-content li {
  margin-bottom: 10px;
}
</style>
