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

<template>
  <div class="selector-familia cata-fade-in">
    <!-- Label principal -->
    <label v-if="label" class="block text-sm font-medium mb-3 cata-text">
      {{ label }}
      <span v-if="required" class="text-error">*</span>
    </label>

    <!-- Nivel 1: Categorías principales -->
    <div class="nivel-container">
      <h4 class="nivel-title cata-text">Categoría</h4>
      <div class="categorias-grid">
        <button
          v-for="categoria in categoriasDisponibles"
          :key="categoria"
          type="button"
          :class="[
            'categoria-item',
            'cata-checkbox',
            {
              'cata-checkbox-checked': modelValue.categoria === categoria,
              'disabled': disabled,
            },
          ]"
          :disabled="disabled"
          @click="seleccionarCategoria(categoria)"
        >
          <span class="categoria-text cata-text">{{ categoria }}</span>
          <UIcon
            v-if="modelValue.categoria === categoria"
            name="i-lucide-check-circle"
            class="categoria-check"
          />
        </button>
      </div>
    </div>

    <!-- Nivel 2: Subcategorías (si aplica) -->
    <div v-if="subcategoriasDisponibles.length > 0" class="nivel-container mt-4">
      <h4 class="nivel-title cata-text">Subcategoría</h4>
      <div class="subcategorias-grid">
        <button
          v-for="subcategoria in subcategoriasDisponibles"
          :key="subcategoria"
          type="button"
          :class="[
            'subcategoria-item',
            'cata-checkbox',
            {
              'cata-checkbox-checked': modelValue.subcategoria === subcategoria,
              'disabled': disabled,
            },
          ]"
          :disabled="disabled"
          @click="seleccionarSubcategoria(subcategoria)"
        >
          <span class="subcategoria-text cata-text">{{ subcategoria }}</span>
          <UIcon
            v-if="modelValue.subcategoria === subcategoria"
            name="i-lucide-check"
            class="subcategoria-check"
          />
        </button>
      </div>
    </div>

    <!-- Nivel 3: Nota específica (input libre) -->
    <div v-if="modelValue.categoria" class="nivel-container mt-4">
      <h4 class="nivel-title cata-text">Nota Específica</h4>
      <input
        v-model="notaEspecificaLocal"
        type="text"
        :placeholder="notaPlaceholder"
        :disabled="disabled"
        class="cata-input w-full"
        @blur="actualizarNotaEspecifica"
      >
    </div>

    <!-- Resumen de selección -->
    <div v-if="seleccionCompleta" class="mt-4 p-3 cata-outline-box rounded-md">
      <p class="text-xs font-semibold cata-text mb-1">Selección actual:</p>
      <p class="text-sm cata-text">
        {{ modelValue.categoria }}
        <template v-if="modelValue.subcategoria">
          → {{ modelValue.subcategoria }}
        </template>
        <template v-if="modelValue.notaEspecifica">
          → <span class="font-semibold">{{ modelValue.notaEspecifica }}</span>
        </template>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NotaSeleccionada, CategoriaNotaPrincipal } from '~/types/catacion'
import { FAMILIAS_NOTAS_ESTRUCTURA } from '~/types/catacion'

interface SelectorFamiliaProps {
  /** Tipo de selector: fragancia-aroma o sabor */
  tipo: 'fragancia-aroma' | 'sabor'
  /** Nota seleccionada */
  modelValue: NotaSeleccionada
  /** Etiqueta del selector */
  label?: string
  /** Deshabilitar el selector */
  disabled?: boolean
  /** Marcar como requerido */
  required?: boolean
}

const props = withDefaults(defineProps<SelectorFamiliaProps>(), {
  disabled: false,
  required: false,
})

const emit = defineEmits<{
  'update:modelValue': [value: NotaSeleccionada]
}>()

// Estado local para la nota específica
const notaEspecificaLocal = ref(props.modelValue.notaEspecifica || '')

// Placeholder para el input de nota específica
const notaPlaceholder = computed(() => {
  return props.tipo === 'fragancia-aroma'
    ? 'Ej: Naranja, Jazmín, Caramelo...'
    : 'Ej: Fresa, Chocolate, Canela...'
})

// Categorías principales disponibles
const categoriasDisponibles = computed<CategoriaNotaPrincipal[]>(() => {
  return Object.keys(FAMILIAS_NOTAS_ESTRUCTURA) as CategoriaNotaPrincipal[]
})

// Subcategorías disponibles según la categoría seleccionada
const subcategoriasDisponibles = computed<string[]>(() => {
  if (!props.modelValue.categoria) return []

  const familia = FAMILIAS_NOTAS_ESTRUCTURA[props.modelValue.categoria as CategoriaNotaPrincipal]
  if (!familia || typeof familia !== 'object') return []

  return Object.keys(familia)
})

// Verifica si la selección está completa
const seleccionCompleta = computed(() => {
  return props.modelValue.categoria !== null
})

// Seleccionar categoría
const seleccionarCategoria = (categoria: CategoriaNotaPrincipal) => {
  if (props.disabled) return

  // Si se selecciona la misma categoría, deseleccionar todo
  if (props.modelValue.categoria === categoria) {
    emit('update:modelValue', {
      categoria: null,
      subcategoria: null,
      notaEspecifica: null,
    })
    notaEspecificaLocal.value = ''
    return
  }

  // Seleccionar nueva categoría y resetear subcategoría y nota
  emit('update:modelValue', {
    categoria,
    subcategoria: null,
    notaEspecifica: null,
  })
  notaEspecificaLocal.value = ''
}

// Seleccionar subcategoría
const seleccionarSubcategoria = (subcategoria: string) => {
  if (props.disabled) return

  // Si se selecciona la misma subcategoría, deseleccionar
  if (props.modelValue.subcategoria === subcategoria) {
    emit('update:modelValue', {
      ...props.modelValue,
      subcategoria: null,
    })
    return
  }

  // Seleccionar nueva subcategoría
  emit('update:modelValue', {
    ...props.modelValue,
    subcategoria,
  })
}

// Actualizar nota específica
const actualizarNotaEspecifica = () => {
  const nota = notaEspecificaLocal.value.trim()
  emit('update:modelValue', {
    ...props.modelValue,
    notaEspecifica: nota || null,
  })
}

// Sincronizar nota específica cuando cambia el modelo
watch(() => props.modelValue.notaEspecifica, (newVal) => {
  if (newVal !== notaEspecificaLocal.value) {
    notaEspecificaLocal.value = newVal || ''
  }
})
</script>

<style scoped>
.selector-familia {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nivel-container {
  width: 100%;
}

.nivel-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  opacity: 0.75;
}

/* Grid de categorías */
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.categoria-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0.75rem;
}

.categoria-item:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.categoria-item:focus-visible {
  box-shadow: 0 0 0 2px var(--cata-primary);
}

.categoria-text {
  font-size: 0.875rem;
  font-weight: 500;
  flex: 1 1 0%;
  text-align: left;
}

.categoria-check {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cata-primary);
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* Grid de subcategorías */
.subcategorias-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.subcategoria-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 44px;
}

.subcategoria-item:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.subcategoria-item:focus-visible {
  box-shadow: 0 0 0 2px var(--cata-primary);
}

.subcategoria-text {
  font-size: 0.875rem;
}

.subcategoria-check {
  width: 1rem;
  height: 1rem;
  color: var(--cata-primary);
}

/* Animaciones */
.categoria-item.cata-checkbox-checked,
.subcategoria-item.cata-checkbox-checked {
  transform: scale(1.02);
}

.categoria-item:not(.disabled):hover,
.subcategoria-item:not(.disabled):hover {
  transform: scale(1.02);
}

.categoria-item:not(.disabled):active,
.subcategoria-item:not(.disabled):active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 640px) {
  .categorias-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .categoria-item {
    min-height: 48px;
    padding: 0.625rem;
  }

  .categoria-text {
    font-size: 0.75rem;
  }

  .subcategoria-item {
    min-height: 42px;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .subcategoria-text {
    font-size: 0.75rem;
  }
}

@media (min-width: 641px) {
  .categorias-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .categoria-item {
    min-height: 55px;
  }
}

/* Touch-friendly */
@media (hover: none) and (pointer: coarse) {
  .categoria-item,
  .subcategoria-item {
    min-height: 50px;
  }
}
</style>