wled-screen-controller-mixed/server/src/wled_controller/static/js/features/sync-clocks.ts

/**
 * Sync Clocks — CRUD, runtime controls, cards.
 */

import { _cachedSyncClocks, syncClocksCache } from '../core/state.ts';
import { fetchWithAuth, escapeHtml } from '../core/api.ts';
import { t } from '../core/i18n.ts';
import { Modal } from '../core/modal.ts';
import { showToast, showConfirm } from '../core/ui.ts';
import { ICON_CLOCK, ICON_CLONE, ICON_EDIT, ICON_START, ICON_PAUSE } from '../core/icons.ts';
import { wrapCard } from '../core/card-colors.ts';
import { TagInput, renderTagChips } from '../core/tag-input.ts';
import { loadPictureSources } from './streams.ts';
import type { SyncClock } from '../types.ts';

// ── Modal ──

let _syncClockTagsInput: TagInput | null = null;

class SyncClockModal extends Modal {
    constructor() { super('sync-clock-modal'); }

    onForceClose() {
        if (_syncClockTagsInput) { _syncClockTagsInput.destroy(); _syncClockTagsInput = null; }
    }

    snapshotValues() {
        return {
            name: (document.getElementById('sync-clock-name') as HTMLInputElement).value,
            speed: (document.getElementById('sync-clock-speed') as HTMLInputElement).value,
            description: (document.getElementById('sync-clock-description') as HTMLInputElement).value,
            tags: JSON.stringify(_syncClockTagsInput ? _syncClockTagsInput.getValue() : []),
        };
    }
}

const syncClockModal = new SyncClockModal();

// ── Show / Close ──

export async function showSyncClockModal(editData: SyncClock | null): Promise<void> {
    const isEdit = !!editData;
    const titleKey = isEdit ? 'sync_clock.edit' : 'sync_clock.add';
    document.getElementById('sync-clock-modal-title').innerHTML = `${ICON_CLOCK} ${t(titleKey)}`;
    (document.getElementById('sync-clock-id') as HTMLInputElement).value = isEdit ? editData.id : '';
    (document.getElementById('sync-clock-error') as HTMLElement).style.display = 'none';

    if (isEdit) {
        (document.getElementById('sync-clock-name') as HTMLInputElement).value = editData.name || '';
        (document.getElementById('sync-clock-speed') as HTMLInputElement).value = String(editData.speed ?? 1.0);
        document.getElementById('sync-clock-speed-display').textContent = String(editData.speed ?? 1.0);
        (document.getElementById('sync-clock-description') as HTMLInputElement).value = editData.description || '';
    } else {
        (document.getElementById('sync-clock-name') as HTMLInputElement).value = '';
        (document.getElementById('sync-clock-speed') as HTMLInputElement).value = String(1.0);
        document.getElementById('sync-clock-speed-display').textContent = '1';
        (document.getElementById('sync-clock-description') as HTMLInputElement).value = '';
    }

    // Tags
    if (_syncClockTagsInput) { _syncClockTagsInput.destroy(); _syncClockTagsInput = null; }
    _syncClockTagsInput = new TagInput(document.getElementById('sync-clock-tags-container'), { placeholder: t('tags.placeholder') });
    _syncClockTagsInput.setValue(isEdit ? (editData.tags || []) : []);

    syncClockModal.open();
    syncClockModal.snapshot();
}

export async function closeSyncClockModal(): Promise<void> {
    await syncClockModal.close();
}

// ── Save ──

export async function saveSyncClock(): Promise<void> {
    const id = (document.getElementById('sync-clock-id') as HTMLInputElement).value;
    const name = (document.getElementById('sync-clock-name') as HTMLInputElement).value.trim();
    const speed = parseFloat((document.getElementById('sync-clock-speed') as HTMLInputElement).value);
    const description = (document.getElementById('sync-clock-description') as HTMLInputElement).value.trim() || null;

    if (!name) {
        syncClockModal.showError(t('sync_clock.error.name_required'));
        return;
    }

    const payload = { name, speed, description, tags: _syncClockTagsInput ? _syncClockTagsInput.getValue() : [] };

    try {
        const method = id ? 'PUT' : 'POST';
        const url = id ? `/sync-clocks/${id}` : '/sync-clocks';
        const resp = await fetchWithAuth(url, {
            method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });
        if (!resp.ok) {
            const err = await resp.json().catch(() => ({}));
            throw new Error(err.detail || `HTTP ${resp.status}`);
        }
        showToast(t(id ? 'sync_clock.updated' : 'sync_clock.created'), 'success');
        syncClockModal.forceClose();
        syncClocksCache.invalidate();
        await loadPictureSources();
    } catch (e) {
        if (e.isAuth) return;
        syncClockModal.showError(e.message);
    }
}

// ── Edit / Clone / Delete ──

export async function editSyncClock(clockId: string): Promise<void> {
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}`);
        if (!resp.ok) throw new Error(t('sync_clock.error.load'));
        const data = await resp.json();
        await showSyncClockModal(data);
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

export async function cloneSyncClock(clockId: string): Promise<void> {
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}`);
        if (!resp.ok) throw new Error(t('sync_clock.error.load'));
        const data = await resp.json();
        delete data.id;
        data.name = data.name + ' (copy)';
        await showSyncClockModal(data);
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

export async function deleteSyncClock(clockId: string): Promise<void> {
    const confirmed = await showConfirm(t('sync_clock.delete.confirm'));
    if (!confirmed) return;
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}`, { method: 'DELETE' });
        if (!resp.ok) {
            const err = await resp.json().catch(() => ({}));
            throw new Error(err.detail || `HTTP ${resp.status}`);
        }
        showToast(t('sync_clock.deleted'), 'success');
        syncClocksCache.invalidate();
        await loadPictureSources();
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

// ── Runtime controls ──

export async function pauseSyncClock(clockId: string): Promise<void> {
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}/pause`, { method: 'POST' });
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        showToast(t('sync_clock.paused'), 'success');
        syncClocksCache.invalidate();
        await loadPictureSources();
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

export async function resumeSyncClock(clockId: string): Promise<void> {
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}/resume`, { method: 'POST' });
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        showToast(t('sync_clock.resumed'), 'success');
        syncClocksCache.invalidate();
        await loadPictureSources();
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

export async function resetSyncClock(clockId: string): Promise<void> {
    try {
        const resp = await fetchWithAuth(`/sync-clocks/${clockId}/reset`, { method: 'POST' });
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        showToast(t('sync_clock.reset_done'), 'success');
        syncClocksCache.invalidate();
        await loadPictureSources();
    } catch (e) {
        if (e.isAuth) return;
        showToast(e.message, 'error');
    }
}

// ── Card rendering ──

function _formatElapsed(seconds: number): string {
    const s = Math.floor(seconds);
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    const sec = s % 60;
    if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
    return `${m}:${String(sec).padStart(2, '0')}`;
}

export function createSyncClockCard(clock: SyncClock) {
    const statusIcon = clock.is_running ? ICON_START : ICON_PAUSE;
    const statusLabel = clock.is_running ? t('sync_clock.status.running') : t('sync_clock.status.paused');
    const toggleAction = clock.is_running ? 'pause' : 'resume';
    const toggleTitle = clock.is_running ? t('sync_clock.action.pause') : t('sync_clock.action.resume');
    const elapsedLabel = clock.elapsed_time != null ? _formatElapsed(clock.elapsed_time) : null;

    return wrapCard({
        type: 'template-card',
        dataAttr: 'data-id',
        id: clock.id,
        removeOnclick: `deleteSyncClock('${clock.id}')`,
        removeTitle: t('common.delete'),
        content: `
            <div class="template-card-header">
                <div class="template-name">${ICON_CLOCK} ${escapeHtml(clock.name)}</div>
            </div>
            <div class="stream-card-props">
                <span class="stream-card-prop">${statusIcon} ${statusLabel}</span>
                <span class="stream-card-prop">${ICON_CLOCK} ${clock.speed}x</span>
                ${elapsedLabel ? `<span class="stream-card-prop" title="${t('sync_clock.elapsed')}">⏱ ${elapsedLabel}</span>` : ''}
            </div>
            ${renderTagChips(clock.tags)}
            ${clock.description ? `<div class="template-config" style="opacity:0.7;">${escapeHtml(clock.description)}</div>` : ''}`,
        actions: `
                <button class="btn btn-icon btn-secondary" data-action="${toggleAction}" data-id="${clock.id}" title="${toggleTitle}">${clock.is_running ? ICON_PAUSE : ICON_START}</button>
                <button class="btn btn-icon btn-secondary" data-action="reset" data-id="${clock.id}" title="${t('sync_clock.action.reset')}">${ICON_CLOCK}</button>
                <button class="btn btn-icon btn-secondary" data-action="clone" data-id="${clock.id}" title="${t('common.clone')}">${ICON_CLONE}</button>
                <button class="btn btn-icon btn-secondary" data-action="edit" data-id="${clock.id}" title="${t('common.edit')}">${ICON_EDIT}</button>`,
    });
}

// ── Event delegation for sync-clock card actions ──

const _syncClockActions: Record<string, (id: string) => void> = {
    pause: pauseSyncClock,
    resume: resumeSyncClock,
    reset: resetSyncClock,
    clone: cloneSyncClock,
    edit: editSyncClock,
};

export function initSyncClockDelegation(container: HTMLElement): void {
    container.addEventListener('click', (e: MouseEvent) => {
        const btn = (e.target as HTMLElement).closest<HTMLElement>('[data-action]');
        if (!btn) return;

        // Only handle actions within a sync-clock card (data-id on card root)
        const card = btn.closest<HTMLElement>('[data-id]');
        const section = btn.closest<HTMLElement>('[data-card-section="sync-clocks"]');
        if (!card || !section) return;

        const action = btn.dataset.action;
        const id = btn.dataset.id;
        if (!action || !id) return;

        const handler = _syncClockActions[action];
        if (handler) {
            e.stopPropagation();
            handler(id);
        }
    });
}

// ── Expose to global scope for HTML template onclick handlers & graph-editor ──

window.showSyncClockModal = showSyncClockModal;
window.closeSyncClockModal = closeSyncClockModal;
window.saveSyncClock = saveSyncClock;
window.editSyncClock = editSyncClock;
window.cloneSyncClock = cloneSyncClock;
window.deleteSyncClock = deleteSyncClock;
window.pauseSyncClock = pauseSyncClock;
window.resumeSyncClock = resumeSyncClock;
window.resetSyncClock = resetSyncClock;