<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">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
                            <div class="text-center titulo-dorado">
                                <h3 class="pull-left">Generar Boleto de Salida</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-8">
                            <form @submit.stop.prevent="generarBoleto">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Placa *</label>
                                            <input
                                                type="text"
                                                class="form-control mb-2"
                                                placeholder="Placa del vehículo"
                                                v-model="form.placa"
                                                :class="[is_entrada ? (!errors.placa ? 'is-valid' : 'is-invalid') : '']"
                                            />
                                            <div class="invalid-feedback">
                                                <li v-for="(item, index) in errors.placa" :key="index">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Conductor</label>
                                            <input
                                                type="text"
                                                class="form-control mb-2"
                                                placeholder="Nombre del conductor"
                                                v-model="form.conductor"
                                            />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Tipo de Carga</label>
                                            <div class="d-flex gap-1 align-items-center">
                                                <select
                                                    class="form-control mb-2 flex-grow-1"
                                                    v-model="form.tipo_carga_id"
                                                >
                                                    <option value="">Seleccione...</option>
                                                    <option v-for="tipo in tiposCarga" :key="tipo.id" :value="tipo.id">
                                                        {{ tipo.nombre }}
                                                    </option>
                                                </select>
                                                <button
                                                    type="button"
                                                    class="btn btn-outline-primary mb-2"
                                                    title="Agregar tipo de carga"
                                                    @click="abrirModalNuevoTipoCarga"
                                                >
                                                    + Agregar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Destino</label>
                                            <div class="d-flex gap-1 align-items-center">
                                                <select
                                                    class="form-control mb-2 flex-grow-1"
                                                    v-model="form.destino_id"
                                                >
                                                    <option value="">Seleccione...</option>
                                                    <option v-for="destino in destinos" :key="destino.id" :value="destino.id">
                                                        {{ destino.nombre }}
                                                    </option>
                                                </select>
                                                <button
                                                    type="button"
                                                    class="btn btn-outline-primary mb-2"
                                                    title="Agregar destino"
                                                    @click="abrirModalNuevoDestino"
                                                >
                                                    + Agregar
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Observaciones</label>
                                            <textarea
                                                class="form-control mb-2"
                                                placeholder="Observaciones adicionales"
                                                v-model="form.observaciones"
                                                rows="3"
                                            ></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Foto del Volteo</label>
                                            <div class="d-flex gap-2 mb-2">
                                                <button
                                                    type="button"
                                                    class="btn btn-primary"
                                                    @click="capturarFoto"
                                                    :disabled="capturandoFoto"
                                                >
                                                    {{ capturandoFoto ? 'Capturando...' : 'Capturar Foto' }}
                                                </button>
                                            </div>
                                            <div v-if="fotoPreview" class="mt-2">
                                                <img :src="fotoPreview" alt="Vista previa" style="max-width: 100%; max-height: 400px; object-fit: contain; border: 2px solid #ddd; border-radius: 4px;" />
                                                <p class="text-success mt-2">✓ Foto capturada correctamente</p>
                                            </div>
                                            <div v-else class="alert alert-info">
                                                La foto es opcional. Puede capturar una foto del volteo si lo desea.
                                            </div>
                                            <div class="invalid-feedback">
                                                <li v-for="(item, index) in errors.foto_ruta" :key="index">
                                                    {{ item }}
                                                </li>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <button
                                                type="submit"
                                                class="btn btn-success w-100"
                                                :disabled="generando"
                                            >
                                                {{ generando ? 'Generando...' : 'Generar e Imprimir Boleto' }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Instrucciones</h5>
                                </div>
                                <div class="card-body">
                                    <ol>
                                        <li>Verifique que el volteo esté posicionado en el área designada</li>
                                        <li>Complete los datos del formulario</li>
                                        <li>Opcionalmente capture la foto del volteo</li>
                                        <li>Genere e imprima el boleto</li>
                                        <li>Entregue el boleto al conductor</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <loading
            v-model:active="isLoading"
            :can-cancel="false"
            :is-full-page="true"
        />

        <!-- Modal alta rápida Tipo de Carga -->
        <div v-if="mostrarModalTipoCarga" class="modal fade show" style="display: block; background: rgba(0,0,0,0.5);" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Nuevo Tipo de Carga</h5>
                        <button type="button" class="btn-close" @click="cerrarModalTipoCarga"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-2">
                            <label>Nombre *</label>
                            <input
                                type="text"
                                class="form-control"
                                v-model="nuevoTipoCarga.nombre"
                                placeholder="Ej: Arena, Grava..."
                                :class="errorsNuevo.tipo_carga?.nombre ? 'is-invalid' : ''"
                            />
                            <div v-if="errorsNuevo.tipo_carga?.nombre" class="invalid-feedback d-block">
                                {{ errorsNuevo.tipo_carga.nombre[0] }}
                            </div>
                        </div>
                        <div class="form-group mb-2">
                            <label>Código (opcional, se genera automático)</label>
                            <input
                                type="text"
                                class="form-control"
                                v-model="nuevoTipoCarga.codigo"
                                placeholder="Ej: ARENA"
                            />
                            <small class="text-muted">Si lo deja vacío se genera desde el nombre</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="cerrarModalTipoCarga">Cancelar</button>
                        <button type="button" class="btn btn-success" @click="guardarNuevoTipoCarga" :disabled="guardandoTipoCarga">
                            {{ guardandoTipoCarga ? 'Guardando...' : 'Guardar y seleccionar' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal alta rápida Destino -->
        <div v-if="mostrarModalDestino" class="modal fade show" style="display: block; background: rgba(0,0,0,0.5);" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Nuevo Destino</h5>
                        <button type="button" class="btn-close" @click="cerrarModalDestino"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group mb-2">
                            <label>Nombre *</label>
                            <input
                                type="text"
                                class="form-control"
                                v-model="nuevoDestino.nombre"
                                placeholder="Ej: Obra Norte, Planta..."
                                :class="errorsNuevo.destino?.nombre ? 'is-invalid' : ''"
                            />
                            <div v-if="errorsNuevo.destino?.nombre" class="invalid-feedback d-block">
                                {{ errorsNuevo.destino.nombre[0] }}
                            </div>
                        </div>
                        <div class="form-group mb-2">
                            <label>Código (opcional, se genera automático)</label>
                            <input
                                type="text"
                                class="form-control"
                                v-model="nuevoDestino.codigo"
                                placeholder="Ej: OBRA-NORTE"
                            />
                            <small class="text-muted">Si lo deja vacío se genera desde el nombre</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="cerrarModalDestino">Cancelar</button>
                        <button type="button" class="btn btn-success" @click="guardarNuevoDestino" :disabled="guardandoDestino">
                            {{ guardandoDestino ? 'Guardando...' : 'Guardar y seleccionar' }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal para mostrar boleto generado con QR -->
        <div v-if="mostrarModalBoleto && boletoGenerado" class="modal fade show" style="display: block; background: rgba(0,0,0,0.5);" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Boleto Generado</h5>
                        <button type="button" class="btn-close" @click="cerrarModalBoleto"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title mb-3">Información del Boleto</h4>
                                        <table class="table table-bordered">
                                            <tr>
                                                <th width="40%">Folio:</th>
                                                <td><strong>{{ boletoGenerado.folio }}</strong></td>
                                            </tr>
                                            <tr>
                                                <th>Placa:</th>
                                                <td>{{ boletoGenerado.placa }}</td>
                                            </tr>
                                            <tr v-if="boletoGenerado.conductor">
                                                <th>Conductor:</th>
                                                <td>{{ boletoGenerado.conductor }}</td>
                                            </tr>
                                            <tr v-if="boletoGenerado.tipo_carga">
                                                <th>Tipo de Carga:</th>
                                                <td>{{ boletoGenerado.tipo_carga.nombre }}</td>
                                            </tr>
                                            <tr v-if="boletoGenerado.destino">
                                                <th>Destino:</th>
                                                <td>{{ boletoGenerado.destino.nombre }}</td>
                                            </tr>
                                            <tr>
                                                <th>Estatus:</th>
                                                <td>
                                                    <span class="badge bg-warning">{{ boletoGenerado.estatus }}</span>
                                                </td>
                                            </tr>
                                            <tr v-if="boletoGenerado.observaciones">
                                                <th>Observaciones:</th>
                                                <td>{{ boletoGenerado.observaciones }}</td>
                                            </tr>
                                            <tr>
                                                <th>Fecha Generación:</th>
                                                <td>{{ new Date(boletoGenerado.fecha_generacion).toLocaleString() }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-3">Código QR</h5>
                                        <div v-if="boletoGenerado.codigo_qr" class="mb-3">
                                            <img 
                                                :src="getQRCodeUrl(boletoGenerado.codigo_qr)" 
                                                alt="Código QR" 
                                                class="img-fluid border p-2"
                                                style="max-width: 200px;"
                                            />
                                        </div>
                                        <p class="text-muted small">Escanea este código para validar el boleto</p>
                                        <div v-if="boletoGenerado.foto_ruta" class="mt-3">
                                            <h6>Foto del Volteo</h6>
                                            <img 
                                                :src="`/storage/${boletoGenerado.foto_ruta}`" 
                                                alt="Foto" 
                                                class="img-fluid border rounded"
                                                style="max-width: 100%; max-height: 200px; object-fit: contain;"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="cerrarModalBoleto">Cerrar</button>
                        <button type="button" class="btn btn-primary" @click="window.print()">Imprimir</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useMeta } from "@/composables/use-meta";
import * as BoletoRepository from "@/repositories/BoletoRepository";
import * as TipoCargaRepository from "@/repositories/TipoCargaRepository";
import * as DestinoRepository from "@/repositories/DestinoRepository";
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';
import axios from "axios";

useMeta({ title: 'Generar Boleto' });

const form = ref({
    placa: '',
    conductor: '',
    tipo_carga_id: null,
    destino_id: null,
    observaciones: '',
    foto_ruta: null,
});

const errors = ref({});
const is_entrada = ref(false);
const isLoading = ref(false);
const capturandoFoto = ref(false);
const generando = ref(false);
const fotoPreview = ref(null);
const tiposCarga = ref([]);
const destinos = ref([]);
const boletoGenerado = ref(null);
const mostrarModalBoleto = ref(false);

// Alta rápida Tipo de Carga
const mostrarModalTipoCarga = ref(false);
const nuevoTipoCarga = ref({ nombre: '', codigo: '' });
const guardandoTipoCarga = ref(false);
const errorsNuevo = ref({});

// Alta rápida Destino
const mostrarModalDestino = ref(false);
const nuevoDestino = ref({ nombre: '', codigo: '' });
const guardandoDestino = ref(false);

const capturarFoto = async () => {
    try {
        capturandoFoto.value = true;
        const response = await BoletoRepository.capturarFoto();
        if (response.data) {
            form.value.foto_ruta = response.data.foto_ruta;
            fotoPreview.value = response.data.foto_url;
            showMessage("Foto capturada correctamente", "success");
        }
    } catch (error) {
        if (axios.isAxiosError(error)) {
            errors.value = error.response?.data?.errors || {};
            showMessage("Error al capturar foto: " + (error.response?.data?.message || error.message), "error");
        }
    } finally {
        capturandoFoto.value = false;
    }
};

const generarBoleto = async () => {
    try {
        generando.value = true;
        is_entrada.value = true;
        isLoading.value = true;

        const response = await BoletoRepository.createBoleto(form.value);
        
        if (response.data) {
            boletoGenerado.value = response.data;
            mostrarModalBoleto.value = true;
            showMessage("Boleto generado correctamente", "success");
        }
        
    } catch (error) {
        if (axios.isAxiosError(error)) {
            errors.value = error.response?.data?.errors || {};
            showMessage("Error al generar boleto: " + (error.response?.data?.message || error.message), "error");
        }
    } finally {
        generando.value = false;
        isLoading.value = false;
    }
};

const cerrarModalBoleto = () => {
    mostrarModalBoleto.value = false;
    boletoGenerado.value = null;
    // Resetear formulario después de cerrar el modal
    initializeForm();
};

const getQRCodeUrl = (codigoQr) => {
    if (!codigoQr) return null;
    // Usar API online para generar QR
    return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(codigoQr)}`;
};

const initializeForm = () => {
    form.value = {
        placa: '',
        conductor: '',
        tipo_carga_id: null,
        destino_id: null,
        observaciones: '',
        foto_ruta: null,
    };
    fotoPreview.value = null;
    errors.value = {};
    is_entrada.value = false;
};

const cargarCatalogos = async () => {
    try {
        const [tiposResponse, destinosResponse] = await Promise.all([
            TipoCargaRepository.getAll(),
            DestinoRepository.getAll()
        ]);
        tiposCarga.value = tiposResponse.data || [];
        destinos.value = destinosResponse.data || [];
    } catch (error) {
        console.log(error);
    }
};

// Generar código único desde nombre (para alta rápida)
const generarCodigoDesdeNombre = (nombre, maxLength = 30) => {
    if (!nombre || !nombre.trim()) return '';
    const base = nombre.trim()
        .toUpperCase()
        .replace(/\s+/g, '_')
        .replace(/[^A-Z0-9_]/g, '')
        .substring(0, maxLength - 6);
    const suffix = Date.now().toString(36).slice(-5);
    return (base || 'ITEM') + '_' + suffix;
};

// Alta rápida Tipo de Carga
const abrirModalNuevoTipoCarga = () => {
    errorsNuevo.value = {};
    nuevoTipoCarga.value = { nombre: '', codigo: '' };
    mostrarModalTipoCarga.value = true;
};

const cerrarModalTipoCarga = () => {
    mostrarModalTipoCarga.value = false;
    nuevoTipoCarga.value = { nombre: '', codigo: '' };
    errorsNuevo.value = {};
};

const guardarNuevoTipoCarga = async () => {
    if (!nuevoTipoCarga.value.nombre?.trim()) {
        showMessage('Ingrese el nombre del tipo de carga', 'error');
        return;
    }
    guardandoTipoCarga.value = true;
    errorsNuevo.value = {};
    try {
        const payload = {
            nombre: nuevoTipoCarga.value.nombre.trim(),
            codigo: (nuevoTipoCarga.value.codigo?.trim() || generarCodigoDesdeNombre(nuevoTipoCarga.value.nombre)),
            activo: true
        };
        const response = await TipoCargaRepository.createTipoCarga(payload);
        if (response.data) {
            tiposCarga.value.push(response.data);
            form.value.tipo_carga_id = response.data.id;
            cerrarModalTipoCarga();
            showMessage('Tipo de carga agregado correctamente', 'success');
        }
    } catch (error) {
        if (axios.isAxiosError(error) && error.response?.data?.errors) {
            errorsNuevo.value = { tipo_carga: error.response.data.errors };
            showMessage('Revise los datos e intente de nuevo', 'error');
        } else {
            showMessage('Error al guardar tipo de carga', 'error');
        }
    } finally {
        guardandoTipoCarga.value = false;
    }
};

// Alta rápida Destino
const abrirModalNuevoDestino = () => {
    errorsNuevo.value = {};
    nuevoDestino.value = { nombre: '', codigo: '' };
    mostrarModalDestino.value = true;
};

const cerrarModalDestino = () => {
    mostrarModalDestino.value = false;
    nuevoDestino.value = { nombre: '', codigo: '' };
    errorsNuevo.value = {};
};

const guardarNuevoDestino = async () => {
    if (!nuevoDestino.value.nombre?.trim()) {
        showMessage('Ingrese el nombre del destino', 'error');
        return;
    }
    guardandoDestino.value = true;
    errorsNuevo.value = {};
    try {
        const payload = {
            nombre: nuevoDestino.value.nombre.trim(),
            codigo: (nuevoDestino.value.codigo?.trim() || generarCodigoDesdeNombre(nuevoDestino.value.nombre)),
            activo: true
        };
        const response = await DestinoRepository.createDestino(payload);
        if (response.data) {
            destinos.value.push(response.data);
            form.value.destino_id = response.data.id;
            cerrarModalDestino();
            showMessage('Destino agregado correctamente', 'success');
        }
    } catch (error) {
        if (axios.isAxiosError(error) && error.response?.data?.errors) {
            errorsNuevo.value = { destino: error.response.data.errors };
            showMessage('Revise los datos e intente de nuevo', 'error');
        } else {
            showMessage('Error al guardar destino', 'error');
        }
    } finally {
        guardandoDestino.value = false;
    }
};

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 () => {
    isLoading.value = true;
    await cargarCatalogos();
    isLoading.value = false;
});
</script>

