<template>
  <div class="resumen-expandido cata-text">
    <!-- Header con título y puntajes principales -->
    <div class="header-section">
      <div class="muestra-info">
        <div class="muestra-numero">#{{ muestra.muestraId }}</div>
        <h3 class="muestra-nombre">{{ muestra.nombre }}</h3>
      </div>

      <!-- Puntajes destacados -->
      <div class="puntajes-principales">
        <div class="puntaje-grande puntaje-sumatoria">
          <div class="puntaje-label">Sumatoria Afectiva</div>
          <div class="puntaje-valor">{{ sumatoriaAfectiva }}</div>
        </div>

        <div class="puntaje-grande puntaje-scaa" :class="scaaClass">
          <div class="puntaje-label">SCAA Score</div>
          <div class="puntaje-valor">{{ scaaScore.toFixed(2) }}</div>
        </div>
      </div>
    </div>

    <!-- Intensidades Afectivas -->
    <div class="seccion">
      <h4 class="seccion-titulo">Valores Afectivos</h4>
      <div class="intensidades-grid">
        <div v-if="muestra.intensidades.fragancia.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('fragancia')" class="intensidad-icon" :style="{ color: getCategoryColor('fragancia') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Fragancia</div>
            <div class="intensidad-valor">{{ muestra.intensidades.fragancia.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.aroma.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('aroma')" class="intensidad-icon" :style="{ color: getCategoryColor('aroma') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Aroma</div>
            <div class="intensidad-valor">{{ muestra.intensidades.aroma.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.sabor.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('sabor')" class="intensidad-icon" :style="{ color: getCategoryColor('sabor') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Sabor</div>
            <div class="intensidad-valor">{{ muestra.intensidades.sabor.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.saborResidual.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('saborResidual')" class="intensidad-icon" :style="{ color: getCategoryColor('saborResidual') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Sabor Residual</div>
            <div class="intensidad-valor">{{ muestra.intensidades.saborResidual.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.acidez.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('acidez')" class="intensidad-icon" :style="{ color: getCategoryColor('acidez') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Acidez</div>
            <div class="intensidad-valor">{{ muestra.intensidades.acidez.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.dulzor.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('dulzor')" class="intensidad-icon" :style="{ color: getCategoryColor('dulzor') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Dulzor</div>
            <div class="intensidad-valor">{{ muestra.intensidades.dulzor.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.sensacionBoca.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('sensacionBoca')" class="intensidad-icon" :style="{ color: getCategoryColor('sensacionBoca') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Sensación en Boca</div>
            <div class="intensidad-valor">{{ muestra.intensidades.sensacionBoca.afectiva }}</div>
          </div>
        </div>

        <div v-if="muestra.intensidades.impresionGlobal.afectiva !== null" class="intensidad-item">
          <UIcon :name="getCategoryIcon('impresionGlobal')" class="intensidad-icon" :style="{ color: getCategoryColor('impresionGlobal') }" />
          <div class="intensidad-info">
            <div class="intensidad-nombre">Impresión Global</div>
            <div class="intensidad-valor">{{ muestra.intensidades.impresionGlobal.afectiva }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Características Organolépticas (si existen) -->
    <div v-if="hasOrganolepticData" class="seccion">
      <h4 class="seccion-titulo">Características Organolépticas</h4>
      <div class="organoleptica-grid">
        <!-- Fragancia/Aroma Notas -->
        <div v-if="muestra.fraganciaAromaNotas.categorias.length > 0" class="organoleptica-item">
          <div class="organoleptica-label">
            <UIcon name="i-lucide-flower-2" class="organoleptica-icon" />
            Fragancia/Aroma
          </div>
          <div class="organoleptica-contenido">
            <div class="categorias-list">
              <span v-for="cat in muestra.fraganciaAromaNotas.categorias" :key="cat" class="categoria-chip">
                {{ cat }}
              </span>
            </div>
            <div v-if="muestra.fraganciaAromaNotas.notaEspecifica" class="notas-texto">
              {{ muestra.fraganciaAromaNotas.notaEspecifica }}
            </div>
          </div>
        </div>

        <!-- Sabor Notas -->
        <div v-if="muestra.saborNotas.categorias.length > 0" class="organoleptica-item">
          <div class="organoleptica-label">
            <UIcon name="i-lucide-candy" class="organoleptica-icon" />
            Sabor
          </div>
          <div class="organoleptica-contenido">
            <div class="categorias-list">
              <span v-for="cat in muestra.saborNotas.categorias" :key="cat" class="categoria-chip">
                {{ cat }}
              </span>
            </div>
            <div v-if="muestra.saborNotas.notaEspecifica" class="notas-texto">
              {{ muestra.saborNotas.notaEspecifica }}
            </div>
          </div>
        </div>

        <!-- Gustos Predominantes -->
        <div v-if="muestra.gustosPredominantes.length > 0" class="organoleptica-item">
          <div class="organoleptica-label">
            <UIcon name="i-lucide-sparkles" class="organoleptica-icon" />
            Gustos Predominantes
          </div>
          <div class="organoleptica-contenido">
            <div class="categorias-list">
              <span v-for="gusto in muestra.gustosPredominantes" :key="gusto" class="categoria-chip">
                {{ gusto }}
              </span>
            </div>
          </div>
        </div>

        <!-- Sensación en Boca -->
        <div v-if="muestra.sensacionEnBoca" class="organoleptica-item">
          <div class="organoleptica-label">
            <UIcon name="i-lucide-droplets" class="organoleptica-icon" />
            Sensación en Boca
          </div>
          <div class="organoleptica-contenido">
            <div class="sensacion-valor">{{ muestra.sensacionEnBoca }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Defectos (si existen) -->
    <div v-if="muestra.tazasNoUniformes.length > 0 || muestra.tazasDefectuosas.length > 0" class="seccion">
      <h4 class="seccion-titulo">Penalizaciones</h4>
      <div class="defectos-info">
        <div v-if="muestra.tazasNoUniformes.length > 0" class="defecto-item defecto-warning">
          <UIcon name="i-lucide-alert-circle" class="defecto-icon" />
          <div>
            <div class="defecto-label">Tazas No Uniformes</div>
            <div class="defecto-detalle">{{ muestra.tazasNoUniformes.length }} taza(s) - {{ muestra.tazasNoUniformes.join(', ') }}</div>
            <div class="defecto-penalizacion">-{{ muestra.tazasNoUniformes.length * 2 }} puntos</div>
          </div>
        </div>

        <div v-if="muestra.tazasDefectuosas.length > 0" class="defecto-item defecto-error">
          <UIcon name="i-lucide-x-circle" class="defecto-icon" />
          <div>
            <div class="defecto-label">Tazas Defectuosas</div>
            <div class="defecto-detalle">{{ muestra.tazasDefectuosas.length }} taza(s) - {{ muestra.tazasDefectuosas.join(', ') }}</div>
            <div v-if="muestra.defecto" class="defecto-tipo">Tipo: {{ muestra.defecto }}</div>
            <div class="defecto-penalizacion">-{{ muestra.tazasDefectuosas.length * 4 }} puntos</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Notas Adicionales (si existen) -->
    <div v-if="muestra.otrasNotas" class="seccion">
      <h4 class="seccion-titulo">Notas Adicionales</h4>
      <div class="notas-adicionales-box">
        <p class="notas-adicionales-texto">{{ muestra.otrasNotas }}</p>
      </div>
    </div>
  </div>
</template>

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

interface Props {
  muestra: Muestra
}

const props = defineProps<Props>()

// Cálculos de puntajes
const sumatoriaAfectiva = computed(() => calcularSumatoriaAfectiva(props.muestra))
const scaaScore = computed(() => calcularSCAA(props.muestra))

// Clase CSS para el SCAA Score basado en el valor
const scaaClass = computed(() => {
  const scaa = scaaScore.value
  if (scaa >= 90) return 'scaa-excelente'
  if (scaa >= 85) return 'scaa-muy-bueno'
  if (scaa >= 80) return 'scaa-bueno'
  if (scaa >= 70) return 'scaa-regular'
  return 'scaa-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'
}

// Función para obtener el color de cada categoría
const getCategoryColor = (category: string): string => {
  const colors: Record<string, string> = {
    fragancia: '#8B7AB8',
    aroma: '#26A69A',
    sabor: '#E53935',
    saborResidual: '#F57C00',
    acidez: '#FDD835',
    dulzor: '#EC407A',
    sensacionBoca: '#1E88E5',
    impresionGlobal: '#00ACC1',
  }
  return colors[category] || 'var(--cata-primary)'
}

// Verificar si hay datos organolépticos
const hasOrganolepticData = computed(() => {
  return props.muestra.fraganciaAromaNotas.categorias.length > 0 ||
    props.muestra.saborNotas.categorias.length > 0 ||
    props.muestra.gustosPredominantes.length > 0 ||
    props.muestra.sensacionEnBoca
})
</script>

<style scoped>
.resumen-expandido {
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Header Section */
.header-section {
  margin-bottom: 2rem;
}

.muestra-info {
  text-align: center;
  margin-bottom: 1.5rem;
}

.muestra-numero {
  font-size: 1.25rem;
  font-weight: bold;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.muestra-nombre {
  font-size: 1.75rem;
  font-weight: bold;
  margin: 0;
}

/* Puntajes Principales */
.puntajes-principales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.puntaje-grande {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid;
  text-align: center;
}

.puntaje-label {
  font-size: 0.875rem;
  opacity: 0.75;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.puntaje-valor {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1;
}

.puntaje-sumatoria {
  background-color: color-mix(in srgb, var(--cata-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--cata-primary) 40%, transparent);
  color: var(--cata-text);
}

/* SCAA Score Colors */
.scaa-excelente {
  background-color: color-mix(in srgb, #10b981 20%, transparent);
  border-color: #10b981;
  color: #10b981;
}

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

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

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

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

/* Secciones */
.seccion {
  margin-bottom: 2rem;
}

.seccion-titulo {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* Intensidades Grid */
.intensidades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.intensidad-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

.intensidad-icon {
  width: 2rem;
  height: 2rem;
  color: var(--cata-primary);
  flex-shrink: 0;
}

.intensidad-info {
  flex: 1;
  min-width: 0;
}

.intensidad-nombre {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}

.intensidad-valor {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Defectos */
.defectos-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.defecto-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid;
}

.defecto-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.defecto-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.defecto-detalle {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.defecto-tipo {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.defecto-penalizacion {
  font-weight: 600;
  font-size: 0.875rem;
}

.defecto-warning {
  background-color: transparent;
  border-color: #f59e0b;
  color: #f59e0b;
}

.defecto-error {
  background-color: transparent;
  border-color: #ef4444;
  color: #ef4444;
}

/* Organoléptica */
.organoleptica-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.organoleptica-item {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

.organoleptica-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.organoleptica-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--cata-primary);
}

.organoleptica-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.categorias-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.categoria-chip {
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--cata-primary) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
}

.notas-texto {
  font-size: 0.875rem;
  opacity: 0.85;
  line-height: 1.5;
  font-style: italic;
}

.sensacion-valor {
  font-size: 1rem;
  font-weight: 600;
}

/* Notas Adicionales */
.notas-adicionales-box {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--cata-primary) 30%, transparent);
}

.notas-adicionales-texto {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Modo oscuro */
.dark .puntaje-sumatoria {
  background-color: color-mix(in srgb, var(--cata-primary) 20%, transparent);
}

.dark .scaa-excelente {
  background-color: color-mix(in srgb, #10b981 30%, transparent);
}

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

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

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

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

.dark .intensidad-item {
  background-color: transparent;
}

.dark .defecto-warning {
  background-color: transparent;
}

.dark .defecto-error {
  background-color: transparent;
}

.dark .organoleptica-item {
  background-color: transparent;
}

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

.dark .notas-adicionales-box {
  background-color: transparent;
}

/* Responsive */
@media (max-width: 640px) {
  .resumen-expandido {
    padding: 1rem;
  }

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

  .puntajes-principales {
    grid-template-columns: 1fr;
  }

  .puntaje-valor {
    font-size: 2rem;
  }

  .intensidades-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .intensidad-item {
    padding: 0.75rem;
  }

  .intensidad-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .intensidad-valor {
    font-size: 1.25rem;
  }
}
</style>
