cataRio/nuxt4/app/components/cata/ResumenMuestra.vue

<template>
  <div class="resumen-muestra cata-accordion-header">
    <!-- Header con nombre y puntaje -->
    <div class="resumen-header">
      <div class="resumen-title">
        <h3 class="muestra-nombre cata-text">{{ muestra.nombre }}</h3>
        <span class="muestra-id cata-text opacity-60">#{{ muestra.muestraId }}</span>
      </div>
      <div class="resumen-score">
        <span class="score-label cata-text text-xs opacity-60">Puntaje</span>
        <span class="score-value cata-text font-bold text-lg">{{ muestra.puntajeFinal }}</span>
      </div>
    </div>

    <!-- Barra de progreso de completitud -->
    <div class="resumen-progress mt-2">
      <div class="progress-bar">
        <div
          class="progress-fill"
          :style="{ width: `${porcentajeCompletitud}%` }"
        />
      </div>
      <span class="progress-text cata-text text-xs opacity-75">
        {{ porcentajeCompletitud }}% completado
      </span>
    </div>

    <!-- Indicadores rápidos -->
    <div class="resumen-indicadores mt-3">
      <!-- Fragancia/Aroma -->
      <div v-if="muestra.fraganciaAromaNotas.categoria" class="indicador">
        <UIcon name="i-lucide-flower-2" class="indicador-icon" />
        <span class="indicador-text cata-text">
          {{ muestra.fraganciaAromaNotas.notaEspecifica || muestra.fraganciaAromaNotas.categoria }}
        </span>
      </div>

      <!-- Sabor -->
      <div v-if="muestra.saborNotas.categoria" class="indicador">
        <UIcon name="i-lucide-coffee" class="indicador-icon" />
        <span class="indicador-text cata-text">
          {{ muestra.saborNotas.notaEspecifica || muestra.saborNotas.categoria }}
        </span>
      </div>

      <!-- Defectos -->
      <div v-if="muestra.defecto || muestra.tazasDefectuosas.length > 0" class="indicador defecto">
        <UIcon name="i-lucide-alert-triangle" class="indicador-icon" />
        <span class="indicador-text cata-text">
          {{ muestra.defecto || `${muestra.tazasDefectuosas.length} defectuosa(s)` }}
        </span>
      </div>

      <!-- Gustos predominantes -->
      <div v-if="muestra.gustosPredominantes.length > 0" class="indicador">
        <UIcon name="i-lucide-sparkles" class="indicador-icon" />
        <span class="indicador-text cata-text">
          {{ muestra.gustosPredominantes.join(', ') }}
        </span>
      </div>
    </div>

    <!-- Valores clave de intensidad (versión compacta) -->
    <div v-if="mostrarIntensidades" class="resumen-intensidades mt-3">
      <div class="intensidad-compact">
        <span class="intensidad-label cata-text">F:</span>
        <span class="intensidad-value cata-text">
          {{ formatearIntensidad(muestra.intensidades.fragancia) }}
        </span>
      </div>
      <div class="intensidad-compact">
        <span class="intensidad-label cata-text">A:</span>
        <span class="intensidad-value cata-text">
          {{ formatearIntensidad(muestra.intensidades.aroma) }}
        </span>
      </div>
      <div class="intensidad-compact">
        <span class="intensidad-label cata-text">S:</span>
        <span class="intensidad-value cata-text">
          {{ formatearIntensidad(muestra.intensidades.sabor) }}
        </span>
      </div>
      <div class="intensidad-compact">
        <span class="intensidad-label cata-text">Ac:</span>
        <span class="intensidad-value cata-text">
          {{ formatearIntensidad(muestra.intensidades.acidez) }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Muestra, IntensidadValor } from '~/types/catacion'

interface ResumenMuestraProps {
  /** Muestra a mostrar */
  muestra: Muestra
  /** Porcentaje de completitud */
  porcentajeCompletitud: number
  /** Mostrar intensidades en el resumen */
  mostrarIntensidades?: boolean
}

const props = withDefaults(defineProps<ResumenMuestraProps>(), {
  mostrarIntensidades: true,
})

/**
 * Formatea una intensidad para mostrar de forma compacta
 * Formato: D/A (Descriptiva/Afectiva)
 */
const formatearIntensidad = (intensidad: IntensidadValor): string => {
  const desc = intensidad.descriptiva ?? '-'
  const afec = intensidad.afectiva ?? '-'
  return `${desc}/${afec}`
}
</script>

<style scoped>
.resumen-muestra {
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.resumen-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.resumen-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1 1 0%;
  min-width: 0;
}

.muestra-nombre {
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muestra-id {
  font-size: 0.75rem;
  flex-shrink: 0;
}

.resumen-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.score-label {
  line-height: 1.25;
}

.score-value {
  line-height: 1.25;
}

/* Barra de progreso */
.resumen-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.progress-bar {
  flex: 1 1 0%;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: transparent;
  border: var(--cata-border-width) solid;
  border-color: color-mix(in srgb, var(--cata-primary) 30%, transparent);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  background-color: var(--cata-primary);
  opacity: 0.6;
}

.dark .progress-fill {
  opacity: 0.8;
  box-shadow: 0 0 4px var(--cata-primary);
}

.progress-text {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Indicadores */
.resumen-indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.indicador {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
}

.indicador.defecto {
  background-color: color-mix(in srgb, #ef4444 10%, transparent);
}

.indicador-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.indicador-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

/* Intensidades compactas */
.resumen-intensidades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.intensidad-compact {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.intensidad-label {
  font-weight: 600;
  opacity: 0.75;
}

.intensidad-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 640px) {
  .muestra-nombre {
    font-size: 0.875rem;
  }

  .score-value {
    font-size: 1rem;
  }

  .resumen-indicadores {
    gap: 0.375rem;
  }

  .indicador {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  .indicador-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .indicador-text {
    max-width: 100px;
  }

  .resumen-intensidades {
    gap: 0.5rem;
    font-size: 0.625rem;
  }
}

@media (min-width: 641px) {
  .muestra-nombre {
    font-size: 1.125rem;
  }
}
</style>