{% extends 'base.html' %}
{% load static %}
{% block title %}简单分析 - 天璇{% endblock %}
{% block content %}
<style>
    /* ── Step progress bar ────────────────────────────── */
    .sa-progress {
        display: flex; justify-content: center; gap: 0; margin-bottom: 2rem;
        counter-reset: step;
    }
    .sa-progress .sp-item {
        flex: 1; text-align: center; position: relative; counter-increment: step;
        font-size: 0.85rem; color: #999; padding-top: 2rem;
    }
    .sa-progress .sp-item::before {
        content: counter(step);
        position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 28px; height: 28px; border-radius: 50%;
        background: #e0e0e0; color: #666;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 0.85rem; z-index: 1;
    }
    .sa-progress .sp-item::after {
        content: ''; position: absolute; top: 14px; left: 50%; width: 100%;
        height: 2px; background: #e0e0e0; z-index: 0;
    }
    .sa-progress .sp-item:last-child::after { display: none; }
    .sa-progress .sp-item.active { color: #4361ee; font-weight: 600; }
    .sa-progress .sp-item.active::before { background: #4361ee; color: #fff; }
    .sa-progress .sp-item.done { color: #43aa8b; }
    .sa-progress .sp-item.done::before { background: #43aa8b; color: #fff; }
    .sa-progress .sp-item.done::after { background: #43aa8b; }

    /* ── Step sections ───────────────────────────────── */
    .sa-step { display: none; }
    .sa-step.active { display: block; }

    /* ── Upload zone ─────────────────────────────────── */
    .sa-dropzone {
        border: 2px dashed #ccc; border-radius: 12px; padding: 3rem 2rem;
        text-align: center; cursor: pointer; transition: all 0.2s;
        background: #fafcff;
    }
    .sa-dropzone:hover, .sa-dropzone.dragover { border-color: #4361ee; background: #eef2ff; }
    .sa-dropzone .icon { font-size: 3rem; margin-bottom: 0.5rem; }
    .sa-dropzone .hint { color: #999; font-size: 0.85rem; margin-top: 0.5rem; }
    .sa-file-list { margin-top: 1rem; }
    .sa-file-item {
        display: flex; align-items: center; gap: 0.5rem;
        padding: 0.4rem 0.6rem; background: #f5f5f5; border-radius: 4px;
        margin: 0.25rem 0; font-size: 0.85rem;
    }
    .sa-file-item .remove { color: #dc3545; cursor: pointer; margin-left: auto; font-weight: 700; }

    /* ── CNAM selector ───────────────────────────────── */
    .sa-cnam-list {
        max-height: 250px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px;
    }
    .sa-cnam-item {
        display: flex; align-items: center; gap: 0.75rem;
        padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.15s;
        border-bottom: 1px solid #f0f0f0;
    }
    .sa-cnam-item:hover { background: #f0f4ff; }
    .sa-cnam-item.selected { background: #d4e6ff; font-weight: 600; }
    .sa-cnam-item .val { flex: 1; font-size: 0.9rem; }
    .sa-cnam-item .cnt { font-size: 0.8rem; color: #666; min-width: 60px; text-align: right; }
    .sa-cnam-item .bar-wrap { width: 100px; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
    .sa-cnam-item .bar { height: 100%; background: #4361ee; border-radius: 3px; transition: width 0.3s; }

    /* ── Preview table ───────────────────────────────── */
    .sa-preview-wrap {
        max-height: 400px; overflow: auto; border: 1px solid #eee; border-radius: 6px;
    }
    .sa-preview-wrap table { font-size: 0.75rem; }
    .sa-preview-wrap th { position: sticky; top: 0; background: #f5f5f5; z-index: 1; white-space: nowrap; }
    .sa-preview-wrap td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Cluster results ─────────────────────────────── */
    .sa-cluster-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem; margin: 1rem 0;
    }
    .sa-cluster-card {
        background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
        padding: 0.75rem; text-align: center; cursor: pointer;
        transition: all 0.15s;
    }
    .sa-cluster-card:hover { border-color: #4361ee; box-shadow: 0 2px 8px rgba(67,97,238,0.15); }
    .sa-cluster-card .label { font-size: 1.1rem; font-weight: 700; }
    .sa-cluster-card .size { font-size: 0.8rem; color: #666; }
    .sa-cluster-card.noise { border-style: dashed; opacity: 0.7; }

    /* ── Map layout ──────────────────────────────────── */
    .sa-map-row { display: flex; gap: 1rem; margin: 1rem 0; }
    .sa-map-container { flex: 1; height: 550px; border-radius: 8px; overflow: hidden; border: 1px solid #e0e0e0; }
    .sa-legend { width: 240px; max-height: 550px; overflow-y: auto; padding: 0.5rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; }
    .sa-legend-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; font-size: 0.85rem; }
    .sa-legend-item .color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
    .sa-legend-item.hidden { opacity: 0.3; }

    /* ── Cluster detail panel ────────────────────────── */
    .sa-detail-panel {
        position: fixed; top: 0; right: -520px; width: 500px; height: 100%;
        background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.15);
        z-index: 9999; transition: right 0.3s; overflow-y: auto;
        padding: 1.5rem;
    }
    .sa-detail-panel.open { right: 0; }
    .sa-detail-panel .close-btn {
        float: right; font-size: 1.5rem; cursor: pointer; border: none;
        background: none; color: #666; padding: 0 0.25rem;
    }
    .sa-detail-panel .close-btn:hover { color: #dc3545; }
    .sa-detail-panel .stat-row { display: flex; gap: 1rem; margin: 0.75rem 0; }
    .sa-detail-panel .stat-card {
        flex: 1; background: #f5f7fa; border-radius: 6px; padding: 0.75rem; text-align: center;
    }
    .sa-detail-panel .stat-card .num { font-size: 1.5rem; font-weight: 700; color: #1a1a2e; }
    .sa-detail-panel .stat-card .lbl { font-size: 0.75rem; color: #666; }
    .sa-tag { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.75rem; background: #e8f0fe; color: #4361ee; margin: 0.1rem; }
    .sa-detail-panel .ip-list { max-height: 200px; overflow-y: auto; font-size: 0.8rem; }
    .sa-detail-panel .section-title { font-size: 0.9rem; font-weight: 600; margin: 0.75rem 0 0.35rem; color: #1a1a2e; }

    /* ── Chart containers ────────────────────────────── */
    .sa-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
    .sa-chart-box { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 1rem; }
    .sa-chart-box h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: #555; }

    /* ── Loading overlay ─────────────────────────────── */
    .sa-loading {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.35); z-index: 99999;
        justify-content: center; align-items: center;
    }
    .sa-loading.show { display: flex; }
    .sa-loading .box {
        background: #fff; padding: 2rem; border-radius: 12px; text-align: center;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .sa-spinner {
        width: 40px; height: 40px; border: 4px solid #e0e0e0;
        border-top-color: #4361ee; border-radius: 50%;
        animation: sa-spin 0.8s linear infinite; margin: 0 auto 1rem;
    }
    @keyframes sa-spin { to { transform: rotate(360deg); } }

    /* ── Responsive ──────────────────────────────────── */
    @media (max-width: 900px) {
        .sa-map-row { flex-direction: column; }
        .sa-legend { width: 100%; max-height: 150px; }
        .sa-chart-row { grid-template-columns: 1fr; }
        .sa-detail-panel { width: 100%; right: -100%; }
    }
</style>

<!-- ── Loading overlay ──────────────────────────────── -->
<div class="sa-loading" id="saLoading">
    <div class="box">
        <div class="sa-spinner"></div>
        <div id="saLoadingMsg" style="color:#666;">处理中...</div>
    </div>
</div>

<!-- ── Cluster detail panel ─────────────────────────── -->
<div class="sa-detail-panel" id="saDetailPanel">
    <button class="close-btn" onclick="closeDetail()">✕</button>
    <h3 id="saDetailTitle">簇详情</h3>
    <div id="saDetailBody"></div>
</div>

<div class="card">
    <h2>📊 简单分析</h2>
    <p style="color:#666;margin-bottom:1.5rem;">四步完成：上传CSV → 筛选 → 聚类 → 地图可视化</p>

    <!-- Progress bar -->
    <div class="sa-progress">
        <div class="sp-item active" data-step="1">上传CSV</div>
        <div class="sp-item" data-step="2">筛选数据</div>
        <div class="sp-item" data-step="3">聚类分析</div>
        <div class="sp-item" data-step="4">地图可视化</div>
    </div>

    <!-- ══════════ Step 1: Upload ══════════ -->
    <div class="sa-step active" id="saStep1">
        <h3 style="margin-bottom:0.75rem;">📂 步骤一：上传 CSV</h3>

        <div class="sa-dropzone" id="saDropzone"
             ondragover="event.preventDefault(); this.classList.add('dragover')"
             ondragleave="this.classList.remove('dragover')"
             ondrop="handleDrop(event)">
            <div class="icon">☁️</div>
            <div>拖拽 CSV 文件到此处，或 <a href="#" onclick="document.getElementById('saFileInput').click();return false;">点击选择</a></div>
            <div class="hint">支持多文件，自动合并</div>
            <input type="file" id="saFileInput" accept=".csv" multiple
                   style="display:none" onchange="handleFiles(this.files)">
        </div>

        <div class="sa-file-list" id="saFileList"></div>

        <div id="saUploadResult" style="display:none;margin-top:1rem;">
            <div class="card" style="background:#f8faff;">
                <div><strong>总记录数：</strong><span id="saTotalRows">0</span></div>
                <div><strong>检测到的列：</strong><span id="saDetectedCols"></span></div>
                <div style="margin-top:0.5rem;" id="saMissingCols" class="badge badge-warning"></div>
            </div>

            <h4 style="margin:1rem 0 0.5rem;">目标类别（cnam）频次 — 自动选中最多的一项</h4>
            <div class="sa-cnam-list" id="saCnamList"></div>

            <button class="btn btn-primary" style="margin-top:1rem;" onclick="goStep(2)">
                下一步：筛选 → &nbsp;▶
            </button>
        </div>
    </div>

    <!-- ══════════ Step 2: Filter ══════════ -->
    <div class="sa-step" id="saStep2">
        <h3 style="margin-bottom:0.75rem;">🔍 步骤二：数据筛选</h3>

        <div class="card" style="background:#f8faff;">
            <div class="grid-3">
                <div><strong>筛选条件：</strong></div>
                <div>cnam = <span id="saFilterCnamVal" style="font-weight:700;color:#4361ee;">—</span></div>
                <div>cnrs = '+' <span style="color:#999;">且</span> isrs = '+'</div>
            </div>
            <div style="margin-top:0.5rem;">
                <span id="saFilteredCount" style="font-size:1.2rem;font-weight:700;">0</span>
                <span style="color:#666;"> 条记录符合条件</span>
                <span id="saFilterTotal" style="color:#999;margin-left:0.5rem;"></span>
            </div>
        </div>

        <h4 style="margin:1rem 0 0.5rem;">数据预览（前20行）</h4>
        <div class="sa-preview-wrap" id="saPreviewWrap">
            <table>
                <thead><tr id="saPreviewHeader"></tr></thead>
                <tbody id="saPreviewBody"></tbody>
            </table>
        </div>

        <div id="saFilterError" style="display:none;margin-top:0.75rem;"></div>

        <button class="btn btn-primary" style="margin-top:1rem;" onclick="goStep(3)">
            下一步：聚类 → &nbsp;▶
        </button>
        <button class="btn" style="margin-top:1rem;margin-left:0.5rem;" onclick="goStep(1)">← 返回</button>
    </div>

    <!-- ══════════ Step 3: Cluster ══════════ -->
    <div class="sa-step" id="saStep3">
        <h3 style="margin-bottom:0.75rem;">🧩 步骤三：聚类分析</h3>

        <div class="card" style="background:#f8faff;">
            <h4>聚类模式</h4>
            <div style="margin:0.75rem 0;">
                <label style="display:block;padding:0.5rem;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:0.5rem;cursor:pointer;background:#fff;">
                    <input type="radio" name="clusterMode" value="geo" checked onchange="toggleClusterMode()">
                    <strong>📍 地理位置聚类（HDBSCAN）</strong>
                    <span style="color:#666;font-size:0.85rem;display:block;margin-left:1.5rem;">
                        使用源IP经纬度，自动发现密集区域
                    </span>
                </label>
                <label style="display:block;padding:0.5rem;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:0.5rem;cursor:pointer;background:#fff;">
                    <input type="radio" name="clusterMode" value="subnet" onchange="toggleClusterMode()">
                    <strong>🌐 IP 子网软聚类</strong>
                    <span style="color:#666;font-size:0.85rem;display:block;margin-left:1.5rem;">
                        按 /24 子网分组，孤立IP标记为噪声
                    </span>
                </label>
            </div>

            <div id="saGeoParams">
                <div class="param-row" style="margin:0.5rem 0;">
                    <label style="font-size:0.85rem;">最小簇规模 (min_cluster_size)：</label>
                    <input type="range" id="saMinClusterSize" min="3" max="50" value="5"
                           oninput="document.getElementById('saMinClusterVal').textContent=this.value">
                    <span id="saMinClusterVal" style="font-weight:700;min-width:30px;">5</span>
                </div>
                <div class="param-row" style="margin:0.5rem 0;">
                    <label style="font-size:0.85rem;">聚合半径 (epsilon)：</label>
                    <input type="range" id="saEpsilon" min="100" max="2000" value="500" step="50"
                           oninput="document.getElementById('saEpsilonVal').textContent=this.value + 'm'">
                    <span id="saEpsilonVal" style="font-weight:700;min-width:50px;">500m</span>
                    <span style="font-size:0.75rem;color:#999;margin-left:0.5rem;">多近算同一区域</span>
                </div>
            </div>

            <div id="saSubnetParams" style="display:none;">
                <div class="param-row" style="margin:0.5rem 0;">
                    <label style="font-size:0.85rem;">最小记录数/子网 (min_records)：</label>
                    <input type="range" id="saMinRecords" min="1" max="20" value="3"
                           oninput="document.getElementById('saMinRecordsVal').textContent=this.value">
                    <span id="saMinRecordsVal" style="font-weight:700;min-width:30px;">3</span>
                </div>
                <div class="param-row" style="margin:0.5rem 0;">
                    <label style="font-size:0.85rem;">最大簇规模 (max_cluster_size)：</label>
                    <input type="range" id="saMaxClusterSize" min="50" max="500" value="100" step="10"
                           oninput="document.getElementById('saMaxClusterSizeVal').textContent=this.value">
                    <span id="saMaxClusterSizeVal" style="font-weight:700;min-width:40px;">100</span>
                    <span style="font-size:0.75rem;color:#999;margin-left:0.5rem;">超出后自动地理拆分</span>
                </div>
            </div>

            <button class="btn btn-primary" onclick="runCluster()" style="margin-top:0.5rem;">
                🚀 开始分析
            </button>
        </div>

        <div id="saClusterResult" style="display:none;">
            <div class="card" style="background:#f0faf0;margin-top:0.75rem;">
                <div class="grid-3">
                    <div><strong>簇数量</strong><div style="font-size:1.5rem;font-weight:700;" id="saNClusters">0</div></div>
                    <div><strong>噪声点</strong><div style="font-size:1.5rem;font-weight:700;color:#999;" id="saNNoise">0</div></div>
                    <div><strong>有效点数</strong><div style="font-size:1.5rem;font-weight:700;" id="saNValid">0</div></div>
                </div>
            </div>

            <div class="sa-cluster-grid" id="saClusterCards"></div>

            <button class="btn btn-primary" style="margin-top:0.75rem;" onclick="goStep(4)">
                下一步：地图可视化 → &nbsp;▶
            </button>
            <button class="btn" style="margin-top:0.75rem;margin-left:0.5rem;" onclick="goStep(2)">← 返回</button>
        </div>
    </div>

    <!-- ══════════ Step 4: Map ═════════════ -->
    <div class="sa-step" id="saStep4">
        <h3 style="margin-bottom:0.75rem;">🗺️ 步骤四：可视化交互地图</h3>

        <div class="sa-map-row">
            <div class="sa-map-container" id="saMap"></div>
            <div class="sa-legend" id="saLegend">
                <div style="font-weight:600;margin-bottom:0.5rem;">簇图例</div>
                <div id="saLegendItems"></div>
            </div>
        </div>

        <div class="sa-chart-row" id="saCharts">
            <div class="sa-chart-box">
                <h4>簇记录数柱状图</h4>
                <canvas id="saBarChart" height="200"></canvas>
            </div>
            <div class="sa-chart-box">
                <h4>簇内流量占比</h4>
                <canvas id="saPieChart" height="200"></canvas>
            </div>
        </div>

        <div style="margin-top:1rem;text-align:center;">
            <button class="btn" onclick="exportClusterCSV()">📥 导出当前簇数据</button>
            <button class="btn" style="margin-left:0.5rem;" onclick="resetAll()">🔄 重新开始</button>
        </div>
    </div>
</div>

<!-- ── Leaflet + Chart.js (local vendor assets) ─────────── -->
<link rel="stylesheet" href="{% static 'simple_analysis/vendor/leaflet.css' %}" />
<script src="{% static 'simple_analysis/vendor/leaflet.js' %}"></script>
<script src="{% static 'simple_analysis/vendor/chart.umd.min.js' %}"></script>

<script>
/* ── State ────────────────────────────────────────────── */
const SA = {
    sessionId: null,
    topCnam: null,
    colNames: [],
    detectedCols: {},
    clusterLabels: [],
    clusterMap: {},
    dataPoints: {},  // {cluster_label: [{lat, lon, idx}, ...]}
    clusterMode: 'geo',
    map: null,
    pointLayer: null,
    centerLayer: null,
    noisePoints: [], // separate storage for noise point coords
    barChart: null,
    pieChart: null,
    hiddenClusters: new Set(),
    showNoise: true,
};

/* ── Navigation ──────────────────────────────────────── */
function goStep(n) {
    // Prevent skipping ahead without completing prior steps
    if (n === 3 && !SA.clusterLabels.length && !document.getElementById('saClusterResult').querySelector('.sa-cluster-card')) {
        // Allow if cluster results are displayed (user likely wants to re-cluster)
    }
    if (n === 2 && SA.sessionId) {
        // Auto-run filter when entering step 2 with data available
        runFilter();
    }
    if (n === 4 && (!Object.keys(SA.clusterMap).length || !SA.clusterLabels.length)) {
        showError('请先完成聚类分析（步骤三）');
        return;
    }
    document.querySelectorAll('.sa-step').forEach(el => el.classList.remove('active'));
    document.getElementById('saStep' + n).classList.add('active');
    document.querySelectorAll('.sp-item').forEach(el => {
        const step = parseInt(el.dataset.step);
        el.classList.remove('active', 'done');
        if (step === n) el.classList.add('active');
        else if (step < n) el.classList.add('done');
    });
    if (n === 4) initMap();
    window.scrollTo(0, 0);
}

/* ── Loading ──────────────────────────────────────────── */
function showLoading(msg) {
    document.getElementById('saLoadingMsg').textContent = msg || '处理中...';
    document.getElementById('saLoading').classList.add('show');
}
function hideLoading() {
    document.getElementById('saLoading').classList.remove('show');
}

/* ── Step 1: Upload ───────────────────────────────────── */
function handleDrop(e) {
    e.preventDefault();
    document.getElementById('saDropzone').classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
}

function handleFiles(files) {
    if (!files.length) return;
    const list = document.getElementById('saFileList');
    list.innerHTML = '';
    Array.from(files).forEach(f => {
        const div = document.createElement('div');
        div.className = 'sa-file-item';
        div.innerHTML = `📄 ${f.name} (${(f.size/1024).toFixed(1)} KB)`;
        list.appendChild(div);
    });
    uploadFiles(files);
}

function uploadFiles(files) {
    const formData = new FormData();
    Array.from(files).forEach(f => formData.append('files', f));

    showLoading('正在上传和解析CSV...');
    fetch('/simple/upload/', {
        method: 'POST',
        body: formData,
        headers: {'X-CSRFToken': getCSRF()},
    })
    .then(r => r.json())
    .then(data => {
        hideLoading();
        if (data.error) { showError(data.error); return; }

        SA.sessionId = data.session_id;
        SA.colNames = data.columns || [];
        SA.detectedCols = data.detected_columns || {};
        SA.topCnam = data.top_cnam ? data.top_cnam.value : null;

        // If top cnam is empty, select the first non-empty instead
        const freq = data.cnam_frequency || [];
        const nonEmptyCnam = freq.find(c => c.value && c.value !== '(空)');
        if (!SA.topCnam || SA.topCnam === '(空)') {
            if (nonEmptyCnam) {
                SA.topCnam = nonEmptyCnam.value;
                // Make the non-empty item selected in the UI
                setTimeout(() => {
                    const items = document.querySelectorAll('.sa-cnam-item');
                    items.forEach(el => {
                        if (el.dataset.value === SA.topCnam) {
                            el.classList.add('selected');
                            const radio = el.querySelector('input');
                            if (radio) radio.checked = true;
                        } else {
                            el.classList.remove('selected');
                        }
                    });
                }, 50);
            }
        }
        document.getElementById('saFilterCnamVal').textContent = SA.topCnam || '—';

        document.getElementById('saTotalRows').textContent = data.total_rows.toLocaleString();

        // Detected columns
        const dc = data.detected_columns || {};
        const found = Object.entries(dc).filter(([,v]) => v).map(([k,v]) => `${k}→${v}`);
        document.getElementById('saDetectedCols').textContent = found.join('、') || '（无自动匹配）';

        // Missing critical columns
        const missing = Object.entries(dc).filter(([,v]) => !v).map(([k]) => k);
        const mcEl = document.getElementById('saMissingCols');
        if (missing.length) {
            mcEl.style.display = 'block';
            mcEl.textContent = '⚠ 未检测到列: ' + missing.join(', ');
        } else {
            mcEl.style.display = 'none';
        }

        // CNAM frequency
        renderCnamList(data.cnam_frequency || []);

        document.getElementById('saUploadResult').style.display = 'block';
        showSuccess(`上传成功！共 ${data.total_rows.toLocaleString()} 条记录`);
    })
    .catch(err => { hideLoading(); showError('上传失败: ' + err.message); });
}

function renderCnamList(freq) {
    const el = document.getElementById('saCnamList');
    if (!freq.length) {
        el.innerHTML = '<div class="empty-state"><p>未检测到 cnam 列</p></div>';
        return;
    }
    el.innerHTML = '';
    freq.forEach((item, idx) => {
        const div = document.createElement('div');
        div.className = 'sa-cnam-item' + (idx === 0 ? ' selected' : '');
        div.dataset.value = item.value;
        div.innerHTML = `
            <input type="radio" name="cnamRadio" value="${escapeHtml(item.value)}"
                   ${idx === 0 ? 'checked' : ''}
                   onchange="selectCnam('${escapeHtml(item.value)}')" style="display:none;">
            <span class="val">${escapeHtml(item.value)}</span>
            <span class="bar-wrap"><span class="bar" style="width:${item.pct}%"></span></span>
            <span class="cnt">${item.count.toLocaleString()} (${item.pct}%)</span>
        `;
        div.onclick = () => {
            el.querySelectorAll('.sa-cnam-item').forEach(x => x.classList.remove('selected'));
            div.classList.add('selected');
            const radio = div.querySelector('input');
            if (radio) { radio.checked = true; selectCnam(item.value); }
        };
        el.appendChild(div);
    });
}

function selectCnam(val) {
    SA.topCnam = val;
    document.getElementById('saFilterCnamVal').textContent = val;
}

/* ── Step 2: Filter ───────────────────────────────────── */
function runFilter() {
    // Ensure topCnam is a string, not object
    const cnamStr = (typeof SA.topCnam === 'object' && SA.topCnam !== null)
        ? (SA.topCnam.value || '')
        : (SA.topCnam || '');
    showLoading('正在筛选数据...');
    fetch('/simple/filter/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCSRF()},
        body: JSON.stringify({
            session_id: SA.sessionId,
            selected_cnam: cnamStr,
        }),
    })
    .then(r => r.json())
    .then(data => {
        hideLoading();
        if (data.error) {
            const errEl = document.getElementById('saFilterError');
            errEl.style.display = 'block';
            errEl.innerHTML = `<div class="card" style="background:#fff3cd;">⚠ ${escapeHtml(data.error)}</div>`;
            document.getElementById('saFilteredCount').textContent = '0';
            return;
        }
        document.getElementById('saFilterError').style.display = 'none';
        document.getElementById('saFilteredCount').textContent = data.filtered_rows.toLocaleString();
        document.getElementById('saFilterTotal').textContent = `/ ${data.total_before_filter.toLocaleString()} 总记录`;
        renderPreview(data.preview_columns, data.preview_rows);
    })
    .catch(err => { hideLoading(); showError('筛选失败: ' + err.message); });
}

function renderPreview(cols, rows) {
    const hdr = document.getElementById('saPreviewHeader');
    hdr.innerHTML = cols.map(c => `<th>${escapeHtml(c)}</th>`).join('');

    const body = document.getElementById('saPreviewBody');
    body.innerHTML = rows.map(row => {
        return '<tr>' + cols.map(c => {
            const v = row[c];
            return `<td title="${escapeHtml(v || '')}">${escapeHtml(v || '')}</td>`;
        }).join('') + '</tr>';
    }).join('');
}

/* ── Step 3: Cluster ──────────────────────────────────── */
function toggleClusterMode() {
    const mode = document.querySelector('input[name="clusterMode"]:checked').value;
    SA.clusterMode = mode;
    document.getElementById('saGeoParams').style.display = mode === 'geo' ? 'block' : 'none';
    document.getElementById('saSubnetParams').style.display = mode === 'subnet' ? 'block' : 'none';
}

function runCluster() {
    const mode = document.querySelector('input[name="clusterMode"]:checked').value;
    const minClusterSize = parseInt(document.getElementById('saMinClusterSize').value);
    const epsilonMeters = parseInt(document.getElementById('saEpsilon').value);
    // Convert meters to radians for haversine: 1 radian ≈ 6371000m (Earth radius)
    const epsilonRad = epsilonMeters / 6371000;
    const minRecords = parseInt(document.getElementById('saMinRecords').value);
    const maxClusterSize = parseInt(document.getElementById('saMaxClusterSize').value);

    showLoading('正在执行聚类分析...');
    fetch('/simple/cluster/', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCSRF()},
        body: JSON.stringify({
            session_id: SA.sessionId,
            mode: mode,
            min_cluster_size: minClusterSize,
            cluster_selection_epsilon: epsilonRad,
            min_records_per_subnet: minRecords,
            max_cluster_size: maxClusterSize,
        }),
    })
    .then(r => r.json())
    .then(data => {
        hideLoading();
        if (data.error) { showError(data.error); return; }

        SA.clusterLabels = data.labels || [];
        SA.clusterMap = data.clusters || {};
        SA.dataPoints = data.data_points || {};

        document.getElementById('saNClusters').textContent = data.n_clusters;
        document.getElementById('saNNoise').textContent = data.n_noise;
        document.getElementById('saNValid').textContent = data.n_valid_points;
        document.getElementById('saClusterResult').style.display = 'block';

        renderClusterCards(data.clusters);

        if (data.fallback_suggested) {
            showError('⚠ 聚类效果不佳（噪声>80%或仅1个簇），建议调整参数后重试');
        }

        showSuccess(`聚类完成！${data.n_clusters} 个簇，${data.n_noise} 个噪声点`);
    })
    .catch(err => { hideLoading(); showError('聚类失败: ' + err.message); });
}

function renderClusterCards(clusters) {
    const el = document.getElementById('saClusterCards');
    el.innerHTML = '';
    const sorted = Object.values(clusters).sort((a, b) => b.size - a.size);
    const colors = generateColors(Object.keys(clusters).length);

    sorted.forEach((c, idx) => {
        const div = document.createElement('div');
        div.className = 'sa-cluster-card' + (c.is_noise ? ' noise' : '');
        const color = c.is_noise ? '#ccc' : (colors[idx] || '#4361ee');
        div.style.borderLeft = `4px solid ${color}`;
        div.innerHTML = `
            <div class="label" style="color:${color};">${c.label === -1 ? '噪声' : '簇 ' + c.label}</div>
            <div class="size">${c.size.toLocaleString()} 条记录</div>
            ${c.n_unique_ips !== undefined ? `<div class="size">${c.n_unique_ips} 个IP</div>` : ''}
        `;
        if (c.label !== -1) {
            div.onclick = () => loadClusterDetail(c.label);
        }
        el.appendChild(div);
    });
}

/* ── Step 4: Map & Visualization ──────────────────────── */

// Tile providers in priority order — ArcGIS works in China
const TILE_PROVIDERS = [
    {
        name: 'ArcGIS',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
        attr: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ'
    },
    {
        name: 'ArcGIS Gray',
        url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}',
        attr: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ'
    },
    {
        name: 'OSM',
        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        attr: '&copy; OpenStreetMap contributors'
    },
];

function initMap() {
    const container = document.getElementById('saMap');
    if (SA.map) {
        container.style.height = '550px';
        setTimeout(() => {
            SA.map.invalidateSize();
            renderMapData();
        }, 200);
        return;
    }
    setTimeout(() => {
        container.style.height = '550px';
        // Start with global view [0, 0] zoom 2 as required
        SA.map = L.map('saMap', {
            center: [0, 0],
            zoom: 2,
            worldCopyJump: true,
        });
        // Try each tile provider in order until one loads
        tryTileProvider(0);
        setTimeout(() => SA.map.invalidateSize(), 300);
        renderMapData();
    }, 250);
}

function tryTileProvider(idx) {
    if (idx >= TILE_PROVIDERS.length || !SA.map) return;
    const provider = TILE_PROVIDERS[idx];
    const tileLayer = L.tileLayer(provider.url, {
        attribution: provider.attr,
        maxZoom: 18,
    });
    tileLayer.addTo(SA.map);

    // Detect if tiles fail to load, try next provider
    let tileError = false;
    tileLayer.on('tileerror', () => {
        if (!tileError) {
            tileError = true;
            console.warn('Tile provider failed:', provider.name);
            SA.map.removeLayer(tileLayer);
            tryTileProvider(idx + 1);
        }
    });
    SA._tileLayer = tileLayer;
}

function renderMapData() {
    if (!SA.map) return;

    // Remove old layers
    if (SA.pointLayer) SA.map.removeLayer(SA.pointLayer);
    if (SA.centerLayer) SA.map.removeLayer(SA.centerLayer);

    const clusters = SA.clusterMap;
    const dataPts = SA.dataPoints || {};
    const colors = generateColors(20);

    // Build point clusters and center markers
    const allPoints = [];
    const centerMarkers = [];

    // Sort clusters by size for consistent coloring
    const sortedClusters = Object.values(clusters)
        .filter(c => !c.is_noise)
        .sort((a, b) => b.size - a.size);

    let colorIdx = 0;

    // Render each cluster's points
    sortedClusters.forEach(c => {
        const lbl = c.label;
        if (SA.hiddenClusters.has(lbl)) return;
        const color = colors[colorIdx % colors.length];
        colorIdx++;

        const pts = dataPts[lbl] || [];
        pts.forEach(p => {
            if (p.lat == null || p.lon == null) return;
            const circle = L.circleMarker([p.lat, p.lon], {
                radius: 5,
                fillColor: color,
                color: '#fff',
                weight: 1,
                opacity: 0.8,
                fillOpacity: 0.7,
            });
            const tooltipHtml = `簇 ${lbl}<br>IP索引: ${p.idx}<br>${p.lat}, ${p.lon}`;
            circle.bindTooltip(tooltipHtml);
            allPoints.push(circle);
        });

        // Cluster center marker (star/pin)
        if (c.center_lat != null && c.center_lon != null) {
            const icon = L.divIcon({
                html: `<div style="background:${color};width:24px;height:24px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;">${lbl}</div>`,
                className: '',
                iconSize: [24, 24],
                iconAnchor: [12, 12],
            });
            const marker = L.marker([c.center_lat, c.center_lon], {icon});
            marker.bindTooltip(`簇 ${lbl}<br>${c.size} 条记录<br>${c.n_unique_ips} 个IP`, {direction: 'top'});
            marker.on('click', () => loadClusterDetail(lbl));
            centerMarkers.push(marker);
        }
    });

    // Render noise points (separate, always gray)
    const noisePts = dataPts[-1] || [];
    if (SA.showNoise) {
        noisePts.forEach(p => {
            if (p.lat == null || p.lon == null) return;
            const circle = L.circleMarker([p.lat, p.lon], {
                radius: 4,
                fillColor: '#aaa',
                color: '#888',
                weight: 1,
                opacity: 0.5,
                fillOpacity: 0.3,
            });
            circle.bindTooltip(`噪声点<br>${p.lat}, ${p.lon}`);
            allPoints.push(circle);
        });
    }

    SA.pointLayer = L.layerGroup(allPoints).addTo(SA.map);
    SA.centerLayer = L.layerGroup(centerMarkers).addTo(SA.map);

    // Fit bounds to show all points
    const boundsPoints = [];
    allPoints.forEach(p => {
        const ll = p.getLatLng();
        if (ll) boundsPoints.push(ll);
    });
    if (centerMarkers.length) {
        centerMarkers.forEach(m => boundsPoints.push(m.getLatLng()));
    }
    if (boundsPoints.length) {
        try {
            const bounds = L.latLngBounds(boundsPoints);
            SA.map.fitBounds(bounds, {padding: [50, 50], maxZoom: 12});
        } catch(e) {
            // Fallback: keep global view
            SA.map.setView([0, 0], 2);
        }
    }

    // Legend
    renderLegend(colors);
    renderCharts();
}

function renderLegend(colors) {
    const el = document.getElementById('saLegendItems');
    const sorted = Object.values(SA.clusterMap)
        .filter(c => !c.is_noise)
        .sort((a, b) => b.size - a.size);

    const html = [];
    // Noise toggle
    const noisePts = (SA.dataPoints[-1] || []).length;
    html.push(`<div class="sa-legend-item${!SA.showNoise ? ' hidden' : ''}"
                 onclick="toggleNoise()">
                <span class="color-dot" style="background:#aaa"></span>
                <span>噪声点 (${noisePts})</span>
            </div>`);

    sorted.forEach((c, idx) => {
        const color = colors[idx % colors.length];
        const hidden = SA.hiddenClusters.has(c.label);
        html.push(`<div class="sa-legend-item${hidden ? ' hidden' : ''}"
                     onclick="toggleCluster(${c.label})">
                    <span class="color-dot" style="background:${color}"></span>
                    <span>簇 ${c.label}</span>
                    <span style="color:#999;font-size:0.8rem;">${c.size}</span>
                </div>`);
    });
    el.innerHTML = html.join('');
}

function toggleNoise() {
    SA.showNoise = !SA.showNoise;
    renderMapData();
}

function toggleCluster(label) {
    if (SA.hiddenClusters.has(label)) SA.hiddenClusters.delete(label);
    else SA.hiddenClusters.add(label);
    renderMapData();
}

/* ── Charts ───────────────────────────────────────────── */
function renderCharts() {
    const sorted = Object.values(SA.clusterMap).filter(c => !c.is_noise).sort((a, b) => b.size - a.size);
    const labels = sorted.map(c => '簇 ' + c.label);
    const sizes = sorted.map(c => c.size);
    const colors = generateColors(sorted.length);

    // Bar chart
    const barCtx = document.getElementById('saBarChart').getContext('2d');
    if (SA.barChart) SA.barChart.destroy();
    SA.barChart = new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '记录数',
                data: sizes,
                backgroundColor: colors,
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, ticks: { precision: 0 } }
            }
        }
    });

    // Pie chart (traffic proportion, use record count as proxy)
    const pieCtx = document.getElementById('saPieChart').getContext('2d');
    if (SA.pieChart) SA.pieChart.destroy();
    SA.pieChart = new Chart(pieCtx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                data: sizes,
                backgroundColor: colors,
                borderWidth: 1,
                borderColor: '#fff',
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'right', labels: { font: { size: 11 } } }
            }
        }
    });
}

/* ── Cluster Detail ───────────────────────────────────── */
function loadClusterDetail(label) {
    showLoading('加载簇详情...');
    fetch(`/simple/cluster/${label}/?session_id=${SA.sessionId}`, {
        headers: {'X-CSRFToken': getCSRF()},
    })
    .then(r => r.json())
    .then(data => {
        hideLoading();
        if (data.error) { showError(data.error); return; }
        showDetailPanel(data);
    })
    .catch(err => { hideLoading(); showError('加载失败: ' + err.message); });
}

function showDetailPanel(data) {
    const panel = document.getElementById('saDetailPanel');
    const body = document.getElementById('saDetailBody');

    const ci = data.cluster_info || {};
    const traffic = data.traffic || {};

    let ipHtml = '';
    if (data.unique_ips && data.unique_ips.length) {
        const shown = data.unique_ips.slice(0, 20);
        const remainder = data.unique_ips.slice(20);
        ipHtml = `<div class="section-title">源 IP 地址（${data.unique_ips_count} 个）</div>
                  <div class="ip-list">${shown.map(ip => `<span class="sa-tag">${escapeHtml(ip)}</span>`).join('')}</div>`;
        if (remainder.length) {
            ipHtml += `<div style="font-size:0.8rem;color:#4361ee;cursor:pointer;" onclick="this.nextElementSibling.style.display='block';this.style.display='none'">
                        展开其余 ${remainder.length} 个...</div>
                       <div style="display:none;">${remainder.map(ip => `<span class="sa-tag">${escapeHtml(ip)}</span>`).join('')}</div>`;
        }
    }

    const topSec = (title, items) => {
        if (!items || !items.length) return '';
        return `<div class="section-title">${title}</div>
                <div>${items.map(i => `<span class="sa-tag">${escapeHtml(i.value)} (${i.pct}%)</span>`).join('')}</div>`;
    };

    body.innerHTML = `
        <div class="stat-row">
            <div class="stat-card"><div class="num">${data.size}</div><div class="lbl">记录数</div></div>
            <div class="stat-card"><div class="num">${data.unique_ips_count}</div><div class="lbl">唯一 IP</div></div>
            ${ci.center_lat ? `<div class="stat-card"><div class="num">${ci.center_lat}, ${ci.center_lon}</div><div class="lbl">中心坐标</div></div>` : ''}
        </div>
        ${traffic.total_bytes !== undefined ? `
        <div class="stat-row">
            <div class="stat-card"><div class="num">${(traffic.total_bytes/1024).toFixed(1)} KB</div><div class="lbl">总流量</div></div>
            ${traffic.avg_duration !== undefined ? `<div class="stat-card"><div class="num">${traffic.avg_duration.toFixed(2)}s</div><div class="lbl">平均时长</div></div>` : ''}
        </div>` : ''}
        ${ipHtml}
        ${topSec('高频目的 IP', data.top_dst_ips)}
        ${topSec('主要 TLS 版本', data.top_tls_versions)}
        ${topSec('主要加密套件', data.top_ciphers)}
        ${topSec('主要域名/SNI', data.top_sni)}
        ${topSec('协议分布', data.top_protocols)}
        ${topSec('目的端口', data.top_dst_ports)}
        ${data.geo_bounds ? `
        <div class="section-title">地理范围</div>
        <div style="font-size:0.8rem;color:#666;">
            纬度: ${data.geo_bounds.lat_min} ~ ${data.geo_bounds.lat_max}<br>
            经度: ${data.geo_bounds.lon_min} ~ ${data.geo_bounds.lon_max}
        </div>` : ''}
    `;

    document.getElementById('saDetailTitle').textContent = `簇 ${data.label} 画像`;
    panel.classList.add('open');
}

function closeDetail() {
    document.getElementById('saDetailPanel').classList.remove('open');
}

/* ── Export ────────────────────────────────────────────── */
function exportClusterCSV() {
    showLoading('导出中...');
    // Build CSV from cluster labels in memory — for simplicity, reload from server
    const payload = {
        session_id: SA.sessionId,
        labels: SA.clusterLabels,
    };
    // We'll export by returning a simple CSV via the cluster detail endpoint logic
    // For now, trigger download via blob
    try {
        // Gather label-count summary
        const rows = [['cluster_label', 'count']];
        const counts = {};
        SA.clusterLabels.forEach(l => { counts[l] = (counts[l] || 0) + 1; });
        Object.entries(counts).forEach(([k, v]) => rows.push([k, v]));
        const csv = rows.map(r => r.join(',')).join('\n');
        const blob = new Blob(['' + csv], {type: 'text/csv;charset=utf-8;'});
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `cluster_summary_${SA.sessionId}.csv`;
        a.click();
        URL.revokeObjectURL(a.href);
        showSuccess('导出成功');
    } catch(e) {
        showError('导出失败: ' + e.message);
    }
    hideLoading();
}

/* ── Reset ─────────────────────────────────────────────── */
function resetAll() {
    SA.sessionId = null;
    SA.clusterLabels = [];
    SA.clusterMap = {};
    SA.dataPoints = {};
    SA.hiddenClusters = new Set();
    SA.showNoise = true;
    document.getElementById('saFileList').innerHTML = '';
    document.getElementById('saUploadResult').style.display = 'none';
    document.getElementById('saClusterResult').style.display = 'none';
    document.getElementById('saPreviewWrap').querySelector('table').innerHTML = '';
    document.getElementById('saCnamList').innerHTML = '';
    if (SA.map) { SA.map.remove(); SA.map = null; }
    if (SA.barChart) { SA.barChart.destroy(); SA.barChart = null; }
    if (SA.pieChart) { SA.pieChart.destroy(); SA.pieChart = null; }
    goStep(1);
}

/* ── Helpers ──────────────────────────────────────────── */
function getCSRF() {
    const name = 'csrftoken';
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? match[2] : '';
}

function generateColors(n) {
    const palette = [
        '#4361ee', '#43aa8b', '#f72585', '#f4a261', '#e76f51',
        '#264653', '#2a9d8f', '#e9c46a', '#8ecae6', '#219ebc',
        '#023047', '#ffb703', '#fb8500', '#6a4c93', '#ff6b6b',
        '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dfe6e9',
    ];
    return Array.from({length: n}, (_, i) => palette[i % palette.length]);
}

function escapeHtml(str) {
    if (str == null) return '';
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

</script>
{% endblock %}