<template>
  <div
    class="progress-container"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
    :aria-label="label || 'Progress indicator'"
  >
    <div
      class="progress-bar"
      :style="{ width: percentage + '%' }"
      :class="{ 'striped': striped }"
    >
      <span v-if="showText" class="progress-text">
        {{ displayText }}
      </span>
    </div>
  </div>
</template>

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

const props = defineProps({
  value: {
    type: Number,
    required: true,
    validator: (val: number) => !isNaN(val), // Basic check for valid number
  },
  max: {
    type: Number,
    default: 100,
    validator: (val: number) => val > 0 && !isNaN(val),
  },
  showText: {
    type: Boolean,
    default: true,
  },
  striped: {
    type: Boolean,
    default: true,
  },
  label: {
    type: String,
    default: null, // Default aria-label is set in template if this is null
  },
  valueText: { // Custom text to display instead of percentage
    type: String,
    default: null,
  },
});

const percentage = computed(() => {
  if (props.max <= 0) return 0; // Avoid division by zero or negative max
  const calculated = (props.value / props.max) * 100;
  return Math.max(0, Math.min(100, calculated)); // Clamp between 0 and 100
});

const displayText = computed(() => {
  if (props.valueText !== null) {
    return props.valueText;
  }
  // You might want to adjust decimal places based on precision needed
  return `${percentage.value.toFixed(0)}%`;
});

</script>

<style lang="scss" scoped>
// Assuming --progress-texture is defined in valerie-ui.scss or globally
// For example:
// :root {
//   --progress-texture: repeating-linear-gradient(
//     45deg,
//     rgba(255, 255, 255, 0.15),
//     rgba(255, 255, 255, 0.15) 10px,
//     transparent 10px,
//     transparent 20px
//   );
//   --progress-bar-bg: #007bff; // Example primary color
//   --progress-bar-text-color: #fff;
//   --progress-container-bg: #e9ecef;
// }

.progress-container {
  width: 100%;
  height: 1.25rem; // Default height, adjust as needed
  background-color: var(--progress-container-bg, #e9ecef); // Fallback color
  border-radius: 0.25rem; // Rounded corners for the container
  overflow: hidden; // Ensure progress-bar respects container's border-radius
  position: relative; // For positioning text if needed outside the bar
}

.progress-bar {
  height: 100%;
  background-color: var(--progress-bar-bg, #007bff); // Fallback color
  display: flex;
  align-items: center;
  justify-content: center; // Center text if it's inside the bar
  transition: width 0.3s ease-out; // Smooth transition for width changes
  color: var(--progress-bar-text-color, #fff); // Text color for text inside the bar
  font-size: 0.75rem; // Smaller font for progress text
  line-height: 1; // Ensure text is vertically centered

  &.striped {
    // The variable --progress-texture should be defined in valerie-ui.scss
    // or a global style sheet.
    // Example: repeating-linear-gradient(45deg, rgba(255,255,255,.15), rgba(255,255,255,.15) 10px, transparent 10px, transparent 20px)
    background-image: var(--progress-texture);
    background-size: 28.28px 28.28px; // Adjust size for desired stripe density (sqrt(20^2+20^2)) if texture is 20px based
                                     // Or simply use a fixed size like 40px 40px if the gradient is designed for that
  }
}

.progress-text {
  // Styling for the text. If it's always centered by .progress-bar,
  // specific positioning might not be needed.
  // Consider contrast, especially if bar width is small.
  // One option is to have text outside the bar if it doesn't fit or for contrast.
  // For now, it's centered within the bar.
  white-space: nowrap;
  padding: 0 0.25rem; // Small padding if text is very close to edges
}
</style>
