<script setup lang="ts">
// <!-- ld-v2 --> Mini-jauge d'une session RÉELLE en cours sur une version
// proposée : positions déposées / liste arrêtée, échéance, état figé.
import { FROZEN_LABEL } from '~/lexicon'
import type { ClauseSessionGauge } from './textsModel'
import { formatDateFr } from './textsModel'

const props = withDefaults(defineProps<{
  gauge: ClauseSessionGauge
  /** Affiche le titre de la décision au-dessus de la jauge. */
  withTitle?: boolean
}>(), { withTitle: false })

const ratio = computed(() => {
  if (props.gauge.listSize <= 0) return 0
  return Math.min(100, Math.round((props.gauge.positions / props.gauge.listSize) * 100))
})

const tooltip = computed(() =>
  `${props.gauge.decisionTitle}\n${props.gauge.positions} position${props.gauge.positions > 1 ? 's' : ''} `
  + `sur une liste arrêtée de ${props.gauge.listSize} — clôture le ${formatDateFr(props.gauge.closesAt)}`)
</script>

<template>
  <!-- ld-v2 -->
  <NuxtLink class="mini-gauge" :to="`/decisions/${gauge.decisionId}`" :title="tooltip">
    <span v-if="withTitle" class="mini-gauge__title">{{ gauge.decisionTitle }}</span>
    <span class="mini-gauge__row">
      <UIcon :name="gauge.frozen ? 'i-lucide-snowflake' : 'i-lucide-vote'" class="mini-gauge__icon" />
      <span class="mini-gauge__track">
        <span class="mini-gauge__fill" :style="{ width: `${ratio}%` }" />
      </span>
      <span class="mini-gauge__count">{{ gauge.positions }}/{{ gauge.listSize }}</span>
      <span v-if="gauge.frozen" class="mini-gauge__frozen">{{ FROZEN_LABEL }}</span>
    </span>
  </NuxtLink>
</template>

<style scoped>
.mini-gauge {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.mini-gauge__title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 15rem;
}
.mini-gauge__row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.mini-gauge__icon {
  font-size: 0.85rem;
  color: var(--mood-status-vote);
  flex-shrink: 0;
}
.mini-gauge__track {
  position: relative;
  width: 3.5rem;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--mood-text) 10%, transparent);
  overflow: hidden;
}
.mini-gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--mood-status-vote);
  transition: width 0.3s ease;
}
.mini-gauge__count {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--mood-status-vote);
  font-variant-numeric: tabular-nums;
}
.mini-gauge__frozen {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--mood-status-fige-bg);
  color: var(--mood-status-fige);
}
</style>
