<div class="row justify-content-center align-items-center min-vh-100 bg-dark" style="margin-top:-60px;">
    <div class="col-md-5 col-lg-4">
        <div class="card bg-black border border-secondary shadow-lg rounded-4 text-white text-center p-4">
            <h1 class="text-success mb-3"><i class="fa-solid fa-shield-halved fa-2x drop-shadow-glow"></i></h1>
            <h3 class="fw-bold tracking-widest text-uppercase">Zero-Knowledge Vault</h3>
            
            <?php if(isset($setupMode) && $setupMode): ?>
                <p class="text-muted small mb-4">Initialize your Secure Vault. Everything is encrypted on your device. The server never sees your password. <strong class="text-danger">WARNING: NO RECOVERY.</strong></p>
                <form id="vaultSetupForm" data-no-pjax="true">
                    <div class="mb-4">
                        <input type="password" id="setupMp" class="form-control form-control-lg bg-dark text-success border-success text-center" placeholder="Create Master Password" required minlength="6">
                    </div>
                    <button type="submit" id="setupBtn" class="btn btn-success btn-lg w-100 fw-bold shadow-sm">INITIALIZE SECURE VAULT</button>
                </form>
            <?php else: ?>
                <p class="text-muted small mb-4">Vault is currently <span class="text-danger fw-bold">LOCKED</span>.</p>
                <form id="vaultUnlockForm" data-no-pjax="true">
                    <div class="mb-3">
                        <input type="password" id="loginMp" class="form-control form-control-lg bg-dark text-success border-secondary text-center" placeholder="Master Password" required>
                    </div>
                    <button type="submit" id="unlockBtn" class="btn btn-outline-success btn-lg w-100 fw-bold shadow-sm">UNLOCK VAULT</button>
                </form>
            <?php endif; ?>
        </div>
    </div>
</div>

<style>
.drop-shadow-glow {
    filter: drop-shadow(0 0 15px rgba(25, 135, 84, 0.8));
}
.tracking-widest { letter-spacing: 0.15em; }
</style>

<script>
// Cryptography Helpers
async function hashSHA256(str) {
    const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str));
    return Array.from(new Uint8Array(buf)).map(b => b.toString(16).padStart(2, '0')).join('');
}

function generateRandomSalt() {
    const array = new Uint8Array(16);
    crypto.getRandomValues(array);
    return Array.from(array).map(b => b.toString(16).padStart(2, '0')).join('');
}

const setupForm = document.getElementById('vaultSetupForm');
if(setupForm) {
    setupForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = document.getElementById('setupBtn');
        btn.disabled = true;
        btn.innerText = 'ENCRYPTING...';
        
        try {
            const mp = document.getElementById('setupMp').value;
            const auth_password = await hashSHA256("auth" + mp);
            const enc_salt = generateRandomSalt();
            
            const res = await fetch('<?= BASE_URL ?>/vault/setupMaster', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ auth_password, enc_salt })
            }).then(r => r.json());
            
            if(res.success) {
                sessionStorage.setItem('vault_mp', mp);
                sessionStorage.setItem('vault_enc_salt', enc_salt);
                window.location.href = res.redirect;
            } else {
                throw new Error(res.message);
            }
        } catch(err) {
            alert(err.message);
            btn.disabled = false;
            btn.innerText = 'INITIALIZE SECURE VAULT';
        }
    });
}

const unlockForm = document.getElementById('vaultUnlockForm');
if(unlockForm) {
    unlockForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        const btn = document.getElementById('unlockBtn');
        btn.disabled = true;
        btn.innerText = 'VERIFYING...';
        
        try {
            const mp = document.getElementById('loginMp').value;
            const auth_password = await hashSHA256("auth" + mp);
            
            const res = await fetch('<?= BASE_URL ?>/vault/unlock', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ auth_password })
            }).then(r => r.json());
            
            if(res.success) {
                sessionStorage.setItem('vault_mp', mp);
                sessionStorage.setItem('vault_enc_salt', res.enc_salt);
                window.location.href = res.redirect;
            } else {
                throw new Error(res.message);
            }
        } catch(err) {
            alert(err.message);
            btn.disabled = false;
            btn.innerText = 'UNLOCK VAULT';
            this.reset();
        }
    });
}
</script>
