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

<template>
  <div class="resumen-muestra w-full">
    <!-- Primera línea: Número, nombre y puntaje -->
    <div class="flex items-center gap-2 mb-1">
      <!-- Número de muestra -->
      <div class="muestra-numero cata-text font-bold flex-shrink-0">
        #{{ muestra.muestraId }}
      </div>

      <!-- Nombre de muestra -->
      <div class="flex-1 min-w-0">
        <div class="muestra-nombre cata-text font-semibold truncate">
          {{ muestra.nombre }}
        </div>
      </div>

      <!-- Puntaje final - alineado a la derecha -->
      <div class="puntaje-final flex-shrink-0 px-2 py-0.5 rounded ml-auto" :class="puntajeClass">
        <span class="font-bold">{{ muestra.puntajeFinal }}</span>
      </div>
    </div>

    <!-- Segunda línea: Chips informativos -->
    <div class="chips-container flex flex-wrap gap-0.5">
      <!-- Chips Organolépticos -->
      <template v-if="mostrarChipsOrganolepticos">
        <!-- Fragancia/Aroma -->
        <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="chip">
          <span class="chip-label">F/A:</span>
          <span class="chip-value">{{ categoriasFragancia }}</span>
        </div>

        <!-- Sabor -->
        <div v-if="muestra.saborNotas.categorias.length > 0" class="chip">
          <span class="chip-label">Sab:</span>
          <span class="chip-value">{{ categoriasSabor }}</span>
        </div>

        <!-- Gustos predominantes -->
        <div v-if="muestra.gustosPredominantes.length > 0" class="chip">
          <span class="chip-label">Gus:</span>
          <span class="chip-value">{{ muestra.gustosPredominantes.join(', ') }}</span>
        </div>

        <!-- Sensación en boca -->
        <div v-if="muestra.sensacionEnBoca" class="chip">
          <span class="chip-label">Sen:</span>
          <span class="chip-value">{{ muestra.sensacionEnBoca }}</span>
        </div>
      </template>

      <!-- Chips Intensidades (solo Descriptiva con icono) -->
      <template v-if="mostrarChipsIntensidades">
        <div v-if="muestra.intensidades.fragancia.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('fragancia')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.fragancia.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.aroma.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('aroma')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.aroma.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.sabor.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('sabor')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.sabor.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.saborResidual.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('saborResidual')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.saborResidual.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.acidez.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('acidez')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.acidez.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.dulzor.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('dulzor')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.dulzor.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.sensacionBoca.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('sensacionBoca')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.sensacionBoca.descriptiva }}</span>
        </div>

        <div v-if="muestra.intensidades.impresionGlobal.descriptiva !== null" class="chip chip-intensidad">
          <UIcon :name="getCategoryIcon('impresionGlobal')" class="chip-icon" />
          <span class="chip-value">{{ muestra.intensidades.impresionGlobal.descriptiva }}</span>
        </div>
      </template>

      <!-- Chips Defectos -->
      <template v-if="mostrarChipsDefectos">
        <!-- Tazas no uniformes -->
        <div v-if="muestra.tazasNoUniformes.length > 0" class="chip chip-warning">
          <span class="chip-label">NoUnif:</span>
          <span class="chip-value">{{ muestra.tazasNoUniformes.join(',') }}</span>
        </div>

        <!-- Tazas defectuosas -->
        <div v-if="muestra.tazasDefectuosas.length > 0" class="chip chip-error">
          <span class="chip-label">Defec:</span>
          <span class="chip-value">{{ muestra.tazasDefectuosas.join(',') }}</span>
          <span v-if="muestra.defecto" class="chip-value">({{ muestra.defecto }})</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Muestra } from '~/types/catacion'
import type { TabCatacion } from '~/composables/useCatacion'

interface ResumenMuestraProps {
  /** Muestra a mostrar */
  muestra: Muestra
  /** Tab activa para filtrar chips */
  tabActiva?: TabCatacion
}

const props = withDefaults(defineProps<ResumenMuestraProps>(), {
  tabActiva: 'impresion-global',
})

// Formatear categorías de fragancia/aroma
const categoriasFragancia = computed(() => {
  return props.muestra.fraganciaAromaNotas.categorias.slice(0, 2).join(', ')
})

// Formatear categorías de sabor
const categoriasSabor = computed(() => {
  return props.muestra.saborNotas.categorias.slice(0, 2).join(', ')
})

// Clase CSS para el puntaje final basado en el valor
const puntajeClass = computed(() => {
  const puntaje = props.muestra.puntajeFinal
  if (puntaje >= 90) return 'puntaje-excelente'
  if (puntaje >= 85) return 'puntaje-muy-bueno'
  if (puntaje >= 80) return 'puntaje-bueno'
  if (puntaje >= 70) return 'puntaje-regular'
  return 'puntaje-bajo'
})

// Función para obtener el icono de cada categoría
const getCategoryIcon = (category: string): string => {
  const icons: Record<string, string> = {
    fragancia: 'i-lucide-flower-2',
    aroma: 'i-lucide-wind',
    sabor: 'i-lucide-candy',
    saborResidual: 'i-lucide-timer',
    acidez: 'i-lucide-citrus',
    dulzor: 'i-lucide-cookie',
    sensacionBoca: 'i-lucide-droplets',
    impresionGlobal: 'i-lucide-star',
  }
  return icons[category] || 'i-lucide-circle'
}

// Determinar qué chips mostrar según la tab activa
const mostrarChipsOrganolepticos = computed(() => {
  return props.tabActiva === 'organoleptica' || props.tabActiva === 'impresion-global'
})

const mostrarChipsIntensidades = computed(() => {
  return props.tabActiva === 'descriptiva-afectiva' || props.tabActiva === 'impresion-global'
})

const mostrarChipsDefectos = computed(() => {
  return props.tabActiva === 'defectos' || props.tabActiva === 'impresion-global'
})
</script>

<style scoped>
.resumen-muestra {
  min-height: 36px;
}

.muestra-numero {
  font-size: 0.875rem;
}

.muestra-nombre {
  font-size: 0.8125rem;
}

/* Puntaje final */
.puntaje-final {
  border: 1px solid;
  min-width: 2rem;
  text-align: center;
  font-size: 0.6875rem;
}

.puntaje-excelente {
  background-color: color-mix(in srgb, #10b981 20%, transparent);
  border-color: #10b981;
  color: #10b981;
}

.puntaje-muy-bueno {
  background-color: color-mix(in srgb, #3b82f6 20%, transparent);
  border-color: #3b82f6;
  color: #3b82f6;
}

.puntaje-bueno {
  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
  border-color: #f59e0b;
  color: #f59e0b;
}

.puntaje-regular {
  background-color: color-mix(in srgb, #ef4444 20%, transparent);
  border-color: #ef4444;
  color: #ef4444;
}

.puntaje-bajo {
  background-color: color-mix(in srgb, #6b7280 20%, transparent);
  border-color: #6b7280;
  color: #6b7280;
}

/* Chips */
.chips-container {
  font-size: 0.625rem;
  line-height: 1.1;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.2rem;
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

.chip-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  color: var(--cata-primary);
  opacity: 0.9;
}

.chip-label {
  font-weight: 600;
  opacity: 0.75;
  color: var(--cata-text);
}

.chip-value {
  color: var(--cata-text);
  font-weight: 500;
}

.chip-warning {
  background-color: color-mix(in srgb, #f59e0b 15%, transparent);
  border-color: #f59e0b;
}

.chip-warning .chip-label,
.chip-warning .chip-value {
  color: #f59e0b;
}

.chip-error {
  background-color: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: #ef4444;
}

.chip-error .chip-label,
.chip-error .chip-value {
  color: #ef4444;
}

/* Modo oscuro */
.dark .puntaje-excelente {
  background-color: color-mix(in srgb, #10b981 30%, transparent);
}

.dark .puntaje-muy-bueno {
  background-color: color-mix(in srgb, #3b82f6 30%, transparent);
}

.dark .puntaje-bueno {
  background-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

.dark .puntaje-regular {
  background-color: color-mix(in srgb, #ef4444 30%, transparent);
}

.dark .puntaje-bajo {
  background-color: color-mix(in srgb, #6b7280 30%, transparent);
}

.dark .chip {
  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
}

.dark .chip-warning {
  background-color: color-mix(in srgb, #f59e0b 20%, transparent);
}

.dark .chip-error {
  background-color: color-mix(in srgb, #ef4444 20%, transparent);
}

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

  .muestra-nombre {
    font-size: 0.75rem;
  }

  .puntaje-final {
    font-size: 0.625rem;
    min-width: 1.75rem;
  }

  .chips-container {
    font-size: 0.5625rem;
  }

  .chip {
    padding: 0.125rem 0.3rem;
    gap: 0.125rem;
  }
}
</style>