import { apiGet } from '../api.js';
import { 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;
    }

    container.innerHTML = `
        <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>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>
                            <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>
    `;

    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;
}