<template>
  <div class="resumen-muestra flex items-center justify-between gap-4 w-full">
    <!-- Información básica -->
    <div class="flex items-center gap-3 flex-1 min-w-0">
      <div class="muestra-numero cata-text font-bold text-lg">
        #{{ muestra.muestraId }}
      </div>
      <div class="flex-1 min-w-0">
        <div class="muestra-nombre cata-text font-semibold truncate">
          {{ muestra.nombre }}
        </div>
        <div class="muestra-stats text-xs cata-text opacity-60 flex items-center gap-2">
          <span>Puntaje {{ muestra.puntajeFinal }}</span>
          <span class="opacity-40">•</span>
          <span>{{ porcentajeCompletitud }}% completado</span>
        </div>
      </div>
    </div>

    <!-- Indicadores de completitud -->
    <div class="muestra-indicadores flex items-center gap-2 text-xs">
      <!-- Fragancia/Aroma -->
      <div
        :class="[
          'indicador-badge px-2 py-1 rounded',
          tieneFraganciaAroma ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
        ]"
        title="Fragancia/Aroma"
      >
        <span class="hidden sm:inline">F:</span>
        {{ intensidadesFormatted.fragancia }}/{{ intensidadesFormatted.aroma }}
      </div>

      <!-- Sabor -->
      <div
        :class="[
          'indicador-badge px-2 py-1 rounded',
          tieneSabor ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
        ]"
        title="Sabor"
      >
        <span class="hidden sm:inline">S:</span>
        {{ intensidadesFormatted.sabor }}/{{ intensidadesFormatted.saborResidual }}
      </div>

      <!-- Acidez -->
      <div
        :class="[
          'indicador-badge px-2 py-1 rounded',
          tieneAcidez ? 'bg-success/20 text-success' : 'bg-muted/20 text-muted',
        ]"
        title="Acidez"
      >
        <span class="hidden sm:inline">Ac:</span>
        {{ intensidadesFormatted.acidez }}/{{ intensidadesFormatted.dulzor }}
      </div>
    </div>

    <!-- Barra de progreso -->
    <div class="progreso-container hidden md:block w-24">
      <div class="progreso-bg h-2 rounded-full bg-muted/20 overflow-hidden">
        <div
          class="progreso-fill h-full bg-primary transition-all"
          :style="{ width: `${porcentajeCompletitud}%` }"
        />
      </div>
    </div>
  </div>
</template>

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

interface ResumenMuestraProps {
  /** Muestra a mostrar */
  muestra: Muestra
  /** Porcentaje de completitud */
  porcentajeCompletitud: number
}

const props = defineProps<ResumenMuestraProps>()

// Formatear intensidades para mostrar
const intensidadesFormatted = computed(() => ({
  fragancia: props.muestra.intensidades.fragancia.afectiva ?? '-',
  aroma: props.muestra.intensidades.aroma.afectiva ?? '-',
  sabor: props.muestra.intensidades.sabor.afectiva ?? '-',
  saborResidual: props.muestra.intensidades.saborResidual.afectiva ?? '-',
  acidez: props.muestra.intensidades.acidez.afectiva ?? '-',
  dulzor: props.muestra.intensidades.dulzor.afectiva ?? '-',
}))

// Verificar si las secciones están completas
const tieneFraganciaAroma = computed(() =>
  props.muestra.intensidades.fragancia.afectiva !== null &&
  props.muestra.intensidades.aroma.afectiva !== null
)

const tieneSabor = computed(() =>
  props.muestra.intensidades.sabor.afectiva !== null &&
  props.muestra.intensidades.saborResidual.afectiva !== null
)

const tieneAcidez = computed(() =>
  props.muestra.intensidades.acidez.afectiva !== null &&
  props.muestra.intensidades.dulzor.afectiva !== null
)
</script>

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

.muestra-numero {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.indicador-badge {
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .muestra-indicadores {
    flex-wrap: wrap;
  }

  .indicador-badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
  }
}
</style>
