{{-- resources/views/data-sampler/sampler-cluster.blade.php --}}
{{-- Included from index.blade.php when activeSampler === 'cluster' --}}

<div
    id="cluster-app"
    style="font-family: 'Manrope', sans-serif;"
    x-data="{
        fileName: null,
        fileRows: null,
        fileCols: null,
        fileSize: null,
        columns: [],
        detectedColumns: [],
        uuidColumn: '',
        runBy: '',
        outputFormat: 'excel',
        randomSeed: '8821',
        get sampleSize() { return Alpine.store('sampleSize'); },
        get sampleSizeLabel() { return this.sampleSize ?? '-'; },
        jsonData: [],
        loading: false,
        error: null,

        clusterSelectMode: 'auto',
        clusterColumn: '',
        minRowsPerCluster: 0,
        maxClustersToPick: '',
        clusters: [],
        eligibleClusters: [],

        handleFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            this.fileName = file.name;
            this.fileSize = (file.size / 1024).toFixed(0) + ' KB';
            const reader = new FileReader();
            reader.onload = (e) => {
                const text = e.target.result;
                const lines = text.split('\n').filter(l => l.trim());
                this.fileRows = lines.length - 1;
                const headers = lines[0].replace(/^\uFEFF/, '').split(',').map(h => h.trim().replace(/\x22/g, ''));
                this.fileCols = headers.length;
                this.detectedColumns = headers;
                this.columns = headers;
                this.uuidColumn = headers.includes('submission_uuid') ? 'submission_uuid' : (headers[0] || '');
                this.clusterColumn = headers.includes('district') ? 'district' : (headers[0] || '');
                this.jsonData = lines.slice(1).map(line => {
                    const values = line.split(',').map(v => v.trim().replace(/\x22/g, ''));
                    return headers.reduce((obj, header, index) => {
                        obj[header] = values[index];
                        return obj;
                    }, {});
                });
                this.error = null;
            };
            reader.readAsText(file);
        },

        removeFile() {
            this.fileName = null;
            this.fileRows = null;
            this.fileCols = null;
            this.fileSize = null;
            this.detectedColumns = [];
            this.columns = [];
            this.uuidColumn = '';
            this.clusterColumn = '';
            this.jsonData = [];
            this.clusters = [];
        }
    }"
>

    {{-- ── Header Bar ─────────────────────────────────────────────────────── --}}
    <div class="bg-white rounded-2xl border border-[#e2e6ea] px-6 py-[18px] flex items-center justify-between mb-4">
        <div class="flex flex-col gap-0.5">
            <div class="flex items-center gap-2.5">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="9.5" stroke="#2563EB" stroke-width="1.8"/>
                    <path d="M12 11v5" stroke="#2563EB" stroke-width="1.8" stroke-linecap="round"/>
                    <circle cx="12" cy="7.5" r="1" fill="#2563EB"/>
                </svg>
                <span class="text-[16px] font-bold text-[#1c2b3a]">Cluster Sample</span>
            </div>
            <span class="text-[13px] text-[#7a8694] pl-[27px]">n=<span x-text="sampleSizeLabel">-</span></span>
        </div>
         <button
    @click="
        $dispatch('reset-sampler');
        window.dispatchEvent(new CustomEvent('open-sampling-modal'));
    "
    class="flex items-center gap-2 px-[22px] py-[11px] rounded-full bg-[#D6E4FF] text-[#1a4fc4] text-[13px] font-bold tracking-[0.05em] border-none hover:bg-[#c0d4f7] transition-all duration-150"
>
    CHANGE METHOD
</button>
    </div>

    {{-- ── TWO-COLUMN GRID ─────────────────────────────────────────────────── --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">

        {{-- ── LEFT COLUMN ─────────────────────────────────────────────────── --}}
        <div class="lg:col-span-2 flex flex-col gap-5">

            {{-- Upload Dataset Card --}}
            <div class="bg-white rounded-xl border border-[#C3C6D7]/20 p-6 flex flex-col gap-5">

                <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Upload Dataset</p>

                {{-- Hidden file input --}}
                <input type="file" x-ref="fileInput" accept=".csv" class="hidden" @change="handleFile($event)">

                {{-- Empty state --}}
                <div
                    x-show="!fileName"
                    class="border-2 border-dashed border-[#C3C6D7]/40 rounded-xl py-8 flex flex-col items-center gap-3 hover:border-[#2563EB]/40 hover:bg-[#F8FBFF] transition-all cursor-pointer"
                    @click="$refs.fileInput.click()"
                >
                    <div class="w-10 h-10 rounded-full bg-[#EFF4FF] flex items-center justify-center">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M12 15V4M12 4L8.5 7.5M12 4L15.5 7.5" stroke="#004AC6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M4 17V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V17" stroke="#004AC6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div class="text-center">
                        <p class="text-[13px] font-semibold text-[#0D1C2E]">Drop your CSV here</p>
                        <p class="text-[11px] text-[#C3C6D7] mt-0.5">or click to browse</p>
                    </div>
                    <button type="button" class="px-4 py-1.5 bg-[#2563EB] text-white text-[12px] font-bold rounded-lg hover:opacity-90 transition-opacity">
                        Choose File
                    </button>
                </div>

                {{-- File uploaded state --}}
                <div x-show="fileName" class="flex items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <div class="w-9 h-9 rounded-lg bg-[#EFF4FF] flex items-center justify-center flex-shrink-0">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="#004AC6" stroke-width="1.5" stroke-linejoin="round"/>
                                <path d="M14 2V8H20" stroke="#004AC6" stroke-width="1.5" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-[13px] font-bold text-[#0D1C2E]" x-text="fileName"></p>
                            <p class="text-[11px] text-[#586064]">
                                <span x-text="fileRows"></span> rows,
                                <span x-text="fileCols"></span> columns •
                                <span x-text="fileSize"></span>
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button @click.stop="$refs.fileInput.click()" type="button"
                            class="px-3 py-1.5 bg-[#2563EB] text-white text-[11px] font-bold rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1.5">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                                <path d="M12 15V4M12 4L8.5 7.5M12 4L15.5 7.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M4 17V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Choose File
                        </button>
                        <button @click.stop="removeFile()" type="button"
                            class="w-7 h-7 flex items-center justify-center rounded-lg text-[#C3C6D7] hover:text-red-500 hover:bg-red-50 transition-all">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                                <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </button>
                    </div>
                </div>

                {{-- Detected Columns — shown only when columns exist --}}
                <div x-show="detectedColumns.length > 0" class="flex flex-col gap-2">
                    <p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Detected Columns</p>
                    <div class="flex flex-wrap gap-1.5">
                        <template x-for="col in detectedColumns" :key="col">
                            <span class="px-2.5 py-1 bg-[#F1F4F6] rounded-md text-[11px] font-semibold text-[#0D1C2E]" x-text="col"></span>
                        </template>
                    </div>
                </div>

            </div>
            {{-- End Upload Dataset Card --}}

            {{-- Cluster Settings Card --}}
            <div class="bg-white rounded-xl border border-[#ABB3B7]/20 p-6 flex flex-col gap-5">
                <div class="flex items-center justify-between flex-wrap gap-3">
                    <h3 class="text-[15px] font-bold text-[#0D1C2E]">Cluster Settings</h3>
                    <div class="flex rounded-lg overflow-hidden border border-[#e2e6ea]">
                        <button type="button" @click="clusterSelectMode = 'auto'" :class="clusterSelectMode === 'auto' ? 'bg-[#2563EB] text-white font-bold' : 'bg-white text-[#434655] font-semibold hover:bg-gray-50'" class="px-5 py-2 text-[13px] transition-all duration-150">Auto Select</button>
                        <button type="button" @click="clusterSelectMode = 'manual'" :class="clusterSelectMode === 'manual' ? 'bg-[#2563EB] text-white font-bold' : 'bg-white text-[#434655] font-semibold hover:bg-gray-50'" class="px-5 py-2 text-[13px] transition-all duration-150">Manual Select</button>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div class="flex flex-col gap-2">
                        <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Cluster Column</label>
                        <div class="relative">
                            <select x-model="clusterColumn" class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] cursor-pointer transition-colors">
                                <option value="">Select column...</option>
                                <template x-for="col in columns" :key="col">
                                    <option :value="col" x-text="col"></option>
                                </template>
                            </select>
                            <svg class="absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none w-3.5 h-3.5 text-[#586064]" fill="none" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Min Rows Per Cluster</label>
                        <input type="number" x-model="minRowsPerCluster" placeholder="0" min="0" class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] transition-colors placeholder-[#ABB3B7]">
                    </div>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Max Clusters To Pick</label>
                    <input type="text" x-model="maxClustersToPick" placeholder="All eligible" class="w-full bg-white border border-[#e2e6ea] rounded-lg px-4 py-3 text-[13px] text-[#2B3437] outline-none focus:border-[#2563EB] transition-colors placeholder-[#ABB3B7]">
                </div>

                <button type="button" id="load-clusters" :disabled="loading || !fileName" class="w-full flex items-center justify-center gap-2.5 py-4 rounded-xl bg-[#EEF2FF] hover:bg-[#E0E8FF] disabled:opacity-50 text-[#2563EB] text-[14px] font-bold transition-all duration-150">
                    <template x-if="loading"><svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#2563EB" stroke-width="3" stroke-dasharray="30 70"/></svg></template>
                    <template x-if="!loading"><svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M21 12a9 9 0 11-9-9" stroke="#2563EB" stroke-width="2" stroke-linecap="round"/><path d="M21 3v5h-5" stroke="#2563EB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></template>
                    <span x-text="loading ? 'Loading...' : 'Load & Preview Clusters'"></span>
                </button>

                <div x-show="clusters.length > 0" class="mt-2 border rounded-lg overflow-hidden">
                    <table class="w-full text-left text-[12px]">
                        <thead class="bg-gray-50 border-b"><tr><th class="px-3 py-2 font-bold text-gray-600">Cluster Name</th><th class="px-3 py-2 font-bold text-gray-600">Population</th></tr></thead>
                        <tbody><template x-for="c in clusters" :key="c.name"><tr class="border-b last:border-0 hover:bg-gray-50"><td class="px-3 py-2 text-gray-800" x-text="c.name"></td><td class="px-3 py-2 text-gray-800" x-text="c.count"></td></tr></template></tbody>
                    </table>
                    <div class="px-3 py-2 bg-blue-50 text-[11px] text-blue-700"><span x-text="eligibleClusters.length"></span> clusters meet the minimum size requirement.</div>
                </div>
            </div>

        </div>

        {{-- RIGHT COLUMN --}}
        <div class="flex flex-col gap-5">
            <div class="bg-white rounded-xl border border-[#ABB3B7]/20 p-6 flex flex-col gap-5 h-full">
                <div class="flex items-center gap-2"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M4 6H20M4 12H14M4 18H9" stroke="#586064" stroke-width="2" stroke-linecap="round"/></svg><p class="text-[11px] font-bold uppercase tracking-[0.09em] text-[#586064]">Run Configurations</p></div>
                <div class="grid grid-cols-1 gap-5">
                    <div class="flex flex-col gap-2"><label class="text-[13px] font-bold text-[#2B3437]">UUID/ID Column</label>
                        <div class="relative"><select x-model="uuidColumn" class="w-full bg-white border border-[#ABB3B7]/40 rounded-md px-3.5 py-2.5 text-[13px] text-[#2B3437] outline-none focus:border-[#005AC2] cursor-pointer"><option value="">Select column...</option><template x-for="col in columns" :key="col"><option :value="col" x-text="col"></option></template></select><svg class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none w-3.5 h-3.5 text-[#586064]" fill="none" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></div>
                    </div>
                    <div class="flex flex-col gap-2"><label class="text-[13px] font-bold text-[#2B3437]">Run By</label><input type="text" x-model="runBy" placeholder="Lead Researcher" class="w-full bg-[#F1F4F6] rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] border-none outline-none placeholder-[#ABB3B7]"></div>
                    <div class="flex flex-col gap-2"><label class="text-[13px] font-bold text-[#2B3437]">Output Format</label>
                        <div class="flex rounded-lg overflow-hidden border border-[#ABB3B7]/20"><button type="button" @click="outputFormat = 'excel'" :class="outputFormat === 'excel' ? 'bg-white text-[#2563EB] font-bold shadow-sm' : 'bg-[#F1F4F6] text-[#586064] font-semibold'" class="flex-1 py-2.5 text-[13px] transition-all duration-150">Excel</button><button type="button" @click="outputFormat = 'csv'" :class="outputFormat === 'csv' ? 'bg-white text-[#2563EB] font-bold shadow-sm' : 'bg-[#F1F4F6] text-[#586064] font-semibold'" class="flex-1 py-2.5 text-[13px] transition-all duration-150">CSV</button></div>
                    </div>
                    <div class="flex flex-col gap-2"><label class="text-[13px] font-bold text-[#2B3437]">Random Seed</label><input type="number" x-model="randomSeed" placeholder="8821" class="w-full bg-[#F1F4F6] rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] border-none outline-none placeholder-[#ABB3B7]"></div>
                </div>

                <div class="mt-auto pt-5 border-t border-gray-100 flex flex-col gap-3">
                    <button id="run-cluster" :disabled="loading || !fileName || !clusterColumn || !sampleSize" class="w-full flex items-center justify-center gap-2 px-6 py-3.5 bg-[#2563EB] hover:opacity-90 disabled:bg-gray-400 text-white rounded-lg text-[14px] font-bold transition-opacity">
                        <template x-if="loading"><svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="white" stroke-width="3" stroke-dasharray="30 70"/></svg></template>
                        <template x-if="!loading"><svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M12 16V4M12 16L8 12M12 16L16 12M4 20h16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></template>
                        <span x-text="loading ? 'Sampling...' : 'Run Cluster Sampling'"></span>
                    </button>
                    <p x-show="error" x-text="error" class="text-xs text-red-500 mt-1"></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="cluster-result"></div>

<script>
(function () {
    var clusterDataTable = null;

    function alpineData() {
        return Alpine.$data(document.getElementById('cluster-app'));
    }

    function escapeHtml(value) {
        return String(value ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function csvToJSON(csv) {
        const lines = csv.split('\n').filter(l => l.trim());
        const headers = lines[0].split(',').map(h => h.trim().replace(/\x22/g, ''));
        return lines.slice(1).map(line => {
            const values = line.split(',').map(v => v.trim().replace(/\x22/g, ''));
            return headers.reduce((obj, header, index) => {
                obj[header] = values[index];
                return obj;
            }, {});
        });
    }

    function rowsFromTable(headers) {
        if (!clusterDataTable) return [];

        return clusterDataTable
            .rows({ search: 'applied' })
            .data()
            .toArray()
            .map(function (row) {
                return headers.reduce(function (item, header, index) {
                    item[header] = $('<div>').html(row[index] ?? '').text();
                    return item;
                }, {});
            });
    }

    function downloadCSV(data) {
        if (!data || !data.length) return;
        const headers = Object.keys(data[0]);
        const csvContent = [
            headers.join(','),
            ...data.map(row => headers.map(h => `\x22${row[h] || ''}\x22`).join(','))
        ].join('\n');

        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        link.setAttribute('href', URL.createObjectURL(blob));
        link.setAttribute('download', `cluster_sample_${Date.now()}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    function downloadExcel(data) {
        if (!data || !data.length || typeof XLSX === 'undefined') return;
        const ws = XLSX.utils.json_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sample');
        XLSX.writeFile(wb, `cluster_sample_${Date.now()}.xlsx`);
    }

    function sampledRows(res) {
        return res && (res.sampled || res.data || res.sample || res.results || []);
    }

    function apiErrorMessage(err, fallback) {
        if (err.responseJSON && err.responseJSON.detail) {
            return Array.isArray(err.responseJSON.detail) ? JSON.stringify(err.responseJSON.detail) : err.responseJSON.detail;
        }
        if (err.responseText && err.responseText !== 'Internal Server Error') {
            return err.responseText;
        }
        return fallback;
    }

    function manualClusterNames(d) {
        var loaded = (d.eligibleClusters && d.eligibleClusters.length ? d.eligibleClusters : d.clusters) || [];
        if (loaded.length) {
            return loaded.map(function (cluster) { return cluster.name; }).filter(Boolean);
        }

        return [...new Set((d.jsonData || []).map(function (row) {
            return row[d.clusterColumn];
        }).filter(function (value) {
            return value !== null && value !== undefined && value !== '';
        }))];
    }

    function renderDataTable(data, info) {
        if (clusterDataTable) {
            clusterDataTable.destroy();
            clusterDataTable = null;
        }

        $('#cluster-result').empty();
        if (!data || !data.length) return;

        const headers = Object.keys(data[0]);
        const safeInfo = info || {};
        const headerCells = headers.map(h =>
            `<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#586064;border-bottom:1.5px solid #e2e6ea;white-space:nowrap;">${escapeHtml(h)}</th>`
        ).join('');
        const rows = data.map((row, i) => {
            const cells = headers.map(h =>
                `<td style="padding:9px 14px;font-size:13px;color:#0D1C2E;border-bottom:0.5px solid #f0f2f4;white-space:nowrap;">${escapeHtml(row[h])}</td>`
            ).join('');
            return `<tr style="background:${i % 2 === 0 ? '#fff' : '#fafbfc'};">${cells}</tr>`;
        }).join('');

        const html = `
        <div id="cluster-result-section" style="margin-top:24px;font-family:'Manrope',sans-serif;width:100%;">
            <div style="background:#fff;border:1px solid #e2e6ea;border-radius:16px;width:100%;">
                <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e2e6ea;gap:12px;flex-wrap:wrap;">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span style="font-size:13px;font-weight:700;color:#1c2b3a;">Cluster Sample Results</span>
                        <span style="background:#EFF4FF;color:#1a4fc4;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;">${data.length} rows</span>
                    </div>
                    <div style="display:flex;gap:8px;">
                        <button id="cluster-dl-csv-btn" style="padding:7px 14px;background:#fff;border:1px solid #d1d5db;border-radius:8px;font-size:12px;font-weight:700;color:#374151;cursor:pointer;">CSV</button>
                        <button id="cluster-dl-excel-btn" style="padding:7px 14px;background:#2563EB;border:none;border-radius:8px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;">Excel</button>
                    </div>
                </div>
                <table id="cluster-results-table" class="display nowrap" style="width:100%; border-collapse:collapse;">
                    <thead><tr style="background:#f8f9fb;">${headerCells}</tr></thead>
                    <tbody>${rows}</tbody>
                </table>
            </div>
        </div>`;

        $('#cluster-result').html(html);

        if ($.fn.DataTable) {
            clusterDataTable = $('#cluster-results-table').DataTable({
                destroy: true,
                pageLength: 10,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                scrollX: true,
                dom: '<"simple-random-dt-toolbar"lf>rt<"simple-random-dt-footer"ip>',
                language: {
                    search: 'Search:',
                    lengthMenu: 'Show _MENU_ rows',
                    info: 'Showing _START_ to _END_ of _TOTAL_ rows',
                    emptyTable: 'No sample rows found'
                }
            });
        }

        $('#cluster-dl-csv-btn').on('click', function () {
            var exportRows = rowsFromTable(headers);
            downloadCSV(exportRows.length ? exportRows : data);
        });
        $('#cluster-dl-excel-btn').on('click', function () {
            var exportRows = rowsFromTable(headers);
            downloadExcel(exportRows.length ? exportRows : data);
        });
    }

    $(document).on('cluster-csv-uploaded', function (e, csvText) {
        var d = alpineData();
        d.jsonData = csvToJSON(csvText);
    });

    $(document).on('click', '#load-clusters', function () {
        var d = alpineData();
        if (!d.jsonData || !d.jsonData.length) { d.error = 'Please upload a CSV file first.'; return; }
        if (!d.clusterColumn) { d.error = 'Please select a cluster column.'; return; }
        d.loading = true; d.error = null;
        $.ajax({
            url: '/sampling/cluster-info',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            contentType: 'application/json',
            data: JSON.stringify({
                data: d.jsonData,
                cluster_column: d.clusterColumn,
                min_size: parseInt(d.minRowsPerCluster) || 0
            }),
            success: function (res) {
                d.clusters = res.clusters || [];
                d.eligibleClusters = res.eligible || [];
            },
            error: function (err) {
                d.error = 'Failed to load clusters. ' + (err.responseJSON && err.responseJSON.detail ? err.responseJSON.detail : '');
                console.error(err);
            },
            complete: function () {
                d.loading = false;
            }
        });
    });

    $(document).on('click', '#run-cluster', function () {
        var d = alpineData();
        if (!d.jsonData || !d.jsonData.length) { d.error = 'Please upload a CSV file first.'; return; }
        if (!d.sampleSize) { d.error = 'Please calculate the sample size first.'; return; }
        if (!d.clusterColumn) { d.error = 'Please select a cluster column.'; return; }
        var manualClusters = d.clusterSelectMode === 'manual' ? manualClusterNames(d) : null;
        if (d.clusterSelectMode === 'manual' && !manualClusters.length) {
            d.error = 'No manual clusters found for the selected cluster column.';
            return;
        }
        var minClusterSize = Math.max(parseInt(d.minRowsPerCluster) || 0, 0);
        d.loading = true; d.error = null;
        $.ajax({
            url: '/sampling/cluster',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            contentType: 'application/json',
            data: JSON.stringify({
                data: d.jsonData,
                n: parseInt(d.sampleSize),
                random_state: parseInt(d.randomSeed) || null,
                cluster_column: d.clusterColumn,
                mode: d.clusterSelectMode,
                n_clusters: d.maxClustersToPick ? parseInt(d.maxClustersToPick) : null,
                min_cluster_size: minClusterSize,
                manual_clusters: manualClusters
            }),
            success: function (res) {
                if (typeof res === 'string') {
                    d.error = 'Server error: ' + res.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().substring(0, 200);
                    return;
                }
                var sampled, info;
                if (Array.isArray(res)) {
                    sampled = res; info = null;
                } else if (res && sampledRows(res) && sampledRows(res).length) {
                    sampled = sampledRows(res); info = res.info || null;
                } else if (res && typeof res === 'object' && Object.keys(res).length && Object.keys(res).every(function(k){ return !isNaN(k); })) {
                    sampled = Object.values(res); info = null;
                }
                if (!sampled || !sampled.length) {
                    d.error = 'No sampled rows returned.';
                    return;
                }
                renderDataTable(sampled, info);
            },
            error: function (err) {
                var msg = 'Sampling failed.';
                try {
                    var body = err.responseJSON || JSON.parse(err.responseText);
                    msg = body.detail || body.message || JSON.stringify(body);
                } catch (e) {
                    msg = err.status ? ('HTTP ' + err.status + ': ' + err.statusText) : apiErrorMessage(err, 'Try setting Min Rows Per Cluster to 0 or choose a cluster column with enough rows.');
                }
                d.error = msg;
                console.error(err);
            },
            complete: function () {
                d.loading = false;
            }
        });
    });
})();
</script>