<template>
  <div class="feedback-summary">
    <!-- Rating compatto -->
    <div class="feedback-summary__rating">
      <q-icon name="star" color="amber" size="20px" />
      <span class="feedback-summary__value">{{ rating.toFixed(1) }}</span>
      <span class="feedback-summary__count">({{ totalCount }})</span>
    </div>

    <!-- Barra progresso -->
    <div v-if="showProgress" class="feedback-summary__progress">
      <div
        class="feedback-summary__progress-fill"
        :style="{ width: `${(rating / 5) * 100}%` }"
      ></div>
    </div>

    <!-- Label -->
    <span v-if="showLabel" class="feedback-summary__label">
      {{ ratingLabel }}
    </span>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';

export default defineComponent({
  name: 'FeedbackSummary',

  props: {
    rating: {
      type: Number,
      default: 0
    },
    totalCount: {
      type: Number,
      default: 0
    },
    showProgress: {
      type: Boolean,
      default: false
    },
    showLabel: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    const ratingLabel = computed(() => {
      if (props.rating >= 4.5) return 'Eccellente';
      if (props.rating >= 4) return 'Ottimo';
      if (props.rating >= 3.5) return 'Molto buono';
      if (props.rating >= 3) return 'Buono';
      if (props.rating >= 2) return 'Sufficiente';
      if (props.rating > 0) return 'Da migliorare';
      return 'Non valutato';
    });

    return { ratingLabel };
  }
});
</script>

<style lang="scss">
.feedback-summary {
  display: flex;
  align-items: center;
  gap: 8px;

  &__rating {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &__value {
    font-weight: 700;
    font-size: 16px;
  }

  &__count {
    font-size: 13px;
    color: var(--q-grey-6);
  }

  &__progress {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
  }

  &__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffc107, #ff9800);
    border-radius: 3px;
  }

  &__label {
    font-size: 13px;
    color: var(--q-grey-7);
  }
}

.body--dark {
  .feedback-summary {
    &__progress {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>
