@extends('layouts.panel')

@section('title', 'Monitor de Barra - KDS')

{{-- Inyectamos CSS Operativo --}}
@push('styles')
    @vite('resources/css/operational.css')
@endpush

@section('content')

    {{-- Header --}}
    <header class="flex flex-col lg:flex-row justify-between items-center mb-6 gap-6 shrink-0 pt-6 px-6">
        
        <div class="flex items-center gap-5">
            <div class="bg-white p-3 rounded-xl border border-gray-200 shadow-sm">
                <i data-lucide="martini" class="w-8 h-8 text-[#E21C21]"></i>
            </div>
            <div>
                <h1 class="text-3xl font-black text-[#194B95] tracking-tight">BARRA VIP</h1>
                <div class="flex items-center gap-2 mt-1">
                    <span class="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse"></span>
                    <p class="text-gray-500 text-xs font-bold uppercase tracking-widest">Servicio Activo</p>
                </div>
            </div>
        </div>

        <div class="flex bg-white p-1 rounded-lg border border-gray-200 w-full max-w-md justify-center shadow-sm">
            <button onclick="filtrar('pendientes')" id="tab-pendientes" class="flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-active">
                <i data-lucide="clock" class="w-4 h-4"></i>
                EN ESPERA (<span id="count-pendientes">0</span>)
            </button>
            <button onclick="filtrar('entregados')" id="tab-entregados" class="flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-inactive">
                <i data-lucide="check-check" class="w-4 h-4"></i>
                DESPACHADOS <span id="count-entregados">0</span>
            </button>
        </div>

        <div class="flex items-center gap-4">
            <div class="bg-white px-4 py-2 rounded-lg border border-gray-200 flex gap-4 text-[10px] font-bold uppercase tracking-wider text-gray-500 shadow-sm">
                <div class="flex items-center gap-1.5"><span class="w-2 h-2 bg-green-500 rounded-full"></span> A tiempo</div>
                <div class="flex items-center gap-1.5"><span class="w-2 h-2 bg-[#E21C21] rounded-full"></span> Demorado</div>
            </div>
            
            <button onclick="toggleModoTrabajo()" id="btn-trabajo" class="group bg-white hover:bg-gray-50 text-[#194B95] px-5 py-2.5 rounded-lg font-bold text-sm flex items-center gap-2 border border-gray-200 hover:border-[#194B95] transition-all shadow-sm">
                <i data-lucide="keyboard" class="w-4 h-4 text-gray-400 group-hover:text-[#194B95]"></i>
                <span>TECLADO</span>
            </button>
        </div>
    </header>

    {{-- Aviso Modo Trabajo --}}
    <div id="aviso-trabajo" class="hidden mb-4 bg-[#194B95] text-white p-2 flex justify-between items-center shadow-md shrink-0 rounded-lg mx-6">
        <div class="flex items-center gap-4 text-xs font-bold uppercase tracking-widest pl-4">
            <div class="flex items-center gap-2 text-blue-200 mr-2">
                <i data-lucide="zap" class="w-4 h-4"></i>
                <span>Atajos:</span> 
            </div>
            <span class="flex items-center gap-1"><span class="bg-white/20 px-1.5 rounded font-mono">↑↓</span> NAV</span>
            <span class="text-white/30">|</span>
            <span class="flex items-center gap-1"><span class="bg-white/20 px-1.5 rounded font-mono">TAB</span> VISTA</span>
            <span class="text-white/30">|</span>
            <span class="flex items-center gap-1"><span class="bg-[#E21C21] px-1.5 rounded font-mono border border-white/20">ENTER</span> DESPACHAR</span>
            <span class="text-white/30">|</span>
            <span class="flex items-center gap-1"><span class="bg-white/20 px-1.5 rounded font-mono">SUPR</span> REVERTIR</span>
        </div>
        <button onclick="toggleModoTrabajo()" class="text-white/80 hover:text-white px-4 font-bold text-[10px] tracking-widest">SALIR [ESC]</button>
    </div>

    {{-- Tabla de Pedidos --}}
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 flex flex-col flex-1 overflow-hidden relative mx-6 mb-6">
        
        <div class="overflow-x-auto shrink-0 bg-gray-50 z-10 border-b border-gray-200">
            <table class="w-full text-left">
                <thead>
                    <tr class="text-[11px] text-gray-500 font-bold uppercase tracking-wider">
                        <th class="p-4 pl-8 w-24">#Ticket</th>
                        <th class="p-4 w-36">Ubicación</th>
                        <th class="p-4 w-1/4">Bebida / Ítem</th>
                        <th class="p-4 w-1/4">Notas Barra</th> 
                        <th class="p-4 text-center w-40">Tiempo</th>
                        <th class="p-4 text-right pr-8 w-40">Acción</th>
                    </tr>
                </thead>
            </table>
        </div>

        <div class="flex-1 overflow-y-auto custom-scrollbar scroll-smooth" id="scroll-container">
            <table class="w-full text-left border-collapse">
                <tbody id="tablaPedidos" class="text-sm font-medium text-gray-700">
                    {{-- Se llena con JS --}}
                </tbody>
            </table>
            
            <div id="empty-state" class="hidden h-full flex flex-col items-center justify-center text-gray-400">
                <div class="bg-gray-50 w-24 h-24 rounded-full flex items-center justify-center mb-4 border border-gray-200">
                    <i data-lucide="glass-water" class="w-10 h-10 text-gray-400"></i>
                </div>
                <h3 class="text-gray-600 font-bold text-lg">Barra Despejada</h3>
                <p class="mt-1 text-xs uppercase tracking-wide">Esperando pedidos</p>
            </div>
        </div>
    </div>

    {{-- Modal Restaurar --}}
    <div id="modal-restaurar" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-[#0f172a]/60 backdrop-blur-sm">
        <div class="bg-white rounded-xl p-8 max-w-sm w-full text-center transform scale-95 opacity-0 transition-all duration-200 shadow-2xl" id="content-restaurar">
            
            <div class="mx-auto w-14 h-14 bg-blue-50 text-[#194B95] rounded-full flex items-center justify-center mb-4 border border-blue-100">
                <i data-lucide="rotate-ccw" class="w-7 h-7"></i>
            </div>
            
            <h3 class="text-lg font-bold text-[#0f172a] mb-1">Restaurar Ticket</h3>
            <p class="text-sm text-gray-500 mb-6">El pedido <span id="lbl-id-restaurar" class="font-mono font-bold text-[#E21C21]">#000</span> volverá a pendientes.</p>
            
            <div class="flex gap-3">
                <button onclick="cerrarModalRestaurar()" class="flex-1 py-2.5 bg-white text-gray-600 font-bold rounded-lg hover:bg-gray-50 border border-gray-300 text-xs uppercase tracking-wide transition-colors">Cancelar</button>
                <button onclick="confirmarRestauracion()" class="flex-1 py-2.5 bg-[#194B95] text-white font-bold rounded-lg hover:bg-[#123670] border border-transparent text-xs uppercase tracking-wide transition-colors">
                    Confirmar
                </button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    lucide.createIcons();

    let contador = 402; 
    
    const bebidasDB = [
        { nombre: "Whisky Black Label", tipo: "Botella", img: "https://images.unsplash.com/photo-1527281400683-1aae777175f8?q=50&w=100&auto=format" },
        { nombre: "Gin Tonic Bombay", tipo: "Coctel", img: "https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=50&w=100&auto=format" },
        { nombre: "Vodka Grey Goose", tipo: "Botella", img: "https://images.unsplash.com/photo-1550985616-10810253b84d?q=50&w=100&auto=format" },
        { nombre: "Mojito Clásico", tipo: "Coctel", img: "https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?q=50&w=100&auto=format" },
        { nombre: "Champagne Moët", tipo: "Botella", img: "https://images.unsplash.com/photo-1598155523122-38423bb4d6c1?q=50&w=100&auto=format" }
    ];
    
    const notasDB = [ "Con 4 energizantes", "Mucho hielo", "Sin sorbete", "Vasos extra", "Rodajas de limón", "Copa balón", "" ];
    const tiemposSimulados = [ 5 * 60, 3 * 60, 1 * 60, -1 * 60 ];

    let pedidos = []; 
    let filtroActual = 'pendiente';
    let modoTrabajo = false;
    let indiceFoco = -1; 
    let ultimoPedidoAccionado = null; 
    let modalRestaurarAbierto = false;

    function agregarPedidoSimulado() {
        const bebidaRandom = bebidasDB[Math.floor(Math.random() * bebidasDB.length)];
        const notaRandom = notasDB[Math.floor(Math.random() * notasDB.length)];
        const tiempoRandom = tiemposSimulados[Math.floor(Math.random() * tiemposSimulados.length)];
        const zonas = ["Box 1", "Box 5", "VIP Gold", "Terraza", "Barra 2"];
        const zonaRandom = zonas[Math.floor(Math.random() * zonas.length)];

        const nuevoPedido = {
            id: contador++,
            zona: zonaRandom,
            producto: bebidaRandom.nombre,
            tipo: bebidaRandom.tipo,
            img: bebidaRandom.img,
            nota: notaRandom,
            tiempo: tiempoRandom,
            estado: 'pendiente',
            enProcesoEliminacion: false 
        };

        pedidos.push(nuevoPedido); 
        
        nuevoPedido.interval = setInterval(() => {
            if(nuevoPedido.estado === 'pendiente' && !nuevoPedido.enProcesoEliminacion) {
                nuevoPedido.tiempo--;
                actualizarTiempoVisual(nuevoPedido.id, nuevoPedido.tiempo);
            } else if (!nuevoPedido.enProcesoEliminacion && nuevoPedido.estado !== 'pendiente') {
                clearInterval(nuevoPedido.interval);
            }
        }, 1000);

        renderizarTabla();
    }

    function renderizarTabla() {
        const tbody = document.getElementById("tablaPedidos");
        tbody.innerHTML = ""; 

        const filtrados = pedidos
            .filter(p => {
                if (filtroActual === 'pendiente') return p.estado === 'pendiente'; 
                return p.estado === filtroActual;
            })
            .sort((a, b) => a.tiempo - b.tiempo);
        
        const pendientesReales = pedidos.filter(p => p.estado === 'pendiente' && !p.enProcesoEliminacion).length;
        document.getElementById("count-pendientes").innerText = pendientesReales;
        document.getElementById("count-entregados").innerText = pedidos.filter(p => p.estado === 'entregado').length;

        if (filtrados.length === 0) {
            document.getElementById("empty-state").classList.remove("hidden");
            return;
        } else {
            document.getElementById("empty-state").classList.add("hidden");
        }

        filtrados.forEach((p, index) => {
            const tr = document.createElement("tr");
            tr.id = `fila-${p.id}`;
            const claseTachado = p.enProcesoEliminacion ? 'row-tachado' : '';
            
            tr.className = `group transition-all duration-100 hover:bg-gray-50 border-b border-gray-100 ${claseTachado}`;
            
            if(modoTrabajo && index === indiceFoco && !p.enProcesoEliminacion) tr.classList.add('row-focused');

            const mins = Math.floor(p.tiempo / 60);
            const segs = Math.abs(p.tiempo % 60).toString().padStart(2, '0');
            const tiempoTexto = p.tiempo < 0 ? `-${Math.abs(mins)}:${segs}` : `${mins}:${segs}`;
            let colorClase = obtenerColorTiempo(p.tiempo);

            let botonAccion = p.estado === 'pendiente' 
                ? `<button onclick="iniciarProcesoEntrega(${p.id})" class="btn-action-primary px-4 py-2 rounded-lg flex items-center gap-2 ml-auto text-xs font-bold tracking-wider border border-transparent"><i data-lucide="martini" class="w-4 h-4"></i> SERVIDO</button>`
                : `<span class="text-xs font-bold text-gray-500 bg-gray-100 px-3 py-1 rounded border border-gray-200 flex items-center gap-1 justify-end w-fit ml-auto">ENTREGADO</span>`;

            const notaHTML = p.nota 
                ? `<div class="flex items-start gap-2"><span class="badge-note">${p.nota}</span></div>`
                : `<span class="text-gray-400 text-xs italic pl-2">Sin notas</span>`;

            const tipoBadge = p.tipo === 'Botella' 
                ? '<span class="px-2 py-0.5 ml-2 bg-amber-50 text-amber-600 border border-amber-200 rounded text-[9px] font-bold uppercase tracking-wider">BOTELLA</span>'
                : '';

            tr.innerHTML = `
                <td class="p-4 pl-8 font-mono font-bold text-gray-400 text-sm w-24">#${p.id}</td>
                <td class="p-4 w-36"><span class="badge-table px-3 py-1.5 rounded font-black text-xs tracking-wide shadow-sm">${p.zona}</span></td>
                <td class="p-4 w-1/4">
                    <div class="flex items-center gap-4">
                        <img src="${p.img}" class="w-10 h-10 rounded-lg object-cover shadow-sm border border-gray-200">
                        <div class="flex flex-col">
                            <div class="flex items-center">
                                <span class="font-bold text-[#0f172a] text-sm tracking-tight">${p.producto}</span>
                                ${tipoBadge}
                            </div>
                        </div>
                    </div>
                </td>
                <td class="p-4 w-1/4">${notaHTML}</td>
                <td class="p-4 text-center w-40">
                    ${p.estado === 'pendiente' ? `<div id="timebox-${p.id}" class="time-box ${colorClase}">${tiempoTexto}</div>` : '<span class="text-gray-400 text-[10px] font-bold tracking-widest">--:--</span>'}
                </td>
                <td class="p-4 pr-8 text-right w-40">${botonAccion}</td>
            `;
            tbody.appendChild(tr);
        });
        lucide.createIcons();
    }

    function actualizarTiempoVisual(id, tiempo) {
        const el = document.getElementById(`timebox-${id}`);
        if(el) {
            const mins = Math.floor(tiempo / 60);
            const segs = Math.abs(tiempo % 60).toString().padStart(2, '0');
            el.innerText = tiempo < 0 ? `-${Math.abs(mins)}:${segs}` : `${mins}:${segs}`;
            let nuevaClase = obtenerColorTiempo(tiempo);
            el.className = `time-box ${nuevaClase}`;
        }
    }

    function obtenerColorTiempo(tiempo) {
        if (tiempo > 180) return "verde"; 
        if (tiempo > 60) return "naranja"; 
        if (tiempo > 0) return "rojo"; 
        return "alerta-roja"; 
    }

    function toggleModoTrabajo() {
        modoTrabajo = !modoTrabajo;
        const btn = document.getElementById('btn-trabajo');
        const aviso = document.getElementById('aviso-trabajo');
        const container = document.getElementById('scroll-container');
        
        if(modoTrabajo) {
            btn.classList.remove('bg-white', 'text-[#194B95]');
            btn.classList.add('bg-[#194B95]', 'text-white', 'border-[#194B95]');
            aviso.classList.remove('hidden');
            container.classList.remove('overflow-y-auto');
            container.classList.add('overflow-y-hidden');
            indiceFoco = 0; 
        } else {
            btn.classList.add('bg-white', 'text-[#194B95]');
            btn.classList.remove('bg-[#194B95]', 'text-white', 'border-[#194B95]');
            aviso.classList.add('hidden');
            container.classList.remove('overflow-y-hidden');
            container.classList.add('overflow-y-auto');
            indiceFoco = -1;
        }
        actualizarFocoVisual();
    }

    function actualizarFocoVisual() {
        const tbody = document.getElementById("tablaPedidos");
        const filas = Array.from(tbody.children);
        const container = document.getElementById("scroll-container");
        
        filas.forEach((fila, index) => {
            if (index === indiceFoco && modoTrabajo && !fila.classList.contains('row-tachado')) {
                fila.classList.add('row-focused');
                const filaTop = fila.offsetTop;
                const filaHeight = fila.offsetHeight;
                const containerHeight = container.clientHeight;
                const containerScroll = container.scrollTop;
                if (filaTop < containerScroll) container.scrollTop = filaTop; 
                else if (filaTop + filaHeight > containerScroll + containerHeight) container.scrollTop = filaTop + filaHeight - containerHeight;
            } else {
                fila.classList.remove('row-focused');
            }
        });
    }

    // Eventos de Teclado
    document.addEventListener('keydown', (e) => {
        if (modalRestaurarAbierto) {
            if (e.key === 'Enter') { e.preventDefault(); confirmarRestauracion(); }
            if (e.key === 'Escape') { e.preventDefault(); cerrarModalRestaurar(); }
            return;
        }

        if (modoTrabajo && e.key === 'Escape') { toggleModoTrabajo(); return; }
        if (!modoTrabajo) return;

        if (e.key === 'Tab') {
            e.preventDefault();
            const nuevoEstado = filtroActual === 'pendiente' ? 'entregados' : 'pendientes';
            filtrar(nuevoEstado);
            return;
        }

        const tbody = document.getElementById("tablaPedidos");
        const totalFilas = tbody.children.length;
        if (totalFilas === 0) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault(); 
            indiceFoco = Math.min(indiceFoco + 1, totalFilas - 1);
            actualizarFocoVisual();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault(); 
            indiceFoco = Math.max(indiceFoco - 1, 0);
            actualizarFocoVisual();
        } else if (e.key === 'Enter') {
            e.preventDefault();
            const filas = Array.from(tbody.children);
            const filaActiva = filas[indiceFoco];
            if(filaActiva && !filaActiva.classList.contains('row-tachado')) {
                const id = parseInt(filaActiva.id.replace('fila-', ''));
                iniciarProcesoEntrega(id);
            }
        } else if (e.key === 'Delete' || e.key === 'Backspace') {
            e.preventDefault();
            if(ultimoPedidoAccionado) abrirModalRestaurar(ultimoPedidoAccionado);
        }
    });

    function iniciarProcesoEntrega(id) {
        const p = pedidos.find(item => item.id === id);
        if(p && p.estado === 'pendiente' && !p.enProcesoEliminacion) {
            p.enProcesoEliminacion = true;
            const fila = document.getElementById(`fila-${id}`);
            if(fila) {
                fila.classList.add('row-tachado');
                fila.classList.remove('row-focused');
            }
            
            setTimeout(() => {
                if(p.enProcesoEliminacion) {
                    p.estado = 'entregado';
                    p.enProcesoEliminacion = false;
                    clearInterval(p.interval);
                    ultimoPedidoAccionado = id;
                    renderizarTabla(); 
                }
            }, 1000);

            if(modoTrabajo) {
                setTimeout(() => {
                    const tbody = document.getElementById("tablaPedidos");
                    if(indiceFoco < tbody.children.length - 1) indiceFoco++;
                    actualizarFocoVisual();
                }, 50);
            }
        }
    }

    function abrirModalRestaurar(id) {
        modalRestaurarAbierto = true;
        document.getElementById('lbl-id-restaurar').innerText = `#${id}`;
        const modal = document.getElementById('modal-restaurar');
        const content = document.getElementById('content-restaurar');
        modal.classList.remove('hidden');
        setTimeout(() => {
            content.classList.remove('scale-95', 'opacity-0');
            content.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function cerrarModalRestaurar() {
        modalRestaurarAbierto = false;
        const modal = document.getElementById('modal-restaurar');
        const content = document.getElementById('content-restaurar');
        content.classList.remove('scale-100', 'opacity-100');
        content.classList.add('scale-95', 'opacity-0');
        setTimeout(() => { modal.classList.add('hidden'); }, 200);
    }

    function confirmarRestauracion() {
        if(ultimoPedidoAccionado) {
            const p = pedidos.find(item => item.id === ultimoPedidoAccionado);
            if(p) {
                p.estado = 'pendiente';
                p.enProcesoEliminacion = false; 
                if(!p.interval) {
                    p.interval = setInterval(() => {
                        if(p.estado === 'pendiente' && !p.enProcesoEliminacion) {
                            p.tiempo--;
                            actualizarTiempoVisual(p.id, p.tiempo);
                        } else if (!p.enProcesoEliminacion) {
                            clearInterval(p.interval);
                        }
                    }, 1000);
                }
                renderizarTabla();
            }
        }
        cerrarModalRestaurar();
    }

    function filtrar(estado) {
        filtroActual = estado.replace('s', ''); 
        indiceFoco = 0;
        const btnPend = document.getElementById('tab-pendientes');
        const btnEntr = document.getElementById('tab-entregados');

        if(filtroActual === 'pendiente') {
            btnPend.className = "flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-active";
            btnEntr.className = "flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-inactive";
        } else {
            btnPend.className = "flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-inactive";
            btnEntr.className = "flex-1 flex items-center justify-center gap-2 py-2.5 px-6 rounded-md font-bold text-sm transition-all tab-active";
        }
        renderizarTabla();
        if(modoTrabajo) actualizarFocoVisual();
    }

    // INIT
    agregarPedidoSimulado();
    agregarPedidoSimulado();
    agregarPedidoSimulado();
    setInterval(agregarPedidoSimulado, 10000); 

</script>
@endpush