<template>
  <!-- v-if garantiza que si no hay comunicado activo el modal ni se monta -->
  <a-modal
    v-if="imagenes.length > 0"
    v-model:open="visible"
    :footer="null"
    :closable="false"
    :mask-closable="true"
    :keyboard="true"
    :destroy-on-close="true"
    :width="'auto'"
    centered
    wrap-class-name="comunicado-modal-wrap"
    transition-name="comunicado-slide"
    @cancel="cerrar"
  >
    <div class="comunicado-modal">
      <!-- Botón cerrar -->
      <button class="btn-cerrar" @click="cerrar" aria-label="Cerrar">
        <CloseOutlined />
      </button>

      <!-- Una sola imagen -->
      <template v-if="imagenes.length === 1">
        <img
          :src="imagenes[0].imagen_url"
          :alt="comunicado.titulo"
          class="comunicado-img"
        />
      </template>

      <!-- Carrusel si hay más de una imagen -->
      <template v-else-if="imagenes.length > 1">
        <div class="custom-carousel">
          <transition name="fade">
            <div :key="currentIndex" class="img-wrapper">
              <img
                :src="imagenes[currentIndex].imagen_url"
                :alt="comunicado.titulo"
                class="comunicado-img"
              />
              <button class="arrow arrow-prev" @click="prev" aria-label="Anterior">
                <LeftOutlined />
              </button>
              <button class="arrow arrow-next" @click="next" aria-label="Siguiente">
                <RightOutlined />
              </button>
            </div>
          </transition>

          <div class="dots">
            <span
              v-for="(_, i) in imagenes"
              :key="i"
              :class="['dot', { active: i === currentIndex }]"
              @click="currentIndex = i"
            />
          </div>
        </div>
      </template>
      <!-- Barra inferior: siempre visible -->
      <div class="accion-bar">
        <a
          v-if="comunicado?.url_accion"
          :href="comunicado.url_accion"
          target="_blank"
          rel="noopener noreferrer"
          class="btn-accion"
        >
          {{ comunicado.texto_boton || 'Ver más' }}
        </a>
        <button class="btn-cerrar-bar" @click="cerrar">Cerrar</button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { useComunicadosStore } from '../../store/comunicadosStore'

const store = useComunicadosStore()
const visible = ref(false)
const currentIndex = ref(0)

const comunicado = computed(() => store.comunicadoActivo)
const imagenes = computed(() => store.comunicadoActivo?.imagenes ?? [])

function prev() {
  currentIndex.value = (currentIndex.value - 1 + imagenes.value.length) % imagenes.value.length
}

function next() {
  currentIndex.value = (currentIndex.value + 1) % imagenes.value.length
}

onMounted(async () => {
  await store.fetchActivo()
  if (store.comunicadoActivo && imagenes.value.length > 0) {
    visible.value = true
  }
})

// Si el comunicado activo desaparece (ej. desactivado desde admin), cerrar el modal
watch(
  () => store.comunicadoActivo,
  (val) => {
    if (!val) visible.value = false
  }
)

function cerrar() {
  visible.value = false
}
</script>

<style>
/* A. Animación de apertura: slide-up + fade */
.comunicado-slide-enter-active {
  animation: comunicadoSlideUp 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.comunicado-slide-leave-active {
  animation: comunicadoSlideDown 0.22s ease forwards;
}

@keyframes comunicadoSlideUp {
  from { transform: translateY(40px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

@keyframes comunicadoSlideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(24px); opacity: 0; }
}

.comunicado-modal-wrap .ant-modal {
  width: auto !important;
  max-width: 94vw;
}

.comunicado-modal-wrap .ant-modal-content {
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.comunicado-modal-wrap .ant-modal-body {
  padding: 0;
}
</style>

<style scoped>
.comunicado-modal {
  position: relative;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
}

.comunicado-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
}

.btn-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-cerrar:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Carrusel propio */
.custom-carousel {
  position: relative;
  line-height: 0;
}

/* Wrapper que envuelve imagen + flechas; se ajusta al ancho natural de la imagen */
.img-wrapper {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
}

/* B. Transición entre imágenes: crossfade suave */
.fade-enter-active {
  transition: opacity 0.7s ease-in-out;
  position: relative;
  z-index: 2;
}

.fade-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.7s ease-in-out;
  z-index: 1;
}

.fade-enter-from { opacity: 0; }
.fade-enter-to   { opacity: 1; }
.fade-leave-from { opacity: 1; }
.fade-leave-to   { opacity: 0; }

/* Flechas */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s;
}

.arrow:hover {
  background: rgba(0, 0, 0, 0.75);
}

.arrow-prev { left: 10px; }
.arrow-next { right: 10px; }

/* Dots */
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
}

/* C. Dots tipo stories */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 0.3s ease, background 0.2s, border-color 0.2s;
}

.dot.active {
  width: 24px;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Barra inferior */
.accion-bar {
  line-height: normal;
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-accion {
  display: inline-block;
  background: #1890ff;
  color: white;
  padding: 8px 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-accion:hover {
  background: #096dd9;
  color: white;
}

.btn-cerrar-bar {
  background: transparent;
  border: 1px solid #d9d9d9;
  color: #555;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-cerrar-bar:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* ── Responsive mobile ── */
@media (max-width: 576px) {
  /* Imagen más corta en mobile para dejar espacio a la barra inferior */
  .comunicado-img {
    max-height: 58vh;
  }

  /* Touch targets más grandes */
  .btn-cerrar {
    width: 40px;
    height: 40px;
    font-size: 16px;
    top: 8px;
    right: 8px;
  }

  .arrow {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* Barra inferior: stack vertical si hay dos botones */
  .accion-bar {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  .btn-accion,
  .btn-cerrar-bar {
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    font-size: 15px;
  }
}
</style>
