<!-- components/AdminAcademia/Cursos/PreguntasCursoView.vue -->
<template>
  <div class="preguntas-curso-view">
    <!-- Header con navegación (sticky) -->
    <div class="view-header">
      <div class="header-left">
        <a-button type="link" @click="goBack" class="back-btn">
          <ArrowLeftOutlined /> Volver a Cursos
        </a-button>

        <div class="header-title">
          <h2>{{ curso.nombre }}</h2>
          <div class="curso-info">
            <span class="curso-codigo">{{ curso.codigo }}</span>
            <a-tag :color="curso.activo ? 'green' : 'red'">
              {{ curso.activo ? 'Activo' : 'Inactivo' }}
            </a-tag>
          </div>
        </div>
      </div>

      <div class="header-right">
        <a-button type="primary" @click="showCreateModal" class="primary-cta">
          <template #icon><PlusOutlined /></template>
          Nueva Pregunta
        </a-button>
      </div>
    </div>

    <!-- Estadísticas -->
    <div class="curso-stats">
      <a-card class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon-wrapper" style="background: #e6f7ff;">
            <QuestionCircleOutlined style="color: #1890ff;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ estadisticas.total || 0 }}</div>
            <div class="stat-label">Total Preguntas</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon-wrapper" style="background: #f6ffed;">
            <CheckCircleOutlined style="color: #52c41a;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ estadisticas.facil || 0 }}</div>
            <div class="stat-label">Fáciles</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon-wrapper" style="background: #fff7e6;">
            <WarningOutlined style="color: #fa8c16;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ estadisticas.medio || 0 }}</div>
            <div class="stat-label">Medias</div>
          </div>
        </div>
      </a-card>

      <a-card class="stat-card" :bordered="false">
        <div class="stat-content">
          <div class="stat-icon-wrapper" style="background: #fff2f0;">
            <CloseCircleOutlined style="color: #ff4d4f;" />
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ estadisticas.dificil || 0 }}</div>
            <div class="stat-label">Difíciles</div>
          </div>
        </div>
      </a-card>
    </div>

    <!-- Filtros (en card) -->
    <a-card class="filters-card" :bordered="false">
      <div class="filters-section">
        <div class="filters">
          <a-input-search
            v-model:value="searchText"
            placeholder="Buscar en preguntas..."
            @search="handleSearch"
            style="width: 320px"
            size="large"
            allow-clear
          />

          <a-select
            v-model:value="dificultadFilter"
            placeholder="Todas las dificultades"
            style="width: 220px"
            size="large"
            @change="handleFilterChange"
          >
            <a-select-option value="">Todas las dificultades</a-select-option>
            <a-select-option value="facil">Fácil</a-select-option>
            <a-select-option value="medio">Media</a-select-option>
            <a-select-option value="dificil">Difícil</a-select-option>
          </a-select>

          <a-select
            v-model:value="estadoFilter"
            placeholder="Todos los estados"
            style="width: 220px"
            size="large"
            @change="handleFilterChange"
          >
            <a-select-option value="">Todos los estados</a-select-option>
            <a-select-option value="true">Activo</a-select-option>
            <a-select-option value="false">Inactivo</a-select-option>
          </a-select>
        </div>

        <div class="filter-actions">
          <a-button @click="clearFilters" size="large">
            <template #icon><ReloadOutlined /></template>
            Limpiar filtros
          </a-button>
        </div>
      </div>
    </a-card>

    <!-- Tabla -->
    <div class="preguntas-table-container">
      <a-table
        :data-source="preguntas"
        :columns="columns"
        :loading="preguntaStore.loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
        class="preguntas-table"
        size="middle"
        :scroll="{ x: 980 }"
      >
        <template #bodyCell="{ column, record }">
          <!-- Dificultad -->
          <template v-if="column.key === 'nivel_dificultad'">
            <a-tag :color="getDificultadColor(record.nivel_dificultad)">
              {{ formatDificultad(record.nivel_dificultad) }}
            </a-tag>
          </template>

          <!-- Estado -->
          <template v-if="column.key === 'activo'">
            <a-switch
              :checked="record.activo"
              @change="togglePreguntaStatus(record)"
              :checked-children="'Activo'"
              :un-checked-children="'Inactivo'"
            />
          </template>

          <!-- Vista previa del Enunciado -->
          <template v-if="column.key === 'enunciado'">
            <a-tooltip :title="stripHtml(record.enunciado)">
              <div class="enunciado-preview" v-html="getEnunciadoPreview(record.enunciado)" />
            </a-tooltip>
          </template>

          <!-- <template v-if="column.key === 'enunciado'">
            <div class="enunciado-md-preview">
              <MarkdownLatex :content="record.enunciado" />
            </div>
          </template> -->

          <!-- Fecha Creación -->
          <template v-if="column.key === 'created_at'">
            {{ formatDate(record.created_at) }}
          </template>

          <!-- Acciones -->
          <template v-if="column.key === 'acciones'">
            <div class="actions">
              <a-tooltip title="Ver">
                <a-button type="text" size="small" @click="verPregunta(record)" class="icon-action">
                  <EyeOutlined />
                </a-button>
              </a-tooltip>

              <a-tooltip title="Editar">
                <a-button type="text" size="small" @click="showEditModal(record)" class="icon-action">
                  <EditOutlined />
                </a-button>
              </a-tooltip>

              <a-tooltip title="Eliminar">
                <a-button
                  type="text"
                  size="small"
                  danger
                  @click="confirmDeletePregunta(record)"
                  class="icon-action"
                >
                  <DeleteOutlined />
                </a-button>
              </a-tooltip>
            </div>
          </template>
        </template>
      </a-table>
    </div>

    <!-- Modal Crear/Editar Pregunta -->
    <a-modal
      v-model:open="modalPreguntaVisible"
      :title="isEditingPregunta ? 'Editar Pregunta' : 'Nueva Pregunta'"
      :confirm-loading="preguntaStore.loading"
      @ok="handleModalPreguntaOk"
      @cancel="handleModalPreguntaCancel"
      width="1200px"
      class="pregunta-modal"
      destroy-on-close
    >
      <a-form ref="formPreguntaRef" :model="formPreguntaState" :rules="formPreguntaRules" layout="vertical">
        <!-- Enunciado -->
        <a-card size="small" class="section-card" :bordered="false">
          <template #title>
            <div class="section-title">
              <span>Enunciado de la Pregunta</span>
            </div>
          </template>

          <a-form-item
            label="Texto del Enunciado *"
            name="enunciado"
            :validate-status="getFieldStatus('enunciado')"
            :help="getFieldHelp('enunciado')"
          >
            <div class="editor-container">
              <div class="editor-column">
                <div class="editor-header">
                  <span>Editor</span>
                  <a-tag color="blue">Markdown & LaTeX</a-tag>
                </div>

                <a-textarea
                  v-model:value="formPreguntaState.enunciado"
                  placeholder="Escribe el enunciado principal de la pregunta..."
                  :rows="6"
                  :maxlength="2000"
                  show-count
                  @input="handleEnunciadoInput"
                  class="markdown-editor"
                />

                <div class="editor-tips">
                  <small><strong>Tips:</strong> **negrita**, *cursiva*, $$fórmulas$$, `código`</small>
                </div>
              </div>

              <div class="preview-column">
                <div class="editor-header">
                  <span>Vista Previa</span>
                  <a-tag color="green">Actualización en tiempo real</a-tag>
                </div>

                <div class="preview-content">
                  <div v-if="formPreguntaState.enunciado" class="markdown-preview">
                    <MarkdownLatex :content="formPreguntaState.enunciado" />
                  </div>
                  <div v-else class="empty-preview">
                    <EyeOutlined style="font-size: 24px; color: #ccc;" />
                    <p>El contenido aparecerá aquí mientras escribes...</p>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>

          <!-- Imágenes del enunciado -->
          <a-form-item label="Imágenes del Enunciado (Opcional)">
            <div class="upload-section">
              <a-upload
                v-model:file-list="imagenesEnunciadoFiles"
                list-type="picture-card"
                :multiple="true"
                :before-upload="beforeUpload"
                accept="image/*"
                @preview="handlePreview"
                @remove="handleRemoveImagenEnunciado"
              >
                <div v-if="imagenesEnunciadoFiles.length < 5">
                  <PlusOutlined />
                  <div class="ant-upload-text">Agregar Imagen</div>
                  <div class="ant-upload-hint">Máx. 5 imágenes, 2MB c/u</div>
                </div>
              </a-upload>

              <div
                v-if="isEditingPregunta && formPreguntaState.imagenes_existentes?.length"
                class="existing-images"
              >
                <h4>Imágenes existentes:</h4>
                <div class="image-grid">
                  <div
                    v-for="(imagen, index) in formPreguntaState.imagenes_existentes"
                    :key="'existente-'+index"
                    class="image-item"
                  >
                    <img :src="getImageUrl(imagen)" :alt="'Imagen ' + (index+1)" />
                    <a-button
                      type="link"
                      danger
                      @click="eliminarImagenExistente('enunciado', index)"
                      class="remove-image-btn"
                    >
                      <DeleteOutlined />
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>

          <!-- Enunciado adicional -->
          <a-form-item label="Enunciado Adicional (Opcional)">
            <div class="editor-container editor-small">
              <div class="editor-column">
                <div class="editor-header">
                  <span>Editor</span>
                  <a-tag color="blue">Markdown & LaTeX</a-tag>
                </div>

                <a-textarea
                  v-model:value="formPreguntaState.enunciado_adicional"
                  placeholder="Información adicional, contexto o detalles importantes..."
                  :rows="4"
                  @input="handleAdicionalInput"
                  class="markdown-editor"
                />
              </div>

              <div class="preview-column">
                <div class="editor-header">
                  <span>Vista Previa</span>
                </div>

                <div class="preview-content">
                  <div v-if="formPreguntaState.enunciado_adicional" class="markdown-preview">
                    <MarkdownLatex :content="formPreguntaState.enunciado_adicional" />
                  </div>
                  <div v-else class="empty-preview">
                    <EyeOutlined style="font-size: 24px; color: #ccc;" />
                    <p>Contenido adicional aparecerá aquí...</p>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-card>

        <!-- Opciones (CON LaTeX/Markdown + preview) -->
        <a-card size="small" class="section-card" :bordered="false">
          <template #title>
            <div class="section-title">
              <span>Opciones de Respuesta</span>
              <span class="section-subtitle">(Mínimo 2, marca la correcta)</span>
            </div>
          </template>

          <div class="opciones-grid">
            <div
              v-for="(opcion, index) in formPreguntaState.opciones"
              :key="index"
              class="opcion-card"
              :class="{ 'is-correct': formPreguntaState.respuesta_correcta === opcion }"
            >
              <div class="opcion-top">
                <div class="opcion-badge">
                  <span class="opcion-letter">{{ String.fromCharCode(65 + index) }}</span>
                  <a-tag color="blue" class="mini-tag">Markdown & LaTeX</a-tag>
                </div>

                <div class="opcion-controls">
                  <a-radio
                    :checked="formPreguntaState.respuesta_correcta === opcion"
                    @change="() => setRespuestaCorrecta(opcion)"
                  >
                    Correcta
                  </a-radio>

                  <a-button
                    v-if="formPreguntaState.opciones.length > 2"
                    type="text"
                    danger
                    @click="removeOpcion(index)"
                    class="icon-btn"
                  >
                    <DeleteOutlined />
                  </a-button>
                </div>
              </div>

              <div class="opcion-editor-wrap">
                <div class="opcion-editor">
                  <a-textarea
                    v-model:value="formPreguntaState.opciones[index]"
                    placeholder="Escribe la opción... (puedes usar $$latex$$, **negrita**, listas, etc.)"
                    :rows="4"
                    class="markdown-editor"
                    @change="updateOpcion(index, $event.target.value)"
                  />
                  <div class="editor-tips compact">
                    <small><strong>Ej:</strong> $$\\int_0^1 x^2 dx$$ · **texto** · `código`</small>
                  </div>
                </div>

                <div class="opcion-preview">
                  <div class="preview-header">
                    <span>Vista previa</span>
                    <a-tag color="green" class="mini-tag">Live</a-tag>
                  </div>

                  <div class="preview-content option-preview-content">
                    <div v-if="formPreguntaState.opciones[index]" class="markdown-preview">
                      <MarkdownLatex :content="formPreguntaState.opciones[index]" />
                    </div>
                    <div v-else class="empty-preview">
                      <EyeOutlined style="font-size: 20px; color: #ccc;" />
                      <p>La opción se verá aquí...</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <a-button
            type="dashed"
            @click="addOpcion"
            block
            :disabled="formPreguntaState.opciones.length >= 5"
            class="add-opcion-btn"
          >
            <PlusOutlined /> Agregar Opción ({{ formPreguntaState.opciones.length }}/5)
          </a-button>
        </a-card>

        <!-- Explicación -->
        <a-card size="small" class="section-card" :bordered="false">
          <template #title>
            <div class="section-title">
              <span>Explicación y Retroalimentación</span>
            </div>
          </template>

          <a-form-item label="Explicación de la Respuesta Correcta (Opcional)">
            <div class="editor-container">
              <div class="editor-column">
                <div class="editor-header">
                  <span>Editor</span>
                  <a-tag color="blue">Markdown & LaTeX</a-tag>
                </div>

                <a-textarea
                  v-model:value="formPreguntaState.explicacion"
                  placeholder="Explica por qué esta opción es la correcta..."
                  :rows="6"
                  @input="handleExplicacionInput"
                  class="markdown-editor"
                />

                <div class="editor-tips">
                  <small><strong>Tips:</strong> Usa $$fórmulas$$, **importante**, listas con *</small>
                </div>
              </div>

              <div class="preview-column">
                <div class="editor-header">
                  <span>Vista Previa</span>
                </div>

                <div class="preview-content">
                  <div v-if="formPreguntaState.explicacion" class="markdown-preview">
                    <MarkdownLatex :content="formPreguntaState.explicacion" />
                  </div>
                  <div v-else class="empty-preview">
                    <EyeOutlined style="font-size: 24px; color: #ccc;" />
                    <p>La explicación aparecerá aquí mientras escribes...</p>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>

          <!-- Imágenes de explicación -->
          <a-form-item label="Imágenes de la Explicación (Opcional)">
            <div class="upload-section">
              <a-upload
                v-model:file-list="imagenesExplicacionFiles"
                list-type="picture-card"
                :multiple="true"
                :before-upload="beforeUpload"
                accept="image/*"
                @preview="handlePreview"
                @remove="handleRemoveImagenExplicacion"
              >
                <div v-if="imagenesExplicacionFiles.length < 3">
                  <PlusOutlined />
                  <div class="ant-upload-text">Agregar Imagen</div>
                  <div class="ant-upload-hint">Máx. 3 imágenes, 2MB c/u</div>
                </div>
              </a-upload>

              <div
                v-if="isEditingPregunta && formPreguntaState.imagenes_explicacion_existentes?.length"
                class="existing-images"
              >
                <h4>Imágenes existentes:</h4>
                <div class="image-grid">
                  <div
                    v-for="(imagen, index) in formPreguntaState.imagenes_explicacion_existentes"
                    :key="'exp-existente-'+index"
                    class="image-item"
                  >
                    <img :src="getImageUrl(imagen)" :alt="'Imagen ' + (index+1)" />
                    <a-button
                      type="link"
                      danger
                      @click="eliminarImagenExistente('explicacion', index)"
                      class="remove-image-btn"
                    >
                      <DeleteOutlined />
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>
        </a-card>

        <!-- Configuración -->
        <a-card size="small" class="section-card" :bordered="false">
          <template #title>
            <div class="section-title">
              <span>Configuración</span>
            </div>
          </template>

          <div class="config-row">
            <a-form-item
              label="Nivel de Dificultad *"
              name="nivel_dificultad"
              :validate-status="getFieldStatus('nivel_dificultad')"
              :help="getFieldHelp('nivel_dificultad')"
              class="config-item"
            >
              <a-select v-model:value="formPreguntaState.nivel_dificultad" placeholder="Selecciona la dificultad">
                <a-select-option value="facil">
                  <div class="dificultad-option">
                    <CheckCircleOutlined style="color: #52c41a;" />
                    <span>Fácil</span>
                  </div>
                </a-select-option>
                <a-select-option value="medio">
                  <div class="dificultad-option">
                    <WarningOutlined style="color: #fa8c16;" />
                    <span>Media</span>
                  </div>
                </a-select-option>
                <a-select-option value="dificil">
                  <div class="dificultad-option">
                    <CloseCircleOutlined style="color: #ff4d4f;" />
                    <span>Difícil</span>
                  </div>
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="Estado" class="config-item">
              <a-switch
                v-model:checked="formPreguntaState.activo"
                :checked-children="'Activo'"
                :un-checked-children="'Inactivo'"
              />
            </a-form-item>
          </div>
        </a-card>

        <!-- Errores -->
        <div class="form-footer" v-if="preguntaStore.errors">
          <a-alert
            v-for="(errorList, field) in preguntaStore.errors"
            :key="field"
            type="error"
            :message="field === 'message' ? errorList : `${field}: ${errorList[0]}`"
            show-icon
            class="error-alert"
          />
        </div>
      </a-form>
    </a-modal>

    <!-- Modal Vista de Pregunta -->
    <a-modal
      v-model:open="verPreguntaModalVisible"
      :title="'Vista de Pregunta'"
      width="800px"
      :footer="null"
      @cancel="verPreguntaModalVisible = false"
      destroy-on-close
    >
      <div class="pregunta-view" v-if="preguntaSeleccionada">
        <div class="enunciado-principal">
          <MarkdownLatex :content="preguntaSeleccionada.enunciado" />
        

        <div v-if="preguntaSeleccionada.imagenes && preguntaSeleccionada.imagenes.length" class="imagenes-enunciado">
          <div class="imagenes-grid">
            <img
              v-for="(imagen, index) in preguntaSeleccionada.imagenes"
              :key="index"
              :src="imagen"
              :alt="'Imagen ' + (index+1)"
              @click="verImagen(imagen)"
              class="clickable-image centered-image"
            />
          </div>
        </div>

        <div v-if="preguntaSeleccionada.enunciado_adicional" >
          <MarkdownLatex :content="preguntaSeleccionada.enunciado_adicional" />
        </div>
        </div>
        <div class="opciones-view">
          <h4>Opciones de Respuesta:</h4>
          <div
            v-for="(opcion, index) in (preguntaSeleccionada.opciones || [])"
            :key="index"
            class="opcion-view"
            :class="{ correcta: opcion === preguntaSeleccionada.respuesta_correcta }"
          >
            <div class="opcion-letter">{{ String.fromCharCode(65 + index) }}.</div>
            <div class="opcion-text">
              <MarkdownLatex :content="opcion" />
            </div>
            <div class="opcion-correct" v-if="opcion === preguntaSeleccionada.respuesta_correcta">
              <CheckCircleOutlined style="color: #52c41a; margin-left: 8px;" />
            </div>
          </div>
        </div>

        <div v-if="preguntaSeleccionada.explicacion" class="explicacion-view">
          <h4>Explicación:</h4>
          <MarkdownLatex :content="preguntaSeleccionada.explicacion" />
        </div>

        <div
          v-if="preguntaSeleccionada.imagenes_explicacion && preguntaSeleccionada.imagenes_explicacion.length"
          class="imagenes-explicacion"
        >
          <div class="imagenes-grid">
            <img
              v-for="(imagen, index) in preguntaSeleccionada.imagenes_explicacion"
              :key="index"
              :src="getImageUrl(imagen)"
              :alt="'Imagen ' + (index+1)"
              @click="verImagen(getImageUrl(imagen))"
              class="clickable-image centered-image"
            />
          </div>
        </div>

        <div class="info-adicional">
          <a-divider />
          <div class="info-row">
            <div class="info-item">
              <strong>Dificultad:</strong>
              <a-tag :color="getDificultadColor(preguntaSeleccionada.nivel_dificultad)">
                {{ formatDificultad(preguntaSeleccionada.nivel_dificultad) }}
              </a-tag>
            </div>
            <div class="info-item">
              <strong>Estado:</strong>
              <a-tag :color="preguntaSeleccionada.activo ? 'green' : 'red'">
                {{ preguntaSeleccionada.activo ? 'Activo' : 'Inactivo' }}
              </a-tag>
            </div>
            <div class="info-item">
              <strong>Creado:</strong> {{ formatDate(preguntaSeleccionada.created_at) }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- Modal Confirmación Eliminar -->
    <a-modal
      v-model:open="deletePreguntaModalVisible"
      title="Eliminar Pregunta"
      @ok="handleDeletePregunta"
      @cancel="deletePreguntaModalVisible = false"
      ok-text="Eliminar"
      cancel-text="Cancelar"
      ok-type="danger"
      destroy-on-close
    >
      <div class="delete-confirm-content">
        <a-alert
          message="¿Estás seguro de eliminar esta pregunta?"
          description="Esta acción no se puede deshacer."
          type="warning"
          show-icon
        />
        <div class="pregunta-info" v-if="preguntaToDelete">
          <p><strong>Pregunta:</strong></p>
          <div class="enunciado-preview" v-html="getEnunciadoPreview(preguntaToDelete.enunciado)" />
          <p><strong>Dificultad:</strong> {{ formatDificultad(preguntaToDelete.nivel_dificultad) }}</p>
        </div>
      </div>
    </a-modal>

    <!-- Preview Upload -->
    <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="previewVisible = false">
      <img alt="Vista previa" style="width: 100%" :src="previewImage" />
    </a-modal>

    <!-- Imagen grande -->
    <a-modal v-model:open="modalImagenVisible" :footer="null" @cancel="modalImagenVisible = false">
      <img :src="imagenGrande" style="width: 100%" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePreguntaStore } from '../../../store/pregunta.store'
import { useCursoStore } from '../../../store/curso.store'
import { message } from 'ant-design-vue'
import MarkdownLatex from '../cursos/MarkdownLatex.vue'
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  QuestionCircleOutlined,
  CheckCircleOutlined,
  WarningOutlined,
  CloseCircleOutlined,
  ArrowLeftOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

// Router y Store
const route = useRoute()
const router = useRouter()
const preguntaStore = usePreguntaStore()
const cursoStore = useCursoStore()

// Estado
const modalPreguntaVisible = ref(false)
const verPreguntaModalVisible = ref(false)
const deletePreguntaModalVisible = ref(false)
const isEditingPregunta = ref(false)
const searchText = ref('')
const dificultadFilter = ref('')
const estadoFilter = ref('')
const preguntaSeleccionada = ref(null)
const preguntaToDelete = ref(null)
const formPreguntaRef = ref()
const modalImagenVisible = ref(false)
const imagenGrande = ref('')

// Estado para imágenes
const imagenesEnunciadoFiles = ref([])
const imagenesExplicacionFiles = ref([])
const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')

// Datos del curso
const curso = reactive({
  id: null,
  nombre: '',
  codigo: '',
  activo: true,
  preguntas_count: 0
})

const estadisticas = reactive({
  total: 0,
  facil: 0,
  medio: 0,
  dificil: 0
})

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '30', '50'],
  showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} preguntas`
})

// Formulario
const formPreguntaState = reactive({
  id: null,
  curso_id: null,
  enunciado: '',
  enunciado_adicional: '',
  opciones: ['', ''],
  respuesta_correcta: '',
  explicacion: '',
  nivel_dificultad: 'medio',
  activo: true,
  imagenes_existentes: [],
  imagenes_explicacion_existentes: []
})

// Validación manual
const validarFormulario = () => {
  const errors = []
  const opcionesValidas = formPreguntaState.opciones.filter(op => op && op.trim() !== '')

  if (opcionesValidas.length < 2) errors.push('Debe completar al menos 2 opciones')

  const opcionesSet = new Set(opcionesValidas.map(op => op.trim().toLowerCase()))
  if (opcionesSet.size !== opcionesValidas.length) errors.push('No puede haber opciones duplicadas')

  if (!formPreguntaState.respuesta_correcta || formPreguntaState.respuesta_correcta.trim() === '') {
    errors.push('Debe seleccionar una respuesta correcta')
  } else if (!opcionesValidas.includes(formPreguntaState.respuesta_correcta)) {
    errors.push('La respuesta correcta debe estar entre las opciones')
  }

  return errors
}

// Reglas (solo básicos)
const formPreguntaRules = {
  enunciado: [
    { required: true, message: 'El enunciado es requerido', trigger: 'blur' },
    { min: 5, message: 'El enunciado debe tener al menos 5 caracteres', trigger: 'blur' }
  ],
  nivel_dificultad: [{ required: true, message: 'La dificultad es requerida', trigger: 'change' }]
}

// Columnas
const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: 'Enunciado', dataIndex: 'enunciado', key: 'enunciado', ellipsis: true, minWidth: 360 },
  { title: 'Dificultad', dataIndex: 'nivel_dificultad', key: 'nivel_dificultad', width: 130 },
  { title: 'Estado', dataIndex: 'activo', key: 'activo', width: 110 },
  { title: 'Creado', dataIndex: 'created_at', key: 'created_at', width: 150 },
  { title: 'Acciones', key: 'acciones', width: 160, align: 'center', fixed: 'right' }
]

// Computed
const preguntas = computed(() => preguntaStore.preguntas)

// Utils
const stripHtml = (html) => (html ? String(html).replace(/<[^>]*>/g, '') : '')

// Imágenes
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    message.error('Solo se pueden subir imágenes!')
    return false
  }
  if (!isLt2M) {
    message.error('La imagen debe ser menor a 2MB!')
    return false
  }
  return false
}

const handleRemoveImagenEnunciado = (file) => {
  const index = imagenesEnunciadoFiles.value.findIndex(f => f.uid === file.uid)
  if (index !== -1) imagenesEnunciadoFiles.value.splice(index, 1)
}

const handleRemoveImagenExplicacion = (file) => {
  const index = imagenesExplicacionFiles.value.findIndex(f => f.uid === file.uid)
  if (index !== -1) imagenesExplicacionFiles.value.splice(index, 1)
}

const handlePreview = async (file) => {
  if (!file.url && !file.preview) file.preview = await getBase64(file.originFileObj)
  previewImage.value = file.url || file.preview
  previewVisible.value = true
  previewTitle.value = file.name || file.url?.substring(file.url?.lastIndexOf('/') + 1) || 'Imagen'
}

const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })

const getImageUrl = (path) => {
  if (!path) return ''
  if (path.startsWith('http')) return path
  return `/storage/${path}`
}

const eliminarImagenExistente = (tipo, index) => {
  if (tipo === 'enunciado') {
    formPreguntaState.imagenes_existentes = formPreguntaState.imagenes_existentes.filter((_, i) => i !== index)
    message.success('Imagen eliminada (se aplicará al guardar)')
  } else if (tipo === 'explicacion') {
    formPreguntaState.imagenes_explicacion_existentes =
      formPreguntaState.imagenes_explicacion_existentes.filter((_, i) => i !== index)
    message.success('Imagen eliminada (se aplicará al guardar)')
  }
}

const verImagen = (url) => {
  imagenGrande.value = url
  modalImagenVisible.value = true
}

// Handlers live preview
const handleEnunciadoInput = () => {}
const handleAdicionalInput = () => {}
const handleExplicacionInput = () => {}

// Navegación
const goBack = () => {
  router.push({ name: 'AcademiaCursos' })
}

const fetchPreguntas = async () => {
  const params = { page: pagination.current, per_page: pagination.pageSize }
  if (searchText.value) params.search = searchText.value
  if (dificultadFilter.value) params.nivel_dificultad = dificultadFilter.value
  if (estadoFilter.value !== '') params.activo = estadoFilter.value === 'true'

  const data = await preguntaStore.fetchPreguntasByCurso(curso.id, params)

  if (data) {
    estadisticas.total = data.estadisticas?.total || 0
    estadisticas.facil = data.estadisticas?.facil || 0
    estadisticas.medio = data.estadisticas?.medio || 0
    estadisticas.dificil = data.estadisticas?.dificil || 0

    if (data.preguntas) {
      pagination.total = data.preguntas.total || 0
      pagination.current = data.preguntas.current_page || 1
      pagination.pageSize = data.preguntas.per_page || 10
    }
  }
}

const loadCursoInfo = async () => {
  const cursoId = parseInt(route.params.id)
  curso.id = cursoId

  const cursoEncontrado = cursoStore.cursos.find(c => c.id === cursoId)
  if (cursoEncontrado) Object.assign(curso, cursoEncontrado)
  else curso.nombre = `Curso ${cursoId}`
}

// Modal create
const showCreateModal = () => {
  isEditingPregunta.value = false
  resetPreguntaForm()
  formPreguntaState.curso_id = curso.id
  modalPreguntaVisible.value = true
  preguntaStore.errors = null
}

// Modal edit
const showEditModal = (pregunta) => {
  isEditingPregunta.value = true
  resetPreguntaForm()

  formPreguntaState.id = pregunta.id
  formPreguntaState.curso_id = curso.id
  formPreguntaState.enunciado = pregunta.enunciado
  formPreguntaState.enunciado_adicional = pregunta.enunciado_adicional || ''

  // Garantizar mínimo 2 opciones
  const ops = (pregunta.opciones && Array.isArray(pregunta.opciones)) ? pregunta.opciones : ['', '']
  formPreguntaState.opciones = ops.length >= 2 ? ops : [...ops, '']

  formPreguntaState.respuesta_correcta = pregunta.respuesta_correcta || ''
  formPreguntaState.explicacion = pregunta.explicacion || ''
  formPreguntaState.nivel_dificultad = pregunta.nivel_dificultad
  formPreguntaState.activo = pregunta.activo

  formPreguntaState.imagenes_existentes = pregunta.imagenes || []
  formPreguntaState.imagenes_explicacion_existentes = pregunta.imagenes_explicacion || []

  imagenesEnunciadoFiles.value = []
  imagenesExplicacionFiles.value = []

  modalPreguntaVisible.value = true
  preguntaStore.errors = null
}

const verPregunta = (pregunta) => {
  preguntaSeleccionada.value = pregunta
  verPreguntaModalVisible.value = true
}

const confirmDeletePregunta = (pregunta) => {
  preguntaToDelete.value = pregunta
  deletePreguntaModalVisible.value = true
}

const handleDeletePregunta = async () => {
  try {
    await preguntaStore.eliminarPregunta(preguntaToDelete.value.id)
    message.success('Pregunta eliminada correctamente')
    deletePreguntaModalVisible.value = false
    preguntaToDelete.value = null
    await fetchPreguntas()
  } catch (error) {
    message.error('Error al eliminar la pregunta')
  }
}

const handleModalPreguntaOk = async () => {
  try {
    await formPreguntaRef.value.validateFields()

    const erroresValidacion = validarFormulario()
    if (erroresValidacion.length > 0) {
      erroresValidacion.forEach(err => message.error(err))
      return
    }

    await submitPreguntaForm()
  } catch (error) {
    console.log('Validación fallida:', error)
  }
}

const handleModalPreguntaCancel = () => {
  modalPreguntaVisible.value = false
  resetPreguntaForm()
  preguntaStore.errors = null
}

const submitPreguntaForm = async () => {
  try {
    const erroresValidacion = validarFormulario()
    if (erroresValidacion.length > 0) {
      erroresValidacion.forEach(err => message.error(err))
      return
    }

    const formData = new FormData()
    formData.append('curso_id', formPreguntaState.curso_id)
    formData.append('enunciado', formPreguntaState.enunciado)
    formData.append('nivel_dificultad', formPreguntaState.nivel_dificultad)
    formData.append('activo', formPreguntaState.activo ? 1 : 0)

    if (formPreguntaState.enunciado_adicional) formData.append('enunciado_adicional', formPreguntaState.enunciado_adicional)
    if (formPreguntaState.explicacion) formData.append('explicacion', formPreguntaState.explicacion)

    const opcionesValidas = formPreguntaState.opciones.filter(op => op && op.trim() !== '')
    formData.append('opciones', JSON.stringify(opcionesValidas))
    formData.append('respuesta_correcta', formPreguntaState.respuesta_correcta)

    imagenesEnunciadoFiles.value.forEach(file => file.originFileObj && formData.append('imagenes[]', file.originFileObj))
    imagenesExplicacionFiles.value.forEach(file => file.originFileObj && formData.append('imagenes_explicacion[]', file.originFileObj))

    if (isEditingPregunta.value) {
      if (formPreguntaState.imagenes_existentes?.length) {
        formData.append('imagenes_existentes', JSON.stringify(formPreguntaState.imagenes_existentes))
      }
      if (formPreguntaState.imagenes_explicacion_existentes?.length) {
        formData.append('imagenes_explicacion_existentes', JSON.stringify(formPreguntaState.imagenes_explicacion_existentes))
      }

      await preguntaStore.actualizarPregunta(formPreguntaState.id, formData)
      message.success('Pregunta actualizada correctamente')
    } else {
      await preguntaStore.crearPregunta(formData)
      message.success('Pregunta creada correctamente')
    }

    modalPreguntaVisible.value = false
    resetPreguntaForm()
    preguntaStore.errors = null
    await fetchPreguntas()
  } catch (error) {
    console.error('Error al guardar pregunta:', error)
    if (error.response && error.response.data.errors) {
      Object.values(error.response.data.errors).forEach(list => list.forEach(err => message.error(err)))
    } else {
      message.error('Error al guardar la pregunta')
    }
  }
}

const togglePreguntaStatus = async (pregunta) => {
  try {
    const payload = {
      curso_id: curso.id,
      enunciado: pregunta.enunciado,
      enunciado_adicional: pregunta.enunciado_adicional,
      opciones: pregunta.opciones,
      respuesta_correcta: pregunta.respuesta_correcta,
      explicacion: pregunta.explicacion,
      nivel_dificultad: pregunta.nivel_dificultad,
      activo: !pregunta.activo
    }

    await preguntaStore.actualizarPregunta(pregunta.id, payload)
    message.success(`Pregunta ${pregunta.activo ? 'desactivada' : 'activada'} correctamente`)
    await fetchPreguntas()
  } catch (error) {
    message.error('Error al cambiar el estado de la pregunta')
  }
}

const resetPreguntaForm = () => {
  formPreguntaState.id = null
  formPreguntaState.curso_id = null
  formPreguntaState.enunciado = ''
  formPreguntaState.enunciado_adicional = ''
  formPreguntaState.opciones = ['', '']
  formPreguntaState.respuesta_correcta = ''
  formPreguntaState.explicacion = ''
  formPreguntaState.nivel_dificultad = 'medio'
  formPreguntaState.activo = true
  formPreguntaState.imagenes_existentes = []
  formPreguntaState.imagenes_explicacion_existentes = []

  imagenesEnunciadoFiles.value = []
  imagenesExplicacionFiles.value = []

  if (formPreguntaRef.value) formPreguntaRef.value.resetFields()
}

const addOpcion = () => {
  if (formPreguntaState.opciones.length < 5) formPreguntaState.opciones.push('')
}

const removeOpcion = (index) => {
  if (formPreguntaState.opciones.length <= 2) return

  const opcionEliminada = formPreguntaState.opciones[index]
  formPreguntaState.opciones.splice(index, 1)

  if (opcionEliminada === formPreguntaState.respuesta_correcta) {
    formPreguntaState.respuesta_correcta = ''
  }
}

/**
 * Importante: si el usuario edita el texto de la opción marcada como correcta,
 * actualizamos también respuesta_correcta para que no se “desincronice”.
 */
const updateOpcion = (index, value) => {
  const oldValue = formPreguntaState.opciones[index]
  formPreguntaState.opciones[index] = value
  if (formPreguntaState.respuesta_correcta === oldValue) {
    formPreguntaState.respuesta_correcta = value
  }
}

const setRespuestaCorrecta = (opcion) => {
  formPreguntaState.respuesta_correcta = opcion
}

const handleSearch = () => {
  pagination.current = 1
  fetchPreguntas()
}

const handleFilterChange = () => {
  pagination.current = 1
  fetchPreguntas()
}

const clearFilters = () => {
  searchText.value = ''
  dificultadFilter.value = ''
  estadoFilter.value = ''
  pagination.current = 1
  fetchPreguntas()
}

const handleTableChange = (paginationConfig) => {
  pagination.current = paginationConfig.current
  pagination.pageSize = paginationConfig.pageSize
  fetchPreguntas()
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' })
}

const formatDificultad = (dificultad) => {
  const map = { facil: 'Fácil', medio: 'Media', dificil: 'Difícil' }
  return map[dificultad] || dificultad
}

const getDificultadColor = (dificultad) => {
  const map = { facil: 'green', medio: 'orange', dificil: 'red' }
  return map[dificultad] || 'default'
}

const getEnunciadoPreview = (enunciado) => {
  if (!enunciado) return ''
  const text = stripHtml(enunciado)
  return text.length > 140 ? text.substring(0, 140) + '...' : text
}

const getFieldStatus = (fieldName) => {
  if (preguntaStore.errors && preguntaStore.errors[fieldName]) return 'error'
  return ''
}

const getFieldHelp = (fieldName) => {
  if (preguntaStore.errors && preguntaStore.errors[fieldName]) return preguntaStore.errors[fieldName][0]
  return ''
}

// Lifecycle
onMounted(async () => {
  await loadCursoInfo()
  await fetchPreguntas()
})
</script>

<style scoped>
/* Layout general */
.preguntas-curso-view {
  padding: 0;
}

/* Header sticky */
.view-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.back-btn {
  padding: 0;
  height: auto;
}

.header-title {
  min-width: 0;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  color: #1f1f1f;
  line-height: 1.2;
}

.curso-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.curso-codigo {
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #ededed;
}

.primary-cta {
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(24,144,255,0.18);
}

/* Stats */
.curso-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.stat-card {
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}

/* Filtros */
.filters-card {
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  margin-bottom: 14px;
}

.filters-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-actions {
  display: flex;
  align-items: center;
}

/* Tabla */
.preguntas-table-container {
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.preguntas-table :deep(.ant-table) {
  border-radius: 14px;
}

.preguntas-table :deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 650;
  color: #1f1f1f;
  border-bottom: 1px solid #f0f0f0;
}

.preguntas-table :deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #f0f0f0;
}

.preguntas-table :deep(.ant-table-tbody > tr:hover > td) {
  background: #fcfcfc;
}

.enunciado-preview {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  color: #333;
}

.actions {
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}

.icon-action {
  border-radius: 10px;
}

.icon-action :deep(.anticon) {
  font-size: 16px;
}

/* Modal */
.pregunta-modal :deep(.ant-modal-body) {
  padding: 18px;
}

/* Editor + preview (reutilizable) */
.editor-container {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  height: 320px;
}

.editor-container.editor-small {
  height: 260px;
}

.editor-column,
.preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.editor-header span {
  font-weight: 600;
  color: #333;
}

.markdown-editor {
  flex: 1;
  resize: none;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background-color: #fafafa;
}

.markdown-editor:focus {
  border-color: #1890ff;
  background-color: #fff;
}

.editor-tips {
  margin-top: 8px;
  padding: 10px;
  background-color: #f6ffed;
  border-radius: 10px;
  border: 1px solid #b7eb8f;
  font-size: 12px;
  color: #666;
}

.editor-tips.compact {
  padding: 8px;
  border-radius: 10px;
}

.preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background-color: #fff;
  min-height: 200px;
}

.empty-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
  text-align: center;
}

.empty-preview p {
  margin-top: 8px;
  font-size: 14px;
}

.markdown-preview {
  font-size: 14px;
  line-height: 1.65;
}

/* Cards de secciones */
.section-card {
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.04);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-subtitle {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

/* Upload */
.upload-section {
  margin-top: 8px;
}

.existing-images {
  margin-top: 14px;
  padding: 12px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px dashed #d9d9d9;
}

.existing-images h4 {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.image-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.image-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.remove-image-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  border: none;
}

.remove-image-btn:hover {
  background: rgba(255, 0, 0, 0.65);
}

/* Opciones (nuevo diseño + latex preview) */
.opciones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.opcion-card {
  border: 1px solid #f0f0f0;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.opcion-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.06);
}

.opcion-card.is-correct {
  border-color: #52c41a;
  box-shadow: 0 14px 26px rgba(82, 196, 26, 0.10);
}

.opcion-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.opcion-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.opcion-letter {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #1890ff;
  background: #e6f7ff;
  border: 1px solid #bae7ff;
}

.mini-tag {
  margin: 0;
  font-size: 12px;
  border-radius: 999px;
}

.opcion-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  padding: 0 8px;
  border-radius: 10px;
}

.opcion-editor-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.option-preview-content {
  min-height: 150px;
}

.add-opcion-btn {
  margin-top: 10px;
  border-radius: 12px;
}

/* Config */
.config-row {
  display: flex;
  gap: 18px;
}

.config-item {
  flex: 1;
}

.dificultad-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Footer errores */
.form-footer {
  margin-top: 14px;
}

.error-alert {
  margin-bottom: 8px;
}

.error-alert:last-child {
  margin-bottom: 0;
}

/* Vista de pregunta */
.pregunta-view {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;
}

.enunciado-principal {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 18px;
  padding: 14px;
  background: #fafafa;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
}

.imagenes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.clickable-image {
  max-width: 200px;
  max-height: 200px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: transform 0.2s;
}

.clickable-image:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.enunciado-adicional {
  margin-bottom: 18px;
  padding: 14px;
  background: #f5f5f5;
  border-radius: 14px;
  border: 1px solid #ededed;
}

.opciones-view {
  margin-bottom: 18px;
}

.opcion-view {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
}

.opcion-view.correcta {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.opcion-text {
  flex: 1;
  min-width: 0;
}

.explicacion-view {
  padding: 14px;
  background: #e6f7ff;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid #bae7ff;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.delete-confirm-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pregunta-info {
  background: #fafafa;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
}

/* Ajustes upload */
:deep(.ant-upload-select-picture-card) {
  width: 100px;
  height: 100px;
  margin-right: 8px;
  margin-bottom: 8px;
}

:deep(.ant-upload-list-picture-card-container) {
  width: 100px;
  height: 100px;
}

/* Responsive */
@media (max-width: 768px) {
  .view-header {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .filters-section {
    flex-direction: column;
    align-items: stretch;
  }

  .filters {
    flex-direction: column;
    width: 100%;
  }

  .filters .ant-input-search,
  .filters .ant-select {
    width: 100% !important;
  }

  .curso-stats {
    grid-template-columns: 1fr;
  }

  .config-row {
    flex-direction: column;
  }

  .editor-container,
  .editor-container.editor-small {
    flex-direction: column;
    height: auto;
  }

  .opcion-editor-wrap {
    grid-template-columns: 1fr;
  }

  .clickable-image {
    max-width: 150px;
    max-height: 150px;
  }
}
</style>
