{% extends "base.html" %}
{% block theme %}light{% endblock %}
{% block body_class %}mesh-data-page mesh-stats-page{% endblock %}

{% block css %}
{% include "data-page-styles.html" %}
<style>
.main-container { width:100%; }
.summary-container { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:24px; }
.summary-card { padding:20px 24px; background:white; border:1px solid var(--mesh-border); border-radius:9px; min-width:0; }
.summary-card p { color:#64748b; font-size:13px; margin:0 0 8px; }
.summary-count { font-size:30px; font-weight:650; color:var(--mesh-primary); font-variant-numeric:tabular-nums; }
.summary-card:nth-child(2) .summary-count { color:#198754; }
.summary-card:nth-child(3) .summary-count { color:#236b4b; }
.summary-card:nth-child(4) .summary-count { color:#497b55; }
.stats-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.card-section { min-width:0; display:flex; align-items:center; align-content:flex-start; flex-wrap:wrap; gap:10px; padding:20px; background:white; border:1px solid var(--mesh-border); border-radius:9px; }
.section-header { width:100%; font-size:15px; font-weight:600; color:#334155; padding-bottom:14px; margin:0 0 2px; border-bottom:1px solid #edf1f6; }
.total-count { font-size:12px; color:#64748b; margin-right:auto; }
.chart { width:100%; min-width:0; height:340px; margin-top:8px; }
#chartModal { display:none; position:fixed; inset:0; background:#17263c99; z-index:9999; justify-content:center; align-items:center; padding:16px; }
#chartModal > div { position:relative; width:95%; max-width:1200px; height:85%; background:white; border-radius:10px; padding:48px 16px 16px; display:flex; flex-direction:column; }
#chartModal #closeModal { position:absolute; top:10px; right:12px; font-size:22px; padding:0; width:32px; height:32px; line-height:1; }
#modalChart { flex:1; min-height:0; width:100%; }
@media(max-width:1000px) { .stats-chart-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:700px) { .summary-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .summary-card { padding:16px; } .summary-count { font-size:26px; } .card-section { padding:14px; gap:8px; } .chart { height:320px; } }
</style>
{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="/static/portmaps.js"></script>
{% endblock %}

{% block body %}
<div class="main-container">
    <header class="data-heading"><div><span class="mesh-eyebrow">NETWORK ANALYTICS</span><h1>Mesh statistics</h1><p>Explore packet history, device activity, and gateway distribution.</p></div><a class="mesh-secondary-button" href="/top">Top nodes ↗</a></header>

    <!-- Summary cards now fully driven by API + JS -->
    <div class="summary-container">
        <div class="summary-card">
            <p data-translate-lang="total_nodes">Total Nodes</p>
            <div class="summary-count" id="summary_nodes">0</div>
        </div>
        <div class="summary-card">
            <p data-translate-lang="total_packets">Total Packets</p>
            <div class="summary-count" id="summary_packets">0</div>
        </div>
        <div class="summary-card">
            <p data-translate-lang="total_packets_seen">Total Packets Seen</p>
            <div class="summary-count" id="summary_seen">0</div>
        </div>
        <div class="summary-card">
            <p data-translate-lang="total_gateways">Total Gateways</p>
            <div class="summary-count" id="summary_gateways">0</div>
        </div>
    </div>

    <div class="stats-chart-grid">
    <div class="card-section">
        <p class="section-header" data-translate-lang="daily_snapshot_packets_history">
            Daily Packet Snapshot History
        </p>
        <select id="snapshotPacketsRange" class="chart-filter" aria-label="Snapshot packet timeframe">
            <option value="7">7 days</option>
            <option value="14">14 days</option>
            <option value="30">1 month</option>
            <option value="183">6 months</option>
            <option value="365">1 year</option>
            <option value="all" selected>All</option>
        </select>
        <button class="expand-btn" data-chart="chart_daily_snapshot_packets" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_daily_snapshot_packets" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_daily_snapshot_packets" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="daily_snapshot_nodes_gateways_history">
            Daily Node/Gateway Snapshot History
        </p>
        <select id="snapshotNodesGatewaysRange" class="chart-filter" aria-label="Snapshot node and gateway timeframe">
            <option value="7">7 days</option>
            <option value="14">14 days</option>
            <option value="30">1 month</option>
            <option value="183">6 months</option>
            <option value="365">1 year</option>
            <option value="all" selected>All</option>
        </select>
        <button class="expand-btn" data-chart="chart_daily_snapshot_nodes_gateways" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_daily_snapshot_nodes_gateways" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_daily_snapshot_nodes_gateways" class="chart"></div>
    </div>

    <!-- Packet Types Pie Chart with Channel Selector -->
    <div class="card-section">
        <p class="section-header" data-translate-lang="packet_types_last_24h">
            Packet Types - Last 24 Hours
        </p>
        <select id="channelSelect" aria-label="Packet type channel">
            <option value="" data-translate-lang="all_channels">All Channels</option>
        </select>
        <button class="expand-btn" data-chart="chart_packet_types" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_packet_types" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_packet_types" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="packets_per_day_text">
            Packets per Day - Text Messages (Port 1, Last 14 Days)
        </p>
        <div id="total_daily_portnum_1" class="total-count">Total: 0</div>
        <button class="expand-btn" data-chart="chart_daily_portnum_1" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_daily_portnum_1" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_daily_portnum_1" class="chart"></div>
    </div>

    <!-- Hourly Charts -->
    <div class="card-section">
        <p class="section-header" data-translate-lang="packets_per_hour_all">
            Packets per Hour - All Ports
        </p>
        <div id="total_hourly_all" class="total-count">Total: 0</div>
        <button class="expand-btn" data-chart="chart_hourly_all" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_hourly_all" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_hourly_all" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="packets_per_hour_text">
            Packets per Hour - Text Messages (Port 1)
        </p>
        <div id="total_portnum_1" class="total-count">Total: 0</div>
        <button class="expand-btn" data-chart="chart_portnum_1" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_portnum_1" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_portnum_1" class="chart"></div>
    </div>

    <!-- Node breakdown charts -->
    <div class="card-section">
        <p class="section-header" data-translate-lang="hardware_breakdown">Hardware Breakdown</p>
        <button class="expand-btn" data-chart="chart_hw_model" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_hw_model" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_hw_model" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="role_breakdown">Role Breakdown</p>
        <button class="expand-btn" data-chart="chart_role" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_role" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_role" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="channel_breakdown">Channel Breakdown</p>
        <button class="expand-btn" data-chart="chart_channel" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_channel" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_channel" class="chart"></div>
    </div>

    <!-- Gateway breakdown charts -->
    <div class="card-section">
        <p class="section-header" data-translate-lang="gateway_channel_breakdown">Gateway Channel Breakdown</p>
        <button class="expand-btn" data-chart="chart_gateway_channel" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_gateway_channel" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_gateway_channel" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="gateway_role_breakdown">Gateway Role Breakdown</p>
        <button class="expand-btn" data-chart="chart_gateway_role" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_gateway_role" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_gateway_role" class="chart"></div>
    </div>

    <div class="card-section">
        <p class="section-header" data-translate-lang="gateway_firmware_breakdown">Gateway Firmware Breakdown</p>
        <button class="expand-btn" data-chart="chart_gateway_firmware" data-translate-lang="expand_chart">Expand Chart</button>
        <button class="export-btn" data-chart="chart_gateway_firmware" data-translate-lang="export_csv">Export CSV</button>
        <div id="chart_gateway_firmware" class="chart"></div>
    </div>
</div>
</div>

<!-- Modal for expanded charts -->
<div id="chartModal" role="dialog" aria-modal="true" aria-label="Expanded chart">
    <div>
        <button id="closeModal" type="button" aria-label="Close expanded chart">&times;</button>
        <div id="modalChart"></div>
    </div>
</div>

<script>
const PORTNUM_LABELS = window.PORT_LABEL_MAP;

// --- Fetch & Processing ---
async function fetchStats(period_type,length,portnum=null,channel=null){
    try{
        let url=`/api/stats?period_type=${period_type}&length=${length}`;
        if(portnum!==null) url+=`&portnum=${portnum}`;
        if(channel) url+=`&channel=${channel}`;
        const res=await fetch(url);
        if(!res.ok) return [];
        const json=await res.json();
        return json.data||[];
    }catch{return [];}
}

async function fetchDailySnapshots(){
    try{
        const res=await fetch("/api/snapshots/daily");
        if(!res.ok) return [];
        const json=await res.json();
        return json.data||[];
    }catch{return [];}
}

async function fetchNodes(){
    try{
        const res=await fetch("/api/nodes");
        const json=await res.json();
        return json.nodes||[];
    }catch{
        return [];
    }
}

async function fetchChannels(){
    try{
        const res = await fetch("/api/channels");
        const json = await res.json();
        return json.channels || [];
    }catch{
        return [];
    }
}

function buildPacketTypeBreakdownFromSeries(allData, perPortSeries){
    const totalAll = (allData || []).reduce((sum,d)=>sum+(d.count??d.packet_count??0),0);
    const results = perPortSeries.map(({portnum, data}) => ({
        portnum,
        count: (data || []).reduce((sum,d)=>sum+(d.count??d.packet_count??0),0),
    }));
    const trackedTotal = results.reduce((sum,d)=>sum+d.count,0);
    const other = Math.max(totalAll - trackedTotal,0);
    if(other>0) results.push({portnum:"other", count:other});
    return results;
}

function processCountField(nodes,field){
    const counts={};
    nodes.forEach(n=>{
        const key=n[field]||"Unknown";
        counts[key]=(counts[key]||0)+1;
    });
    return Object.entries(counts).map(([name,value])=>({name,value}));
}

function updateTotalCount(domId,data){
    const el=document.getElementById(domId);
    if(!el||!data.length) return;
    const total=data.reduce((acc,d)=>acc+(d.count??d.packet_count??0),0);
    el.textContent=`Total: ${total.toLocaleString()}`;
}

function prepareTopN(data,n=20){
    data.sort((a,b)=>b.value-a.value);
    let top=data.slice(0,n);
    if(data.length>n){
        const otherValue=data.slice(n).reduce((sum,item)=>sum+item.value,0);
        top.push({name:"Other", value:otherValue});
    }
    return top;
}

function filterSnapshotsByRange(data, rangeValue){
    if(rangeValue === "all") return data;
    const days = Number.parseInt(rangeValue, 10);
    if(Number.isNaN(days) || days <= 0 || !data.length) return data;

    const latest = data.reduce((maxDate, item) => {
        const itemDate = new Date(`${item.date}T00:00:00Z`);
        return itemDate > maxDate ? itemDate : maxDate;
    }, new Date(`${data[0].date}T00:00:00Z`));

    const cutoff = new Date(latest);
    cutoff.setUTCDate(cutoff.getUTCDate() - (days - 1));

    return data.filter(item => new Date(`${item.date}T00:00:00Z`) >= cutoff);
}

// --- Chart Rendering ---
function renderChart(domId,data,type,color){
    const el=document.getElementById(domId);
    if(!el) return;
    const chart=echarts.init(el);
    const periods=data.map(d=>(d.period??d.period===0)?d.period.toString():'');
    const counts=data.map(d=>d.count??d.packet_count??0);
    chart.setOption({
        backgroundColor:'#ffffff',
        tooltip:{trigger:'axis'},
        grid:{left:'6%', right:'6%', bottom:'18%'},
        xAxis:{
            type:'category',
            data:periods,
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{rotate:45,color:'#64748b'}
        },
        yAxis:{
            type:'value',
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{color:'#64748b'}
        },
        series:[{
            data:counts,
            type:type,
            smooth:type==='line',
            itemStyle:{color:color},
            areaStyle:type==='line'?{}:undefined
        }]
    });
    return chart;
}

function renderPieChart(elId,data,name){
    const el=document.getElementById(elId);
    if(!el) return;
    const chart=echarts.init(el);
    const top20=prepareTopN(data,20);
    chart.setOption({
        backgroundColor:"#ffffff",
        tooltip:{
            trigger:"item",
            formatter: params=>`${params.name}: ${Math.round(params.percent)}% (${params.value})`
        },
        series:[{
            name:name,
            type:"pie",
            radius:["30%","70%"],
            center:["50%","50%"],
            avoidLabelOverlap:true,
            itemStyle:{
                borderRadius:6,
                borderColor:"#ffffff",
                borderWidth:2
            },
            label:{
                show:true,
                formatter:"{b}\n{d}%",
                color:"#64748b",
                fontSize:10
            },
            labelLine:{
                show:true,
                length:10,
                length2:6
            },
            data:top20
        }]
    });
    return chart;
}

function makeTelemetryLine(name, color, seriesData) {
    return {
        name,
        type: "line",
        smooth: true,
        connectNulls: true,
        showSymbol: true,
        symbol: "circle",
        symbolSize: 7,
        lineStyle: {
            width: 2,
            color,
            shadowColor: color.replace("1)", "0.35)"),
            shadowBlur: 8,
            shadowOffsetY: 3
        },
        itemStyle: {
            color,
            borderColor: "#000",
            borderWidth: 1
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: color.replace("1)", "0.5)") },
                { offset: 0.6, color: color.replace("1)", "0.2)") },
                { offset: 1, color: "rgba(0,0,0,0)" }
            ])
        },
        data: seriesData
    };
}

function renderDailySnapshotPacketsChart(domId,data){
    const el=document.getElementById(domId);
    if(!el) return;
    const chart=echarts.getInstanceByDom(el) || echarts.init(el);
    const labels=data.map(d=>d.date||"");
    const packetCounts=data.map(d=>d.packet_count??0);

    chart.setOption({
        backgroundColor:'#ffffff',
        tooltip:{trigger:'axis'},
        legend:{
            data:['Packets'],
            textStyle:{color:'#64748b'}
        },
        grid:{left:'6%', right:'6%', bottom:'18%'},
        xAxis:{
            type:'category',
            data:labels,
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{rotate:45,color:'#64748b'}
        },
        yAxis:{
            type:'value',
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{color:'#64748b'}
        },
        series:[
            makeTelemetryLine("Packets", "rgba(255,214,82,1)", packetCounts)
        ]
    });
    return chart;
}

function renderDailySnapshotNodesGatewaysChart(domId,data){
    const el=document.getElementById(domId);
    if(!el) return;
    const chart=echarts.getInstanceByDom(el) || echarts.init(el);
    const labels=data.map(d=>d.date||"");
    const nodeCounts=data.map(d=>d.node_count??0);
    const gatewayCounts=data.map(d=>d.gateway_count??0);

    chart.setOption({
        backgroundColor:'#ffffff',
        tooltip:{trigger:'axis'},
        legend:{
            data:['Nodes','Gateways'],
            textStyle:{color:'#64748b'}
        },
        grid:{left:'6%', right:'6%', bottom:'18%'},
        xAxis:{
            type:'category',
            data:labels,
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{rotate:45,color:'#64748b'}
        },
        yAxis:{
            type:'value',
            axisLine:{lineStyle:{color:'#c3cfdf'}},
            axisLabel:{color:'#64748b'}
        },
        series:[
            makeTelemetryLine("Nodes", "rgba(79,155,255,1)", nodeCounts),
            makeTelemetryLine("Gateways", "rgba(138,255,108,1)", gatewayCounts)
        ]
    });
    return chart;
}


// --- Packet Type Pie Chart ---
async function fetchPacketTypeBreakdown(channel=null) {
    const portnums = [1,3,4,67,70,71];
    const requests = portnums.map(async pn => {
        const data = await fetchStats('hour',24,pn,channel);
        const total = (data || []).reduce((sum,d)=>sum+(d.count??d.packet_count??0),0);
        return {portnum: pn, count: total};
    });

    const allData = await fetchStats('hour',24,null,channel);
    const totalAll = allData.reduce((sum,d)=>sum+(d.count??d.packet_count??0),0);

    const results = await Promise.all(requests);
    const trackedTotal = results.reduce((sum,d)=>sum+d.count,0);
    const other = Math.max(totalAll - trackedTotal,0);
    if(other>0) results.push({portnum:"other", count:other});
    return results;
}

// --- Init ---
let chartHourlyAll, chartPortnum1, chartPortnum3, chartPortnum4, chartPortnum67, chartPortnum70, chartPortnum71;
let chartDailyAll, chartDailyPortnum1;
let chartDailySnapshotPackets, chartDailySnapshotNodesGateways;
let chartHwModel, chartRole, chartChannel;
let chartGatewayChannel, chartGatewayRole, chartGatewayFirmware;
let chartPacketTypes;
let defaultPacketTypesData = [];
let dailySnapshots = [];

function renderSnapshotCharts(){
    const packetsRange = document.getElementById("snapshotPacketsRange")?.value || "all";
    const nodesGatewaysRange = document.getElementById("snapshotNodesGatewaysRange")?.value || "all";
    chartDailySnapshotPackets = renderDailySnapshotPacketsChart(
        "chart_daily_snapshot_packets",
        filterSnapshotsByRange(dailySnapshots, packetsRange)
    );
    chartDailySnapshotNodesGateways = renderDailySnapshotNodesGatewaysChart(
        "chart_daily_snapshot_nodes_gateways",
        filterSnapshotsByRange(dailySnapshots, nodesGatewaysRange)
    );
}

async function init(){
    // Channel selector
    const channels = await fetchChannels();
    const select = document.getElementById("channelSelect");
    channels.forEach(ch=>{
        const opt = document.createElement("option");
        opt.value = ch;
        opt.textContent = ch;
        select.appendChild(opt);
    });

    // Daily snapshot histogram
    dailySnapshots = await fetchDailySnapshots();
    renderSnapshotCharts();

    // Daily port 1
    const dailyPort1Data=await fetchStats('day',14,1);
    updateTotalCount('total_daily_portnum_1',dailyPort1Data);
    chartDailyPortnum1=renderChart('chart_daily_portnum_1',dailyPort1Data,'bar','#ff5722');

    // Hourly all ports
    const hourlyAllData=await fetchStats('hour',24);
    updateTotalCount('total_hourly_all',hourlyAllData);
    chartHourlyAll=renderChart('chart_hourly_all',hourlyAllData,'bar','#168e84');

    // Hourly per port
    const portnums=[1,3,4,67,70,71];
    const colors=['#ff5722','#2196f3','#9c27b0','#b88a15','#795548','#4caf50'];
    const domIds=['chart_portnum_1','chart_portnum_3','chart_portnum_4','chart_portnum_67','chart_portnum_70','chart_portnum_71'];
    const totalIds=['total_portnum_1','total_portnum_3','total_portnum_4','total_portnum_67','total_portnum_70','total_portnum_71'];

    const allData=await Promise.all(portnums.map(pn=>fetchStats('hour',24,pn)));
    for(let i=0;i<portnums.length;i++){
        updateTotalCount(totalIds[i],allData[i]);
        window['chartPortnum'+portnums[i]]=renderChart(domIds[i],allData[i],'bar',colors[i]);
    }

    // Nodes for breakdown + summary node count
    const nodes=await fetchNodes();
    chartHwModel=renderPieChart("chart_hw_model",processCountField(nodes,"hw_model"),"Hardware");
    chartRole=renderPieChart("chart_role",processCountField(nodes,"role"),"Role");
    chartChannel=renderPieChart("chart_channel",processCountField(nodes,"channel"),"Channel");

    const gateways = nodes.filter(n => n.is_mqtt_gateway);
    chartGatewayChannel = renderPieChart(
        "chart_gateway_channel",
        processCountField(gateways, "channel"),
        "Gateway Channel"
    );
    chartGatewayRole = renderPieChart(
        "chart_gateway_role",
        processCountField(gateways, "role"),
        "Gateway Role"
    );
    chartGatewayFirmware = renderPieChart(
        "chart_gateway_firmware",
        processCountField(gateways, "firmware"),
        "Gateway Firmware"
    );

    const summaryNodesEl = document.getElementById("summary_nodes");
    if (summaryNodesEl) {
        summaryNodesEl.textContent = nodes.length.toLocaleString();
    }
    const summaryGatewaysEl = document.getElementById("summary_gateways");
    if (summaryGatewaysEl) {
        summaryGatewaysEl.textContent = gateways.length.toLocaleString();
    }

    // Packet types pie
    const packetSeries = portnums.map((pn, i) => ({ portnum: pn, data: allData[i] }));
    const packetTypesData = buildPacketTypeBreakdownFromSeries(hourlyAllData, packetSeries);
    defaultPacketTypesData = packetTypesData;
    const formatted = packetTypesData
        .filter(d=>d.count>0)
        .map(d=>({
            name: d.portnum==="other"
                ? "Other"
                : (PORTNUM_LABELS[d.portnum]||`Port ${d.portnum}`),
            value: d.count
        }));
    chartPacketTypes = renderPieChart("chart_packet_types",formatted,"Packet Types (Last 24h)");

    // Total packet + total seen from /api/stats/count
    try {
        const countsRes = await fetch("/api/stats/count");
        if (countsRes.ok) {
            const countsJson = await countsRes.json();
            const elPackets = document.getElementById("summary_packets");
            const elSeen = document.getElementById("summary_seen");
            if (elPackets) {
                elPackets.textContent = (countsJson.total_packets || 0).toLocaleString();
            }
            if (elSeen) {
                elSeen.textContent = (countsJson.total_seen || 0).toLocaleString();
            }
        }
    } catch (err) {
        console.error("Failed to load /api/stats/count:", err);
    }
}

window.addEventListener('resize',()=>{
    document.querySelectorAll('.chart').forEach(el => echarts.getInstanceByDom(el)?.resize());
    modalChart?.resize();
});

const modal=document.getElementById("chartModal");
const modalChartEl=document.getElementById("modalChart");
let modalChart=null;

document.querySelectorAll(".expand-btn").forEach(btn=>{
    btn.addEventListener("click",()=>{
        const chartId=btn.getAttribute("data-chart");
        const sourceChart=echarts.getInstanceByDom(document.getElementById(chartId));
        if(!sourceChart)return;
        modal.style.display="flex";
        modalChart=echarts.init(modalChartEl);
        modalChart.setOption(sourceChart.getOption());
    });
});

document.getElementById("closeModal").addEventListener("click",()=>{
    modal.style.display="none";
    modalChart?.dispose();
    modalChart=null;
});

function downloadCSV(filename,rows){
    const csvContent=rows.map(r=>r.map(v=>`"${v}"`).join(",")).join("\n");
    const blob=new Blob([csvContent],{type:"text/csv;charset=utf-8;"});
    const link=document.createElement("a");
    link.href=URL.createObjectURL(blob);
    link.setAttribute("download",filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

document.querySelectorAll(".export-btn").forEach(btn=>{
    btn.addEventListener("click",()=>{
        const chartId=btn.getAttribute("data-chart");
        const chart=echarts.getInstanceByDom(document.getElementById(chartId));
        if(!chart)return;
        const option=chart.getOption();
        let rows=[];
        if(option.series[0].type==="bar"||option.series[0].type==="line"){
            const xData=option.xAxis[0].data;
            const series = option.series || [];
            if(series.length > 1){
                const headers = ["Period", ...series.map(s => s.name || "Series")];
                rows.push(headers);
                for(let i=0;i<xData.length;i++){
                    const row=[xData[i]];
                    series.forEach(s=>{
                        row.push((s.data && s.data[i]!==undefined) ? s.data[i] : "");
                    });
                    rows.push(row);
                }
            }else{
                rows.push(["Period","Count"]);
                const yData=series[0].data;
                for(let i=0;i<xData.length;i++) rows.push([xData[i],yData[i]]);
            }
        }
        if(option.series[0].type==="pie"){
            rows.push(["Name","Value","Percentage"]);
            const total=option.series[0].data.reduce((sum,d)=>sum+d.value,0);
            option.series[0].data.forEach(d=>{
                const percent=Math.round((d.value/total)*100);
                rows.push([d.name,d.value,percent+"%"]);
            });
        }
        downloadCSV(chartId+".csv",rows);
    });
});

document.getElementById("channelSelect").addEventListener("change", async (e)=>{
    const channel = e.target.value;
    const packetTypesData = channel ? await fetchPacketTypeBreakdown(channel) : defaultPacketTypesData;
    const formatted = packetTypesData
        .filter(d=>d.count>0)
        .map(d=>({
            name: d.portnum==="other"
                ? "Other"
                : (PORTNUM_LABELS[d.portnum]||`Port ${d.portnum}`),
            value: d.count
        }));
    chartPacketTypes?.dispose();
    chartPacketTypes = renderPieChart("chart_packet_types",formatted,"Packet Types (Last 24h)");
});

document.getElementById("snapshotPacketsRange")?.addEventListener("change", renderSnapshotCharts);
document.getElementById("snapshotNodesGatewaysRange")?.addEventListener("change", renderSnapshotCharts);

// Kick everything off
init();

// --- Load config and translations ---
async function loadConfigAndTranslations() {
    let langCode = "en";
    try {
        if (window.site_config?.site) {
            langCode = window.site_config.site.language || "en";
        } else {
            const resConfig = await fetch("/api/config");
            const cfg = await resConfig.json();
            window.site_config = cfg;
            langCode = cfg?.site?.language || "en";
        }
    } catch(err) {
        console.error("Failed to load /api/config:", err);
        window.site_config = { site: { language: "en" } };
    }

    try {
        const resLang = await fetch(`/api/lang?lang=${langCode}&section=stats`);
        window.statsTranslations = await resLang.json();
    } catch(err) {
        console.error("Stats translation load failed:", err);
        window.statsTranslations = {};
    }

    // Apply translations
    const t = window.statsTranslations || {};
    document.querySelectorAll("[data-translate-lang]").forEach(el=>{
        const key = el.getAttribute("data-translate-lang");
        if(t[key]) el.textContent = t[key];
    });
}

// Call after init
loadConfigAndTranslations();
</script>
{% endblock %}