<template>
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="panel p-3">
                    <div class="row mb-3">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h1 class="pull-left">Configuración de Correos</h1>
                                <div class="pull-right">
                                    <button
                                        class="btn btn-primary pull-right m-1"
                                        @click="abrirModalTemplates"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 5px;">
                                            <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.77 4.26A2 2 0 0 0 2 14h12a2 2 0 0 0 1.988-1.91l-6.77-4.26zM16 4.697v7.104l-5.803-3.558L16 4.697z"/>
                                        </svg>
                                        Ver Templates
                                    </button>
                                    <button
                                        class="btn btn-black pull-right m-1"
                                        @click="refrescar"
                                    >
                                        Refrescar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="custom-table">
                        <v-client-table
                            :data="configuraciones"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #modo_prueba="item">
                                <span class="badge" :class="item.row.modo_prueba ? 'bg-warning' : 'bg-secondary'">
                                    {{ item.row.modo_prueba ? 'Modo Prueba' : 'Modo Producción' }}
                                </span>
                            </template>

                            <template #es_activa="item">
                                <span class="badge" :class="item.row.es_activa ? 'bg-success' : 'bg-secondary'">
                                    {{ item.row.es_activa ? 'Activa' : 'Inactiva' }}
                                </span>
                            </template>


                            <template #actions="item">
                                <a
                                    href="javascript:void(0);"
                                    title="Editar"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="getConfiguracionId(item.row.id)"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-edit-2"
                                    >
                                        <path
                                            d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
                                        ></path>
                                    </svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    title="Activar"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="activarConfiguracion(item.row.id)"
                                    v-if="!item.row.es_activa"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-check-circle"
                                    >
                                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                        <polyline points="22,4 12,14.01 9,11.01"></polyline>
                                    </svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    :title="item.row.modo_prueba ? 'Desactivar Modo Prueba' : 'Activar Modo Prueba'"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="toggleModoPrueba(item.row.id)"
                                >
                                    <svg
                                        v-if="item.row.modo_prueba"
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-toggle-right"
                                        style="color: #28a745"
                                    >
                                        <rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect>
                                        <circle cx="16" cy="12" r="3"></circle>
                                    </svg>
                                    <svg
                                        v-else
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="24"
                                        height="24"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        class="feather feather-toggle-left"
                                        style="color: #6c757d"
                                    >
                                        <rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect>
                                        <circle cx="8" cy="12" r="3"></circle>
                                    </svg>
                                </a>
                            </template>
                        </v-client-table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Register Modal -->
        <div
            class="modal fade"
            id="registerModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="registerModalLabel"
            aria-hidden="true"
            v-show="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="registerModalLabel"
                    >
                        <h4 class="modal-title">
                            {{ editedIndex === -1 ? "Nueva Configuración de Correo" : "Editar Configuración de Correo" }}
                        </h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <form
                            class="mt-0"
                            ref="formComponent"
                            @submit.stop.prevent=""
                        >
                            <div class="row">
                                <!-- Información Básica -->
                                <div class="col-md-12 col-sm-12">
                                    <h5 class="mb-3">Información de Configuración</h5>
                                    <div class="form-group mb-3">
                                        <label>Nombre</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            placeholder="Nombre de la configuración"
                                            v-model="configuracion.nombre"
                                            :class="[
                                                is_entrada
                                                    ? !errors.nombre
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.nombre" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Correo de Prueba</label>
                                        <input
                                            type="email"
                                            class="form-control"
                                            placeholder="correo@ejemplo.com"
                                            v-model="configuracion.correo_prueba"
                                            :class="[
                                                is_entrada
                                                    ? !errors.correo_prueba
                                                        ? 'is-valid'
                                                        : 'is-invalid'
                                                    : '',
                                            ]"
                                        />
                                        <div class="valid-feedback"></div>
                                        <div class="invalid-feedback">
                                            <li v-for="item in errors.correo_prueba" :key="item">
                                                {{ item }}
                                            </li>
                                        </div>
                                        <small class="form-text text-muted">
                                            Todos los correos se enviarán a esta dirección cuando esté activo el modo prueba
                                        </small>
                                    </div>

                                    <h6>Configuraciones:</h6>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.modo_prueba"
                                            id="modo_prueba"
                                        />
                                        <label class="form-check-label" for="modo_prueba">
                                            Activar Modo Prueba
                                        </label>
                                        <small class="form-text text-muted d-block">
                                            Cuando esté activo, todos los correos se enviarán al correo de prueba
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            v-show="editedIndex === -1"
                                            @click="guardarConfiguracion"
                                            :disabled="guardando"
                                        >
                                            {{ guardando ? 'Guardando...' : 'Guardar' }}
                                        </button>
        
                                        <button
                                            type="button"
                                            class="btn btn-black w-100"
                                            v-show="editedIndex !== -1"
                                            @click="guardarConfiguracion"
                                            :disabled="guardando"
                                        >
                                            {{ guardando ? 'Actualizando...' : 'Actualizar' }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Eliminar Modal -->
        <div
            class="modal fade"
            id="deleteModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            ¿Estás seguro de eliminar esta configuración?
                        </h5>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                        >
                            <i class="flaticon-cancel-12"></i> Cancelar
                        </button>
                        <button
                            type="button"
                            class="btn btn-black"
                            @click="eliminarConfiguracion()"
                        >
                            Aceptar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de Templates -->
        <div
            class="modal fade"
            id="templatesModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="templatesModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header titulo-dorado" id="templatesModalLabel">
                        <h4 class="modal-title">Templates de Correo Disponibles</h4>
                        <button
                            type="button"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                            class="btn-close"
                        ></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted mb-3">
                            Seleccione un template para enviar un correo de ejemplo al correo configurado.
                        </p>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Template</th>
                                        <th>Descripción</th>
                                        <th>Acción</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="template in templates" :key="template.id">
                                        <td><strong>{{ template.nombre }}</strong></td>
                                        <td>{{ template.descripcion }}</td>
                                        <td>
                                            <button
                                                class="btn btn-sm btn-primary"
                                                @click="enviarEjemploTemplate(template.id)"
                                                :disabled="enviandoTemplate === template.id"
                                            >
                                                <span v-if="enviandoTemplate === template.id">
                                                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                                    Enviando...
                                                </span>
                                                <span v-else>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" style="margin-right: 3px;">
                                                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm-1.138-1.138L13.228 1.64 4.587 8.932l.911.001Z"/>
                                                    </svg>
                                                    Enviar Ejemplo
                                                </span>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-dismiss="modal"
                            data-bs-dismiss="modal"
                        >
                            Cerrar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <loading 
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"/>
    </div>
</template>

<style>
.table3 .actions svg {
    padding: 2px;
}
</style>

<script setup>
import { onMounted, ref } from "vue";
import "@/assets/sass/elements/tooltip.scss";
import { useMeta } from "@/composables/use-meta";
import { useAuthStore } from "@/store/AuthStore";
import * as UserRepository from "@/repositories/UserRepository";
import * as CorreoRepository from '@/repositories/CorreoRepository';
import axios from "axios";

import "@/assets/sass/scrollspyNav.scss";

// loading
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

useMeta({ title: "EGURROLA" });

const store = useAuthStore();
const configuraciones = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let deleteModal = ref(false);
let templatesModal = ref(false);
const is_entrada = ref(false);
const editedIndex = ref(-1);
const formComponent = ref(null);
const errors = ref({});
const guardando = ref(false);
const cargando = ref(false);

const isLoading = ref(true);
const enviandoTemplate = ref(null);

// Templates disponibles
const templates = ref([
    { id: 'aviso_nuevo_venta_confirmacion_cliente', nombre: 'Venta Confirmada', descripcion: 'Notificación al cliente cuando su venta ha sido confirmada' },
    { id: 'aviso_nuevo_venta_cliente', nombre: 'Nueva Venta (Cliente)', descripcion: 'Notificación al cliente cuando se registra una nueva venta' },
    { id: 'aviso_nuevo_venta_admin', nombre: 'Nueva Venta (Admin)', descripcion: 'Notificación al administrador cuando se registra una nueva venta' },
    { id: 'aviso_nuevo_cliente', nombre: 'Nuevo Cliente', descripcion: 'Notificación al administrador cuando se registra un nuevo cliente' },
    { id: 'aviso_nueva_cita', nombre: 'Nueva Solicitud de Cita', descripcion: 'Notificación al administrador cuando se solicita una nueva cita' },
    { id: 'aviso_cambio_pw', nombre: 'Restablecimiento de Contraseña', descripcion: 'Correo para restablecer la contraseña del usuario' },
    { id: 'aviso_activacion_cliente', nombre: 'Cuenta Activada', descripcion: 'Notificación al cliente cuando su cuenta ha sido activada' },
    { id: 'aviso_activacion_cita', nombre: 'Cita Autorizada', descripcion: 'Notificación al cliente cuando su cita ha sido autorizada' },
    { id: 'auto_aviso_nuevo_cliente', nombre: 'Registro Completado (Pendiente)', descripcion: 'Notificación automática al cliente cuando completa su registro (pendiente)' },
    { id: 'auto_aviso_nuevo_cliente_local', nombre: 'Registro Completado (Activo)', descripcion: 'Notificación automática al cliente cuando completa su registro (activo)' },
]);

// Configuración por defecto
const configuracion = ref({
    nombre: '',
    correo_prueba: 'deyvijesusgomezmoha@gmail.com',
    modo_prueba: true,
    es_activa: false
});

//table
const columns1 = ref([
    "id",
    "nombre",
    "correo_prueba",
    "modo_prueba",
    "es_activa",
    "actions",
]);

const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        actions: (h, row, index) => {
            return "";
        },
    },
    perPage: 10,
    perPageValues: [10, 20, 50],
    skin: "table table-hover table-sm",
    columnsClasses: { actions: "actions text-center" },
    sortable: ["id", "nombre", "correo_prueba"],
    sortIcon: {
        base: "sort-icon-none",
        up: "sort-icon-asc",
        down: "sort-icon-desc",
    },
    pagination: { nav: "scroll", chunk: 3 },
    texts: {
        count: "Mostrando {from} a {to} de {count}",
        filter: "",
        filterPlaceholder: "Buscar...",
        limit: "Resultados:",
        noResults:"No hay registros"
    },
    resizableColumns: true,
});

const cargarConfiguraciones = async () => {
    cargando.value = true;
    try {
        const response = await CorreoRepository.getAll();
        configuraciones.value = response.data;
    } catch (error) {
        showMessage('Error al cargar configuraciones', 'error');
    } finally {
        cargando.value = false;
    }
};

const guardarConfiguracion = async () => {
    try {
        guardando.value = true;
        is_entrada.value = true;
        
        if (editedIndex.value === -1) {
            await CorreoRepository.create(configuracion.value);
            showMessage("Configuración creada exitosamente");
        } else {
            await CorreoRepository.update(configuracion.value, editedIndex.value);
            showMessage("Configuración actualizada exitosamente");
        }
        
        close();
        initializeCreate();
        cargarConfiguraciones();
    } catch (error) {
        if (axios.isAxiosError(error)) {
            errors.value = error.response.data.errors;
        }
        showMessage('Error al guardar configuración', 'error');
    } finally {
        guardando.value = false;
    }
};

const getConfiguracionId = async (id) => {
    try {
        const response = await CorreoRepository.getById(id);
        configuracion.value = { ...response.data };
        errors.value = {};
        editedIndex.value = id;
        registerModal.show();
    } catch (error) {
        showMessage('Error al cargar configuración', 'error');
    }
};

const activarConfiguracion = async (id) => {
    try {
        await CorreoRepository.activar(id);
        showMessage("Configuración activada exitosamente");
        cargarConfiguraciones();
    } catch (error) {
        showMessage('Error al activar configuración', 'error');
    }
};

const toggleModoPrueba = async (id) => {
    try {
        await CorreoRepository.toggleModoPrueba(id);
        showMessage("Modo prueba actualizado");
        cargarConfiguraciones();
    } catch (error) {
        showMessage('Error al cambiar modo prueba', 'error');
    }
};

const deleteItem = (id) => {
    editedIndex.value = id;
    deleteModal.show();
};

const eliminarConfiguracion = async () => {
    try {
        await CorreoRepository.deleteConfig(editedIndex.value);
        showMessage("Configuración eliminada exitosamente");
        closeDelete();
        cargarConfiguraciones();
    } catch (error) {
        showMessage('Error al eliminar configuración', 'error');
    }
};

const close = () => {
    registerModal.hide();
    editedIndex.value = -1;
};

const closeDelete = () => {
    deleteModal.hide();
    initializeCreate();
};

const initializeCreate = () => {
    configuracion.value = {
        nombre: '',
        correo_prueba: 'deyvijesusgomezmoha@gmail.com',
        modo_prueba: true,
        es_activa: false
    };
    errors.value = {};
    editedIndex.value = -1;
};

const obtener_user = async () => {
    try {
        const response = await UserRepository.getuser();
        return response;
    } catch (error) {
        console.log(error);
    }
};

const initialize = async () => {
    isLoading.value = true;
    await cargarConfiguraciones();
    is_entrada.value = false;
    isLoading.value = false;
};

const refrescar = () => {
    cargarConfiguraciones();
    showMessage("Completado correctamente");
};

const abrirModalTemplates = () => {
    templatesModal.show();
};

const enviarEjemploTemplate = async (templateId) => {
    try {
        enviandoTemplate.value = templateId;
        await CorreoRepository.enviarEjemploTemplate(templateId);
        showMessage("Correo de ejemplo enviado exitosamente");
    } catch (error) {
        if (axios.isAxiosError(error)) {
            const message = error.response?.data?.message || 'Error al enviar el correo de ejemplo';
            showMessage(message, 'error');
        } else {
            showMessage('Error al enviar el correo de ejemplo', 'error');
        }
    } finally {
        enviandoTemplate.value = null;
    }
};

const showMessage = (msg = "", type = "success") => {
    const toast = window.Swal.mixin({
        toast: true,
        position: "top",
        showConfirmButton: false,
        timer: 3000,
    });
    toast.fire({
        icon: type,
        title: msg,
        padding: "10px 20px",
    });
};

onMounted(async () => {
    const response = await obtener_user();
    store.current_user.id = response.id;
    store.current_user.name = response.name;
    store.current_user.email = response.email;
    registerModal = new window.bootstrap.Modal(
        document.getElementById("registerModal")
    );
    deleteModal = new window.bootstrap.Modal(
        document.getElementById("deleteModal")
    );
    templatesModal = new window.bootstrap.Modal(
        document.getElementById("templatesModal")
    );

    initialize();
});
</script>
