{# Measurement Feedback Component

   Mostra feedback visivo in tempo reale della misurazione corrente.

   Variabili Alpine.js richieste nel parent component:
   - currentValue: float | null - valore corrente misurato
   - nominal: float - valore nominale
   - utl: float - Upper Tolerance Limit
   - uwl: float - Upper Warning Limit
   - lwl: float - Lower Warning Limit
   - ltl: float - Lower Tolerance Limit
   - unit: string - unità di misura (es. "mm")
   - passFailStatus: computed - 'pass' | 'warning' | 'fail'
   - deviation: computed - scostamento dal nominale
   - progressWidth: computed - larghezza barra percentuale
#}

<div class="measurement-feedback" x-show="currentValue !== null">
  <!-- Status bar colorata -->
  <div class="h-3 rounded-full overflow-hidden bg-slate-200 dark:bg-slate-600">
    <div class="h-full rounded-full transition-all duration-300"
         :class="{
           'bg-measure-pass': passFailStatus === 'pass',
           'bg-measure-warning': passFailStatus === 'warning',
           'bg-measure-fail': passFailStatus === 'fail'
         }"
         :style="'width: ' + progressWidth + '%'">
    </div>
  </div>

  <!-- Status text + deviation -->
  <div class="flex justify-between items-center mt-2">
    <div class="flex items-center gap-2">
      <!-- Icona stato - CONFORME -->
      <template x-if="passFailStatus === 'pass'">
        <span class="flex items-center gap-1 text-measure-pass font-semibold text-sm">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
          </svg>
          {{ _('CONFORME') }}
        </span>
      </template>

      <!-- Icona stato - ATTENZIONE -->
      <template x-if="passFailStatus === 'warning'">
        <span class="flex items-center gap-1 text-measure-warning font-semibold text-sm">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/>
          </svg>
          {{ _('ATTENZIONE') }}
        </span>
      </template>

      <!-- Icona stato - NON CONFORME -->
      <template x-if="passFailStatus === 'fail'">
        <span class="flex items-center gap-1 text-measure-fail font-semibold text-sm">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
          </svg>
          {{ _('NON CONFORME') }}
        </span>
      </template>
    </div>

    <!-- Deviation con segno -->
    <span class="font-mono text-sm font-medium"
          :class="{
            'text-measure-pass': passFailStatus === 'pass',
            'text-measure-warning': passFailStatus === 'warning',
            'text-measure-fail': passFailStatus === 'fail'
          }"
          x-text="deviation !== null ?
            (deviation >= 0 ? '+' : '') + deviation.toFixed(3) + ' ' + unit : ''">
    </span>
  </div>
</div>