<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 Impresiones</h1>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    @click="refrescar"
                                >
                                    Refrescar
                                </button>
                                <button
                                    class="btn btn-black pull-right m-1"
                                    data-bs-toggle="modal"
                                    data-bs-target="#registerModal"
                                    @click="initializeCreate"
                                >
                                    Nueva Configuración
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Filtros -->
                    <div class="row mb-2">
                        <div class="col-md-3">
                            <div class="form-group mb-0">
                                <label class="mb-1">Tipo de Impresión</label>
                                <multiselect
                                    v-model="filtroTipo"
                                    :close-on-select="true"
                                    :searchable="true"
                                    :options="tiposImpresion"
                                    @change="cargarConfiguraciones"
                                    selected-label=""
                                    select-label=""
                                    deselect-label=""
                                    placeholder="Filtrar por tipo..."
                                    :showNoOptions="false"
                                    :showNoResults="false"
                                >
                                </multiselect>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-0">
                                <label class="mb-1">Sucursal</label>
                                <multiselect
                                    v-model="filtroSucursal"
                                    :close-on-select="true"
                                    :searchable="true"
                                    :options="sucursales"
                                    :custom-label="sucursalLabel"
                                    @change="cargarConfiguraciones"
                                    selected-label=""
                                    select-label=""
                                    deselect-label=""
                                    placeholder="Filtrar por sucursal..."
                                    :showNoOptions="false"
                                    :showNoResults="false"
                                >
                                </multiselect>
                            </div>
                        </div>
                    </div>

                    <div class="custom-table">
                        <v-client-table
                            :data="configuraciones"
                            :columns="columns1"
                            :options="table_option1"
                        >
                            <template #tipo_impresion="item">
                                <span class="badge" :class="getColorTipo(item.row.tipo_impresion)">
                                    {{ item.row.tipo_impresion }}
                                </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 #es_predeterminada="item">
                                <span class="badge" :class="item.row.es_predeterminada ? 'bg-primary' : 'bg-secondary'">
                                    {{ item.row.es_predeterminada ? 'Predeterminada' : 'Normal' }}
                                </span>
                            </template>

                            <template #sucursal="item">
                                <span v-if="item.row.sucursales && item.row.sucursales.length > 0" class="badge bg-info me-1" v-for="sucursal in item.row.sucursales" :key="sucursal.id">
                                    {{ sucursal.nombre }}
                                </span>
                                <span v-else class="badge bg-secondary">
                                    General
                                </span>
                            </template>

                            <template #es_impresion_directa="item">
                                <span class="badge" :class="item.row.es_impresion_directa ? 'bg-warning' : 'bg-secondary'">
                                    {{ item.row.es_impresion_directa ? 'Sí' : 'No' }}
                                </span>
                            </template>

                            <template #user="item">
                                <span v-if="item.row.users && item.row.users.length > 0" class="badge bg-dark me-1" v-for="user in item.row.users" :key="user.id">
                                    {{ user.name }}
                                </span>
                                <span v-else class="badge bg-secondary">
                                    -
                                </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="Establecer como Predeterminada"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="establecerPredeterminada(item.row.id)"
                                    v-if="!item.row.es_predeterminada"
                                >
                                    <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-star"
                                    >
                                        <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"></polygon>
                                    </svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    title="Duplicar"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="duplicarConfiguracion(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-copy"
                                    >
                                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                    </svg>
                                </a>
                                <a
                                    href="javascript:void(0);"
                                    title="Eliminar"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="deleteItem(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-trash"
                                    >
                                        <polyline
                                            points="3 6 5 6 21 6"
                                        ></polyline>
                                        <path
                                            d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                                        ></path>
                                    </svg>
                                </a>
                                <a
                                    v-if="item.row.es_impresion_directa"
                                    href="javascript:void(0);"
                                    title="Enviar Prueba"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    @click="enviarPruebaImpresionDesdeTabla(item.row.id)"
                                    :class="{ 'disabled': enviandoPrueba }"
                                >
                                    <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-send"
                                    >
                                        <line x1="22" y1="2" x2="11" y2="13"></line>
                                        <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                                    </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-xl" role="document">
                <div class="modal-content">
                    <div
                        class="modal-header titulo-dorado"
                        id="registerModalLabel"
                    >
                        <h4 class="modal-title">
                            {{ editedIndex === -1 ? "Nueva Configuración de Impresión" : "Editar Configuración de Impresión" }}
                        </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 Básica</h5>
                                    <div class="row">
                                        <div class="col-md-6 col-sm-12">
                                            <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>Tipo de Impresión</label>
                                                <multiselect
                                                    v-model="configuracion.tipo_impresion"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="tiposImpresion"
                                                    @change="onTipoImpresionChange"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.tipo_impresion
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.tipo_impresion" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div v-if="configuracion.es_impresion_directa" class="form-group mb-3">
                                                <label>Sucursales</label>
                                                <multiselect
                                                    v-model="configuracion.sucursales"
                                                    :close-on-select="false"
                                                    :multiple="true"
                                                    :searchable="true"
                                                    :options="sucursales"
                                                    :custom-label="sucursalLabel"
                                                    :track-by="'id'"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione sucursales..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                            <div v-else class="form-group mb-3">
                                                <label>Sucursales</label>
                                                <multiselect
                                                    v-model="configuracion.sucursales"
                                                    :close-on-select="false"
                                                    :multiple="true"
                                                    :searchable="true"
                                                    :options="sucursales"
                                                    :custom-label="sucursalLabel"
                                                    :track-by="'id'"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione sucursales (opcional)..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
    
                                            <div class="form-group mb-3">
                                                <div class="form-check">
                                                    <input
                                                        class="form-check-input"
                                                        type="checkbox"
                                                        v-model="configuracion.es_impresion_directa"
                                                        id="es_impresion_directa"
                                                        @change="onImpresionDirectaChange"
                                                    />
                                                    <label class="form-check-label" for="es_impresion_directa">
                                                        Impresión Directa
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" v-if="configuracion.es_impresion_directa">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group mb-3">
                                                <label>Nombre de la Impresora <span class="text-danger">*</span></label>
                                                <input
                                                    type="text"
                                                    class="form-control"
                                                    placeholder="Ej: ticket"
                                                    v-model="configuracion.ip_impresora"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.ip_impresora
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                />
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.ip_impresora" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
    
                                            <div class="form-group mb-3">
                                                <label>Key de Ngrok <span class="text-danger">*</span></label>
                                                <input
                                                    type="text"
                                                    class="form-control"
                                                    placeholder="Ingrese la key de ngrok"
                                                    v-model="configuracion.ngrok_key"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.ngrok_key
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                />
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.ngrok_key" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group mb-3">
                                                <label>Usuarios <span class="text-danger">*</span></label>
                                                <multiselect
                                                    v-model="configuracion.users"
                                                    :close-on-select="false"
                                                    :multiple="true"
                                                    :searchable="true"
                                                    :options="administradores"
                                                    :custom-label="usuarioLabel"
                                                    :track-by="'id'"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.users
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione usuarios..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.users" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Dimensiones del Papel -->
                                <div class="col-md-12 col-sm-12">
                                    <h5 class="mb-3">Dimensiones del Papel</h5>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Ancho (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.ancho_papel"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.ancho_papel
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                />
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.ancho_papel" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6" v-if="!configuracion.es_impresion_directa">
                                            <div class="form-group mb-3">
                                                <label>Alto (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.alto_papel"
                                                    :class="[
                                                        is_entrada
                                                            ? !errors.alto_papel
                                                                ? 'is-valid'
                                                                : 'is-invalid'
                                                            : '',
                                                    ]"
                                                />
                                                <div class="valid-feedback"></div>
                                                <div class="invalid-feedback">
                                                    <li v-for="item in errors.alto_papel" :key="item">
                                                        {{ item }}
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" v-if="!configuracion.es_impresion_directa">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Margen Superior (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.margen_superior"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Margen Inferior (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.margen_inferior"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" v-if="!configuracion.es_impresion_directa">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Margen Izquierdo (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.margen_izquierdo"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Margen Derecho (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.margen_derecho"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Configuración de Fuentes -->
                                <div class="col-md-6 col-sm-12" v-if="!configuracion.es_impresion_directa">
                                    <h5 class="mb-3">Configuración de Fuentes</h5>
                                    <div class="form-group mb-3">
                                        <label>Fuente Principal</label>
                                        <input
                                            type="text"
                                            class="form-control"
                                            v-model="configuracion.fuente_principal"
                                        />
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Tamaño Fuente Principal (px)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.tamano_fuente_principal"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Tamaño Fuente Título (px)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.tamano_fuente_titulo"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Tamaño Fuente Subtítulo (px)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.tamano_fuente_subtitulo"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Tamaño Fuente Detalle (px)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.tamano_fuente_detalle"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Color del Texto</label>
                                        <input
                                            type="color"
                                            class="form-control form-control-color"
                                            v-model="configuracion.color_texto"
                                        />
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Peso de la Fuente</label>
                                        <multiselect
                                            v-model="configuracion.peso_fuente"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="opcionesPesoFuente"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccione..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                        >
                                        </multiselect>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Interlineado</label>
                                        <input
                                            type="number"
                                            step="0.1"
                                            class="form-control"
                                            v-model="configuracion.interlineado"
                                        />
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label>Padding Celda (mm)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.padding_celda"
                                                    min="0"
                                                    max="20"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label>Ancho Tabla (%)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.ancho_tabla"
                                                    min="50"
                                                    max="100"
                                                />
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label>Ancho Contenido (%)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.ancho_contenido_porcentaje"
                                                    min="50"
                                                    max="100"
                                                />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Ancho Cuerpo (%)</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    v-model="configuracion.ancho_cuerpo_porcentaje"
                                                    min="50"
                                                    max="100"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Alineación y Elementos -->
                                <div class="col-md-6 col-sm-12" v-if="!configuracion.es_impresion_directa">
                                    <h5 class="mb-3">Alineación y Elementos</h5>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Alineación Texto Producto</label>
                                                <multiselect
                                                    v-model="configuracion.alineacion_texto"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="opcionesAlineacion"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                        </div>
                                    </div>

                                    <h6>Alineaciones Específicas:</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Alineación Empresa</label>
                                                <multiselect
                                                    v-model="configuracion.alineacion_empresa"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="opcionesAlineacion"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Alineación Dirección</label>
                                                <multiselect
                                                    v-model="configuracion.alineacion_direccion"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="opcionesAlineacion"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Alineación Folio/Fecha</label>
                                                <multiselect
                                                    v-model="configuracion.alineacion_folio_fecha"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="opcionesAlineacion"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label>Alineación Total</label>
                                                <multiselect
                                                    v-model="configuracion.alineacion_total"
                                                    :close-on-select="true"
                                                    :searchable="true"
                                                    :options="opcionesAlineacion"
                                                    selected-label=""
                                                    select-label=""
                                                    deselect-label=""
                                                    placeholder="Seleccione..."
                                                    :showNoOptions="false"
                                                    :showNoResults="false"
                                                >
                                                </multiselect>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label>Alineación Footer</label>
                                        <multiselect
                                            v-model="configuracion.alineacion_footer"
                                            :close-on-select="true"
                                            :searchable="true"
                                            :options="opcionesAlineacion"
                                            selected-label=""
                                            select-label=""
                                            deselect-label=""
                                            placeholder="Seleccione..."
                                            :showNoOptions="false"
                                            :showNoResults="false"
                                        >
                                        </multiselect>
                                    </div>

                                    <h6>Elementos a Mostrar:</h6>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_logo"
                                            id="mostrar_logo"
                                        />
                                        <label class="form-check-label" for="mostrar_logo">
                                            Mostrar Logo
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_fecha"
                                            id="mostrar_fecha"
                                        />
                                        <label class="form-check-label" for="mostrar_fecha">
                                            Mostrar Fecha
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_hora"
                                            id="mostrar_hora"
                                        />
                                        <label class="form-check-label" for="mostrar_hora">
                                            Mostrar Hora
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_cliente"
                                            id="mostrar_cliente"
                                        />
                                        <label class="form-check-label" for="mostrar_cliente">
                                            Mostrar Cliente
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_empleado"
                                            id="mostrar_empleado"
                                        />
                                        <label class="form-check-label" for="mostrar_empleado">
                                            Mostrar Empleado
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            v-model="configuracion.mostrar_observaciones"
                                            id="mostrar_observaciones"
                                        />
                                        <label class="form-check-label" for="mostrar_observaciones">
                                            Mostrar Observaciones
                                        </label>
                                    </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>

        <loading 
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"/>
        
        <loading 
            v-model:active="enviandoPrueba"
            :can-cancel="false"
            :is-full-page="true"
            :opacity="0.7"
            color="#000000"
            loader="spinner"/>
    </div>
</template>

<style>
.table3 .actions svg {
    padding: 2px;
}
.table3 .actions a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
</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 ImpresionRepository from '@/repositories/ImpresionRepository';
import * as SucursalRepository from '@/repositories/SucursalRepository';
import axios from "axios";
import Multiselect from "@suadelabs/vue3-multiselect";
import "@suadelabs/vue3-multiselect/dist/vue3-multiselect.css";

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([]);
const sucursales = ref([]);
const administradores = ref([]);

//formulario crear y eliminar
let registerModal = ref(false);
let deleteModal = 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 enviandoPrueba = ref(false);
const filtroTipo = ref('');
const filtroSucursal = ref('');

const isLoading = ref(true);

// Opciones para los select
const tiposImpresion = ref(['ticket', 'vale', 'etiquetas', 'otros']);
const opcionesAlineacion = ref(['left', 'center', 'right']);
const opcionesPesoFuente = ref(['normal', 'bold', 'lighter', 'bolder']);

// Valores de ancho por tipo de impresión
const anchoPorTipo = {
    'ticket': { directa: 600, noDirecta: 80 },
    'vale': { directa: 600, noDirecta: 80 },
    'etiquetas': { directa: 304, noDirecta: 38 },
    'otros': { directa: '', noDirecta: '' }
};

// Configuración por defecto
const configuracion = ref({
    nombre: '',
    tipo_impresion: 'ticket',
    ancho_papel: 80,
    alto_papel: 0,
    margen_superior: 0,
    margen_inferior: 0,
    margen_izquierdo: 0,
    margen_derecho: 0,
    fuente_principal: 'Arial',
    tamano_fuente_principal: 22,
    tamano_fuente_titulo: 28,
    tamano_fuente_subtitulo: 26,
    tamano_fuente_detalle: 20,
    color_texto: '#000000',
    peso_fuente: 'bold',
    interlineado: 1.5,
    alineacion_titulo: 'center',
    alineacion_texto: 'center',
    alineacion_empresa: 'center',
    alineacion_direccion: 'center',
    alineacion_folio_fecha: 'center',
    alineacion_total: 'center',
    alineacion_footer: 'center',
    mostrar_logo: true,
    mostrar_fecha: true,
    mostrar_hora: true,
    mostrar_cliente: true,
    mostrar_empleado: true,
    mostrar_observaciones: true,
    separador_lineas: '---',
    padding_celda: 2,
    ancho_tabla: 100,
    ancho_contenido_porcentaje: 88,
    ancho_cuerpo_porcentaje: 80,
    sucursales: [],
    users: [],
    es_activa: false,
    es_predeterminada: false,
    es_impresion_directa: false,
    ip_impresora: null,
    ngrok_key: null
});

//table
const columns1 = ref([
    "id",
    "nombre",
    "tipo_impresion",
    "sucursal",
    "es_impresion_directa",
    "user",
    "es_activa",
    "es_predeterminada",
    "actions",
]);

const table_option1 = ref({
    headings: {
        id: (h, row, index) => {
            return "Folio";
        },
        es_impresion_directa: (h, row, index) => {
            return "Impresión Directa";
        },
        user: (h, row, index) => {
            return "Usuario";
        },
        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", "tipo_impresion", "es_impresion_directa"],
    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 getColorTipo = (tipo) => {
    const colores = {
        'ticket': 'bg-primary',
        'vale': 'bg-success',
        'datos_compra': 'bg-warning'
    };
    return colores[tipo] || 'bg-secondary';
};

const cargarConfiguraciones = async () => {
    cargando.value = true;
    try {
        // Si no hay filtro, enviar null para obtener todos los registros
        const tipoFiltro = filtroTipo.value || null;
        const sucursalFiltro = filtroSucursal.value || null;
        const response = await ImpresionRepository.getAll(tipoFiltro, sucursalFiltro);
        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;
        
        // Preparar datos para envío
        const datosEnvio = { ...configuracion.value };
        
        // Convertir arrays de sucursales y usuarios a arrays de IDs
        if (datosEnvio.sucursales && Array.isArray(datosEnvio.sucursales)) {
            datosEnvio.sucursales = datosEnvio.sucursales.map(s => typeof s === 'object' ? s.id : s);
        } else {
            datosEnvio.sucursales = [];
        }
        
        if (datosEnvio.users && Array.isArray(datosEnvio.users)) {
            datosEnvio.users = datosEnvio.users.map(u => typeof u === 'object' ? u.id : u);
        } else {
            datosEnvio.users = [];
        }
        
        if (editedIndex.value === -1) {
            await ImpresionRepository.create(datosEnvio);
            showMessage("Configuración creada exitosamente");
        } else {
            await ImpresionRepository.update(datosEnvio, 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 ImpresionRepository.getById(id);
        const data = { ...response.data };
        
        // Convertir sucursales a array de objetos
        if (data.sucursales && Array.isArray(data.sucursales)) {
            data.sucursales = data.sucursales.map(s => {
                const sucursalEncontrada = sucursales.value.find(suc => suc.id === s.id);
                return sucursalEncontrada || s;
            });
        } else {
            data.sucursales = [];
        }
        
        // Convertir users a array de objetos
        if (data.users && Array.isArray(data.users)) {
            data.users = data.users.map(u => {
                const usuarioEncontrado = administradores.value.find(usr => usr.id === u.id);
                return usuarioEncontrado || u;
            });
        } else {
            data.users = [];
        }
        
        configuracion.value = data;
        errors.value = {};
        editedIndex.value = id;
        registerModal.show();
    } catch (error) {
        showMessage('Error al cargar configuración', 'error');
    }
};

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

const establecerPredeterminada = async (id) => {
    try {
        await ImpresionRepository.establecerPredeterminada(id);
        showMessage("Configuración establecida como predeterminada");
        cargarConfiguraciones();
    } catch (error) {
        showMessage('Error al establecer configuración predeterminada', 'error');
    }
};

const enviarPruebaImpresion = async () => {
    if (editedIndex.value === -1) {
        showMessage('Debe guardar la configuración primero antes de enviar una prueba', 'error');
        return;
    }

    try {
        enviandoPrueba.value = true;
        
        let response;
        
        // Detectar el tipo de impresión y usar el endpoint correspondiente
        switch (configuracion.value.tipo_impresion) {
            case 'vale':
                response = await ImpresionRepository.enviarPruebaVale(editedIndex.value);
                break;
            case 'etiquetas':
                response = await ImpresionRepository.enviarPruebaEtiquetas(editedIndex.value);
                break;
            case 'ticket':
            case 'datos_compra':
            case 'otros':
            default:
                // Para ticket, datos_compra y otros usar el endpoint de prueba normal
                response = await ImpresionRepository.enviarPrueba(editedIndex.value);
                break;
        }
        
        if (response.success) {
            showMessage(response.message || 'Prueba enviada exitosamente');
        } else {
            showMessage(response.message || 'Error al enviar la prueba', 'error');
        }
    } catch (error) {
        if (axios.isAxiosError(error) && error.response) {
            const errorMessage = error.response.data?.message || 'Error al enviar la prueba';
            showMessage(errorMessage, 'error');
        } else {
            showMessage('Error al enviar la prueba', 'error');
        }
    } finally {
        // Asegurar que el spinner se oculte después de un pequeño delay para mejor UX
        setTimeout(() => {
            enviandoPrueba.value = false;
        }, 500);
    }
};

const enviarPruebaImpresionDesdeTabla = async (id) => {
    try {
        enviandoPrueba.value = true;
        
        // Buscar la configuración en la lista para obtener el tipo de impresión
        const configuracion = configuraciones.value.find(c => c.id === id);
        
        if (!configuracion) {
            showMessage('Configuración no encontrada', 'error');
            return;
        }
        
        let response;
        
        // Detectar el tipo de impresión y usar el endpoint correspondiente
        switch (configuracion.tipo_impresion) {
            case 'vale':
                response = await ImpresionRepository.enviarPruebaVale(id);
                break;
            case 'etiquetas':
                response = await ImpresionRepository.enviarPruebaEtiquetas(id);
                break;
            case 'ticket':
            case 'datos_compra':
            case 'otros':
            default:
                // Para ticket, datos_compra y otros usar el endpoint de prueba normal
                response = await ImpresionRepository.enviarPrueba(id);
                break;
        }
        
        if (response.success) {
            showMessage(response.message || 'Prueba enviada exitosamente');
        } else {
            showMessage(response.message || 'Error al enviar la prueba', 'error');
        }
    } catch (error) {
        if (axios.isAxiosError(error) && error.response) {
            const errorMessage = error.response.data?.message || 'Error al enviar la prueba';
            showMessage(errorMessage, 'error');
        } else {
            showMessage('Error al enviar la prueba', 'error');
        }
    } finally {
        // Asegurar que el spinner se oculte después de un pequeño delay para mejor UX
        setTimeout(() => {
            enviandoPrueba.value = false;
        }, 500);
    }
};

const duplicarConfiguracion = async (id) => {
    try {
        await ImpresionRepository.duplicar(id);
        showMessage("Configuración duplicada exitosamente");
        cargarConfiguraciones();
    } catch (error) {
        showMessage('Error al duplicar configuración', 'error');
    }
};

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

const eliminarConfiguracion = async () => {
    try {
        await ImpresionRepository.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: '',
        tipo_impresion: 'ticket',
        ancho_papel: 80,
        alto_papel: 0,
        margen_superior: 0,
        margen_inferior: 0,
        margen_izquierdo: 0,
        margen_derecho: 0,
        fuente_principal: 'Arial',
        tamano_fuente_principal: 22,
        tamano_fuente_titulo: 28,
        tamano_fuente_subtitulo: 26,
        tamano_fuente_detalle: 20,
        color_texto: '#000000',
        peso_fuente: 'bold',
        interlineado: 1.5,
        alineacion_titulo: 'center',
        alineacion_texto: 'center',
        alineacion_empresa: 'center',
        alineacion_direccion: 'center',
        alineacion_folio_fecha: 'center',
        alineacion_total: 'center',
        alineacion_footer: 'center',
        mostrar_logo: true,
        mostrar_fecha: true,
        mostrar_hora: true,
        mostrar_cliente: true,
        mostrar_empleado: true,
        mostrar_observaciones: true,
        separador_lineas: '---',
        padding_celda: 2,
        ancho_tabla: 100,
        ancho_contenido_porcentaje: 88,
        ancho_cuerpo_porcentaje: 80,
        sucursales: [],
        users: [],
        es_activa: false,
        es_predeterminada: false,
        es_impresion_directa: false,
        ip_impresora: null,
        ngrok_key: null
    };
    errors.value = {};
    editedIndex.value = -1;
};

// Función para manejar cambio de tipo de impresión
const onTipoImpresionChange = () => {
    if (configuracion.value.tipo_impresion && anchoPorTipo[configuracion.value.tipo_impresion]) {
        const ancho = configuracion.value.es_impresion_directa 
            ? anchoPorTipo[configuracion.value.tipo_impresion].directa
            : anchoPorTipo[configuracion.value.tipo_impresion].noDirecta;
        
        if (ancho !== '') {
            configuracion.value.ancho_papel = ancho;
        } else {
            configuracion.value.ancho_papel = '';
        }
    }
};

// Función para manejar cambio de impresión directa
const onImpresionDirectaChange = () => {
    // Actualizar ancho cuando cambia el tipo de impresión directa
    onTipoImpresionChange();
};

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

const initialize = async () => {
    isLoading.value = true;
    await Promise.all([
        cargarConfiguraciones(),
        cargarSucursales(),
        cargarAdministradores()
    ]);
    is_entrada.value = false;
    isLoading.value = false;
};

const cargarSucursales = async () => {
    try {
        const response = await SucursalRepository.getIndex();
        sucursales.value = response.data;
    } catch (error) {
        showMessage('Error al cargar sucursales', 'error');
    }
};

const cargarAdministradores = async () => {
    try {
        const response = await UserRepository.getAdministradores();
        administradores.value = response.data;
    } catch (error) {
        showMessage('Error al cargar administradores', 'error');
    }
};

const sucursalLabel = (sucursal) => {
    return sucursal ? sucursal.nombre : '';
};

const usuarioLabel = (usuario) => {
    return usuario ? usuario.name : '';
};

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

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")
    );

    initialize();
});
</script>