<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: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* Sizes */
.size-small {
  font-size: 0.7rem;
  padding: 1px var(--space-xs);
  border-radius: var(--radius-sm);
  line-height: 1;
}

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

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

.size-large {
  font-size: 0.85rem;
  padding: 2px var(--space-sm);
}

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

/* Confidence levels */
.high {
  background: var(--green-100);
  color: var(--green-800);
}

.medium {
  background: var(--yellow-100);
  color: var(--yellow-800);
}

.low {
  background: var(--red-100);
  color: var(--red-800);
}

.percentage {
  font-variant-numeric: tabular-nums;
}

/* Dark mode — explicit toggle */
[data-theme="dark"] .high {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green-400);
}

[data-theme="dark"] .medium {
  background: rgba(234, 179, 8, 0.2);
  color: var(--yellow-400);
}

[data-theme="dark"] .low {
  background: rgba(220, 38, 38, 0.2);
  color: var(--red-400);
}

/* Dark mode — auto (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .high {
    background: rgba(34, 197, 94, 0.2);
    color: var(--green-400);
  }

  :root:not([data-theme="light"]) .medium {
    background: rgba(234, 179, 8, 0.2);
    color: var(--yellow-400);
  }

  :root:not([data-theme="light"]) .low {
    background: rgba(220, 38, 38, 0.2);
    color: var(--red-400);
  }
}
</style>
