script.js

let map;
let userMarker;
let userLocation = null;
let puzzleImage = null;
const PUZZLE_SIZE = 4; // 4x4 = 16 puzzli

function initMap() {
    map = L.map('map').setView([52.2297, 21.0122], 13); // Domyślnie Warszawa
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);
}

// Prośba o zgodę na geolokalizację
function requestGeolocation() {
    if (!("geolocation" in navigator)) {
        alert("Geolokalizacja nie jest wspierana przez tę przeglądarkę");
        return;
    }

    navigator.geolocation.getCurrentPosition(
       (position) => {
           userLocation = {
               lat: position.coords.latitude,
               lng: position.coords.longitude
           };
           console.log("Geolokalizacja pobrana:", userLocation);
       },
       (error) => {
           console.error("Błąd geolokalizacji:", error);
           alert("Nie udało się pobrać lokalizacji");
       }
    );
}

function requestNotificationPermission() {
    if ("Notification" in window) {
        Notification.requestPermission().then(permission => {
            console.log("Uprawnienia do powiadomień:", permission);
        });
    }
}

document.getElementById('myLocationBtn').addEventListener('click', () => {
    if (!userLocation) {
        alert("Najpierw udostępnij swoją lokalizację");
        requestGeolocation();
        return;
    }

    map.setView([userLocation.lat, userLocation.lng], 15);

    if (userMarker) {
        map.removeLayer(userMarker);
    }

    // Dodanie markera
    userMarker = L.marker([userLocation.lat, userLocation.lng]).addTo(map);
    userMarker.bindPopup("Twoja lokalizacja").openPopup();

    document.getElementById('coordinates').textContent =
       `Współrzędne: ${userLocation.lat.toFixed(6)}, ${userLocation.lng.toFixed(6)}`;
});

// Funkcja do pobrania mapy jako obrazu
document.getElementById('downloadMapBtn').addEventListener('click', () => {
    captureMap();
});

// Przechwycenie mapy do canvas używając leaflet-image
function captureMap() {
    leafletImage(map, function(err, canvas) {
        if (err) {
            console.error("Błąd podczas przechwytywania mapy:", err);
            alert("Nie udało się pobrać mapy. Spróbuj ponownie.");
            return;
        }
        
        // Przeskalowanie do 400x400
        const finalCanvas = document.getElementById('mapCanvas');
        finalCanvas.width = 400;
        finalCanvas.height = 400;
        
        const ctx = finalCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 400, 400);
        
        puzzleImage = finalCanvas.toDataURL();
        console.log("Mapa przechwycona do canvas");
        createPuzzle();
    });
}

function createPuzzle() {
    const piecesContainer = document.getElementById('puzzlePieces');
    const boardContainer = document.getElementById('puzzleBoard');
    
    piecesContainer.innerHTML = '';
    boardContainer.innerHTML = '';
    
    const pieceWidth = 400 / PUZZLE_SIZE;
    const pieceHeight = 400 / PUZZLE_SIZE;

    for (let i = 0; i < PUZZLE_SIZE * PUZZLE_SIZE; i++) {
        const slot = document.createElement('div');
        slot.className = 'board-slot';
        slot.dataset.position = i;
        
        slot.addEventListener('dragover', handleDragOver);
        slot.addEventListener('drop', handleDrop);
        
        boardContainer.appendChild(slot);
    }
    
    const indices = Array.from({length: PUZZLE_SIZE * PUZZLE_SIZE}, (_, i) => i);
    shuffleArray(indices);
    
    indices.forEach(index => {
        const piece = document.createElement('div');
        piece.className = 'puzzle-piece';
        piece.draggable = true;
        piece.dataset.correctPosition = index;
        
        const row = Math.floor(index / PUZZLE_SIZE);
        const col = index % PUZZLE_SIZE;
        
        piece.style.width = pieceWidth + 'px';
        piece.style.height = pieceHeight + 'px';
        piece.style.backgroundImage = `url(${puzzleImage})`;
        piece.style.backgroundPosition = `-${col * pieceWidth}px -${row * pieceHeight}px`;
        
        piece.addEventListener('dragstart', handleDragStart);
        piece.addEventListener('dragend', handleDragEnd);
        
        piecesContainer.appendChild(piece);
    });
    
    console.log("Puzzle utworzone i wymieszane");
}

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

let draggedElement = null;

function handleDragStart(e) {
    draggedElement = e.target;
    e.target.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
}

function handleDragEnd(e) {
    e.target.classList.remove('dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
}

function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    e.preventDefault();
    
    const slot = e.target.closest('.board-slot');
    if (!slot) return;
    
    // Jeśli slot już ma puzzle, wyrzuć je z powrotem do kontenera
    if (slot.children.length > 0) {
        const existingPiece = slot.children[0];
        document.getElementById('puzzlePieces').appendChild(existingPiece);
        existingPiece.draggable = true;
    }
    
    slot.appendChild(draggedElement);
    slot.classList.add('filled');
    
    checkPiece(draggedElement, slot);
    
    checkCompletion();
    
    return false;
}

function checkPiece(piece, slot) {
    const correctPosition = parseInt(piece.dataset.correctPosition);
    const currentPosition = parseInt(slot.dataset.position);
    
    if (correctPosition === currentPosition) {
        slot.classList.add('correct');
        piece.draggable = false;
        console.log(`Puzzle ${correctPosition} umieszczone poprawnie!`);
    } else {
        slot.classList.remove('correct');
        piece.draggable = true;
    }
}

function checkCompletion() {
    const slots = document.querySelectorAll('.board-slot');
    let correctCount = 0;
    
    slots.forEach(slot => {
        if (slot.classList.contains('correct')) {
            correctCount++;
        }
    });
    
    console.log(`Poprawnie ułożonych puzzli: ${correctCount}/${PUZZLE_SIZE * PUZZLE_SIZE}`);
    
    if (correctCount === PUZZLE_SIZE * PUZZLE_SIZE) {
        console.log("Gratulacje! Wszystkie puzzle ułożone poprawnie!");
        showNotification();
    }
}

function showNotification() {
    if (Notification.permission === "granted") {
        console.log("Tworzenie powiadomienia...");
        try {
            const notification = new Notification("Puzzle ukończone! 🎉", {
                body: "Gratulacje! Ułożyłeś wszystkie puzzle poprawnie!",
                tag: "puzzle-complete",
                requireInteraction: false
            });
            
            notification.onclick = function() {
                window.focus();
                notification.close();
            };
            
            console.log("Powiadomienie utworzone!");
        } catch (err) {
            console.error("Błąd tworzenia powiadomienia:", err);
            alert("Gratulacje! Ułożyłeś wszystkie puzzle poprawnie!");
        }
    } else if (Notification.permission === "denied") {
        console.log("Powiadomienia są zablokowane");
        alert("Gratulacje! Ułożyłeś wszystkie puzzle poprawnie!\n\n(Powiadomienia są zablokowane - możesz je włączyć w ustawieniach przeglądarki)");
    } else {
        console.log("Proszenie o uprawnienia do powiadomień...");
        Notification.requestPermission().then(permission => {
            console.log("Nowe uprawnienie:", permission);
            if (permission === "granted") {
                showNotification();
            } else {
                alert("Gratulacje! Ułożyłeś wszystkie puzzle poprawnie!");
            }
        });
    }
}

// Inicjalizacja
window.addEventListener('load', () => {
    initMap();
    requestGeolocation();
    requestNotificationPermission();
});