

<div
    id="stratified-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,
        distinctValues(column) {
            if (!column || !this.jsonData.length) return [];
            return [...new Set(this.jsonData.map(row => row[column]).filter(value => value !== null && value !== undefined && value !== ''))].slice(0, 20);
        },

        // ── Stratification Groups ─────────────────────────────────────────
        stratGroups: [
            { column: 'region_code', targetValue: '', weight: 0.0 }
        ],

        get totalWeight() {
            return this.stratGroups
                .reduce((sum, g) => sum + (parseFloat(g.weight) || 0), 0)
                .toFixed(1);
        },

        get isWeightValid() {
            return Math.abs(parseFloat(this.totalWeight) - 100) < 0.01;
        },

        addGroup() {
            this.stratGroups.push({
                column: this.columns[0] || 'region_code',
                targetValue: '',
                weight: 0.0
            });
        },

        removeGroup(index) {
            if (this.stratGroups.length > 1) {
                this.stratGroups.splice(index, 1);
            }
        },

        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.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;
                    }, {});
                });
                const defaultColumn = headers.includes('district') ? 'district' : (headers[0] || 'region_code');
                const values = [...new Set(this.jsonData.map(row => row[defaultColumn]).filter(value => value !== null && value !== undefined && value !== ''))].slice(0, 2);
                if (values.length) {
                    const baseWeight = Math.floor((100 / values.length) * 10) / 10;
                    this.stratGroups = values.map((value, index) => ({
                        column: defaultColumn,
                        targetValue: value,
                        weight: index === values.length - 1 ? +(100 - (baseWeight * (values.length - 1))).toFixed(1) : baseWeight
                    }));
                } else {
                    this.stratGroups = [{ column: defaultColumn, targetValue: '', weight: 100.0 }];
                }
                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.jsonData = [];
        }
    }"
>

    
    <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]">Stratified Random 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>


    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch">
        <div class="lg:col-span-2 flex flex-col gap-5">

            
            <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>
                <input type="file" x-ref="fileInput" accept=".csv" class="hidden" @change="handleFile($event)">
                <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>
                <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>
                <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>

            
            <div class="bg-white rounded-xl border border-[#e2e6ea] overflow-hidden">
                <div class="px-6 pt-6 pb-5"><h3 class="text-[15px] font-bold text-[#0D1C2E] leading-tight">Stratification Groups</h3><p class="text-[13px] text-[#586064] mt-1 leading-snug">Define how to split your sample. Each row = one group. Percentages must sum to 100%.</p></div>
                <div class="h-px bg-[#F1F4F6]"></div>
                <div class="grid gap-4 px-6 pt-5 pb-3" style="grid-template-columns: 1fr 1fr 140px 36px;"><span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Column</span><span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Target Value</span><span class="text-[10px] font-extrabold uppercase tracking-[0.1em] text-[#586064]">Weight (%)</span><span></span></div>
                <div class="flex flex-col gap-3 px-6 pb-4">
                    <template x-for="(group, index) in stratGroups" :key="index">
                        <div class="grid gap-4 items-center" style="grid-template-columns: 1fr 1fr 140px 36px;">
                            <div class="relative">
                                <select x-model="group.column" class="w-full bg-white border border-[#ABB3B7]/40 rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] font-medium outline-none focus:border-[#2563EB]/50 cursor-pointer transition-all duration-150">
                                    <template x-if="columns.length > 0"><template x-for="col in columns" :key="col"><option :value="col" x-text="col"></option></template></template>
                                    <template x-if="columns.length === 0"><template x-for="col in ['region_code', 'submission_id', 'submission_uuid', 'district', 'starttime', 'endtime', 'household_code']" :key="col"><option :value="col" x-text="col"></option></template></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" stroke-linejoin="round"/></svg>
                            </div>
                            <input type="text" x-model="group.targetValue" :list="'strat-values-' + index" placeholder="e.g. US-WEST" class="w-full bg-[#F1F4F6] border border-transparent hover:border-[#ABB3B7]/40 focus:border-[#2563EB]/50 focus:bg-white rounded-lg px-3.5 py-2.5 text-[13px] text-[#2B3437] outline-none placeholder-[#C3C6D7] transition-all duration-150">
                            <datalist :id="'strat-values-' + index">
                                <template x-for="value in distinctValues(group.column)" :key="value">
                                    <option :value="value"></option>
                                </template>
                            </datalist>
                            <input type="number" x-model="group.weight" min="0" max="100" step="0.1" placeholder="0.0" class="w-full bg-[#EFF4FF] border border-[#2563EB]/20 hover:border-[#2563EB]/40 focus:border-[#2563EB] focus:bg-white rounded-lg px-3.5 py-2.5 text-[13px] text-[#2563EB] font-bold outline-none text-center transition-all duration-150">
                            <button type="button" @click="removeGroup(index)" :disabled="stratGroups.length === 1" class="w-9 h-9 flex items-center justify-center rounded-lg text-[#C3C6D7] hover:text-red-500 hover:bg-red-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-150"><svg width="14" height="14" 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>
                    </template>
                </div>
                <div class="px-6 pb-5"><button type="button" @click="addGroup()" class="w-full py-3 rounded-xl border-2 border-dashed border-[#2563EB]/30 text-[#2563EB] text-[13px] font-bold flex items-center justify-center gap-2 hover:border-[#2563EB]/60 hover:bg-[#F8FBFF] transition-all duration-150"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#2563EB" stroke-width="2.5" stroke-linecap="round"/></svg>Add Group</button></div>
                <div class="h-px bg-[#F1F4F6]"></div>
                <div class="mx-6 my-4 rounded-xl px-4 py-3.5 flex items-start gap-3 transition-all duration-200" :class="isWeightValid ? 'bg-[#F0FDF4] border border-[#86EFAC]/40' : 'bg-[#FFFBEB] border border-[#FCD34D]/40'">
                    <div x-show="!isWeightValid" class="w-8 h-8 rounded-full bg-[#FEF3C7] flex items-center justify-center flex-shrink-0 mt-0.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#D97706" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 9v4M12 17h.01" stroke="#D97706" stroke-width="1.8" stroke-linecap="round"/></svg></div>
                    <div x-show="isWeightValid" class="w-8 h-8 rounded-full bg-[#DCFCE7] flex items-center justify-center flex-shrink-0 mt-0.5"><svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="#16A34A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
                    <div class="flex flex-col gap-0.5"><p class="text-[13px] font-bold" :class="isWeightValid ? 'text-[#15803D]' : 'text-[#92400E]'">Total: <span x-text="totalWeight + '%'">0.0%</span></p><p class="text-[12px]" :class="isWeightValid ? 'text-[#16A34A]' : 'text-[#B45309]'" x-text="isWeightValid ? 'Configuration is valid. Ready to proceed.' : 'Configuration must sum to exactly 100% to proceed.'"></p></div>
                </div>
            </div>
        </div>

        <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-stratified" :disabled="loading || !fileName || !isWeightValid || !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 Stratified 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="stratified-result"></div>

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

    function alpineData() {
        return Alpine.$data(document.getElementById('stratified-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 (!stratifiedDataTable) return [];

        return stratifiedDataTable
            .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', `stratified_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, `stratified_sample_${Date.now()}.xlsx`);
    }

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

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

        $('#stratified-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('');

        // Note: no overflow:hidden on outer wrappers — DataTables needs to show its scrollbar
        const html = `
        <div id="stratified-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;">Stratified 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="stratified-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="stratified-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="stratified-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>
        </div>`;

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

        if ($.fn.DataTable) {
            stratifiedDataTable = $('#stratified-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'
                }
            });
        }

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

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

    $(document).on('click', '#run-stratified', 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.isWeightValid) { d.error = 'Total weight must be exactly 100%.'; return; }
        if (d.stratGroups.some(g => !g.column || !g.targetValue || !parseFloat(g.weight))) {
            d.error = 'Please select a column, target value, and weight for every stratum.';
            return;
        }
        d.loading = true; d.error = null;

        const groupedStrata = {};
        d.stratGroups.forEach(g => {
            if (!groupedStrata[g.column]) {
                groupedStrata[g.column] = { column: g.column, filters: [] };
            }
            groupedStrata[g.column].filters.push({
                value: g.targetValue,
                pct: parseFloat(g.weight)
            });
        });

        $.ajax({
            url: '/sampling/stratified',
            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,
                strata: Object.values(groupedStrata)
            }),
            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) : 'Unable to reach sampling service.';
                }
                d.error = msg;
                console.error(err);
            },
            complete: function () {
                d.loading = false;
            }
        });
    });
})();
</script>