import {uploadFile} from "https://cdn.jsdelivr.net/npm/@huggingface/hub@1.0.2/+esm";

        document.getElementById('submit-upload-hf').addEventListener('click', async () => {
            const repoId = document.getElementById('repo-id-hf').value.trim();
            const accessToken = document.getElementById('access-token-hf').value.trim();
            const submitButton = document.getElementById('submit-upload-hf');
            const loadingSpinner = document.getElementById('loading-spinner-hf'); // Reference to loading spinner

            if (!repoId || !accessToken) {
                alert("Please enter both a repository name and an access token.");
                return;
            }

            if ((document.querySelectorAll('#survey-area .question')).length == 0) {
                alert("No Content added to Canvas. Please add Components before uploading to Hugging Face");
                return;
            }

            // Show loading spinner and disable the submit button
            submitButton.disabled = true;
            loadingSpinner.style.display = "inline-block";  

            try {
                
                const surveyPythonCode = buildSurveyPythonCode(); // Get survey Python code
                const requirements = `web3==7.8.0\nrequests==2.31.0\nstreamlit==1.28.2`;

                const [username, repoName] = repoId.split("/");
                if (!username || !repoName) {
                    alert("Invalid repository format. Use 'username/repository'.");
                } else {
                    await uploadToHF(repoId, accessToken, surveyPythonCode);
                    await uploadToHFReq(repoId, accessToken, requirements);
                    await uploadToHFReadMe(repoId, accessToken, requirements);
                }

                // Close the GitHub modal after successful upload
                const hfModal = bootstrap.Modal.getInstance(document.getElementById('hfModal'));
                hfModal.hide();
            } catch (error) {
                console.error("Upload failed:", error);
                alert("Failed to upload. Please check console for details.");
            } finally {
                // Hide loading spinner and re-enable the button after upload completes
                loadingSpinner.style.display = "none";
                submitButton.disabled = false;
            }
        });



        async function uploadToHF(repoId, token, content) {
            const blob = new Blob([content], { type: 'text/plain' });
            try {
                await uploadFile({
                    repo: "spaces/" + repoId,
                    accessToken: token,
                    // Can work with native File in browsers
                    file: {
                        path: "app.py",
                        content: blob
                    }
                });
                alert(`Survey uploaded successfully!`);
                savestatus = true;
            } catch (error) {
                alert("Failed to upload. Make sure your repository exists and your access token is correct");
                console.error("Upload failed:", error);
            }
        }

        async function uploadToHFReq(repoId, token, content) {
            const blob = new Blob(["web3==7.8.0\nrequests==2.31.0\nstreamlit==1.28.2"], { type: 'text/plain' });
            await uploadFile({
                repo: "spaces/" + repoId,
                accessToken: token,
                // Can work with native File in browsers
                file: {
                    path: "requirements.txt",
                    content: blob
                }
            });
            savestatus = true;
        }

        async function uploadToHFReadMe(repoId, token, content) {
            const response = await fetch('./images/README.md');
            if (!response.ok) {
                throw new Error('File not found or not accessible.');
            }
            const blob = await response.blob();
            await uploadFile({
                repo: "spaces/" + repoId,
                accessToken: token,
                // Can work with native File in browsers
                file: {
                    path: "README.md",
                    content: blob
                }
            });
            savestatus = true;
        }