<template>
  <div class="ris-balance-bar">
    <!-- Label e valore corrente -->
    <div class="balance-header">
      <span class="balance-label">{{ label }}</span>
      <span :class="['balance-current', balanceClass]">
        {{ currentBalance > 0 ? '+' : '' }}{{ currentBalance }} RIS
      </span>
    </div>

    <!-- Barra di progressione -->
    <div class="progress-container">
      <!-- Linea di sfondo -->
      <div class="progress-track">
        <!-- Zona negativa (rossa) -->
        <div
          class="progress-zone negative-zone"
          :style="{ width: negativeZoneWidth + '%' }"
        ></div>
        <!-- Zona zero (grigia) -->
        <div class="progress-zone zero-marker"></div>
        <!-- Zona positiva (verde) -->
        <div
          class="progress-zone positive-zone"
          :style="{ width: positiveZoneWidth + '%' }"
        ></div>
      </div>

      <!-- Indicatore posizione corrente -->
      <div
        class="current-indicator"
        :style="{ left: indicatorPosition + '%' }"
      >
        <div :class="['indicator-dot', balanceClass]"></div>
        <div class="indicator-line"></div>
      </div>

      <!-- Markers limiti -->
      <div
        class="markers"
        :style="{ '--zero-position': zeroPosition + '%' }"
      >
        <div class="marker min-marker">
          <span class="marker-value">{{ minLimit }}</span>
          <span class="marker-label">Fido</span>
        </div>
        <div class="marker zero-marker-label">
          <span class="marker-value">0</span>
        </div>
        <div class="marker max-marker">
          <span class="marker-value">+{{ maxLimit }}</span>
          <span class="marker-label">Max</span>
        </div>
      </div>
    </div>

    <!-- Info disponibilità -->
    <div class="availability-info">
      <div class="availability-item">
        <q-icon
          name="arrow_downward"
          size="xs"
          color="negative"
        />
        <span class="availability-text">
          Puoi dare ancora: <strong>{{ canGive }} RIS</strong>
        </span>
      </div>
      <div class="availability-item">
        <q-icon
          name="arrow_upward"
          size="xs"
          color="positive"
        />
        <span class="availability-text">
          Puoi ricevere: <strong>{{ canReceive }} RIS</strong>
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./CRISBalanceBar.ts"></script>

<style lang="scss" scoped>
@import './CRISBalanceBar.scss';
</style>
