<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>UTRAU - Acceso Seguro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
        @keyframes scan { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
        @keyframes fadeInUp { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    </style>
</head>
<body class="bg-slate-900 flex items-center justify-center min-h-screen p-3 relative font-sans">

    <div id="preloader-julmar" class="fixed inset-0 bg-slate-950 z-[9999] flex flex-col justify-between items-center p-8 transition-all duration-1000 ease-in-out">
        <div></div>
        <div class="flex flex-col items-center justify-center space-y-6 relative">
            <div class="relative w-40 h-40 flex items-center justify-center">
                <div class="absolute inset-0 bg-blue-500/10 rounded-full blur-2xl animate-pulse"></div>
                <img src="{{ url_for('static', filename='uploads/logo_utrau.png') }}" 
                     class="w-full h-full object-contain relative z-10 animate-[float_3.5s_ease-in-out_infinite]">
                <div class="absolute inset-x-0 h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent z-20 opacity-70 animate-[scan_2.5s_linear_infinite]"></div>
            </div>
            <div class="text-center space-y-1">
                <h1 class="text-2xl font-black text-white tracking-widest uppercase font-mono">UTRAU</h1>
                <p class="text-[10px] font-bold text-cyan-400 uppercase tracking-[0.3em] animate-pulse">Operating System Active</p>
            </div>
        </div>
        <div class="flex flex-col items-center justify-center pt-8 pb-8 opacity-0 animate-[fadeInUp_1.2s_ease-out_0.5s_forwards]">
            <span class="text-[10px] font-black text-slate-600 uppercase tracking-[0.5em] block mb-3 opacity-90">Powered By</span>
            <img src="{{ url_for('static', filename='uploads/logo_julmar.png') }}" 
                 class="h-32 w-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.15)] transition-all duration-500">
        </div>
    </div>

    <div class="bg-slate-900 border border-slate-800 p-8 rounded-[2rem] shadow-2xl w-full max-w-md z-10 text-white">
        <div class="flex flex-col items-center text-center mb-6">
            <img src="{{ url_for('static', filename='uploads/logo_utrau.png') }}" class="w-24 h-24 object-contain mb-2">
            <h2 class="text-xl font-black text-blue-500 tracking-wider uppercase">UTRAU</h2>
            <p class="text-[9px] font-bold text-slate-500 uppercase tracking-widest">Acceso Operativo Centralizado</p>
        </div>

        {% if error %}
        <div class="bg-red-900/50 border border-red-700 text-red-400 px-4 py-3 rounded-2xl text-xs font-black text-center uppercase mb-4">
            {{ error }}
        </div>
        {% endif %}

        <form action="/login" method="POST" id="loginForm" class="space-y-4">
            <div>
                <label class="block text-[10px] font-black text-slate-500 mb-1.5 uppercase tracking-wide ml-1">Compañero</label>
                <input type="text" name="alias" required 
                    class="w-full px-4 py-4 rounded-2xl border-2 border-slate-800 bg-slate-950 focus:border-blue-500 outline-none font-bold text-white transition">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-500 mb-1.5 uppercase tracking-widest ml-1">PIN de Firma</label>
                <input type="password" name="pin_firma" required 
                    class="w-full px-4 py-4 rounded-2xl border-2 border-slate-800 bg-slate-950 focus:border-blue-500 outline-none text-center text-2xl tracking-[1em] font-black text-white transition">
            </div>
            
            <input type="hidden" name="uuid_terminal" id="uuid_terminal">
            <input type="hidden" name="nombre_equipo" id="nombre_equipo">

            <button type="submit" id="btnIngresar" 
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-4 rounded-2xl transition-all uppercase tracking-wider text-sm">
                Ingresar al Sistema
            </button>
        </form>

        <div class="mt-8 pt-4 border-t border-slate-800/60 text-[9px] font-black uppercase tracking-wider text-slate-600">
            <div class="flex justify-between mb-2">
                <span>Terminal:</span>
                <span class="text-slate-400 font-mono" id="display_uuid">Analizando...</span>
            </div>
            <div class="flex justify-between">
                <span>Estado:</span>
                <span class="text-emerald-400 font-black">ESPERANDO ACCESO</span>
            </div>
        </div>
    </div>

    <script>
        function generarUUID() {
            if (window.crypto && window.crypto.randomUUID) {
                try {
                    return window.crypto.randomUUID();
                } catch(e) {}
            }
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        window.addEventListener('load', () => {
            let uuid = localStorage.getItem('utrau_device_uuid');
            
            if (!uuid) {
                uuid = generarUUID();
                localStorage.setItem('utrau_device_uuid', uuid);
            }
            
            document.getElementById('uuid_terminal').value = uuid;
            document.getElementById('nombre_equipo').value = navigator.userAgent.substring(0, 99);
            document.getElementById('display_uuid').innerText = uuid.substring(0, 8) + '...';

            setTimeout(() => {
                const preloader = document.getElementById('preloader-julmar');
                preloader.style.opacity = '0';
                setTimeout(() => { preloader.remove(); }, 1000);
            }, 3000); 
        });

        document.getElementById('loginForm').onsubmit = function() {
            document.getElementById('btnIngresar').disabled = true;
            document.getElementById('btnIngresar').innerHTML = '<i class="fa-solid fa-circle-notch animate-spin mr-2"></i> Cargando...';
        };
    </script>
</body>
</html>