<!-- src/views/administracion/noticias/NoticiasAdmin.vue -->
<template>
  <div class="areas-container">
    <!-- Header -->
    <div class="areas-header">
      <div class="header-title">
        <h2>Noticias</h2>
        <p class="subtitle">Gestión de noticias y comunicados</p>
      </div>

      <a-button type="primary" @click="showCreateModal">
        <template #icon><PlusOutlined /></template>
        Nueva Noticia
      </a-button>
    </div>

    <!-- Filtros -->
    <div class="filters-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="Buscar por título o descripción..."
        @search="handleSearch"
        style="width: 340px"
        size="large"
        allowClear
      />

      <a-select
        v-model:value="publicadoFilter"
        placeholder="Publicado"
        style="width: 200px"
        size="large"
        @change="handleFilterChange"
        allowClear
      >
        <a-select-option :value="null">Todos</a-select-option>
        <a-select-option :value="true">Publicado</a-select-option>
        <a-select-option :value="false">Borrador</a-select-option>
      </a-select>

      <a-input
        v-model:value="categoriaFilter"
        placeholder="Categoría (opcional)"
        style="width: 220px"
        size="large"
        allowClear
        @pressEnter="handleFilterChange"
      />

      <a-button size="large" @click="clearFilters">
        <ReloadOutlined /> Limpiar
      </a-button>
    </div>

    <!-- Tabla -->
    <div class="areas-table-container">
      <a-table
        :data-source="noticiasStore.noticias"
        :columns="columns"
        :loading="noticiasStore.loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
        class="areas-table"
      >
        <template #bodyCell="{ column, record }">
          <!-- Imagen -->
          <template v-if="column.key === 'imagen'">
            <div class="thumb">
              <a-image
                v-if="record.imagen_url"
                :src="record.imagen_url"
                :preview="true"
                :width="56"
                :height="40"
                style="object-fit: cover; border-radius: 8px"
              />
              <div v-else class="thumb-empty">Sin imagen</div>
            </div>
          </template>

          <!-- Publicado -->
          <template v-if="column.key === 'publicado'">
            <a-tag :color="record.publicado ? 'green' : 'default'">
              {{ record.publicado ? "Publicado" : "Borrador" }}
            </a-tag>
          </template>

          <!-- Destacado -->
          <template v-if="column.key === 'destacado'">
            <a-tag :color="record.destacado ? 'gold' : 'default'">
              {{ record.destacado ? "Destacado" : "Normal" }}
            </a-tag>
          </template>

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

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

              <a-button danger type="link" class="action-btn" @click="confirmDelete(record)">
                <DeleteOutlined /> Eliminar
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- Modal Crear / Editar -->
    <a-modal
      v-model:open="modalVisible"
      :title="isEditing ? 'Editar Noticia' : 'Nueva Noticia'"
      :confirm-loading="noticiasStore.saving"
      @ok="handleSubmit"
      @cancel="closeModal"
      width="720px"
      class="area-modal"
    >
      <a-form ref="formRef" :model="formState" layout="vertical">
        <a-form-item label="Título" required>
          <a-input v-model:value="formState.titulo" placeholder="Ej: Comunicado oficial..." />
        </a-form-item>

        <a-form-item label="Descripción corta (para tarjetas)" required>
          <a-textarea
            v-model:value="formState.descripcion_corta"
            :rows="3"
            placeholder="Resumen breve (máx ~500 caracteres)"
          />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :xs="24" :md="12">
            <a-form-item label="Categoría (opcional)">
              <a-input v-model:value="formState.categoria" placeholder="Ej: Resultados" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :md="12">
            <a-form-item label="Color del ribbon/tag (opcional)">
              <a-input v-model:value="formState.tag_color" placeholder="blue | red | green | gold ..." />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :xs="24" :md="12">
            <a-form-item label="Fecha de publicación (opcional)">
              <a-date-picker
                v-model:value="fechaPicker"
                style="width: 100%"
                format="DD/MM/YYYY"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :md="12">
            <a-form-item label="Orden (opcional)">
              <a-input-number v-model:value="formState.orden" style="width: 100%" :min="0" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :xs="24" :md="12">
            <a-form-item label="Publicado">
              <a-switch v-model:checked="formState.publicado" checked-children="Sí" un-checked-children="No" />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :md="12">
            <a-form-item label="Destacado">
              <a-switch v-model:checked="formState.destacado" checked-children="Sí" un-checked-children="No" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="Contenido (opcional)">
          <a-textarea
            v-model:value="formState.contenido"
            :rows="6"
            placeholder="Contenido completo (si lo usarás en el detalle de la noticia)"
          />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :xs="24" :md="16">
            <a-form-item label="Link (opcional)">
              <a-input v-model:value="formState.link_url" placeholder="https://..." />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :md="8">
            <a-form-item label="Texto del link (opcional)">
              <a-input v-model:value="formState.link_texto" placeholder="Ver más" />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- Imagen -->
        <a-form-item label="Imagen (opcional)">
          <a-upload
            :before-upload="beforeUpload"
            :max-count="1"
            :show-upload-list="false"
          >
            <a-button>
              <UploadOutlined /> Seleccionar imagen
            </a-button>
          </a-upload>

          <div class="image-preview" v-if="imagePreviewUrl || formState.imagen_url">
            <a-image
              :src="imagePreviewUrl || formState.imagen_url"
              :preview="true"
              style="border-radius: 12px; overflow: hidden"
            />
            <a-button danger type="link" @click="clearImage" class="remove-image">
              Quitar imagen
            </a-button>
          </div>
        </a-form-item>

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

    <!-- Modal Eliminar -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="Eliminar Noticia"
      ok-type="danger"
      ok-text="Eliminar"
      :confirm-loading="noticiasStore.deleting"
      @ok="handleDelete"
      @cancel="deleteModalVisible = false"
      width="520px"
    >
      <a-alert type="warning" show-icon message="¿Deseas eliminar esta noticia?" />
      <div class="delete-info">
        <p><strong>{{ noticiaToDelete?.titulo }}</strong></p>
        <p class="muted">Esta acción no se puede deshacer.</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue"
import { message } from "ant-design-vue"
import dayjs from "dayjs"

import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ReloadOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue"

import { useNoticiasStore } from "../../../store/noticiasStore"

const noticiasStore = useNoticiasStore()

const modalVisible = ref(false)
const deleteModalVisible = ref(false)
const isEditing = ref(false)
const noticiaToDelete = ref(null)
const formRef = ref()

const searchText = ref("")
const publicadoFilter = ref(null)
const categoriaFilter = ref("")

const fechaPicker = ref(null) // dayjs
const imagePreviewUrl = ref("")
const selectedImageFile = ref(null)

const formState = reactive({
  id: null,
  titulo: "",
  descripcion_corta: "",
  contenido: "",
  categoria: "",
  tag_color: "",
  link_url: "",
  link_texto: "",
  fecha_publicacion: null, // ISO string (opcional)
  publicado: false,
  destacado: false,
  orden: null,

  // solo para mostrar cuando editas
  imagen_url: null,
})

const pagination = computed(() => ({
  current: noticiasStore.meta?.current_page || 1,
  pageSize: noticiasStore.meta?.per_page || 9,
  total: noticiasStore.meta?.total || 0,
  showSizeChanger: true,
}))

const columns = [
  { title: "ID", dataIndex: "id", key: "id", width: 80 },
  { title: "Imagen", key: "imagen", width: 90 },
  { title: "Título", dataIndex: "titulo", key: "titulo" },
  { title: "Categoría", dataIndex: "categoria", key: "categoria", width: 140 },
  { title: "Publicado", dataIndex: "publicado", key: "publicado", width: 110 },
  { title: "Destacado", dataIndex: "destacado", key: "destacado", width: 120 },
  { title: "Fecha", dataIndex: "fecha_publicacion", key: "fecha_publicacion", width: 140 },
  { title: "Acciones", key: "acciones", width: 180, align: "center" },
]

const showCreateModal = () => {
  isEditing.value = false
  resetForm()
  modalVisible.value = true
}

const showEditModal = (noticia) => {
  isEditing.value = true
  resetForm()

  Object.assign(formState, {
    id: noticia.id,
    titulo: noticia.titulo || "",
    descripcion_corta: noticia.descripcion_corta || "",
    contenido: noticia.contenido || "",
    categoria: noticia.categoria || "",
    tag_color: noticia.tag_color || "",
    link_url: noticia.link_url || "",
    link_texto: noticia.link_texto || "",
    fecha_publicacion: noticia.fecha_publicacion || null,
    publicado: !!noticia.publicado,
    destacado: !!noticia.destacado,
    orden: noticia.orden ?? null,
    imagen_url: noticia.imagen_url || null,
  })

  fechaPicker.value = noticia.fecha_publicacion ? dayjs(noticia.fecha_publicacion) : null

  modalVisible.value = true
}

const closeModal = () => {
  modalVisible.value = false
  resetForm()
}

const resetForm = () => {
  Object.assign(formState, {
    id: null,
    titulo: "",
    descripcion_corta: "",
    contenido: "",
    categoria: "",
    tag_color: "",
    link_url: "",
    link_texto: "",
    fecha_publicacion: null,
    publicado: false,
    destacado: false,
    orden: null,
    imagen_url: null,
  })

  fechaPicker.value = null
  imagePreviewUrl.value = ""
  selectedImageFile.value = null
}

watch(fechaPicker, (v) => {
  formState.fecha_publicacion = v ? v.toISOString() : null
})

const beforeUpload = (file) => {
  // preview local
  selectedImageFile.value = file
  imagePreviewUrl.value = URL.createObjectURL(file)
  message.success("Imagen seleccionada")
  // IMPORTANTE: evitar auto-upload (lo hacemos con el submit)
  return false
}

const clearImage = () => {
  selectedImageFile.value = null
  imagePreviewUrl.value = ""
  // si quieres que al actualizar se borre imagen, envía imagen_path = null
  // aquí solo la quito del preview; el back no borra a menos que lo programes.
}

const handleSubmit = async () => {
  try {
    if (!formState.titulo?.trim() || !formState.descripcion_corta?.trim()) {
      message.warning("Completa al menos Título y Descripción corta.")
      return
    }

    const payload = {
      titulo: formState.titulo,
      descripcion_corta: formState.descripcion_corta,
      contenido: formState.contenido || null,
      categoria: formState.categoria || null,
      tag_color: formState.tag_color || null,
      link_url: formState.link_url || null,
      link_texto: formState.link_texto || null,
      fecha_publicacion: formState.fecha_publicacion || null,
      publicado: formState.publicado,
      destacado: formState.destacado,
      orden: formState.orden,
    }

    if (selectedImageFile.value) payload.imagen = selectedImageFile.value

    if (isEditing.value) {
      await noticiasStore.actualizarNoticia(formState.id, payload)
      message.success("Noticia actualizada")
    } else {
      await noticiasStore.crearNoticia(payload)
      message.success("Noticia creada")
    }

    closeModal()
    await fetchTable()
  } catch (e) {
    message.error("Error al guardar")
  }
}

const confirmDelete = (noticia) => {
  noticiaToDelete.value = noticia
  deleteModalVisible.value = true
}

const handleDelete = async () => {
  try {
    await noticiasStore.eliminarNoticia(noticiaToDelete.value.id)
    message.success("Noticia eliminada")
    deleteModalVisible.value = false
    await fetchTable()
  } catch {
    message.error("Error al eliminar")
  }
}

const handleSearch = async () => {
  noticiasStore.setFiltro("q", searchText.value)
  noticiasStore.setFiltro("page", 1)
  await fetchTable()
}

const handleFilterChange = async () => {
  noticiasStore.setFiltro("publicado", publicadoFilter.value)
  noticiasStore.setFiltro("categoria", categoriaFilter.value)
  noticiasStore.setFiltro("page", 1)
  await fetchTable()
}

const clearFilters = async () => {
  searchText.value = ""
  publicadoFilter.value = null
  categoriaFilter.value = ""
  noticiasStore.resetFiltros()
  await fetchTable()
}

const handleTableChange = async (pg) => {
  noticiasStore.setFiltro("page", pg.current)
  noticiasStore.setFiltro("per_page", pg.pageSize)
  await fetchTable()
}

const fetchTable = async () => {
  await noticiasStore.cargarNoticias()
}

const formatDate = (date) => {
  if (!date) return "-"
  const d = new Date(date)
  if (isNaN(d.getTime())) return "-"
  return d.toLocaleDateString("es-PE")
}

onMounted(async () => {
  await fetchTable()
})
</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;
}

.filters-section {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
  flex-wrap: wrap;
  gap: 12px;
}

.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 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-empty {
  width: 56px;
  height: 40px;
  border-radius: 8px;
  border: 1px dashed #d9d9d9;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #999;
}

.image-preview {
  margin-top: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 10px;
  background: #fafafa;
}
.remove-image {
  padding: 0;
  margin-top: 6px;
}

.delete-info {
  margin-top: 12px;
}
.muted {
  color: #777;
  margin: 0;
}

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

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

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

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

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