<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>INIITO CONNECT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: radial-gradient(circle at top, #0f172a, #020617);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            text-align: center;
            background: rgba(255,255,255,0.05);
            padding: 40px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 40px rgba(0,255,255,0.1);
            width: 320px;
        }

        .logo {
            width: 180px;
            margin-bottom: 20px;
        }

        h1 {
            margin: 10px 0;
            font-size: 24px;
            letter-spacing: 2px;
        }

        p {
            font-size: 14px;
            opacity: 0.7;
        }

        .input-group {
            margin-top: 20px;
            text-align: left;
        }

        label {
            font-size: 12px;
            opacity: 0.7;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border-radius: 8px;
            border: none;
            outline: none;
            background: rgba(255,255,255,0.1);
            color: white;
        }

        input::placeholder {
            color: rgba(255,255,255,0.4);
        }

        .btn {
            margin-top: 25px;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(90deg, #22c55e, #3b82f6);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

        .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(59,130,246,0.5);
        }

        .footer {
            margin-top: 15px;
            font-size: 12px;
            opacity: 0.5;
        }

        #error-message {
            color: #ff4b4b;
            font-size: 12px;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>

<body>

    <div class="container">
        <img src="logo.png" alt="INIITO CONNECT" class="logo">

        <h1>INIITO CONNECT</h1>
        <p>Accede a tu experiencia inmersiva</p>

        <div class="input-group">
            <label>Email</label>
            <input type="email" id="login-email" placeholder="usuario@email.com">
        </div>

        <div class="input-group">
            <label>Contraseña</label>
            <input type="password" id="login-password" placeholder="••••••••">
        </div>

        <div id="error-message"></div>

        <button class="btn" id="login-btn">Iniciar sesión</button>

        <div class="footer">
            MVP en desarrollo 🚀 Solución creada por OLC Tecnología S.A.S
        </div>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
        import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";

        // CONFIGURACIÓN DE TU PROYECTO (Reemplaza con tus datos de la consola de Firebase)
        const firebaseConfig = {
            apiKey: "AIzaSyDD0pEdEEB8AEaeGQIKFPdQmxZyKAgbRjE",
            authDomain: "inito-connect.firebaseapp.com",
            projectId: "inito-connect",
            storageBucket: "inito-connect.appspot.com",
            messagingSenderId: "7992944492",
            appId: "1:7992944492:android:23c813735ecb5d09ea7549"
        };

        // Inicializar Firebase
        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);

        // Referencias a elementos del DOM
        const emailInput = document.getElementById('login-email');
        const passwordInput = document.getElementById('login-password');
        const loginBtn = document.getElementById('login-btn');
        const errorMsg = document.getElementById('error-message');

        // Lógica de Login
        loginBtn.addEventListener('click', () => {
            const email = emailInput.value;
            const password = passwordInput.value;

            if(!email || !password) {
                showError("Por favor completa todos los campos.");
                return;
            }

            loginBtn.innerText = "Cargando...";
            loginBtn.disabled = true;

            signInWithEmailAndPassword(auth, email, password)
                .then((userCredential) => {
                    // Login exitoso
                    console.log("Usuario logueado:", userCredential.user);
                    // Aquí es donde luego redirigiremos a la solución de Unity
                    window.location.href = "/dashboard.html"; 
                })
                .catch((error) => {
                    showError("Error: Credenciales incorrectas o usuario no registrado.");
                    loginBtn.innerText = "Iniciar sesión";
                    loginBtn.disabled = false;
                });
        });

        function showError(text) {
            errorMsg.innerText = text;
            errorMsg.style.display = "block";
        }

        // Observador del estado de autenticación
        onAuthStateChanged(auth, (user) => {
            if (user) {
                console.log("Sesión activa para:", user.email);
            }
        });
    </script>

</body>
</html>