import axios from 'axios';
import fs from 'fs';
import path from 'path';
import { parseStringPromise } from 'xml2js';
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa Cen Nieruchomości</title>
    
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <!-- MarkerCluster CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
    
    <!-- Custom Markers CSS -->
    <link rel="stylesheet" href="markers.css" />
    <link rel="stylesheet" href="popup_style.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

    <style>
        body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        #map { width: 100%; height: 100%; }
        
        #info {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            z-index: 1000;
            max-width: 300px;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255,0.95);
            padding: 20px 40px;
            border-radius: 10px;
            z-index: 2000;
            font-size: 1.2em;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        /* --- Popup Styling --- */
        .leaflet-popup-content-wrapper {
            border-radius: 8px;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 3px 14px rgba(0,0,0,0.4);
        }
        .leaflet-popup-content {
            margin: 0;
            width: 480px !important; /* Szerszy popup dla tabeli */
            font-size: 13px;
            max-height: 400px;
            overflow-y: auto;
        }

        /* --- Cluster List Styling --- */
        .cluster-list-container {
            width: 100%;
        }
        .cluster-list-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }
        .cluster-list-table th {
            background: #f1f3f5;
            padding: 10px 8px;
            text-align: left;
            border-bottom: 2px solid #dee2e6;
            color: #495057;
            position: sticky;
            top: 0;
            z-index: 10;
            font-weight: bold;
        }
        .cluster-list-table td {
            padding: 8px;
            border-bottom: 1px solid #e9ecef;
            color: #333;
            vertical-align: middle;
        }
        
        /* Wiersze główne */
        .main-row {
            cursor: pointer;
            transition: background-color 0.1s;
        }
        .main-row:hover {
            background-color: #e9ecef !important;
        }
        .cluster-list-row-even {
            background-color: #ffffcc; /* Żółtawy kolor jak w oryginale */
        }
        .cluster-list-row-odd {
            background-color: #ffffff;
        }

        /* Wiersz szczegółów (rozwijany) */
        .details-row {
            background-color: #f8f9fa;
            border-bottom: 2px solid #dee2e6;
        }
        .details-content {
            padding: 10px 15px;
        }
        
        /* Tabela wewnątrz szczegółów */
        .details-inner-table {
            width: 100%;
            font-size: 12px;
        }
        .details-inner-table td {
            padding: 4px 0;
            border: none;
        }
        .details-label {
            color: #666;
            font-weight: 600;
            width: 100px;
        }
        .details-value {
            color: #000;
        }

        /* Kolory i formatowanie */
        .price-bold {
            font-weight: bold;
            color: #000;
        }
        .address-sub {
            font-size: 10px;
            color: #666;
            display: block;
            margin-top: 2px;
        }
        
        button.refresh-btn {
            background: #4a90e2;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            width: 100%;
            margin-top: 10px;
        }
        button.refresh-btn:hover {
            background: #357abd;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    
    <div id="info">
        <h3 style="margin-top:0;">Statystyki</h3>
        <p>Liczba punktów: <strong id="count">0</strong></p>
        <p><small>Pokazuję ostatnie <span id="limit-info">50000</span> transakcji</small></p>
        <button class="refresh-btn" onclick="loadData()">Odśwież dane</button>
    </div>

    <div id="loading" class="loading">
        <div class="spinner"></div> Ładowanie danych...
    </div>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <!-- MarkerCluster JS -->
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
    <!-- Proj4js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.0/proj4.js"></script>
    <!-- Custom Markers JS -->
    <script src="markers.js"></script>

    <script>
        // --- Konfiguracja Układu Współrzędnych ---
        proj4.defs("EPSG:2180","+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
        const sourceProj = "EPSG:2180";
        const destProj = "EPSG:4326";

        // --- Inicjalizacja Mapy ---
        const map = L.map('map').setView([52.0693, 19.4803], 6);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        // --- Konfiguracja Klastrów ---
        const markers = L.markerClusterGroup({
            spiderfyOnMaxZoom: false, // WYŁĄCZAMY spiderfy dla wydajności (duże klastry = lag)
            showCoverageOnHover: false,
            zoomToBoundsOnClick: true,
            maxClusterRadius: 40,
            spiderfyDistanceMultiplier: 1.5
        });
        map.addLayer(markers);

        // --- Obsługa Kliknięcia w Klaster (Lista) ---
        markers.on('clusterclick', function (a) {
            const currentZoom = map.getZoom();
            const maxZoom = map.getMaxZoom();
            const bounds = a.layer.getBounds();
            // Sprawdź czy klaster jest punktowy (wszystkie markery w tym samym miejscu)
            const clusterIsTiny = bounds.getNorth() === bounds.getSouth() && bounds.getEast() === bounds.getWest();
            
            // Jeśli wszystkie punkty są w tym samym miejscu LUB osiągnęliśmy spory zoom -> Pokaż listę
            if (clusterIsTiny || currentZoom >= 16) {
                const childMarkers = a.layer.getAllChildMarkers();
                const content = generateClusterList(childMarkers);
                
                L.popup({ maxWidth: 500, minWidth: 400, maxHeight: 500, className: 'custom-popup' })
                    .setLatLng(a.latlng)
                    .setContent(content)
                    .openOn(map);
            } else {
                a.layer.zoomToBounds();
            }
        });

        function generateClusterList(childMarkers) {
            // Sortowanie domyślne (wg daty)
            childMarkers.sort((a, b) => {
                const dateA = a.featureProperties.data || '';
                const dateB = b.featureProperties.data || '';
                return dateB.localeCompare(dateA);
            });

            let html = `
                <div class="cluster-list-container">
                    <div class="popup-preheader">
                        <div class="header-spacer"></div>
                        <div class="header-col" onclick="sortList('pow')">pow. <span class="sort-arrow">↕</span></div>
                        <div class="header-col" onclick="sortList('cena')">cena <span class="sort-arrow">↕</span></div>
                        <div class="header-col" onclick="sortList('cenam2')">cena m² <span class="sort-arrow">↕</span></div>
                        <div class="header-col" onclick="sortList('data')">data <span class="sort-arrow">↕</span></div>
                    </div>
                    <ul class="popup-entries">
            `;

            childMarkers.forEach((marker, index) => {
                const p = marker.featureProperties;
                const uid = p._uid || `marker-${index}`;
                
                // Adres
                let adres = p.miejscowosc || '';
                if (p.ulica) adres += (adres ? ', ' : '') + 'ul. ' + p.ulica;
                if (p.numer) adres += ' ' + p.numer;
                
                // Fallback adresowy
                if (!adres) {
                    if (p.idn) adres = `<span style="color:#666">Działka ${p.idn}</span>`;
                    else if (p.numer_dzialki) adres = `<span style="color:#666">Działka ${p.numer_dzialki}</span>`;
                    else adres = '<span style="color:#999;font-style:italic">Brak adresu</span>';
                }

                // Rodzaj (skrót)
                let rodzaj = p.rodzaj || 'Nieruchomość';
                let rodzajShort = rodzaj
                    .replace('nieruchomosc', '')
                    .replace('Gruntowa', '')
                    .replace('Zabudowana', ' zab.')
                    .replace('Niezabudowana', '')
                    .replace('Lokalowa', 'Lokal');
                
                // Uproszczenie nazwy typu do stylu "Działka", "Działka zab."
                if (rodzaj.toLowerCase().includes('gruntowa')) {
                    if (rodzaj.toLowerCase().includes('zabudowana')) rodzajShort = "Działka zab.";
                    else rodzajShort = "Działka";
                } else if (rodzaj.toLowerCase().includes('lokalowa')) {
                    rodzajShort = "Lokal";
                }

                // Ceny
                const cenaRaw = p.cena || p.cena_transakcji || p.cena_brutto;
                const cena = formatPrice(cenaRaw);
                const pow = parseFloat(p.powierzchnia);
                const cenaM2Raw = (pow > 0 && cenaRaw) ? (parseFloat(cenaRaw) / pow) : 0;
                const cenaM2 = cenaM2Raw > 0 ? formatPrice(cenaM2Raw) + '/m²' : '-';
                
                // Format powierzchni
                const powStr = pow ? `${Math.round(pow)} m²` : '-';

                // Kolor ikony plusa (fioletowy)
                const iconHtml = `<i class="fa-solid fa-plus" style="color: #6366f1;"></i>`;

                // Wiersz nagłówka (Header Row)
                html += `
                    <li>
                        <div class="popup-header" onclick="toggleDetails('${uid}')">
                            <div class="header-index">${index + 1}.</div>
                            <div class="header-icon">${iconHtml}</div>
                            <div class="header-txt">${rodzajShort}</div>
                            <div class="header-val">${powStr}</div>
                            <div class="header-val">${cena}</div>
                            <div class="header-val">${cenaM2}</div>
                            <div class="header-val">${p.data}</div>
                        </div>
                        
                        <!-- Wiersz szczegółów (Expanded) -->
                        <div id="details-${uid}" class="popup-entry" style="display:none;">
                            ${renderDetailRow('Identyfikator', p.idn || p.id)}
                            ${renderDetailRow('Powierzchnia', powStr)}
                            ${renderDetailRow('Cena m²', cenaM2, 'red-bold')}
                            ${renderDetailRow('Cena nieruchomości (brutto)', formatPrice(p.cena_brutto || cenaRaw), 'blue-bold')}
                            ${renderDetailRow('Cena transakcji (brutto)', formatPrice(p.cena_transakcji || cenaRaw), 'blue-bold')}
                            ${renderDetailRow('Rodzaj nieruchomości', rodzaj)}
                            ${renderDetailRow('Rodzaj prawa', p.rodzaj_prawa || '-')}
                            ${renderDetailRow('Rodzaj transakcji', p.rodzaj_transakcji || '-')}
                            ${renderDetailRow('Sygnatura dokumentu', p.oznaczeniedokumentu || '-')}
                            ${renderDetailRow('Data sporządzenia', p.data)}
                            ${p.opis ? renderDetailRow('Opis', p.opis) : ''}
                            ${adres && !adres.includes('Brak') ? renderDetailRow('Adres', adres) : ''}
                        </div>
                    </li>
                `;
            });

            html += `</ul></div>`;
            return html;
        }

        function renderDetailRow(label, value, valueClass = '') {
            if (!value || value === '-') return '';
            return `
                <div class="detail-row">
                    <span class="detail-label">${label}:</span>
                    <span class="detail-value ${valueClass}">${value}</span>
                </div>
            `;
        }

        // Funkcja do rozwijania/zwijania szczegółów
        window.toggleDetails = function(uid) {
            const row = document.getElementById(`details-${uid}`);
            if (row) {
                if (row.style.display === 'none') {
                    row.style.display = 'flex'; // Flex, bo tak jest w CSS .popup-entry
                } else {
                    row.style.display = 'none';
                }
            }
        };

        function formatPrice(price) {
            if (!price) return '-';
            // Usuń niepotrzebne znaki, jeśli są stringiem
            const num = parseFloat(price);
            if (isNaN(num)) return price;
            return new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN', maximumFractionDigits: 0 }).format(num);
        }

        // --- Ładowanie Danych ---
        async function loadData() {
            const loading = document.getElementById('loading');
            const countSpan = document.getElementById('count');
            
            loading.style.display = 'flex';
            markers.clearLayers();

            try {
                // Pobierz 10000 najnowszych wpisów
                const response = await fetch('/api/prices?limit=50000');
                const data = await response.json();

                console.log(`Pobrano ${data.length} rekordów`);
                countSpan.innerText = data.length;

                let validPoints = 0;

                data.forEach((item, idx) => {
                    if (!item.geometria) return;

                    // Parsowanie współrzędnych "X Y"
                    const coords = item.geometria.split(' ').map(Number);
                    if (coords.length !== 2) return;

                    try {
                        // Konwersja PUWG 1992 -> WGS84
                        // EPSG:2180 (x=North, y=East) ale pliki często mają "X Y" gdzie X=Northing, Y=Easting.
                        // Proj4js przyjmuje [x, y]. W Proj4js dla EPSG:2180 x=Easting, y=Northing.
                        // Zatem jeśli plik ma "Northing Easting" (538k 202k), to musimy dać [202k, 538k].
                        // Sprawdźmy:
                        // [202991, 538202] -> 14.6 E, 52.6 N (Zachodnia Polska, lubuskie?)
                        // [538202, 202991] -> 19.5 E, 49.6 N (Południe, góry?)
                        
                        // User narzeka że "wszystko w 1 miejscu".
                        // Jeśli używamy złej kolejności, punkty mogą lądować blisko siebie w dziwnym miejscu.
                        // Ale XML z debuga pokazał identyczne współrzędne dla 5 rekordów.
                        // Więc problem "wszystko w 1 miejscu" wynika z DANYCH, a nie tylko konwersji.
                        
                        // Zostawiamy [coords[1], coords[0]] czyli [Easting, Northing] jeśli coords="N E".
                        const converted = proj4(sourceProj, destProj, [coords[1], coords[0]]);
                        
                        // Walidacja (czy w Polsce)
                        if (converted[1] < 49 || converted[1] > 55 || converted[0] < 14 || converted[0] > 25) {
                             // Może odwrotnie?
                             const converted2 = proj4(sourceProj, destProj, [coords[0], coords[1]]);
                             if (converted2[1] >= 49 && converted2[1] <= 55 && converted2[0] >= 14 && converted2[0] <= 25) {
                                 // Jeśli odwrotna konwersja jest w Polsce, użyj jej!
                                 // Ale uwaga: 19.5E, 49.6N to też Polska.
                                 // Trzeba uważać.
                             }
                             return; 
                        }

                        // Wybór ikony na podstawie rodzaju
                        const rodzajLower = (item.rodzaj || '').toLowerCase();
                        let icon = markersIcons.default;
                        
                        if (rodzajLower.includes('gruntowa') && !rodzajLower.includes('zabudowana')) {
                            icon = markersIcons.gruntowa;
                        } else if (rodzajLower.includes('zabudowana')) {
                            icon = markersIcons.zabudowana;
                        } else if (rodzajLower.includes('lokalowa')) {
                            icon = markersIcons.lokalowa;
                        }

                        const marker = L.marker([converted[1], converted[0]], { icon: icon });
                        
                        // Generujemy unikalny UID jeśli go nie ma
                        if (!item._uid) item._uid = `gen-${idx}`;
                        
                        // Przypisz dane do markera
                        marker.featureProperties = item; 
                        
                        // Bindujemy popup (dla pojedynczego kliknięcia w marker, nie w klaster)
                        // Ale tutaj użyjemy tej samej logiki co dla listy - pojedyncza tabela
                        const singleList = generateClusterList([marker]);
                        marker.bindPopup(singleList, { maxWidth: 500, minWidth: 400 });
                        
                        markers.addLayer(marker);
                        validPoints++;
                    } catch (e) {
                        // console.warn('Błąd:', e);
                    }
                });

                if (validPoints > 0) {
                    map.fitBounds(markers.getBounds());
                }

            } catch (err) {
                console.error(err);
                alert('Błąd pobierania danych: ' + err.message);
            } finally {
                loading.style.display = 'none';
            }
        }

        // Start
        loadData();

    </script>
</body>
</html>