var mymap = L.map('mymap').setView([35.6895, 139.6917], 13);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).addTo(mymap);

var path = [];
var polygons = [];
var currentPolygon = null;
var info = document.getElementById('info');

function updateInfo(area) {
    info.innerHTML = '面積: ' + Math.round(area * 100) / 100 + ' km²';
    if (area > 602.98) {
        info.innerHTML += '<br><strong style="color: red; font-size: 1.2em;">クリア!</strong>';
    }
}

function calculateTotalArea() {
    if (polygons.length === 0) return 0;
    var union = polygons[0];
    for (var i = 1; i < polygons.length; i++) {
        union = turf.union(union, polygons[i]);
    }
    return turf.area(union) / 1000000; // Convert to km²
}

function addPoint(e) {
    path.push(e.latlng);
    
    if (currentPolygon) {
        mymap.removeLayer(currentPolygon);
    }
    
    if (path.length >= 3) {
        currentPolygon = L.polygon(path, {color: 'red'}).addTo(mymap);
        var turfPolygon = turf.polygon([path.map(p => [p.lng, p.lat])]);
        polygons.push(turfPolygon);
        var totalArea = calculateTotalArea();
        updateInfo(totalArea);
    }
    
    if (e.originalEvent.shiftKey) {
        finishPolygon();
    }
}

function removePoint() {
    if (path.length > 0) {
        path.pop();
        if (currentPolygon) {
            mymap.removeLayer(currentPolygon);
        }
        if (path.length >= 3) {
            currentPolygon = L.polygon(path, {color: 'red'}).addTo(mymap);
            polygons.pop();
            var turfPolygon = turf.polygon([path.map(p => [p.lng, p.lat])]);
            polygons.push(turfPolygon);
            var totalArea = calculateTotalArea();
            updateInfo(totalArea);
        } else {
            info.innerHTML = '3点以上クリックしてポリゴンを形成してください';
            polygons.pop();
        }
    }
}

function finishPolygon() {
    if (path.length >= 3) {
        path = [];
        currentPolygon = null;
        info.innerHTML += '<br>新しいポリゴンを描画できます';
    }
}

function resetPolygons() {
    path = [];
    polygons = [];
    if (currentPolygon) {
        mymap.removeLayer(currentPolygon);
    }
    currentPolygon = null;
    info.innerHTML = '順次クリックしてポリゴンを描画してください(SHIFTクリックで終了)';
    mymap.eachLayer(function (layer) {
        if (layer instanceof L.Polygon) {
            mymap.removeLayer(layer);
        }
    });
}

mymap.on('click', addPoint);
document.getElementById('undo').addEventListener('click', removePoint);
document.getElementById('finish').addEventListener('click', finishPolygon);
document.getElementById('reset').addEventListener('click', resetPolygons);