<template>
  <span
    class="confidence-indicator"
    :class="confidenceClass"
    :title="tooltipText"
  >
    <i :class="iconClass"></i>
    <span v-if="showPercentage" class="percentage">{{ percentageText }}</span>
  </span>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  confidence: {
    type: Number,
    required: true,
    validator: (value) => value >= 0 && value <= 1
  },
  showPercentage: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'normal',
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  }
})

const percentageText = computed(() => {
  return Math.round(props.confidence * 100) + '%'
})

const confidenceClass = computed(() => {
  const classes = [`size-${props.size}`]

  if (props.confidence >= 0.85) {
    classes.push('high')
  } else if (props.confidence >= 0.6) {
    classes.push('medium')
  } else {
    classes.push('low')
  }

  return classes
})

const iconClass = computed(() => {
  if (props.confidence >= 0.85) {
    return 'pi pi-check-circle'
  } else if (props.confidence >= 0.6) {
    return 'pi pi-exclamation-circle'
  } else {
    return 'pi pi-question-circle'
  }
})

const tooltipText = computed(() => {
  const percent = Math.round(props.confidence * 100)
  if (props.confidence >= 0.85) {
    return `Incredere ridicata: ${percent}%`
  } else if (props.confidence >= 0.6) {
    return `Incredere medie: ${percent}% - verifica valoarea`
  } else {
    return `Incredere scazuta: ${percent}% - completeaza manual`
  }
})
</script>

<style scoped>
.confidence-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Sizes */
.size-small {
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
}

.size-small i {
  font-size: 0.75rem;
}

.size-normal i {
  font-size: 0.85rem;
}

.size-large {
  font-size: 0.85rem;
  padding: 0.2rem 0.6rem;
}

.size-large i {
  font-size: 1rem;
}

/* Confidence levels */
.high {
  background: #dcfce7;
  color: #166534;
}

.medium {
  background: #fef9c3;
  color: #854d0e;
}

.low {
  background: #fee2e2;
  color: #991b1b;
}

.percentage {
  font-variant-numeric: tabular-nums;
}
</style>
