javascript/profile.js

const CLIENT_ID =
    "819389601271-fl7jsirpdkepkcou78erki5hmi30rrbm.apps.googleusercontent.com";
let tokenClient;
let accessToken;

async function handleCredentialResponse(response) {
    const idToken = response.credential;
    const payload = JSON.parse(atob(idToken.split(".")[1]));
    const uid = payload.sub;

    localStorage.setItem("userData", JSON.stringify({
        uid: uid,
        name: payload.name,
        photo_profile: payload.picture,
        email: payload.email,
    }));

    let userData = await getUserData();
    if (!userData || Object.keys(userData).length === 0) {
        userData = {
            uid: uid,
            name: payload.name,
            photo_profile: payload.picture,
            email: payload.email,
        };
    }

    await updateUserDataToGitHub(userData);

    localStorage.setItem("cart", JSON.stringify(userData.cart || []));

    window.location.reload();
}

function handleAccessTokenResponse(response) {
    accessToken = response.access_token;
    console.log("Access Token:", accessToken);
    fetchUserAdditionalInfo();
}

async function fetchUserAdditionalInfo() {
    let userData = JSON.parse(localStorage.getItem("userData"));
    if (userData && userData.uid && accessToken) {
        try {
            const res = await fetch(
                "https://people.googleapis.com/v1/people/me?personFields=phoneNumbers,addresses",
                {
                    headers: {
                        Authorization: `Bearer ${accessToken}`,
                    },
                }
            );
            if (!res.ok)
                throw new Error(
                    "Gagal mendapatkan data tambahan: " + res.status
                );
            const additionalData = await res.json();
            console.log("Data tambahan:", additionalData);

            if (
                additionalData.phoneNumbers &&
                additionalData.phoneNumbers.length > 0
            ) {
                userData.phone = additionalData.phoneNumbers[0].value;
            }
            if (
                additionalData.addresses &&
                additionalData.addresses.length > 0
            ) {
                userData.address = additionalData.addresses[0].formattedValue;
            }
            localStorage.setItem("userData", JSON.stringify(userData));
            console.log("User Data Lengkap:", userData);
        } catch (err) {
            console.error("Error fetching additional info:", err);
        }
    } else {
        console.warn("Data UID atau access token tidak tersedia.");
    }
}

async function renderGoogleLoginButton() {
    const container = document.getElementById("profile-container");

    document.querySelectorAll("#googleSignInButton").forEach((elm) => elm.remove());

    const urlNow = window.location.href;
    const urlParams = new URLSearchParams(window.location.search);
    const redirectUrl = urlParams.get("redirect") || urlNow;
    const message =
        urlParams.get("message") ||
        "Silakan masuk ke akun Anda terlebih dahulu untuk melanjutkan:";

    container.innerHTML = `
        <p class="text-center" style="text-decoration: underline; font-style: italic;">${message}</p>
        <span class="text-center m-4">Klik tombol di bawah ini untuk masuk:</span>
        <div id="googleSignInButton"></div>
    `;

    if (message.trim()) alert(message, false);

    async function loadGoogleAPI(callback) {
        if (typeof google !== "undefined") {
            callback();
            return;
        }

        console.log("Memuat Google API...");
        const script = document.createElement("script");
        script.src = "https://accounts.google.com/gsi/client";
        script.async = true;
        script.defer = true;

        script.onload = function () {
            console.log("Google API berhasil dimuat.");
            if (typeof google !== "undefined") {
                callback();
            } else {
                console.error("Google API gagal dimuat.");
                alert("Jika tombol masuk tidak tampil, silakan muat ulang halaman ini", false);
            }
        };

        script.onerror = function () {
            console.error("Gagal memuat Google API.");
            alert("Gagal memuat Google Login. Coba gunakan browser lain atau muat ulang halaman ini.", false);
        };

        document.head.appendChild(script);
    }

    function initializeGoogleLogin() {
        google.accounts.id.initialize({
            client_id: CLIENT_ID,
            callback: async (response) => {
                await handleCredentialResponse(response);
                window.location.href = redirectUrl;
            },
            auto_select: false,
            button_auto_select: false,
            scope: "email profile https://www.googleapis.com/auth/user.phonenumbers.read https://www.googleapis.com/auth/user.addresses.read",
        });

        google.accounts.id.prompt();

        google.accounts.id.renderButton(
            document.getElementById("googleSignInButton"),
            { theme: "outline", size: "large" }
        );
    }

    loadGoogleAPI(() => {
        initializeGoogleLogin();
    });
}

async function initProfile() {
    const userData = await getUserData();
    if (userData && Object.keys(userData).length > 0) {
        renderProfileForm(userData);
    } else {
        await renderGoogleLoginButton();
    }
}

function renderProfileForm(userData) {
    const container = document.getElementById("profile-container");
    container.innerHTML = `
    <form id="profileForm" class="fs-5">
      <div class="mb-2 d-flex flex-row align-items-center justify-content-center">
        <img id="photo_profile" class="img-fluid img-thumbnail rounded-circle" src=${userData.photo_profile}>
        <input class="d-none" type="file" id="fileInput" accept="image/*">
      </div>
      <div class="mb-2">
        <input class="form-control form-control-lg" type="text" id="name" placeholder="Nama" value="${
            userData.name || ""
        }" required>
      </div>
      <div class="mb-2">
        <input class="form-control form-control-lg" type="email" id="email" placeholder="Email" value="${
            userData.email || ""
        }" required disabled>
      </div>
      <div class="mb-2">
        <input class="form-control form-control-lg" type="text" id="phone" placeholder="No. HP" value="${
            userData.phone || ""
        }" required>
      </div>
      <div class="mb-2">
        <input class="form-control form-control-lg" type="text" id="address" placeholder="Alamat" value="${
            userData.address || ""
        }" required>
      </div>
      <br>
      <button class="btn btn-primary btn-lg" type="button" id="saveProfile">Simpan</button>
      <br><br>
      <button class="btn btn-danger btn-lg" type="button" id="logout">Keluar Akun</button>
    </form>`;

    document.getElementById("photo_profile").addEventListener("click", function () {
        document.getElementById("fileInput").click();
    });

    document.getElementById("fileInput").addEventListener("change", function (event) {
        const file = event.target.files[0];
        if (file) {
            if (file.size > 1 * 1024 * 1024) {
                alert("Ukuran file terlalu besar! Maksimal 1MB.", false);
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById("photo_profile").src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    document
        .getElementById("saveProfile")
        .addEventListener("click", async function () {
            const updatedUser = {
                uid: userData.uid,
                name: document.getElementById("name").value.trim(),
                email: userData.email,
                phone: document.getElementById("phone").value.trim(),
                address: document.getElementById("address").value.trim(),
                photo_profile: document.getElementById("photo_profile").src,
                cart: userData.cart ? userData.cart : [],
                transactions: userData.transactions
                    ? userData.transactions
                    : [],
            };

            if (
                !updatedUser.name ||
                !updatedUser.email ||
                !updatedUser.phone ||
                !updatedUser.address
            ) {
                alert("Semua input wajib diisi!", false);
                return;
            }

            localStorage.setItem("userData", JSON.stringify(updatedUser));
            await updateUserDataToGitHub(updatedUser);
            alert("Profil berhasil disimpan!", false);
        });

    document.getElementById("logout").addEventListener("click", function () {
        localStorage.removeItem("userData");
        window.location.reload();
    });
}

document.addEventListener("DOMContentLoaded", function () {
    AOS.init();
    initProfile();
});