nat-as-server/website/js/pages/export.js

import { apiGet } from '../api.js';
import { canEdit, showToast } from '../app.js';

export async function exportPage() {
    const app = document.getElementById('app');
    app.innerHTML = `
        <div class="page-header">
            <h1>Export Data</h1>
            <div class="actions"><a href="#/" class="btn">&larr; Dashboard</a></div>
        </div>
        <div class="card" id="exportContent"><div class="spinner"></div></div>
    `;

    try {
        const data = await apiGet('questionnaires.php');
        renderExport(data.questionnaires || []);
    } catch (e) {
        showToast(e.message, 'error');
        document.getElementById('exportContent').innerHTML = `<p class="error-text">${esc(e.message)}</p>`;
    }
}

function renderExport(questionnaires) {
    const container = document.getElementById('exportContent');

    if (!questionnaires.length) {
        container.innerHTML = `
            <div class="empty-state">
                <h3>No questionnaires</h3>
                <p>Create questionnaires first to export data.</p>
            </div>
        `;
        return;
    }

    const bundleBlock = canEdit() ? `
        <div class="card" style="margin-bottom:20px;padding:16px 20px">
            <h3 style="margin:0 0 8px;font-size:1.05rem">Export questionnaires (JSON)</h3>
            <p style="margin:0 0 14px;color:var(--text-secondary);font-size:.9rem">
                Download all questionnaires with questions, answer options, and every translation.
                Use <strong>Import questionnaires</strong> on the dashboard to restore this file on another server.
            </p>
            <button type="button" class="btn btn-primary" id="exportBundleBtn">Export all questionnaires (JSON)</button>
        </div>
    ` : '';

    container.innerHTML = `
        ${bundleBlock}
        <p style="margin-bottom:16px;color:var(--text-secondary)">
            Select a questionnaire and click Export to download a CSV file with all client responses (filtered by your role's visibility).
        </p>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Questionnaire</th>
                    <th>Version</th>
                    <th>State</th>
                    <th>Questions</th>
                    <th>Completed</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                ${questionnaires.map(q => `
                    <tr>
                        <td><strong>${esc(q.name)}</strong></td>
                        <td>${esc(q.version || '—')}</td>
                        <td><span class="badge badge-${(q.state || 'draft').toLowerCase()}">${esc(q.state || 'draft')}</span></td>
                        <td>${q.questionCount || 0}</td>
                        <td>${q.completedCount ?? 0}</td>
                        <td>
                            <button class="btn btn-sm btn-primary export-btn" data-id="${q.questionnaireID}" data-name="${esc(q.name)}" data-version="${esc(q.version)}">
                                Export CSV
                            </button>
                            <a href="#/questionnaire/${q.questionnaireID}/results" class="btn btn-sm">View Results</a>
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        </table>
    `;

    document.getElementById('exportBundleBtn')?.addEventListener('click', async () => {
        const btn = document.getElementById('exportBundleBtn');
        btn.disabled = true;
        const prev = btn.textContent;
        btn.textContent = 'Preparing…';
        try {
            const token = localStorage.getItem('qdb_token');
            const res = await fetch('../api/export?bundle=1', {
                headers: { Authorization: `Bearer ${token}` },
            });
            if (!res.ok) {
                const err = await res.json().catch(() => ({}));
                throw new Error(err.error?.message || err.error || 'Export failed');
            }
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            const stamp = new Date().toISOString().slice(0, 10);
            a.download = `questionnaires_bundle_${stamp}.json`;
            a.click();
            URL.revokeObjectURL(url);
            showToast('Questionnaire bundle downloaded', 'success');
        } catch (e) {
            showToast(e.message, 'error');
        } finally {
            btn.disabled = false;
            btn.textContent = prev;
        }
    });

    container.querySelectorAll('.export-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            btn.disabled = true;
            btn.textContent = 'Downloading...';
            try {
                const token = localStorage.getItem('qdb_token');
                const res = await fetch(`../api/export.php?questionnaireID=${encodeURIComponent(btn.dataset.id)}&format=csv`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                if (!res.ok) {
                    const err = await res.json().catch(() => ({ error: 'Download failed' }));
                    throw new Error(err.error);
                }
                const blob = await res.blob();
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `${btn.dataset.name}_v${btn.dataset.version}.csv`;
                a.click();
                URL.revokeObjectURL(url);
                showToast('Download started', 'success');
            } catch (e) {
                showToast(e.message, 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = 'Export CSV';
            }
        });
    });
}

function esc(s) {
    const d = document.createElement('div');
    d.textContent = s ?? '';
    return d.innerHTML;
}