/*
   _      _      _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 
   _                                                                            _   
 _( )_                                                                        _( )_ 
(_ o _)                     _ _ _          _           _   _                 (_ o _)
 (_,_)                     | (_) |        | |         | | | |                 (_,_) 
   _      _ __ ___  _   _  | |_| | _____  | |__  _   _| |_| |_ ___  _ __        _   
 _( )_   | '_ ` _ \| | | | | | | |/ / _ \ | '_ \| | | | __| __/ _ \| '_ \     _( )_ 
(_ o _)  | | | | | | |_| | | | |   <  __/ | |_) | |_| | |_| || (_) | | | |   (_ o _)
 (_,_)   |_| |_| |_|\__, | |_|_|_|\_\___| |_.__/ \__,_|\__|\__\___/|_| |_|    (_,_) 
   _                 __/ |                                                      _   
 _( )_              |___/                                                     _( )_ 
(_ o _)                                                                      (_ o _)
 (_,_)                                                                        (_,_) 
   _      _      _      _      _      _      _      _      _      _      _      _   
 _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_  _( )_ 
(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)(_ o _)
 (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_)  (_,_) 
 
 
=== This is a simple script that uses Google Form and Google Sheet to create a functional "like button". Feel free to use it as you want & style it as you like. ===

=== Cobbled together by Fritzi (https://bohemiansultriness.nekoweb.org) Please don't remove the credits! ===
 
### Compatibility Note ###

This script will only work on sites with a non-strict content policy, such as Nekoweb. Sites that enforce strict Content Security Policies (CSP) may block this type of form submission due to restrictions on where forms can send data. 

### Instructions for Obtaining Google Form Field IDs, Google Form ID and Google Sheet ID ###

1. **Create a Google Form**:
   - Go to Google Forms and create your form with the required two "short answer" fields.
   - For example: "emoji" and "page".

2. **Get Field IDs**:
   - Click on the three dots (More) in the top right corner.
   - Select "Get pre-filled link."
   - Fill out the form fields with sample data and click "Submit."
   - Copy the URL from the resulting page.

3. **Dissect the URL**:
   - The URL will look something like this:
     `https://docs.google.com/forms/d/e/placeholder-formBC1234567890/viewform?usp=pp_url&entry.123456789=Sample+Text`
   - The part after `entry.` (e.g., `entry.123456789`) is your field ID. You will need to replace `entry.placeholder1`, `entry.placeholder2`in your HTML with these IDs.

4. **Get Google Form ID**:
   - The Google Form ID is found in the URL of your form when you are editing it.
   - It appears between `/d/e/` and `/viewform` in the URL.
   - For example, in `https://docs.google.com/forms/d/e/placeholder-formABC1234567890/viewform`, `placeholder-formABC1234567890` is your Google Form ID.
   - Replace `placeholder-formABC1234567890` in your JavaScript with this ID.
   
5. **Change Access**:
   - In your Google Form press "share" and change general access to "anyone with link".

6. **Create a Google Sheet**:
   - In the Google Form navigate to the "response" tab and click on "create spreadsheet".
   - In the Google Sheet press "share" and change general access to "anyone with link".
   
7. **Get Google Sheet ID**:
   - The Google Sheet ID is found in the URL of your form when you are editing it.
   - It appears between `/d/` and `/edit` in the URL.
   - For example, in `https://docs.google.com/spreadsheets/d/placeholder-sheetABC1234567890/edit?usp=sharing`, `placeholder-sheetABC1234567890` is your Google Sheet ID.
   - Replace `placeholder-sheetABC1234567890` in your JavaScript with this ID.
   
8. **Styling**:
   - Style the .mylikebutton classes below however you like.
   - Fin 'popup.textContent = "Thank you very much, you've liked this page!";' and replace it with whatever message you like.
   
9. **Implementing the Like Button**:
   - In your HTML file add  <div class="mylikebutton">♡</div> to display the 'like button' 
   - You can choose whatever icon or image you like;  ♡ is just an example.
   - Make sure the 'like button' is within a <section> with a unique id.
   - link this script at the end of your document within the <body> tag like so: <script src="PATHtoYOURfile/mylikebutton.js"></script>

*/

document.addEventListener('DOMContentLoaded', function () {
    const likeButtonElements = document.querySelectorAll('.mylikebutton');

    if (likeButtonElements.length === 0) return;

    // Get the current page path (use 'home' for root or index pages)
    const currentPath = window.location.pathname;
    const pagePath = currentPath === '/' || currentPath.endsWith('index.html') 
        ? 'home' 
        : currentPath.replace(/^\/|\/$/g, ''); // Remove leading/trailing slashes

    // Add styles for the like button container, counter, and popup
    const style = document.createElement('style');
    style.textContent = `
        .mylikebutton-container {
            display: block;
            text-align: right;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .mylikebutton {
            display: inline-block;
            vertical-align: middle;
        }
        .mylikebutton-counter {
            display: inline-block;
            vertical-align: middle;
            margin-left: 2px;
            font-size: 0.8em;
            color: #000;
        }
        .mylikebutton-popup {
            display: none;
            position: fixed;
            z-index: 9999;
            max-width: 300px;
            padding: 8px;
            background: #fff;
            border: 1px solid #000;
            font: 12px "Courier", monospace;
            color: #000;
            pointer-events: none;
        }
    `;
    document.head.appendChild(style);

    // Create a popup element for feedback messages
    const popup = document.createElement('div');
    popup.className = 'mylikebutton-popup';
    document.body.appendChild(popup);

    // Google Form and Sheet details
    const GOOGLE_FORM_ID = "placeholder-formABC1234567890";
    const EMOJI_ENTRY_ID = "entry.placeholder1"; // Entry ID for emoji field
    const PAGE_ENTRY_ID = "entry.placeholder2"; // Entry ID for page path field
    const SECTION_ENTRY_ID = "entry.placeholder3"; // Entry ID for section identifier
    const GOOGLE_SHEET_ID = "placeholder-sheetABC1234567890";
    const GOOGLE_SHEET_URL = `https://docs.google.com/spreadsheets/d/${GOOGLE_SHEET_ID}/export?format=csv`;
    const GOOGLE_FORM_URL = `https://docs.google.com/forms/d/e/${GOOGLE_FORM_ID}/formResponse`;

    // Fetch like counts for the current page and sections from Google Sheet
    async function fetchLikeCounts() {
        try {
            const response = await fetch(GOOGLE_SHEET_URL);
            const data = await response.text();
            
            // Split CSV data into rows
            const rows = data.split('\n').slice(1); // Skip header row
            
            // Count rows that match the current page path and section
            const counts = {};
            rows.forEach(row => {
                const [, , path, section] = row.split(',');
                if (path === pagePath) {
                    counts[section] = (counts[section] || 0) + 1;
                }
            });

            return counts; // Return the counts of likes for this page and sections
        } catch (error) {
            console.error("Error fetching like counts:", error);
            return {}; // Default to empty object on error
        }
    }

    likeButtonElements.forEach(async function (likeButtonElement) {
        const sectionId = likeButtonElement.closest('section').id || 'default';
        let likeCounts = await fetchLikeCounts();
        let sectionLikes = likeCounts[sectionId] || 0;

        // Create a container for the button and counter
        const container = document.createElement('div');
        container.className = 'mylikebutton-container';
        container.setAttribute('role', 'button');
        container.setAttribute('aria-label', 'Click to like!');

        likeButtonElement.parentNode.insertBefore(container, likeButtonElement);
        container.appendChild(likeButtonElement);

        // Create and append a counter display element
        const counterDisplay = document.createElement('span');
        counterDisplay.className = 'mylikebutton-counter';
        counterDisplay.textContent = `(${sectionLikes})`;
        container.appendChild(counterDisplay);

        // Handle click events on the button container
        container.addEventListener('click', async function (event) {
            sectionLikes++; // Increment local like count immediately for feedback
            counterDisplay.textContent = `(${sectionLikes})`;

            try {
                // Prepare form data with emoji, page path, and section identifier
                const formData = new FormData();
                formData.append(EMOJI_ENTRY_ID, likeButtonElement.textContent);
                formData.append(PAGE_ENTRY_ID, pagePath);
                formData.append(SECTION_ENTRY_ID, sectionId);

                await fetch(GOOGLE_FORM_URL, {
                    method: 'POST',
                    mode: 'no-cors',
                    body: formData,
                });

                // Show a feedback popup near the click location
                popup.textContent = "Thank you very much, you've liked this section!";
                popup.style.display = 'block';

                const popupRect = popup.getBoundingClientRect();
                let left = event.clientX + 10;
                let top = event.clientY + 10;

                if (left + popupRect.width > window.innerWidth) {
                    left = window.innerWidth - popupRect.width - 10;
                }

                if (top + popupRect.height > window.innerHeight) {
                    top = window.innerHeight - popupRect.height - 10;
                }

                popup.style.left = `${left}px`;
                popup.style.top = `${top}px`;

                setTimeout(function () {
                    popup.style.display = 'none';
                }, 3000);

                // Refetch updated like counts from Google Sheet after submission
                likeCounts = await fetchLikeCounts();
                sectionLikes = likeCounts[sectionId] || 0;
                counterDisplay.textContent = `(${sectionLikes})`;
                
            } catch (error) {
                console.error("Error submitting like to Google Form:", error);
                alert("Something went wrong. Please try again.");
            }
        });
    });
});