// ==UserScript==
// @name         Google Street View Panorama Info
// @description  Displays the country name and coordinates for a Google Street View panorama
// @version      1.0
// @match        https://www.google.*/maps/*
// @grant        GM_setClipboard
// @author       ZecaGeo
// @license      MIT
// @icon         https://www.google.com/s2/favicons?sz=64&domain=geohints.com
// @namespace    https://greasyfork.org/users/1340965
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict'

    let panoramaInfo = {
        country: 'Country not found',
        lat: 0,
        lng: 0
    }

    const regex = /@(-?\d+\.\d+),(-?\d+\.\d+)/
    const match = window.location.href.match(regex)
    if (!match) {
        console.error('Coordinates not parsed.')
        window.alert(panoramaInfo.country)
        return
    }

    panoramaInfo.lat = match[1]
    panoramaInfo.lng = match[2]

    getCountry({ lat: panoramaInfo.lat, lon: panoramaInfo.lng })
        .then(country => {
            panoramaInfo.country = country
            const output = `Country: ${panoramaInfo.country}\nLatitude: ${panoramaInfo.lat}\nLongitude: ${panoramaInfo.lng}`
            GM_setClipboard(output)
            console.log(output)
            displayPopup(panoramaInfo)
        })

    function getCountry({ lat, lon }) {
        return fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`)
            .then(response => response.json())
            .then(data => data?.address?.country ?? "Country not found")
            .catch(error => {
                console.error(error.message)
                return "Country not found"
            })
    }

    function displayPopup(panoramaInfo) {
        const overlay = document.createElement("div");
        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.7)";
        overlay.style.zIndex = "9998";
        overlay.style.display = "block";

        const popup = document.createElement("div");
        popup.style.position = "fixed";
        popup.style.top = "50%";
        popup.style.left = "50%";
        popup.style.transform = "translate(-50%, -50%)";
        popup.style.backgroundColor = "rgb(86, 59, 154)";
        popup.style.padding = "20px";
        popup.style.borderRadius = "20px";
        popup.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.5)";
        popup.style.zIndex = "9999";
        popup.style.display = "block";
        popup.style.color = "white";
        popup.style.textAlign = "center";

        const content = document.createElement("p");
        content.style.fontFamily = "neo-sans, sans-serif";
        content.style.paddingLeft = "20px";
        content.style.paddingRight = "20px";
        content.style.marginTop = "20px";
        content.style.maxWidth = "500px";

        console.log(panoramaInfo)
        Object.keys(panoramaInfo).forEach(key => {
            const infoItem = document.createElement("p");
            infoItem.style.display = "flex";
            infoItem.style.justifyContent = "flex-start";
            infoItem.style.flexWrap = "wrap";
            infoItem.style.gap = "10px";

            const keySpan = document.createElement("span");
            keySpan.style.textAlign = "left";
            keySpan.style.fontWeight = "700";
            keySpan.style.textTransform = "uppercase";

            keySpan.innerText = `${key}: `;
            infoItem.appendChild(keySpan);

            const valueSpan = document.createElement("span");
            valueSpan.style.textAlign = "left";
            valueSpan.innerText = `${panoramaInfo[key]}`;

            infoItem.appendChild(valueSpan);
            content.appendChild(infoItem);
        })

        popup.appendChild(content);

        const closeButton = document.createElement("button");
        closeButton.innerText = "Close";
        closeButton.style.marginTop = "20px";
        closeButton.style.color = "white";
        closeButton.style.cursor = "pointer";
        closeButton.style.padding = "10px 20px";
        closeButton.style.borderRadius = "15px";
        closeButton.style.backgroundColor = "#6cb928";
        closeButton.style.fontFamily = "neo-sans, sans-serif";
        closeButton.style.fontStyle = "italic";
        closeButton.style.fontWeight = "700";
        closeButton.style.fontSize = "16px";
        closeButton.style.width = "100%";

        closeButton.onclick = function () {
            popup.style.display = "none";
            overlay.style.display = "none";
        };

        overlay.onclick = function () {
            popup.style.display = "none";
            overlay.style.display = "none";
        };

        popup.appendChild(closeButton);

        document.body.appendChild(overlay);
        document.body.appendChild(popup);
    }
})();