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

export async function activityPage() {
    const app = document.getElementById('app');
    app.innerHTML = `
        <div class="page-header">
            <h1>Activity</h1>
        </div>
        <div class="card" style="margin-bottom:16px">
            <div class="form-row" style="align-items:flex-end">
                <div class="form-group">
                    <label>Action</label>
                    <select id="act_filter">
                        <option value="">All actions</option>
                        <option value="login">login</option>
                        <option value="questionnaire_submitted">questionnaire_submitted</option>
                        <option value="client_created">client_created</option>
                        <option value="client_deleted">client_deleted</option>
                        <option value="clients_assigned">clients_assigned</option>
                        <option value="client_data_exported">client_data_exported</option>
                        <option value="user_created">user_created</option>
                        <option value="user_deleted">user_deleted</option>
                        <option value="password_changed">password_changed</option>
                    </select>
                </div>
                <button class="btn btn-primary btn-sm" id="act_refresh">Refresh</button>
            </div>
        </div>
        <div id="activityContent"><div class="spinner"></div></div>
    `;

    document.getElementById('act_refresh').addEventListener('click', loadActivity);
    document.getElementById('act_filter').addEventListener('change', loadActivity);
    await loadActivity();
}

async function loadActivity() {
    const container = document.getElementById('activityContent');
    container.innerHTML = '<div class="spinner"></div>';
    const action = document.getElementById('act_filter')?.value || '';
    const qs = action ? `?limit=200&action=${encodeURIComponent(action)}` : '?limit=200';

    try {
        const data = await apiGet(`activity${qs}`);
        renderActivity(data.events || [], data.total ?? 0);
    } catch (e) {
        showToast(e.message, 'error');
        container.innerHTML = `<p class="error-text" style="padding:16px">${esc(e.message)}</p>`;
    }
}

function renderActivity(events, total) {
    const container = document.getElementById('activityContent');

    if (!events.length) {
        container.innerHTML = `
            <div class="card"><div class="empty-state"><h3>No activity</h3></div></div>`;
        return;
    }

    container.innerHTML = `
        <div class="card">
            <p style="margin-bottom:12px;color:var(--text-secondary)">Showing ${events.length} of ${total} events (newest first)</p>
            <div class="table-wrapper">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Time</th>
                            <th>Actor</th>
                            <th>Role</th>
                            <th>Action</th>
                            <th>Target</th>
                            <th>Summary</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${events.map(e => `
                            <tr>
                                <td>${esc(formatTime(e.createdAt))}</td>
                                <td>${esc(e.actorUsername || e.actorUserID || '—')}</td>
                                <td>${esc(e.actorRole || '')}</td>
                                <td><span class="badge">${esc(e.action)}</span></td>
                                <td>${esc(e.targetType || '')}${e.targetID ? ': ' + esc(e.targetID) : ''}</td>
                                <td>${esc(e.summary)}</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>`;
}

function formatTime(ms) {
    if (!ms) return '';
    const d = new Date(Number(ms));
    return d.toLocaleString();
}

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