<!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, viewport-fit=cover">
    <title>Ascencor Hub 3.0</title>
    
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#854d2b">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Ascencor">
    <link rel="apple-touch-icon" href="icon-192.png">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
    
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore-compat.js"></script>

    <style>
        :root { 
            --primary: #854d2b; 
            --primary-dark: #5d351e;
            --bg: #f8fafc; 
            --text-main: #1e293b;
            --text-muted: #64748b;
            --card-bg: #ffffff;
        }
        
        * { box-sizing: border-box; font-family: 'Inter', sans-serif; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
        body { background: var(--bg); color: var(--text-main); min-height: 100vh; }

        /* --- LOGIN SCREEN --- */
        #login-screen { 
            height: 100vh; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            padding: 20px;
            background: linear-gradient(135deg, var(--bg) 0%, #e2e8f0 100%);
        }
        
        .login-card {
            background: white;
            padding: 40px 30px;
            border-radius: 24px;
            width: 100%;
            max-width: 380px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
            text-align: center;
        }

        .logo-box { 
            width: 80px; height: 80px; 
            background: var(--primary); 
            border-radius: 20px; 
            margin: 0 auto 20px; 
            display: flex; justify-content: center; align-items: center; 
            font-size: 32px; color: white; 
            box-shadow: 0 10px 20px rgba(133, 77, 43, 0.3);
            overflow: hidden;
        }
        .logo-box img { width: 100%; height: 100%; object-fit: contain; }
        
        input { 
            width: 100%; padding: 16px; margin-bottom: 12px; 
            border: 2px solid #e2e8f0; border-radius: 12px; 
            font-size: 15px; outline: none; transition: 0.3s;
            background: #f8fafc;
        }
        input:focus { border-color: var(--primary); background: white; }
        
        .btn-main { 
            width: 100%; padding: 16px; 
            background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
            color: white; border: none; border-radius: 12px; 
            font-weight: 700; font-size: 16px; cursor: pointer; 
            box-shadow: 0 4px 15px rgba(133, 77, 43, 0.4);
            margin-top: 10px;
        }
        .btn-main:active { transform: scale(0.98); }

        /* --- DASHBOARD --- */
        #dashboard-screen { display: none; min-height: 100vh; flex-direction: column; }
        
        /* HEADER CON DEGRADADO */
        .hub-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 40px 25px 30px;
            color: white;
            border-radius: 0 0 30px 30px;
            box-shadow: 0 10px 30px rgba(133, 77, 43, 0.25);
            margin-bottom: 25px;
            position: relative;
        }
        
        .header-top { display: flex; justify-content: space-between; align-items: center; }
        
        .header-logo-container {
            width: 50px; height: 50px;
            background: rgba(255,255,255,0.95);
            border-radius: 14px;
            padding: 5px;
            display: flex; justify-content: center; align-items: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            overflow: hidden;
        }

        .greeting { font-size: 14px; opacity: 0.9; font-weight: 500; }
        .user-name { font-size: 20px; font-weight: 800; margin-top: 2px; letter-spacing: -0.5px; }
        
        .btn-logout-icon {
            background: rgba(255,255,255,0.2);
            width: 40px; height: 40px;
            border-radius: 12px;
            display: flex; justify-content: center; align-items: center;
            color: white;
            cursor: pointer;
            backdrop-filter: blur(5px);
            border: none;
        }

        /* SECCIONES */
        .section-container { padding: 0 20px 20px; max-width: 600px; margin: 0 auto; width: 100%; }
        
        .section-title { 
            font-size: 12px; 
            font-weight: 800; 
            color: var(--text-muted); 
            text-transform: uppercase; 
            letter-spacing: 1px;
            margin: 25px 0 15px 5px;
            display: flex; align-items: center; gap: 8px;
        }
        .section-title i { font-size: 14px; color: var(--primary); }

        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        
        /* TARJETAS DE APPS */
        .app-card {
            background: white;
            padding: 20px 15px;
            border-radius: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.02);
            position: relative;
            overflow: hidden;
        }
        .app-card:active { transform: scale(0.96); background: #fafafa; }
        
        .icon-circle {
            width: 55px; height: 55px;
            border-radius: 16px;
            display: flex; justify-content: center; align-items: center;
            font-size: 22px;
            margin: 0 auto 12px;
            transition: 0.2s;
        }
        
        .app-title { font-weight: 700; font-size: 14px; color: var(--text-main); margin-bottom: 2px; }
        .app-desc { font-size: 10px; color: #94a3b8; font-weight: 500; }

        /* Colores Específicos por App */
        .c-admin .icon-circle { background: #ecfdf5; color: #059669; }
        .c-doc .icon-circle { background: #eff6ff; color: #2563eb; }
        .c-client .icon-circle { background: #fdf2f8; color: #db2777; }
        .c-tech .icon-circle { background: #fff7ed; color: #ea580c; }
        .c-report .icon-circle { background: #fef2f2; color: #dc2626; }
        .c-call .icon-circle { background: #f5f3ff; color: #7c3aed; }
        .c-qr .icon-circle { background: #111827; color: white; }
        .c-config .icon-circle { background: #f1f5f9; color: #475569; }

        #file-input { display: none; }
        .footer-ver { text-align: center; color: #cbd5e1; font-size: 10px; padding: 20px; margin-top: auto; }
    </style>
</head>
<body>

    <div id="login-screen">
        <div class="login-card">
            <div class="logo-box">
                <i class="fas fa-elevator" id="login-icon"></i>
                <img id="login-logo-img" style="display:none;">
            </div>
            <h2 style="margin-bottom:5px; color:#1e293b;">Bienvenido</h2>
            <p style="margin-bottom:30px; color:#64748b; font-size:14px;">Ingresa tus credenciales</p>
            
            <input type="email" id="email" placeholder="Correo corporativo">
            <input type="password" id="password" placeholder="Contraseña">
            <button class="btn-main" onclick="login()">Acceder al Sistema</button>
            <p id="error-msg" style="color:#ef4444; font-size:12px; margin-top:15px; font-weight:600;"></p>
        </div>
    </div>

    <div id="dashboard-screen">
        
        <div class="hub-header">
            <div class="header-top">
                <div style="display:flex; align-items:center; gap:15px;">
                    <div class="header-logo-container">
                        <img id="dash-logo-img" src="" style="width:100%; height:100%; object-fit:contain; display:none;">
                        <i class="fas fa-elevator" id="dash-default-icon" style="color:var(--primary); font-size:24px;"></i>
                    </div>
                    
                    <div>
                        <div class="greeting" id="greeting-txt">Hola,</div>
                        <div class="user-name">Ascencor Hub</div>
                    </div>
                </div>

                <button class="btn-logout-icon" onclick="logout()">
                    <i class="fas fa-power-off"></i>
                </button>
            </div>
        </div>

        <div class="section-container">
            
            <div class="section-title"><i class="fas fa-briefcase"></i> Gestión Administrativa</div>
            <div class="grid-2">
                <div class="app-card c-doc" onclick="window.location.href='presupuestos.html'">
                    <div class="icon-circle"><i class="fas fa-file-invoice-dollar"></i></div>
                    <div class="app-title">Presupuestos</div>
                    <div class="app-desc">Cotizaciones</div>
                </div>

                <div class="app-card c-doc" onclick="window.location.href='recibos.html'">
                    <div class="icon-circle"><i class="fas fa-receipt"></i></div>
                    <div class="app-title">Recibos</div>
                    <div class="app-desc">Pagos recibidos</div>
                </div>

                <div class="app-card c-client" onclick="window.location.href='clientes.html'">
                    <div class="icon-circle"><i class="fas fa-address-book"></i></div>
                    <div class="app-title">Directorio</div>
                    <div class="app-desc">Base de clientes</div>
                </div>

                <div class="app-card c-admin" onclick="window.location.href='cobranza.html'">
                    <div class="icon-circle"><i class="fas fa-chart-pie"></i></div>
                    <div class="app-title">Cobranza</div>
                    <div class="app-desc">Estado de cuenta</div>
                </div>
            </div>

            <div class="section-title"><i class="fas fa-tools"></i> Operaciones de Campo</div>
            <div class="grid-2">
                <div class="app-card c-report" onclick="window.location.href='inspecciones.html'">
                    <div class="icon-circle"><i class="fas fa-tasks"></i></div>
                    <div class="app-title">Inspecciones</div>
                    <div class="app-desc">Formato técnico</div>
                </div>

                <div class="app-card c-qr" onclick="window.location.href='bitacora.html'">
                    <div class="icon-circle"><i class="fas fa-qrcode"></i></div>
                    <div class="app-title">Bitácora QR</div>
                    <div class="app-desc">Historial digital</div>
                </div>

                <div class="app-card c-report" onclick="window.location.href='tecnico.html'">
                    <div class="icon-circle"><i class="fas fa-clipboard-check"></i></div>
                    <div class="app-title">Reportes</div>
                    <div class="app-desc">Visitas diarias</div>
                </div>

                <div class="app-card c-call" onclick="window.location.href='llamadas.html'">
                    <div class="icon-circle"><i class="fas fa-phone-alt"></i></div>
                    <div class="app-title">Llamadas</div>
                    <div class="app-desc">Emergencias</div>
                </div>

                <div class="app-card c-tech" onclick="window.location.href='mantenimiento.html'">
                    <div class="icon-circle"><i class="fas fa-route"></i></div>
                    <div class="app-title">Rutas</div>
                    <div class="app-desc">Cronograma</div>
                </div>
            </div>

            <div class="section-title"><i class="fas fa-cog"></i> Configuración</div>
            <div class="app-card c-config" style="display:flex; align-items:center; gap:15px; padding:15px; text-align:left;" onclick="document.getElementById('file-input').click()">
                <div class="icon-circle" style="margin:0; width:45px; height:45px; font-size:18px;"><i class="fas fa-camera"></i></div>
                <div>
                    <div class="app-title">Logo de Empresa</div>
                    <div class="app-desc">Actualizar para Hub y PDF</div>
                </div>
                <input type="file" id="file-input" accept="image/*" onchange="saveLogo(this)">
            </div>

            <div class="footer-ver">Sistema v3.0 • Ascencor 2010 C.A.</div>
        </div>
    </div>

<script>
    // 1. CONFIGURACIÓN FIREBASE
    const firebaseConfig = { apiKey: "AIzaSyBnX91ip_F1sM_wwTI2kjZzjPWvDfbJxTA", authDomain: "ascencor-app.firebaseapp.com", projectId: "ascencor-app", storageBucket: "ascencor-app.firebasestorage.app", messagingSenderId: "271509950418", appId: "1:271509950418:web:1b62c3e6b49bc6ec4a020b" };
    
    // Iniciar Firebase de forma segura
    let auth;
    try {
        firebase.initializeApp(firebaseConfig);
        auth = firebase.auth();
        console.log("Firebase iniciado correctamente");
    } catch (e) {
        console.error("Error Firebase:", e);
        alert("Error de conexión: " + e.message);
    }

    // 2. SALUDO
    const hour = new Date().getHours();
    let greet = "Hola,";
    if(hour < 12) greet = "Buenos días,";
    else if(hour < 18) greet = "Buenas tardes,";
    else greet = "Buenas noches,";
    if(document.getElementById('greeting-txt')) document.getElementById('greeting-txt').innerText = greet;

    // 3. ESCUCHAR ESTADO DE SESIÓN
    if(auth) {
        auth.onAuthStateChanged(user => {
            if (user) {
                console.log("Usuario detectado:", user.email);
                document.getElementById('login-screen').style.display = 'none';
                document.getElementById('dashboard-screen').style.display = 'flex';
                loadLocalLogo();
            } else {
                console.log("No hay usuario, mostrando login");
                document.getElementById('login-screen').style.display = 'flex';
                document.getElementById('dashboard-screen').style.display = 'none';
            }
        });
    }

    // 4. FUNCIÓN DE LOGIN
    function login() {
        const e = document.getElementById('email').value;
        const p = document.getElementById('password').value;
        const btn = document.querySelector('.btn-main');
        const errorMsg = document.getElementById('error-msg');
        
        if(!e || !p) {
            errorMsg.innerText = "Ingresa correo y contraseña";
            return;
        }

        btn.innerText = "Verificando...";
        
        auth.signInWithEmailAndPassword(e, p)
            .then(() => {
                // El onAuthStateChanged se encargará del resto
                console.log("Login exitoso");
            })
            .catch(err => {
                console.error("Error Login:", err);
                errorMsg.innerText = "Error: " + err.message;
                btn.innerText = "Acceder al Sistema";
                
                if(err.code === 'auth/wrong-password') errorMsg.innerText = "Contraseña incorrecta";
                if(err.code === 'auth/user-not-found') errorMsg.innerText = "Usuario no encontrado";
                if(err.code === 'auth/invalid-email') errorMsg.innerText = "Correo inválido";
            });
    }

    // 5. LOGOUT
    function logout() {
        if(confirm("¿Cerrar sesión?")) {
            auth.signOut().then(() => {
                location.reload();
            });
        }
    }

    // 6. GESTIÓN DEL LOGO
    function saveLogo(input) {
        const file = input.files[0];
        if(!file) return;
        const reader = new FileReader();
        reader.onload = function(e) {
            localStorage.setItem('ascencor_logo', e.target.result);
            loadLocalLogo();
            alert("✅ Logo actualizado");
        };
        reader.readAsDataURL(file);
    }

    function loadLocalLogo() {
        const saved = localStorage.getItem('ascencor_logo');
        if(saved) {
            const imgLogin = document.getElementById('login-logo-img');
            if(imgLogin) { imgLogin.src = saved; imgLogin.style.display = 'block'; }
            if(document.getElementById('login-icon')) document.getElementById('login-icon').style.display = 'none';

            const imgDash = document.getElementById('dash-logo-img');
            if(imgDash) { imgDash.src = saved; imgDash.style.display = 'block'; }
            if(document.getElementById('dash-default-icon')) document.getElementById('dash-default-icon').style.display = 'none';
        }
    }
</script>
</body>
</html>