// import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.9.0/dist/index.min.js";

// Read/write tokens from sessionStorage
function getReadToken() {
    return sessionStorage.getItem('hf_read_token') || '';
}
function getWriteToken() {
    return sessionStorage.getItem('hf_write_token') || '';
}

// Helper to add tokens to every API call
function withTokens(obj = {}) {
    return {
        ...obj,
        read_token: getReadToken(),
        write_token: getWriteToken(),
    };
}

// Helper to call secure server-side proxy
async function callSecureApi(fn, args) {
    const resp = await fetch('/api/proxy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ fn, args })
    });
    if (!resp.ok) throw new Error('Proxy error: ' + resp.status);
    return await resp.json();
}

const loginForm = document.getElementById('loginForm');
const signupForm = document.getElementById('signupForm');

// Ensure overlay exists and setup
const loadingOverlay = document.getElementById('loadingOverlay');
if (loadingOverlay) {
    loadingOverlay.style.display = 'none';
}

// Helper to toggle the loading overlay - PROPERLY
function setLoading(isLoading) {
    const overlay = document.getElementById('loadingOverlay');
    if (!overlay) {
        console.error('Loading overlay element not found!');
        return;
    }
    
    if (isLoading) {
        overlay.style.display = 'flex';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
        overlay.style.backdropFilter = 'blur(5px)';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.zIndex = '9999';
    } else {
        overlay.style.display = 'none';
    }
}

// Registration Logic
if (signupForm) {
    signupForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        setLoading(true);

        const user = document.getElementById('username').value;
        const pass = document.getElementById('password').value;

        try {
            const result = await callSecureApi("/create_user", withTokens({
                user_id: user,
                password: pass,
            }));
            // Debug: log the result
            console.log("/create_user result:", result.data);
            let log = "";
            if (typeof result.data === "string") {
                log = result.data.toLowerCase();
            } else if (Array.isArray(result.data)) {
                log = result.data.map(x => String(x).toLowerCase()).join(" ");
            } else if (typeof result.data === "object" && result.data !== null) {
                log = JSON.stringify(result.data).toLowerCase();
            }
            if (log.includes("success") || log.includes("user created")) {
                sessionStorage.setItem("pockit_user", user);
                sessionStorage.setItem("pockit_pass", pass);
                sessionStorage.setItem('hf_read_token', 'hf_server_token');
                sessionStorage.setItem('hf_write_token', 'hf_server_token');
                window.location.href = "dashboard.html"; // Success redirect
            } else {
                alert("Error: " + (typeof result.data === "object" ? JSON.stringify(result.data) : result.data));
                setLoading(false);
            }
        } catch (err) {
            console.error(err);
            setLoading(false);
        }
    });
}

// Login Logic
if (loginForm) {
    loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        setLoading(true);

        const user = document.getElementById('username').value;
        const pass = document.getElementById('password').value;

        try {
            const result = await callSecureApi("/get_files_secure", withTokens({
                user_id: user,
                password: pass,
            }));
            // Status message is at index 1 for get_files_secure
            const status = result.data[1]?.toLowerCase?.() || "";
            if (status.includes("found") || status.includes("success")) {
                sessionStorage.setItem("pockit_user", user);
                sessionStorage.setItem("pockit_pass", pass);
                sessionStorage.setItem('hf_read_token', 'hf_server_token');
                sessionStorage.setItem('hf_write_token', 'hf_server_token');
                window.location.href = "dashboard.html"; // Success redirect
            } else {
                alert("Login failed: " + result.data[1]);
                setLoading(false);
            }
        } catch (err) {
            console.error(err);
            alert("Connection error.");
            setLoading(false);
        }
    });
}