{% extends "base.html" %}
{% block title %}Front Page Editor{% endblock %}
{% block content %}
<h1>[&lt;] Front Page Editor</h1>

<div class="toolbar">
    <button class="btn" onclick="loadFiles()">Refresh Files</button>
    <button class="btn" onclick="newFile()">+ New File</button>
    <button class="btn" onclick="openPreview()">Preview Site</button>
</div>

<div style="display: flex; gap: 15px; height: calc(100vh - 140px);">
    <!-- File list panel -->
    <div style="width: 220px; flex-shrink: 0;">
        <div class="card" style="height: 100%; overflow-y: auto;">
            <div class="card-title">Site Files</div>
            <div id="file-list" style="font-size: 12px;"></div>
        </div>
    </div>

    <!-- Editor panel -->
    <div style="flex: 1; display: flex; flex-direction: column;">
        <div style="margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
            <span id="current-file" style="color: #888; font-size: 12px;">No file selected</span>
            <span id="modified-indicator" style="color: #ffaa00; font-size: 12px; display: none;">* modified</span>
            <div style="margin-left: auto;">
                <button class="btn" onclick="saveFile()" id="save-btn" disabled>Save</button>
                <button class="btn btn-danger" onclick="deleteFile()" id="delete-btn" disabled>Delete</button>
            </div>
        </div>
        <textarea id="editor" style="flex: 1; width: 100%; resize: none; font-size: 13px; line-height: 1.5; tab-size: 2;" disabled></textarea>
        <div id="output" class="output" style="max-height: 80px; margin-top: 8px;"></div>
    </div>
</div>

<script>
let currentFile = null;
let originalContent = '';
const editor = document.getElementById('editor');
const fileList = document.getElementById('file-list');
const currentFileEl = document.getElementById('current-file');
const modifiedEl = document.getElementById('modified-indicator');
const saveBtn = document.getElementById('save-btn');
const deleteBtn = document.getElementById('delete-btn');

editor.addEventListener('input', () => {
    const modified = editor.value !== originalContent;
    modifiedEl.style.display = modified ? 'inline' : 'none';
});

// Handle Ctrl+S to save
editor.addEventListener('keydown', (e) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        if (currentFile) saveFile();
    }
    // Tab inserts spaces
    if (e.key === 'Tab') {
        e.preventDefault();
        const start = editor.selectionStart;
        const end = editor.selectionEnd;
        editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
        editor.selectionStart = editor.selectionEnd = start + 2;
    }
});

async function loadFiles() {
    const res = await apiGet('/api/frontpage/list');
    if (!res.ok) {
        fileList.innerHTML = '<span class="err">Failed to load</span>';
        return;
    }
    const lines = (res.data.stdout || '').trim().split('\n').filter(l => l.trim());
    if (lines.length === 0) {
        fileList.innerHTML = '<span style="color:#888">No files found</span>';
        return;
    }

    let html = '';
    lines.forEach(line => {
        const parts = line.split('|');
        const name = parts[0];
        const size = parts[1] ? formatSize(parseInt(parts[1])) : '';
        const ext = name.split('.').pop();
        const icon = ext === 'html' ? '&lt;/&gt;' : ext === 'css' ? '#' : ext === 'js' ? 'js' : '?';
        const active = name === currentFile ? 'background:#1a2a1a;color:#fff;' : '';
        html += `<div onclick="openFile('${name}')" style="padding:6px 8px;cursor:pointer;border-bottom:1px solid #1a1a1a;${active}" onmouseover="this.style.background='#1a2a1a'" onmouseout="this.style.background='${name === currentFile ? '#1a2a1a' : ''}'">
            <span style="color:#555">[${icon}]</span> ${name}
            <span style="color:#555;font-size:10px;float:right">${size}</span>
        </div>`;
    });
    fileList.innerHTML = html;
}

async function openFile(name) {
    if (currentFile && editor.value !== originalContent) {
        if (!confirm('Unsaved changes. Discard?')) return;
    }

    const res = await apiGet('/api/frontpage/read?file=' + encodeURIComponent(name));
    if (!res.ok) {
        showResult(res);
        return;
    }
    currentFile = name;
    originalContent = res.data.stdout || '';
    editor.value = originalContent;
    editor.disabled = false;
    saveBtn.disabled = false;
    deleteBtn.disabled = false;
    currentFileEl.textContent = name;
    modifiedEl.style.display = 'none';
    document.getElementById('output').innerHTML = '<span class="info">Loaded ' + name + '</span>';
    loadFiles(); // refresh to highlight active
}

async function saveFile() {
    if (!currentFile) return;
    const res = await apiPost('/api/frontpage/write', {
        file: currentFile,
        content: editor.value
    });
    if (res.ok) {
        originalContent = editor.value;
        modifiedEl.style.display = 'none';
        document.getElementById('output').innerHTML = '<span class="status-ok">Saved ' + currentFile + '</span>';
    } else {
        showResult(res);
    }
}

async function deleteFile() {
    if (!currentFile) return;
    if (!confirm('Delete ' + currentFile + '?')) return;
    const res = await api('/api/frontpage/delete', {
        method: 'DELETE',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({file: currentFile})
    });
    if (res.ok) {
        document.getElementById('output').innerHTML = '<span class="status-ok">Deleted ' + currentFile + '</span>';
        currentFile = null;
        editor.value = '';
        editor.disabled = true;
        saveBtn.disabled = true;
        deleteBtn.disabled = true;
        currentFileEl.textContent = 'No file selected';
        loadFiles();
    } else {
        showResult(res);
    }
}

async function newFile() {
    const name = prompt('File name (e.g. newpage.html):');
    if (!name) return;
    const res = await apiPost('/api/frontpage/new', {file: name});
    if (res.ok) {
        await loadFiles();
        openFile(name);
    } else {
        showResult(res);
    }
}

async function openPreview() {
    const res = await apiGet('/api/frontpage/preview-url');
    if (res.ok) {
        window.open(res.data, '_blank');
    }
}

function formatSize(bytes) {
    if (bytes < 1024) return bytes + 'B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + 'K';
    return (bytes / 1048576).toFixed(1) + 'M';
}

// Load on page open
loadFiles();
</script>
{% endblock %}