import {
    deleteUserAccount,
    getSessionUser,
    updatePassword,
    updateUsername
} from "./api/auth.js"
import {
    addUserProfileLinks,
    removeProfileLink,
    updateCoverImage,
    updateProfileImage,
    updateUserDetails,
    updateSocialLinks
} from "./api/profile.js"
import app, {
    showToast
} from "./app.js"
import store from "./store.js"

var $ = Dom7

// --------------- Edit Profile Page ---------------
$(document).on(\'page:init\', \'.page[data-name="profile-edit-mydetails"]\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\'/login\')
        return
    }

    // Example of how to fill in the form fields with the provided data
    document.querySelector(\'input[name="email"]\').value = user.email || \'\';
    document.querySelector(\'input[name="first_name"]\').value = user.first_name || \'\';
    document.querySelector(\'input[name="last_name"]\').value = user.last_name || \'\';
    document.querySelector(\'input[name="tel_no"]\').value = user.billing_info?.phone || \'\';
})


$(document).on(\'click\', \'#save-details\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    // Get the values from the input fields
    const firstName = $(\'input[name="first_name"]\').val().trim();
    const lastName = $(\'input[name="last_name"]\').val().trim();
    const email = $(\'input[name="email"]\').val().trim();
    const telNo = $(\'input[name="tel_no"]\').val().trim();
    const address = $(\'textarea[name="address"]\').val().trim();
    const city = $(\'input[name="city"]\').val().trim();
    const provincy = $(\'input[name="provincy"]\').val().trim();
    const post_code = $(\'input[name="post_code"]\').val().trim();

    // Validate the input fields
    if (firstName === \'\') {
        showToast(\'Please enter your first name\', \'Error\');
        return;
    }

    if (lastName === \'\') {
        showToast(\'Please enter your last name\', \'Error\');
        return;
    }

    if (email === \'\') {
        showToast(\'Please enter your email\', \'Error\');
        return;
    }

    // Simple email validation
    const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailPattern.test(email)) {
        showToast(\'Please enter a valid email address\', \'Error\');
        return;
    }

    // // phone validation
    // if (telNo === \'\') {
    //     showToast(\'Please enter a valid phone number\', \'Error\');
    //     return
    // }

    // Prepare the data for the API request
    const requestData = {
        first_name: firstName,
        last_name: lastName,
        email: email,
        phone: telNo,
        address: address,
        city: city,
        provincy: provincy,
        post_code: post_code,
    };

    // check if the request data is the same as userdata
    let dirtied = false;

    for (const key in requestData) {
        if (key == \'phone\') {
            if (requestData[key] !== user.billing_info.phone) {
                dirtied = true
                break;
            }
            continue
        }

        if (requestData[key] !== user[key]) {
            dirtied = true
            break;
        }
    }

    if (!dirtied) {
        return
    }

    try {
        app.preloader.show()

        const response = await updateUserDetails(requestData, email !== user.email)

        app.preloader.hide()


        if (response && response.success) {
            // showToast(\'Details updated successfully\', \'Success\');
            showToast(\'Details updated successfully\')
            view.router.navigate(\'/profile/\')
            store.dispatch(\'updateUserDetails\')
            return;
        }

        throw new Error(response.message);
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \'now\',
            subtitle: \'Oops, something went wrong\',
            text: error.message || \'Failed to update details\',
        }).open()
    }
});

$(document).on(\'click\', \'#update_password\', async function () {
    var view = app.views.current

    // Get the values from the password input fields
    const password = $(\'input[name="password"]\').val().trim();
    const current_password = $(\'input[name="current_password"]\').val().trim();
    const confirmPassword = $(\'input[name="confirm_password"]\').val().trim();

    if (current_password === \'\') {
        showToast(\'Please enter your current password\', \'Error\');
        return
    }

    if (password.length < 8) {
        showToast(\'Password must be at least 8 characters long.\')
        return
    }

    // Check if password contains at least one lowercase letter
    if (!/[a-z]/.test(password)) {
        showToast(\'Password must contain at least one lowercase letter.\')
        return
    }

    // Check if password contains at least one uppercase letter
    if (!/[A-Z]/.test(password)) {
        showToast(\'Password must contain at least one uppercase letter.\')
        return
    }

    // Check if password contains at least one number
    if (!/d/.test(password)) {
        showToast(\'Password must contain at least one number.\')
        return
    }

    if (confirmPassword === \'\') {
        showToast(\'Please confirm your password\', \'Error\');
        return;
    }

    if (password !== confirmPassword) {
        showToast(\'Passwords do not match\', \'Error\');
        return;
    }

    try {
        app.preloader.show()

        const response = await updatePassword(password, current_password)

        app.preloader.hide()

        if (response && response.success) {
            showToast(\'Password updated successfully\')
            view.router.navigate(\'/profile/\')
            return;
        }

        throw new Error(response.message);
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \'now\',
            subtitle: \'Oops, something went wrong\',
            text: error.message || \'Failed to update password\',
        }).open()
    }
})
// --------------- End Edit Profile Page ---------------


// --------------- Edit Username Page ---------------
$(document).on(\'page:beforein\', \'.page[data-name="profile-edit-username"]\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\'/login\')
        return
    }


    // Example of how to fill in the form fields with the provided data
    $(\'.profile-edit-view input[name="username"]\').val(user.username || \'\')

    if (user.can_update_username) {
        $(\'#username-editable\').remove()
    } else {
        document.querySelector(\'#username-editable\').innerText = `You can change your username in ${user.next_update_username} days`
    }
})

$(document).on(\'click\', \'#save-username\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user.can_update_username) {
        return
    }

    const username = $(\'.profile-edit-view input[name="username"]\').val()

    if (username === \'\') {
        showToast(\'Please enter a username\', \'Error\')
        return
    }

    // username can only have letters, numbers, and underscores
    var usernamePattern = /^[a-zA-Z0-9_]+$/
    if (!usernamePattern.test(username)) {
        showToast(\'Username can only contain letters, numbers, and underscores\')
        return
    }

    // username must be at least 3 characters long
    if (username.length < 3) {
        showToast(\'Username must be at least 3 characters long\')
        return
    }

    if (username === user.username) {
        return
    }

    try {
        app.preloader.show()

        const response = await updateUsername(username)

        app.preloader.hide()

        if (response && response.success) {
            showToast(\'Username updated successfully\', \'Success\')
            view.router.navigate(\'/profile/\')

            store.dispatch(\'updateUserDetails\')
        } else {
            throw new Error(response.message)
        }
    } catch (error) {
        app.preloader.hide()
        app.notification.create({
            titleRightText: \'now\',
            subtitle: \'Oops, something went wrong\',
            text: error.message || \'Failed to update username\',
        }).open()
    }


})
// --------------- End Edit Username Page ---------------


// --------------- Edit Profile images Page ---------------
$(document).on(\'page:init\', \'.page[data-name="profile-edit-images"]\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\'/login\')
        return
    }

    // If a cover photo exists, use it as the background image of the upload label
    if (user.cover_image) {
        $(\'input[name="cover_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-image\', `url(\'${user.cover_image}\')`)
        $(\'input[name="cover_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-size\', \'cover\')
    }

    if (user.profile_image) {
        $(\'input[name="profile_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-image\', `url(\'${user.profile_image}\')`)
        $(\'input[name="profile_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-size\', \'contain\')
        $(\'input[name="profile_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-position\', \'center\')
        $(\'input[name="profile_image"]\').closest(\'.custom-file-upload\').find(\'label\').css(\'background-repeat\', \'no-repeat\')
    }
})

$(document).on(\'click\', \'#save-profile-images\', async function () {
    var view = app.views.current

    const cover_image = $(\'input[name="cover_image"]\').prop(\'files\')[0]
    const profile_image = $(\'input[name="profile_image"]\').prop(\'files\')[0]


    let coverBase64 = null
    let profileBase64 = null

    if (cover_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        coverBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(cover_image)

            reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\'Failed to read image as base64\'))
        })
    }

    if (profile_image) {
        // Wrap the FileReader in a Promise to wait for it to complete
        profileBase64 = await new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(profile_image)

            reader.onload = () => resolve(reader.result)
            reader.onerror = () => reject(new Error(\'Failed to read image as base64\'))
        })
    }

    if (!coverBase64 && !profileBase64) {
        return
    }

    try {
        app.preloader.show()

        let promises = []

        if (profileBase64) {
            promises.push(updateProfileImage(profileBase64))
        }

        if (coverBase64) {
            promises.push(updateCoverImage(coverBase64))
        }

        const responses = await Promise.all(promises)
        app.preloader.hide()

        if (responses.every(response => response && response.success)) {
            showToast(\'Images updated successfully\', \'Success\')
            view.router.navigate(\'/profile/\')

            store.dispatch(\'updateUserDetails\')
            return
        }

        if (responses.some(response => response && !response.success)) {
            throw new Error(\'Failed to update images\')
        }
    } catch (error) {
        app.preloader.hide()

        app.notification.create({
            titleRightText: \'now\',
            subtitle: \'Oops, something went wrong\',
            text: error.message || \'Failed to update images\',
        }).open()
    }
})

$(document).on(\'change\', \'input[name="cover_image"]\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function (event) {
        console.log($(\'.custom-file-upload.cover\'));

        $(\'.custom-file-upload.cover\')
            .find(\'label\')
            .css(\'background-image\', `url(\'${event.target.result}\')`)
            .css(\'background-size\', \'cover\');
    };

    if (file) {
        reader.readAsDataURL(file);
    }
});

$(document).on(\'change\', \'input[name="profile_image"]\', function (e) {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = function (event) {
        console.log($(\'.custom-file-upload.profile\'));

        $(\'.custom-file-upload.profile\')
            .find(\'label\')
            .css(\'background-image\', `url(\'${event.target.result}\')`)
            .css(\'background-size\', \'cover\');
    };

    if (file) {
        reader.readAsDataURL(file);
    }
});
// --------------- End Profile images Page ---------------


// --------------- Edit Socials Page ---------------
$(document).on(\'page:init\', \'.page[data-name="profile-edit-socials"]\', async function (e) {
    var view = app.views.current

    const user = await getSessionUser()

    if (!user) {
        view.router.navigate(\'/login\')
        return
    }

    const externalLinks = user.profile_links || {};

    app.popup.create({
        el: \'.add-link-popup\',
        swipeToClose: \'to-bottom\'
    });

    // Populate form fields
    document.querySelector(\'input[name="social_instagram"]\').value = externalLinks.instagram || \'\';
    document.querySelector(\'input[name="social_facebook"]\').value = externalLinks.facebook || \'\';
    document.querySelector(\'input[name="social_tiktok"]\').value = externalLinks.tiktok || \'\';
    document.querySelector(\'input[name="social_youtube"]\').value = externalLinks.youtube || \'\';
    document.querySelector(\'input[name="social_mivia"]\').value = externalLinks.mivia || \'\';
    document.querySelector(\'input[name="social_custodian"]\').value = externalLinks.custodian || \'\';

    // .social-other-links ul
    const externalLinksContainer = $(\'.social-other-links ul\')[0];

    externalLinks.external_links?.forEach(linkObj => {
        const listItem = document.createElement(\'li\');


        listItem.innerHTML = `
        <a class="item-link item-content" href="${linkObj.link.url}" data-link-id="${linkObj.id}">
            <div class="item-inner">
                <div class="item-title">
                    ${linkObj.link.label}
                </div>
                <div class="item-after delete-external-link"><i class="icon f7-icons">xmark_circle</i></div>
            </div>
        </a>
        `;
        externalLinksContainer.appendChild(listItem);
    });
})

// Add event listener for the Save button
$(document).on(\'click\', \'#add-link-btn\', async function () {
    const linkTitle = $(\'input[name="custom_link_title"]\').val();
    const linkUrl = $(\'input[name="custom_link_url"]\').val();

    // Validate the inputs
    if (linkTitle === \'\') {
        console.log(\'Please enter a link title.\', $(\'input[name="custom_link_title"]\'));
        showToast(\'Please enter a link title.\', \'Error\');
        return;
    }

    if (linkUrl === \'\') {
        showToast(\'Please enter a link URL.\', \'Error\');
        return;
    }

    // Simple URL validation (basic check)
    // const urlPattern = /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/;
    // if (!urlPattern.test(linkUrl)) {
    //     showToast(\'Please enter a valid URL.\', \'Error\');
    //     return;
    // }


    const urlPattern = /^(https?://|www.)[da-z.-]+.[a-z]{2,6}/?$/;
    if (!urlPattern.test(linkUrl)) {
        showToast(\'Please enter a valid URL.\', \'Error\');
        return;
    }

    // Mock API request (POST request)
    const requestData = {
        label: linkTitle,
        url: linkUrl
    };

    app.popup.close()

    app.preloader.show()

    const response = await addUserProfileLinks({
        type: \'external_links\',
        link: requestData
    })

    if (response && response.success) {
        showToast(\'Link added successfully\', \'Success\');

        // Add the new link to the list
        const listItem = document.createElement(\'li\');
        listItem.innerHTML = `
            <a class="item-link item-content" href="${linkUrl}" data-link-id="${response.id}">
                <div class="item-inner">
                    <div class="item-title">
                        ${linkTitle}
                    </div>
                    <div class="item-after"><i class="icon f7-icons delete-external-link">xmark_circle</i></div>
                </div>
            </a>
        `;

        const externalLinksContainer = $(\'.social-other-links ul\')[0];
        externalLinksContainer.appendChild(listItem);
        store.dispatch(\'updateUserDetails\')
    }

    app.preloader.hide()
});

// Save social links
$(document).on(\'click\', \'#save-profile-socials\', async function () {
    var view = app.views.current

    const user = await getSessionUser()

    const instagram = $(\'input[name="social_instagram"]\').val();
    const facebook = $(\'input[name="social_facebook"]\').val();
    const tiktok = $(\'input[name="social_tiktok"]\').val();
    const youtube = $(\'input[name="social_youtube"]\').val();
    const mivia = $(\'input[name="social_mivia"]\').val();
    const custodian = $(\'input[name="social_custodian"]\').val();

    const links = {
        instagram,
        facebook,
        tiktok,
        youtube,
        mivia,
        custodian
    };

    // ig, tiktok, yt. mivia, custodian must be string, no special characters except for _ and - and . and
    const usernamePattern = /^[a-zA-Z0-9._-]+$/;

    if (instagram && !usernamePattern.test(instagram)) {
        showToast(\'Please enter a valid Instagram username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }

    if (tiktok && !usernamePattern.test(tiktok)) {
        showToast(\'Please enter a valid TikTok username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }

    if (youtube && !usernamePattern.test(youtube)) {
        showToast(\'Please enter a valid YouTube username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }

    if (mivia && !usernamePattern.test(mivia)) {
        showToast(\'Please enter a valid Mivia username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }

    if (custodian && !usernamePattern.test(custodian)) {
        showToast(\'Please enter a valid Custodian username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }



    // facebook must be a valid facebook url
    const urlPattern = /^(https?://|www.)[da-z.-]+.[a-z]{2,6}/?$/;
    if (facebook && !usernamePattern.test(facebook)) {
        showToast(\'Please enter a valid Facebook username (letters, numbers, underscores, periods, hyphens only)\', \'Error\');
        return;
    }

    // check if the request data is the same as userdata
    let dirtied = false;

    for (const key in links) {
        if (links[key] !== user.profile_links[key]) {
            dirtied = true
            break;
        }
    }

    if (!dirtied) {
        return
    }

    app.preloader.show()

    const response = await updateSocialLinks(links);

    app.preloader.hide()

    if (response && response.success) {
        showToast(\'Social links updated successfully\', \'Success\');
        view.router.navigate(\'/profile/\')
        store.dispatch(\'updateUserDetails\')
    } else {
        showToast(\'Failed to update social links\', \'Error\');
    }
})

// Delete link
$(document).on(\'click\', \'.delete-external-link\', async function (e) {
    const linkId = e.target.closest(\'.item-link\').dataset.linkId;

    // confirm dialog
    app.dialog.confirm(\'Are you sure you want to delete this link?\', \'Delete Link\', async function () {
        app.preloader.show()

        const response = await removeProfileLink(linkId);

        app.preloader.hide()

        if (response) {
            showToast(\'Link deleted successfully\', \'Success\')
            // remove the link from the list
            e.target.closest(\'.item-link\').remove();
            store.dispatch(\'updateUserDetails\')

        } else {
            showToast(\'Failed to delete link\', \'Error\')
        }
    })
})
// --------------- End Edit Socials Page ---------------

$(document).on(\'input\', \'#lowercaseInput\', function (event) {
    this.value = this.value.toLowerCase();
});

// --------------- Delete Profile Page ---------------
// $(document).on(\'page:init\', \'.page[data-name="profile-edit-account-settings"]\', function (e) {
// });

$(document).on(\'click\', \'.account-delete\', function (e) {
    app.dialog.confirm(\'Are you sure? It is not possible to restore accounts once deleted.\', \'Confirm\', function (name) {
        app.dialog.passwordConfirm(\'Please enter your password.\', \'Delete Account\', async function (password) {
            await handleDeleteAccount(password);
        });
    });
});

async function handleDeleteAccount(password) {

    try {
        app.preloader.show();

        const response = await deleteUserAccount(password);

        app.preloader.hide();
        if (!response) {
            app.dialog.alert(\'Failed to delete account\', \'Error\');
            return;
        }

        if (response && response.success == false) {
            app.dialog.alert(response.message, \'Error\');
            return;
        }

        if (response && response.success) {
            app.dialog.alert(\'Account deleted successfully\', \'Success\');

            setTimeout(() => {
                store.dispatch(\'logout\');
            }, 1000);
        }
    } catch (error) {
        app.preloader.hide();
        app.dialog.alert(error.message || \'Failed to delete account\', \'Error\');
    }
}

// Custom dialog to ask for password
app.dialog.passwordConfirm = function (text, title, callback) {
    app.dialog.create({
        title: title,
        text: text,
        content: \'<div class="dialog-input-field item-input"><div class="item-input-wrap"><input type="password" name="password" placeholder="Enter your password" class="dialog-input"></div></div>\',
        buttons: [{
                text: \'Cancel\',
                onClick: function (dialog, e) {
                    dialog.close();
                }
            },
            {
                text: \'Delete\',
                bold: true,
                onClick: function (dialog, e) {
                    var password = dialog.$el.find(\'.dialog-input\').val(); // Get the password entered
                    if (!password) {
                        showToast(\'Please enter your password\', \'Error\');
                        return;
                    }
                    callback(password); // Pass the password to the callback
                    dialog.close();
                }
            }
        ]
    }).open();
};