<template>
  <div class="areas-container">

    <!-- Header -->
    <div class="areas-header">
      <div class="header-title">
        <h2>Comunicados</h2>
        <p class="subtitle">Gestiona los comunicados que aparecen en la web pública</p>
      </div>
      <a-button type="primary" @click="abrirModalCrear">
        <template #icon><PlusOutlined /></template>
        Nuevo comunicado
      </a-button>
    </div>

    <!-- Tabla -->
    <div class="areas-table-container">
      <a-table
        :columns="columnas"
        :data-source="store.comunicados"
        :loading="store.loading"
        :pagination="{
          current: store.pagination.current_page,
          pageSize: store.pagination.per_page,
          total: store.pagination.total,
          showTotal: (t) => `${t} comunicados`,
        }"
        row-key="id"
        class="areas-table"
        @change="onTableChange"
      >
        <template #bodyCell="{ column, record }">

          <!-- Preview imágenes -->
          <template v-if="column.key === 'imagenes'">
            <div class="thumb-group">
              <a-image
                v-for="img in record.imagenes"
                :key="img.id"
                :src="img.imagen_url"
                :width="48"
                :height="40"
                style="object-fit: cover; border-radius: 6px; border: 1px solid #f0f0f0;"
              />
              <div v-if="!record.imagenes?.length" class="thumb-empty">Sin imagen</div>
            </div>
          </template>

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

          <!-- Vigencia -->
          <template v-else-if="column.key === 'vigencia'">
            <span v-if="record.fecha_inicio || record.fecha_fin" style="font-size: 12px; color: #666;">
              {{ formatDate(record.fecha_inicio) }} → {{ formatDate(record.fecha_fin) }}
            </span>
            <a-tag v-else color="default">Sin vigencia</a-tag>
          </template>

          <!-- Botón acción -->
          <template v-else-if="column.key === 'url_accion'">
            <a
              v-if="record.url_accion"
              :href="record.url_accion"
              target="_blank"
              style="font-size: 12px;"
            >
              {{ record.texto_boton || 'Ver más' }}
            </a>
            <span v-else style="color: #bbb; font-size: 12px;">—</span>
          </template>

          <!-- Acciones -->
          <template v-else-if="column.key === 'acciones'">
            <a-space>
              <a-button type="link" class="action-btn" @click="abrirModalEditar(record)">
                <EditOutlined /> Editar
              </a-button>
              <a-button type="link" danger class="action-btn" @click="confirmarEliminar(record)">
                <DeleteOutlined /> Eliminar
              </a-button>
            </a-space>
          </template>

        </template>
      </a-table>
    </div>

    <!-- Modal crear / editar -->
    <a-modal
      v-model:open="modalVisible"
      :title="modoEdicion ? 'Editar comunicado' : 'Nuevo comunicado'"
      :confirm-loading="guardando"
      ok-text="Guardar"
      cancel-text="Cancelar"
      width="560px"
      class="area-modal"
      @ok="onGuardar"
      @cancel="cerrarModal"
    >
      <a-form :model="form" layout="vertical" ref="formRef">

        <a-form-item
          label="Título (referencia interna)"
          name="titulo"
          :rules="[{ required: true, message: 'El título es requerido' }]"
        >
          <a-input v-model:value="form.titulo" placeholder="Ej: Comunicado cronograma Feb 2026" />
        </a-form-item>

        <a-form-item label="Vigencia (opcional)">
          <a-space>
            <a-date-picker
              v-model:value="form.fecha_inicio"
              placeholder="Desde"
              format="DD/MM/YYYY"
              value-format="YYYY-MM-DD"
              :disabled-date="(d) => d && d.isBefore(dayjs().startOf('day'))"
            />
            <span style="color: #999;">→</span>
            <a-date-picker
              v-model:value="form.fecha_fin"
              placeholder="Hasta"
              format="DD/MM/YYYY"
              value-format="YYYY-MM-DD"
              :disabled-date="(d) => d && d.isBefore(dayjs().startOf('day'))"
            />
          </a-space>
          <div style="font-size: 12px; color: #999; margin-top: 4px;">
            Si no se define, el comunicado no tiene fecha límite.
          </div>
        </a-form-item>

        <a-form-item label="Botón de acción (opcional)">
          <a-space direction="vertical" style="width: 100%;">
            <a-input
              v-model:value="form.url_accion"
              placeholder="https://ejemplo.com/inscripcion"
              addon-before="URL"
            />
            <a-input
              v-model:value="form.texto_boton"
              placeholder="Ej: Inscríbete aquí, Ver cronograma..."
              addon-before="Texto"
              :maxlength="60"
              show-count
            />
          </a-space>
          <div style="font-size: 12px; color: #999; margin-top: 4px;">
            Si defines una URL, aparecerá un botón en el modal de la web.
          </div>
        </a-form-item>

        <!-- Imágenes actuales (solo en edición) -->
        <a-form-item v-if="modoEdicion && imagenesActuales.length > 0" label="Imágenes actuales">
          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
            <div
              v-for="img in imagenesActuales"
              :key="img.id"
              style="position: relative; display: inline-block;"
            >
              <a-image
                :src="img.imagen_url"
                :width="72"
                :height="72"
                style="object-fit: cover; border-radius: 4px; border: 1px solid #f0f0f0;"
              />
              <a-popconfirm
                title="¿Eliminar esta imagen?"
                ok-text="Sí"
                cancel-text="No"
                @confirm="onEliminarImagen(img)"
              >
                <button class="btn-remove-img">✕</button>
              </a-popconfirm>
            </div>
          </div>
          <div style="font-size: 12px; color: #999; margin-top: 4px;">
            Haz clic en ✕ para eliminar una imagen existente.
          </div>
        </a-form-item>

        <!-- Agregar imágenes -->
        <a-form-item
          :label="modoEdicion ? 'Agregar más imágenes' : 'Imágenes del comunicado'"
          name="imagenes"
          :rules="modoEdicion ? [] : [{ validator: validarImagenes }]"
        >
          <a-upload
            v-model:file-list="fileImagenes"
            list-type="picture-card"
            :before-upload="() => false"
            accept="image/jpeg,image/png,image/webp"
            multiple
          >
            <div v-if="fileImagenes.length < 8">
              <PlusOutlined />
              <div style="margin-top: 8px; font-size: 12px;">Agregar</div>
            </div>
          </a-upload>
          <div v-if="modoEdicion" style="font-size: 12px; color: #999; margin-top: 4px;">
            Las imágenes que subas se agregarán a las existentes.
          </div>
        </a-form-item>

        <a-alert v-if="store.error" type="error" show-icon :message="store.error" />

      </a-form>
    </a-modal>

    <!-- Modal eliminar -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="Eliminar comunicado"
      ok-type="danger"
      ok-text="Eliminar"
      cancel-text="Cancelar"
      :confirm-loading="eliminando"
      width="480px"
      @ok="onEliminar"
      @cancel="deleteModalVisible = false"
    >
      <a-alert type="warning" show-icon message="¿Deseas eliminar este comunicado?" />
      <div class="delete-info">
        <p><strong>{{ comunicadoAEliminar?.titulo }}</strong></p>
        <p class="muted">Esta acción eliminará también todas sus imágenes y no se puede deshacer.</p>
      </div>
    </a-modal>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import { useComunicadosStore } from '../../../store/comunicadosStore'

const store = useComunicadosStore()

const columnas = [
  { title: 'Título', dataIndex: 'titulo', key: 'titulo' },
  { title: 'Imágenes', key: 'imagenes', width: 160 },
  { title: 'Activo', key: 'activo', width: 140 },
  { title: 'Vigencia', key: 'vigencia', width: 200 },
  { title: 'Botón web', key: 'url_accion', width: 130 },
  { title: 'Acciones', key: 'acciones', width: 160, align: 'center' },
]

// Estado modales
const modalVisible = ref(false)
const deleteModalVisible = ref(false)
const modoEdicion = ref(false)
const comunicadoEditando = ref(null)
const comunicadoAEliminar = ref(null)
const guardando = ref(false)
const eliminando = ref(false)
const togglingId = ref(null)
const formRef = ref(null)

// Form
const form = ref({ titulo: '', fecha_inicio: null, fecha_fin: null, url_accion: '', texto_boton: '' })
const fileImagenes = ref([])

const imagenesActuales = computed(() => comunicadoEditando.value?.imagenes ?? [])

onMounted(() => {
  store.fetchComunicados()
})

function onTableChange(pagination) {
  store.fetchComunicados({ page: pagination.current })
}

function abrirModalCrear() {
  modoEdicion.value = false
  comunicadoEditando.value = null
  form.value = { titulo: '', fecha_inicio: null, fecha_fin: null, url_accion: '', texto_boton: '' }
  fileImagenes.value = []
  modalVisible.value = true
}

function abrirModalEditar(record) {
  modoEdicion.value = true
  comunicadoEditando.value = record
  form.value = {
    titulo: record.titulo,
    fecha_inicio: record.fecha_inicio ?? null,
    fecha_fin: record.fecha_fin ?? null,
    url_accion: record.url_accion ?? '',
    texto_boton: record.texto_boton ?? '',
  }
  fileImagenes.value = []
  modalVisible.value = true
}

function cerrarModal() {
  modalVisible.value = false
  formRef.value?.resetFields()
}

async function validarImagenes() {
  if (!modoEdicion.value && fileImagenes.value.length === 0) {
    return Promise.reject('Agrega al menos una imagen')
  }
  return Promise.resolve()
}

async function onGuardar() {
  try {
    await formRef.value.validate()
  } catch {
    return
  }

  const fd = new FormData()
  fd.append('titulo', form.value.titulo)
  fd.append('fecha_inicio', form.value.fecha_inicio ?? '')
  fd.append('fecha_fin', form.value.fecha_fin ?? '')
  fd.append('url_accion', form.value.url_accion ?? '')
  fd.append('texto_boton', form.value.texto_boton ?? '')
  fileImagenes.value.forEach((f) => fd.append('imagenes[]', f.originFileObj))

  guardando.value = true
  const ok = modoEdicion.value
    ? await store.updateComunicado(comunicadoEditando.value.id, fd)
    : await store.createComunicado(fd)
  guardando.value = false

  if (ok) {
    message.success(modoEdicion.value ? 'Comunicado actualizado' : 'Comunicado creado')
    cerrarModal()
    store.fetchComunicados()
  } else {
    message.error(store.error ?? 'Error al guardar')
  }
}

function confirmarEliminar(record) {
  comunicadoAEliminar.value = record
  deleteModalVisible.value = true
}

async function onEliminar() {
  eliminando.value = true
  const ok = await store.deleteComunicado(comunicadoAEliminar.value.id)
  eliminando.value = false
  if (ok) {
    message.success('Comunicado eliminado')
    deleteModalVisible.value = false
  } else {
    message.error(store.error ?? 'Error al eliminar')
  }
}

async function onEliminarImagen(img) {
  const ok = await store.deleteImagen(comunicadoEditando.value.id, img.id)
  if (ok) {
    message.success('Imagen eliminada')
  } else {
    message.error(store.error ?? 'Error al eliminar imagen')
  }
}

function formatDate(date) {
  if (!date) return '∞'
  const [y, m, d] = date.substring(0, 10).split('-').map(Number)
  const fecha = new Date(y, m - 1, d)
  if (isNaN(fecha.getTime())) return '∞'
  return fecha.toLocaleDateString('es-PE')
}

async function onToggleActivo(record) {
  togglingId.value = record.id
  const ok = await store.toggleActivo(record.id)
  togglingId.value = null
  if (!ok) message.error(store.error ?? 'Error al cambiar estado')
}
</script>

<style scoped>
.areas-container {
  padding: 0;
}

.areas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
}

.header-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f1f1f;
}

.subtitle {
  margin: 4px 0 0 0;
  color: #666;
  font-size: 14px;
}

.areas-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

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

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

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

.action-btn {
  padding: 4px 8px;
  height: auto;
}

.thumb-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.thumb-empty {
  width: 48px;
  height: 40px;
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #999;
}

.btn-remove-img {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  border: none;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.delete-info {
  margin-top: 12px;
}

.muted {
  color: #777;
  margin: 0;
}

@media (max-width: 768px) {
  .areas-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .areas-table-container {
    overflow-x: auto;
  }

  .areas-table {
    min-width: 900px;
  }
}
</style>
