let map_territory, type_territory;

const Territory_Manager = {
    init: async (type, id) => {
        let html = await fetch('/lib/pages/territory_manager/index.html').then((response) => response.text());
        app.innerHTML = html;

        type_territory = type;

        let sheeps_list = [];
        if (Sheeps.sheeps_list.list.length == 0) {
            sheeps_list = await Sheeps.sheeps_list.loadAPI();
        } else {
            sheeps_list = Sheeps.sheeps_list.list;
        }

        let editor_button = document.getElementById('editor_button');
        if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_add_territory)){
            editor_button.style.display = "";
            editor_button.setAttribute("href", `/territory/editor/${type}/${id}`)
        }

        await Territory_Manager.info.setHTML(type, id);
        Territory_Manager.entrances.setHTML(type, id);

        for (let i = 0; i < sheeps_list.length; i++) {
            const element = sheeps_list[i];

            if (Territory_Manager.info.list.group_id == element.group_id) {
                document.getElementById('new-worker-name').innerHTML += `
                    <option value="${element.name}">${element.name}</option>
                `;
            }
        }
    },
    info: {
        list: {},
        loadAPI: async (url) => {
            let uuid = localStorage.getItem("uuid");
            Territory_Manager.info.list = await fetch(url, {
                method: 'GET',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                }
            }).then((response) => response.json());
            return Territory_Manager.info.list;
        },
        setHTML: async (type, id) => {
            if (type == "house") {
                let url = `${CONFIG.api}house/${id}`;
                let data = await Territory_Manager.info.loadAPI(url);

                Territory_Manager.map(type, data);

                let info_picture = document.getElementById('info-picture');
                let info_title = document.getElementById('info-title');
                let info_number = document.getElementById('info-number');
                let info_settlement = document.getElementById('info-settlement');
                let info_description = document.getElementById('info-description');

                info_picture.addEventListener("click", (event) => {
                    let state = info_picture.getAttribute('data-state')
                    if (state == 'active') info_picture.setAttribute('data-state', '')
                    else info_picture.setAttribute('data-state', 'active')
                });

                info_picture.setAttribute("src", ``);
                info_title.innerText = data.title;
                info_number.innerText = data.number;
                info_settlement.innerText = data.settlement;
                info_description.value = data.description;
            } else if (type == "homestead") {
                let url = `${CONFIG.api}homestead/${id}`;
                let data = await Territory_Manager.info.loadAPI(url);

                Territory_Manager.map(type, data);

                let info_picture = document.getElementById('info-picture');
                let info_title = document.getElementById('info-title');
                let info_number = document.getElementById('info-number');
                let info_settlement = document.getElementById('info-settlement');
                let info_description = document.getElementById('info-description');

                info_picture.addEventListener("click", (event) => {
                    let state = info_picture.getAttribute('data-state')
                    if (state == 'active') info_picture.setAttribute('data-state', '')
                    else info_picture.setAttribute('data-state', 'active')
                });

                info_picture.setAttribute("src", ``);
                info_title.innerText = data.title;
                info_number.innerText = data.number;
                info_settlement.innerText = data.settlement;
                info_description.value = data.description;
            }

            urlImage = `https://sheep-service.com/cards/${type}/${type == "house" ? "T" : "H"}${id}.webp`;
            const checkImage = await fetch(urlImage);
            
            if(checkImage.ok) {
                document.getElementById('menu-picture-error').style.display = 'none';
                document.getElementById('menu-picture-ok').style.display = '';
                document.getElementById('menu-picture-ok').setAttribute("href", urlImage);
            } else {
                document.getElementById('menu-picture-error').style.display = '';
                document.getElementById('menu-picture-ok').style.display = 'none';
            }
        }
    },
    entrances: {
        list: [],
        loadAPI: async (url) => {
            let uuid = localStorage.getItem("uuid");
            Territory_Manager.entrances.list = await fetch(url, {
                method: 'GET',
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": uuid
                }
            }).then((response) => response.json());
            return Territory_Manager.entrances.list;
        },
        setHTML: async (type, id) => {
            if (type == "house") {
                let url = `${CONFIG.api}house/${id}/entrances`;
                let listEntrances = await Territory_Manager.entrances.loadAPI(url);

                document.getElementById('territory-entrance').innerHTML = "";

                for (let i = 0; i < listEntrances.length; i++) {
                    const element = listEntrances[i];

                    let name = () => {
                        if (element.history.name == "Групова")
                            return `<p>${element.history.name + " " + element.history.group_id}</p>`;
                        else {
                            let sheeps_list = Sheeps.sheeps_list.list;
                            let filtered = sheeps_list.filter(item => item.group_id === Territory_Manager.info.list.group_id);
                            let sheep = filtered.find(item => item.name === element.history.name);

                            return `<a href="/sheeps/${sheep.uuid}" data-route="">${element.history.name}</a>`;
                        }
                    }

                    if (element.working) {
                        document.getElementById('territory-entrance').innerHTML += `
                            <div class="entrance" data-state="working">
                                <div id="title">
                                    <h1>${element.title}</h1>
                                    <a href="/territory/card/${type}/${id}" title="Редактор квартир" data-route>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M 12.5 6 C 8.9280619 6 6 8.9280619 6 12.5 L 6 35.5 C 6 39.071938 8.9280619 42 12.5 42 L 35.5 42 C 39.071938 42 42 39.071938 42 35.5 L 42 12.5 C 42 8.9280619 39.071938 6 35.5 6 L 12.5 6 z M 12.5 9 L 14 9 L 14 15 L 9 15 L 9 12.5 C 9 10.549938 10.549938 9 12.5 9 z M 17 9 L 35.5 9 C 37.450062 9 39 10.549938 39 12.5 L 39 15 L 17 15 L 17 9 z M 9 18 L 14 18 L 14 23 L 9 23 L 9 18 z M 17 18 L 39 18 L 39 23 L 17 23 L 17 18 z M 9 26 L 14 26 L 14 31 L 9 31 L 9 26 z M 17 26 L 39 26 L 39 31 L 17 31 L 17 26 z M 9 34 L 14 34 L 14 39 L 12.5 39 C 10.549938 39 9 37.450062 9 35.5 L 9 34 z M 17 34 L 39 34 L 39 35.5 C 39 37.450062 37.450062 39 35.5 39 L 17 39 L 17 34 z"/></svg>
                                    </a>
                                </div>
                                <div>
                                    <h1>Територію опрацьовує: </h1> 
                                    ${name()}
                                </div>
                                <div>
                                    <h1>Територія видана: </h1> 
                                    <h2>${formattedDate(element.history.date.start)}</h2>
                                </div>
                                <div>
                                    <h1>Варто забрати: </h1> 
                                    <h2>${formattedDate(element.history.date.end) ?? formattedDate(element.history.date.start + (1000 * 2629743 * 4))}</h2>
                                </div>
                                <div class="edit_working">
                                    <button onclick="Territory_Manager.endWorker('${type}', ${id}, ${element.history.id})" id="end-working-button" style="color: #121214;background: #c14d4d;">Забрати</button>
                                    <button onclick="Territory_Manager.share('${type}', ${i})">Відправити посилання</button>
                                </div>
                            </div>
                        `;
                    } else {
                        document.getElementById('territory-entrance').innerHTML += `
                            <div class="entrance">
                                <div id="title">
                                    <h1>${element.title}</h1>
                                </div>
                                <div>
                                    <h1>Територія не опрацьовується</h1> 
                                </div>
                                
                                <div>
                                    <h1>Останнє опрацювання: </h1> 
                                    <h2>${formattedDate(element.history.date.end) ?? "..."}</h2>
                                </div>

                                <div class="edit">
                                    <button  onclick="Territory_Manager.newWorker('${type}',${id}, ${i}, 'Групова')" id="group-working-button"  style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
                                    <button  onclick="Territory_Manager.mess.open('${type}', ${id}, ${i})">Призначити вісника</button>
                                </div>
                            </div>
                        `;
                    }
                    console.log(element);

                }
            } else if (type == "homestead") {
                let url = `${CONFIG.api}homestead/${id}`;
                let element = await Territory_Manager.entrances.loadAPI(url);

                document.getElementById('territory-entrance').innerHTML = "";

                let name = () => {
                    if (element.history.name == "Групова")
                        return `<p>${element.history.name + " " + element.history.group_id}</p>`;
                    else
                        return `<a href="/sheeps/${element.history.name}" data-route="">${element.history.name}</a>`;
                }

                if (element.working) {
                    document.getElementById('territory-entrance').innerHTML += `
                        <div class="entrance" data-state="working">
                            <div>
                                <h1>Територію опрацьовує: </h1> 
                                ${name()}
                            </div>
                            <div>
                                <h1>Територія видана: </h1> 
                                <h2>${formattedDate(element.history.date.start)}</h2>
                            </div>
                            <div>
                                <h1>Варто забрати: </h1> 
                                <h2>${formattedDate(element.history.date.end) ?? formattedDate(element.history.date.start + (1000 * 2629743 * 4))}</h2>
                            </div>
                            <div class="edit_working">
                                <button onclick="Territory_Manager.endWorker('${type}', ${id}, ${element.history.id})" id="end-working-button" style="color: #121214;background: #c14d4d;">Забрати</button>
                                <button onclick="Territory_Manager.share('${type}', ${i})">Відправити посилання</button>
                            </div>
                        </div>
                    `;
                } else {
                    document.getElementById('territory-entrance').innerHTML += `
                        <div class="entrance">
                            <div>
                                <h1>Територія не опрацьовується</h1> 
                            </div>
                            
                            <div>
                                <h1>Останнє опрацювання: </h1> 
                                <h2>${formattedDate(element.history.date.end) ?? "..."}</h2>
                            </div>

                            <div class="edit">
                                <button onclick="Territory_Manager.newWorker('${type}',${id}, ${i}, 'Групова')" id="group-working-button" style="color: var(--ColorThemes0);background: var(--ColorThemes3);">Призначити груповою</button>
                                <button onclick="Territory_Manager.mess.open('${type}',${id}, ${i})">Призначити вісника</button>
                            </div>
                        </div>
                    `;
                }
                console.log(element);
            }
        }
    },
    map: (type, data) => {
        map_territory = {};
        let center = { lat: 49.5629016, lng: 25.6145625 };
        let zoom = 19;

        let mytile = L.tileLayer('https://tm.rozenrod.com/webp/{z}/{x}/{y}.webp', {
            maxZoom: 20,
            minZoom: 15,
            tms: true
        });

        map_territory = L.map('map_territory_manager', {
            renderer: L.canvas(),
            center,
            zoom,
            zoomControl: false,
            layers: [
                mytile
            ],
        });

        map_territory.pm.setLang("ua");

        if (type == "homestead") {
            if (data.geo.lat) map_territory.setView([data.geo.lat, data.geo.lng], 15);
            else map_territory.setView([data.points[0][0][0].lat, data.points[0][0][0].lng], 15);

            L.polygon(data.points, {
                color: colorGroup(data.group_id),
                radius: 500,
                fillOpacity: 0.3,
                dashArray: '20, 15',
                dashOffset: '20',
            }).on('click', function (e) {

            }).addTo(map_territory);
        } else if (type == "house") {
            map_territory.setView([data.geo.lat, data.geo.lng], 17);

            L.polygon(data.points, {
                color: "#585858",
                fillColor: colorGroup(data.group_id),
                fillOpacity: 0.8,
                tm_id: `house_${i}`
            }).on('click', function (e) {

            }).addTo(map_territory);
        }
    },
    mess: {
        open: (type, id, number) => {
            const block = document.getElementById('territory-new');
            const new_worker_button = document.getElementById('new-worker-button');

            block.style.display = "";
            setTimeout(() => {
                block.style.opacity = "1";
            }, 100)

            new_worker_button.setAttribute("onclick", `Territory_Manager.newWorker('${type}', ${id}, ${number})`);
        },
        close: () => {
            const block = document.getElementById('territory-new');

            block.style.opacity = "0";
            setTimeout(() => {
                block.style.display = "none";
            }, 200)
        }
    },
    newWorker: async (type, id, number, name) => {
        const uuid = localStorage.getItem('uuid');

        const new_worker_button = document.getElementById('new-worker-button');
        const group_worker_button = document.getElementById('group-working-button');

        let URL, territory_id, data;


        const pos = Sheeps.sheeps_list.list.map(e => e.name).indexOf(name ?? document.getElementById("new-worker-name").value);
        let sheep = Sheeps.sheeps_list.list[pos];

        if (type == "house") {
            territory_id = Territory_Manager.entrances.list[number].id;
            data = {
                name: name ?? document.getElementById("new-worker-name").value,
                group_id: Territory_Manager.info.list.group_id,
                sheep_id: sheep ? sheep.id : null
            }
            URL = `${CONFIG.api}history/entrance/${territory_id}`;
        }
        else if (type == "homestead") {
            territory_id = Territory_Manager.info.list.id;
            data = {
                name: name ?? document.getElementById("new-worker-name").value,
                group_id: Territory_Manager.info.list.group_id,
                sheep_id: sheep ? sheep.id : null
            }
            URL = `${CONFIG.api}history/homestead/${territory_id}`;
        }

        console.log(territory_id, data);

        await fetch(URL, {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "Authorization": uuid
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (response.status == 200) {
                    Territory_Manager.mess.close();
                    Territory_Manager.entrances.list = [];
                    Territory_Manager.entrances.setHTML(type, id);

                    return response.json()
                } else {
                    console.log('err');
                    new_worker_button.innerText = "Помилка";
                    group_worker_button.innerText = "Помилка";

                    return
                }
            })
    },
    endWorker: async (type, id, territory_id) => {
        const end_working_button = document.getElementById('end-working-button');
        let uuid = localStorage.getItem('uuid');
        let URL = "";

        if (type == "house") {
            URL = `${CONFIG.api}history/entrance/${territory_id}`;
        }
        else if (type == "homestead") {
            URL = `${CONFIG.api}history/homestead/${territory_id}`;
        }

        await fetch(URL, {
            method: 'PUT',
            headers: {
                "Content-Type": "application/json",
                "Authorization": uuid
            },
            data: JSON.stringify({})
        })
            .then(response => {
                if (response.status == 200) {
                    Territory_Manager.entrances.list = [];
                    Territory_Manager.entrances.setHTML(type, id);

                    return response.json()
                } else {
                    console.log('err');
                    end_working_button.innerText = "Помилка";

                    return
                }
            })
    },
    share: async (type, number) => {
        let territory, id;

        if (type == "house") {
            territory = Territory_Manager.entrances.list[number];
            id = Territory_Manager.entrances.list[number].id;
        }
        else if (type == "homestead") {
            territory = Territory_Manager.info.list;
            id = Territory_Manager.info.list.id;
        }


        let description = () => {
            if (Territory_Manager.info.list.description && Territory_Manager.info.list.description.length > 0) {
                return `\n\nДодатково:\n• ${Territory_Manager.info.list.description}`;
            } else {
                return '';
            }
        }
        let sheepUuid = () => {
            const pos = Sheeps.sheeps_list.list.map(e => e.name).indexOf(territory.history.name);
            let sheep = Sheeps.sheeps_list.list[pos];

            if (sheep) {
                return `\n\nПосилання на Sheep-Service:\n• https://sheep-service.com/?uuid=${sheep.uuid}`;
            } else {
                return '';
            }
        }

        if (navigator.share) {
            console.log("Congrats! Your browser supports Web Share API")
            try {
                let url;
                if(type == 'house') url = `https://sheep-service.com/cards/house/T${Territory_Manager.info.list.id}.webp`;
                if(type == 'homestead') url = `https://sheep-service.com/cards/homestead/H${Territory_Manager.info.list.id}.webp`;
      
                const response = await fetch(url);
                const blob = await response.blob();
                const file = new File([blob], `${type == "house" ? "E" + id : "H" + id}.webp`, { type: blob.type });

                await navigator.share({
                    text: `Територія:\n• ${type == "house" ? "E" + id : "H" + id}\n\nНаселений пункт:\n• ${Territory_Manager.info.list.settlement}\n\nВулиця:\n• ${Territory_Manager.info.list.title + " " + Territory_Manager.info.list.number}${description()}\n\nПризначення:\n • З ${formattedDate(territory.history.date.start)}\n • До ${formattedDate(territory.history.date.end) ?? formattedDate(territory.history.date.start + (1000 * 2629743 * 4))}${sheepUuid()}`,
                    files: [file]
                });

                console.log('Успешно отправлено!');
            } catch (error) {
                console.error('Ошибка при отправке:', error);
            }


        } else {
            console.log("Sorry! Your browser does not support Web Share API")
        }
    },
    getScreen: async () => {
        const center = map_territory.getCenter();
        console.log(center.lat, center.lng);

        let lat = center.lat;
        let lng = center.lng;
        let wayId = Territory_Manager.info.list.osm_id;
        let zoom = map_territory.getZoom() + 2 ?? 17;
        let address = Territory_Manager.info.list.title;
        let number = Territory_Manager.info.list.number;
        let id = Territory_Manager.info.list.id;

        let url = `https://sheep-service.com/api/generator/cards?lat=${lat}&lng=${lng}&type=${type_territory}&wayId=${wayId}&zoom=${zoom}&address=${address}&number=${number}&id=${id}`;
        let uuid = localStorage.getItem("uuid");
        let result = await fetch(url, {
            method: 'GET',
            headers: {
                "Content-Type": "application/json",
                "Authorization": uuid
            }
        }).then((response) => response.json());


        urlImage = `https://sheep-service.com/cards/${type}/${type == "house" ? "T" : "H"}${id}.webp`;
        if(result) {
            document.getElementById('menu-picture-error').style.display = 'none';
            document.getElementById('menu-picture-ok').style.display = '';
            document.getElementById('menu-picture-ok').setAttribute("href", urlImage);
        } else {
            document.getElementById('menu-picture-error').style.display = '';
            document.getElementById('menu-picture-ok').style.display = 'none';
        }
    }
}