{% extends 'base.html' %}
{% block page_title %}Impact Map{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    #map {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

    .leaflet-popup-content {
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        min-width: 180px;
    }

    .district-popup h6 {
        color: #1b6b3a;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .district-popup table {
        width: 100%;
        font-size: 12px;
    }

    .district-popup td {
        padding: 3px 6px;
    }

    .district-popup td:first-child {
        color: #888;
    }

    .district-popup td:last-child {
        font-weight: 600;
    }

    .legend {
        background: white;
        padding: 12px 16px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        font-size: 12px;
    }

    .legend-title {
        font-weight: 700;
        color: #1b6b3a;
        margin-bottom: 8px;
        font-size: 13px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
    }

    .legend-box {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        display: inline-block;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .info-box {
        background: white;
        padding: 10px 14px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        font-size: 12px;
        min-width: 160px;
        line-height: 1.6;
    }

    .leaflet-tooltip-district {
        background: transparent;
        border: none;
        box-shadow: none;
        font-size: 9px;
        font-weight: 700;
        color: #333;
        text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
        white-space: nowrap;
        padding: 0;
    }
</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-1">🗺️ Impact Map — Malawi</h4>
        <p class="text-muted mb-0" style="font-size:0.85rem;">District-level beneficiary coverage across Malawi</p>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2 px-3">
        <form method="GET" class="d-flex gap-2 align-items-center flex-wrap">
            <select name="project_id" class="form-select form-select-sm" style="width:auto;">
                <option value="">All Projects</option>
                {% for p in projects %}
                <option value="{{ p.id }}" {% if filter_project==p.id|string %}selected{% endif %}>{{ p.name[:35] }}
                </option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
            {% if filter_project %}
            <a href="{{ url_for('map_view') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
            {% endif %}
            <span class="text-muted ms-2" style="font-size:0.82rem;">
                <i class="bi bi-people-fill me-1 text-success"></i>
                <strong>{{ total_beneficiaries }}</strong> beneficiaries across
                <strong>{{ district_data|length }}</strong> district{{ 's' if district_data|length != 1 }}
            </span>
        </form>
    </div>
</div>

<div class="row g-3">
    <div class="col-md-8 d-flex">
        <div class="card flex-fill">
            <div class="card-body p-2 d-flex" style="height:70vh;">
                <div id="map" style="flex:1;"></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card" style="height:658px;">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span class="fw-bold" style="font-size:0.9rem;">District Breakdown</span>
                <span class="badge" style="background:#1b6b3a;font-size:0.72rem;">
                    {{ district_data|length }} covered
                </span>
            </div>
            <div class="card-body p-0" style="overflow-y:auto;">
                {% if district_data %}
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th class="ps-3">District</th>
                            <th>Total</th>
                            <th>♂</th>
                            <th>♀</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for district, data in district_data.items()|sort(attribute='1.total', reverse=True) %}
                        <tr>
                            <td class="ps-3">
                                <div class="d-flex align-items-center gap-2">
                                    <div style="width:10px;height:10px;border-radius:3px;flex-shrink:0;background:
                                    {% if data.total >= 200 %}#1b5e20
                                    {% elif data.total >= 100 %}#2e7d32
                                    {% elif data.total >= 50 %}#388e3c
                                    {% elif data.total >= 10 %}#66bb6a
                                    {% else %}#c8e6c9{% endif %};"></div>
                                    <div>
                                        <div style="font-size:0.85rem;font-weight:500;">{{ district }}</div>
                                        {% if data.villages %}
                                        <div style="font-size:0.7rem;color:#999;">
                                            {{ data.villages|length }} village{{ 's' if data.villages|length != 1 }}
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td><span class="fw-bold" style="color:#1b6b3a;">{{ data.total }}</span></td>
                            <td style="font-size:0.82rem;color:#0d6efd;">{{ data.male }}</td>
                            <td style="font-size:0.82rem;color:#d63384;">{{ data.female }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-geo-alt" style="font-size:2.5rem;opacity:0.2;display:block;"></i>
                    <p class="mt-2 mb-0" style="font-size:0.85rem;">No beneficiary location data yet</p>
                    <p style="font-size:0.78rem;color:#bbb;">Add district info when registering beneficiaries</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
    const districtData = {{ district_data | tojson | safe }};
    const districtCentroids = {{ malawi_districts | tojson | safe }};

    function normalize(s) {
        return (s || '').toLowerCase().trim();
    }

    function findData(name) {
        const n = normalize(name);
        const key = Object.keys(districtData).find(k => normalize(k) === n);
        return key ? districtData[key] : null;
    }

    /* Centroid lookup from backend coordinates */
    function getCentroid(name) {
        const n = normalize(name);
        const key = Object.keys(districtCentroids).find(k => normalize(k) === n);
        if (key) {
            const c = districtCentroids[key];
            return L.latLng(c.lat, c.lng);
        }
        return null;
    }

    /* Build GeoJSON polygons centered around real district coordinates */
    function buildDistrictPolygon(name, lat, lng, size) {
        const s = size || 0.35;
        return {
            "type": "Feature",
            "properties": { "name": name, "center": [lat, lng] },
            "geometry": {
                "type": "Polygon",
                "coordinates": [[
                    [lng - s, lat - s],
                    [lng + s, lat - s],
                    [lng + s, lat + s],
                    [lng - s, lat + s],
                    [lng - s, lat - s]
                ]]
            }
        };
    }

    const districtSizes = {
        'Lilongwe': 0.5, 'Mzimba': 0.55, 'Mangochi': 0.5, 'Kasungu': 0.45,
        'Machinga': 0.4, 'Zomba': 0.35, 'Blantyre': 0.3, 'Nsanje': 0.35,
        'Chikwawa': 0.35, 'Dedza': 0.35, 'Ntcheu': 0.35, 'Nkhotakota': 0.4,
        'Rumphi': 0.45, 'Karonga': 0.4, 'Chitipa': 0.4, 'Mchinji': 0.35,
        'Dowa': 0.35, 'Salima': 0.35, 'Nkhata Bay': 0.35, 'Ntchisi': 0.3,
        'Mulanje': 0.3, 'Thyolo': 0.28, 'Balaka': 0.28, 'Chiradzulu': 0.22,
        'Phalombe': 0.25, 'Neno': 0.25, 'Mwanza': 0.22, 'Likoma': 0.12
    };

    const features = [];
    for (const [name, coords] of Object.entries(districtCentroids)) {
        features.push(buildDistrictPolygon(name, coords.lat, coords.lng, districtSizes[name] || 0.3));
    }
    const malawiGeoJSON = { "type": "FeatureCollection", "features": features };

    // MAP
    const map = L.map('map', { zoomControl: true }).setView([-13.5, 34.3], 6);
    map.getContainer().style.background = '#d6e8f5';

    function getColor(total) {
        if (!total || total === 0) return '#c0c0c0';
        if (total < 10) return '#c8e6c9';
        if (total < 50) return '#81c784';
        if (total < 100) return '#4caf50';
        if (total < 200) return '#2e7d32';
        return '#1b5e20';
    }

    function getStyle(feature) {
        const data = findData(feature.properties.name);
        const total = data ? data.total : 0;
        return {
            fillColor: getColor(total),
            weight: 1.5,
            opacity: 1,
            color: '#ffffff',
            fillOpacity: total > 0 ? 0.88 : 0.80
        };
    }

    // HOVER INFO
    const info = L.control({ position: 'topright' });
    info.onAdd = function () {
        this._div = L.DomUtil.create('div', 'info-box');
        this.update();
        return this._div;
    };
    info.update = function (name, data) {
        if (!name) {
            this._div.innerHTML = '<span style="color:#aaa;font-size:11px;font-style:italic;">Hover over a district</span>';
            return;
        }
        const total = data ? data.total : 0;
        if (total > 0) {
            const femPct = Math.round((data.female / total) * 100);
            this._div.innerHTML = `
            <strong style="color:#1b6b3a;font-size:13px;">${name}</strong><br>
            <span style="font-size:20px;font-weight:700;color:#1b6b3a;">${total}</span>
            <span style="font-size:11px;color:#888;"> beneficiaries</span><br>
            <span style="color:#0d6efd;">♂ ${data.male}</span> &nbsp;
            <span style="color:#d63384;">♀ ${data.female} (${femPct}%)</span><br>
            <span style="color:#888;font-size:11px;">Direct: ${data.direct} · Indirect: ${data.indirect}</span>
        `;
        } else {
            this._div.innerHTML = `
            <strong style="color:#555;font-size:13px;">${name}</strong><br>
            <span style="color:#bbb;font-size:12px;">No beneficiaries yet</span>
        `;
        }
    };
    info.addTo(map);

    let geojsonLayer;

    function highlightFeature(e) {
        e.target.setStyle({ weight: 3, color: '#1b6b3a', fillOpacity: 0.95 });
        e.target.bringToFront();
        const name = e.target.feature.properties.name;
        info.update(name, findData(name));
    }

    function resetHighlight(e) {
        geojsonLayer.resetStyle(e.target);
        info.update();
    }

    function onEachFeature(feature, layer) {
        const name = feature.properties.name;
        const data = findData(name);
        const total = data ? data.total : 0;

        layer.on({ mouseover: highlightFeature, mouseout: resetHighlight });

        /* Place label at the real centroid from backend, not polygon center */
        const centroid = getCentroid(name);
        if (centroid) {
            layer.bindTooltip(name, {
                permanent: true,
                direction: 'center',
                className: 'leaflet-tooltip-district',
                offset: [0, 0]
            });
        }

        // Popup on click
        if (total > 0) {
            const femPct = Math.round((data.female / total) * 100);
            const villages = data.villages && data.villages.length > 0
                ? data.villages.slice(0, 4).join(', ') + (data.villages.length > 4 ? '...' : '')
                : '—';
            layer.bindPopup(`
            <div class="district-popup">
                <h6>📍 ${name}</h6>
                <table>
                    <tr><td>Total</td><td>${total}</td></tr>
                    <tr><td>Male</td><td>${data.male}</td></tr>
                    <tr><td>Female</td><td>${data.female} (${femPct}%)</td></tr>
                    <tr><td>Direct</td><td>${data.direct}</td></tr>
                    <tr><td>Indirect</td><td>${data.indirect}</td></tr>
                    ${villages !== '—' ? `<tr><td>Villages</td><td>${villages}</td></tr>` : ''}
                </table>
            </div>
        `, { maxWidth: 240 });
        } else {
            layer.bindPopup(`
            <div class="district-popup">
                <h6>📍 ${name}</h6>
                <p style="color:#999;font-size:12px;margin:0;">No beneficiaries registered here yet.</p>
            </div>
        `);
        }
    }

    geojsonLayer = L.geoJSON(malawiGeoJSON, {
        style: getStyle,
        onEachFeature: onEachFeature
    }).addTo(map);

    map.fitBounds(geojsonLayer.getBounds(), { padding: [20, 20] });
    setTimeout(() => { map.invalidateSize(); }, 200);

    // LEGEND
    const legend = L.control({ position: 'bottomright' });
    legend.onAdd = function () {
        const div = L.DomUtil.create('div', 'legend');
        div.innerHTML = `
        <div class="legend-title">Beneficiaries</div>
        <div class="legend-item"><span class="legend-box" style="background:#c0c0c0;"></span>Not covered</div>
        <div class="legend-item"><span class="legend-box" style="background:#c8e6c9;"></span>1 – 9</div>
        <div class="legend-item"><span class="legend-box" style="background:#81c784;"></span>10 – 49</div>
        <div class="legend-item"><span class="legend-box" style="background:#4caf50;"></span>50 – 99</div>
        <div class="legend-item"><span class="legend-box" style="background:#2e7d32;"></span>100 – 199</div>
        <div class="legend-item"><span class="legend-box" style="background:#1b5e20;"></span>200+</div>
    `;
        return div;
    };
    legend.addTo(map);
</script>
{% endblock %}