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

<template>
  <UModal
    v-model:open="isOpen"
    title="Asignación Rápida de Puntajes"
    description="Distribuye un puntaje total entre las 8 categorías descriptivas"
  >
    <!-- Trigger (slot por defecto) -->
    <slot />

    <!-- Contenido del modal -->
    <template #body>
      <div class="space-y-4">
        <!-- Paso 1: Ingresar puntaje total deseado -->
        <div v-if="paso === 1">
          <label class="cata-text text-sm font-medium mb-2 block">
            Puntaje Total Deseado (8-80)
          </label>
          <input
            v-model.number="puntajeDeseado"
            type="number"
            :min="8"
            :max="80"
            placeholder="Ej: 45"
            class="cata-input w-full px-3 py-2 rounded-md text-center text-lg"
          />
          <p class="text-xs cata-text opacity-60 mt-2">
            Este puntaje se distribuirá entre las 8 categorías descriptivas
          </p>
        </div>

        <!-- Paso 2: Seleccionar categorías que sobresalen o palidecen -->
        <div v-if="paso === 2">
          <p class="text-sm cata-text mb-3">
            <span v-if="multiploMasCercano < puntajeDeseado">
              Selecciona {{ diferencia }} categoría(s) que <strong>sobresalen</strong> en esta muestra:
            </span>
            <span v-else>
              Selecciona {{ diferencia }} categoría(s) que <strong>palidecen</strong> en esta muestra:
            </span>
          </p>

          <div class="space-y-2">
            <button
              v-for="cat in categoriasDisponibles"
              :key="cat.key"
              type="button"
              :class="[
                'w-full px-3 py-2 rounded-md transition-all text-left flex items-center gap-2',
                'cata-outline-box',
                categoriasSeleccionadas.includes(cat.key)
                  ? 'selected-category'
                  : ''
              ]"
              :disabled="!categoriasSeleccionadas.includes(cat.key) && categoriasSeleccionadas.length >= diferencia"
              @click="toggleCategoria(cat.key)"
            >
              <UIcon :name="cat.icon" class="w-4 h-4" :style="{ color: cat.color }" />
              <span class="cata-text">{{ cat.label }}</span>
              <UIcon
                v-if="categoriasSeleccionadas.includes(cat.key)"
                :name="multiploMasCercano < puntajeDeseado ? 'i-heroicons-arrow-up-circle-solid' : 'i-heroicons-arrow-down-circle-solid'"
                class="w-5 h-5 ml-auto"
                :style="{ color: cat.color }"
              />
            </button>
          </div>

          <p class="text-xs cata-text opacity-60 mt-3">
            Seleccionadas: {{ categoriasSeleccionadas.length }} / {{ diferencia }}
          </p>
        </div>

        <!-- Resumen -->
        <div v-if="paso === 2" class="cata-outline-box rounded-md p-3 text-sm">
          <p class="cata-text font-medium mb-1">Distribución:</p>
          <p class="cata-text">• Puntaje base: {{ puntajeBase }} para todas las categorías</p>
          <p v-if="multiploMasCercano < puntajeDeseado" class="cata-text">
            • +1 punto a las {{ diferencia }} categoría(s) que sobresalen
          </p>
          <p v-else class="cata-text">
            • -1 punto a las {{ diferencia }} categoría(s) que palidecen
          </p>
          <p class="cata-text font-semibold mt-2">Total: {{ puntajeDeseado }} puntos</p>
        </div>
      </div>
    </template>

    <!-- Footer con botones -->
    <template #footer>
      <div class="flex items-center justify-end gap-2 w-full">
        <button
          class="cata-button px-4 py-2"
          @click="cerrar"
        >
          Cancelar
        </button>

        <button
          v-if="paso === 1"
          class="cata-button px-4 py-2"
          :disabled="!puntajeValido"
          :class="{ 'opacity-50 cursor-not-allowed': !puntajeValido }"
          @click="siguientePaso"
        >
          Continuar
        </button>

        <button
          v-if="paso === 2"
          class="cata-button px-4 py-2"
          :disabled="categoriasSeleccionadas.length !== diferencia"
          :class="{ 'opacity-50 cursor-not-allowed': categoriasSeleccionadas.length !== diferencia }"
          @click="aplicarAsignacion"
        >
          Aplicar
        </button>
      </div>
    </template>
  </UModal>
</template>

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

interface Props {
  modelValue: boolean
  muestra: Muestra
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'aplicar': [puntajes: Record<string, number>]
}>()

// Categorías disponibles
const categoriasDisponibles = [
  { key: 'fragancia', label: 'Fragancia', icon: 'i-lucide-flower-2', color: '#8B7AB8' },
  { key: 'aroma', label: 'Aroma', icon: 'i-lucide-wind', color: '#26A69A' },
  { key: 'sabor', label: 'Sabor', icon: 'i-lucide-candy', color: '#E53935' },
  { key: 'saborResidual', label: 'Sabor Residual', icon: 'i-lucide-timer', color: '#F57C00' },
  { key: 'acidez', label: 'Acidez', icon: 'i-lucide-citrus', color: '#FDD835' },
  { key: 'dulzor', label: 'Dulzor', icon: 'i-lucide-cookie', color: '#EC407A' },
  { key: 'sensacionBoca', label: 'Sensación en Boca', icon: 'i-lucide-droplets', color: '#1E88E5' },
  { key: 'impresionGlobal', label: 'Impresión Global', icon: 'i-lucide-star', color: '#00ACC1' },
]

// Estado del modal
const isOpen = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
})

// Estado del formulario
const paso = ref(1)
const puntajeDeseado = ref<number>(40)
const categoriasSeleccionadas = ref<string[]>([])

// Cálculos
const puntajeValido = computed(() => {
  return puntajeDeseado.value >= 8 && puntajeDeseado.value <= 80
})

const multiploMasCercano = computed(() => {
  if (!puntajeValido.value) return 0

  const valorActual = puntajeDeseado.value
  const multiploInferior = Math.floor(valorActual / 8) * 8
  const multiploSuperior = Math.ceil(valorActual / 8) * 8

  const distInferior = Math.abs(valorActual - multiploInferior)
  const distSuperior = Math.abs(valorActual - multiploSuperior)

  // Si las distancias son iguales, elegir el mayor
  if (distInferior === distSuperior) {
    return multiploSuperior
  }

  return distInferior < distSuperior ? multiploInferior : multiploSuperior
})

const puntajeBase = computed(() => {
  return multiploMasCercano.value / 8
})

const diferencia = computed(() => {
  return Math.abs(puntajeDeseado.value - multiploMasCercano.value)
})

// Métodos
const siguientePaso = () => {
  if (!puntajeValido.value) return

  // Si el múltiplo es exacto (diferencia = 0), aplicar directamente
  if (diferencia.value === 0) {
    aplicarAsignacionDirecta()
  } else {
    paso.value = 2
  }
}

const toggleCategoria = (key: string) => {
  const index = categoriasSeleccionadas.value.indexOf(key)
  if (index >= 0) {
    categoriasSeleccionadas.value.splice(index, 1)
  } else {
    if (categoriasSeleccionadas.value.length < diferencia.value) {
      categoriasSeleccionadas.value.push(key)
    }
  }
}

const aplicarAsignacionDirecta = () => {
  const puntajes: Record<string, number> = {}

  categoriasDisponibles.forEach(cat => {
    puntajes[cat.key] = puntajeBase.value
  })

  emit('aplicar', puntajes)
  cerrar()
}

const aplicarAsignacion = () => {
  if (categoriasSeleccionadas.value.length !== diferencia.value) return

  const puntajes: Record<string, number> = {}
  const ajuste = multiploMasCercano.value < puntajeDeseado.value ? 1 : -1

  categoriasDisponibles.forEach(cat => {
    const esSeleccionada = categoriasSeleccionadas.value.includes(cat.key)
    puntajes[cat.key] = puntajeBase.value + (esSeleccionada ? ajuste : 0)
  })

  emit('aplicar', puntajes)
  cerrar()
}

const cerrar = () => {
  isOpen.value = false
  // Resetear estado
  setTimeout(() => {
    paso.value = 1
    puntajeDeseado.value = 40
    categoriasSeleccionadas.value = []
  }, 300)
}
</script>

<style scoped>
.selected-category {
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
  border-color: var(--cata-primary);
}

.dark .selected-category {
  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
}
</style>