{{define "content"}}
<div class="page-header">
    <h1>Running Games</h1>
    <span>{{len .Games}} game{{if ne (len .Games) 1}}s{{end}}</span>
</div>

<details class="upload-section" id="upload-section">
    <summary>Upload Game Save</summary>
    <form id="upload-form" action="/games/upload" method="POST" enctype="multipart/form-data" class="upload-form">
        <p>Upload a game save zip file (e.g., game_abc123.zip). The game ID is extracted from the filename.</p>
        <div class="upload-controls">
            <input type="file" name="gamefile" id="gamefile" accept=".zip" required>
            <input type="hidden" name="force_replace" id="force_replace" value="">
            <input type="hidden" name="use_new_id" id="use_new_id" value="">
            <button type="submit" class="btn-small" id="upload-btn">Upload</button>
        </div>
    </form>
    <div id="upload-result"></div>
</details>

<script>
// Store the file for resubmission
var pendingFile = null;

document.getElementById('upload-form').addEventListener('submit', function(e) {
    e.preventDefault();

    var fileInput = document.getElementById('gamefile');
    if (fileInput.files.length > 0) {
        pendingFile = fileInput.files[0];
    }

    var formData = new FormData(this);

    fetch('/games/upload', {
        method: 'POST',
        body: formData
    }).then(function(response) {
        if (response.status === 409) {
            // Conflict - show resolution options
            return response.text().then(function(html) {
                document.getElementById('upload-result').innerHTML = html;
            });
        } else if (response.redirected) {
            // Success - redirect to game page
            window.location.href = response.url;
        } else if (!response.ok) {
            return response.text().then(function(text) {
                document.getElementById('upload-result').innerHTML =
                    '<div class="alert alert-error">' + text + '</div>';
            });
        } else {
            // Fallback for non-redirect success
            return response.text().then(function(html) {
                document.getElementById('upload-result').innerHTML = html;
            });
        }
    }).catch(function(error) {
        document.getElementById('upload-result').innerHTML =
            '<div class="alert alert-error">Upload failed: ' + error + '</div>';
    });
});

function resubmitUpload(option) {
    if (!pendingFile) {
        alert('No file to upload. Please select a file again.');
        return;
    }

    var formData = new FormData();
    formData.append('gamefile', pendingFile);

    if (option === 'use_new_id') {
        formData.append('use_new_id', 'true');
    } else if (option === 'force_replace') {
        formData.append('force_replace', 'true');
    }

    document.getElementById('upload-result').innerHTML =
        '<div class="alert">Uploading...</div>';

    fetch('/games/upload', {
        method: 'POST',
        body: formData
    }).then(function(response) {
        if (response.redirected) {
            window.location.href = response.url;
        } else if (!response.ok) {
            return response.text().then(function(text) {
                document.getElementById('upload-result').innerHTML =
                    '<div class="alert alert-error">' + text + '</div>';
            });
        } else {
            return response.text().then(function(html) {
                document.getElementById('upload-result').innerHTML = html;
            });
        }
    }).catch(function(error) {
        document.getElementById('upload-result').innerHTML =
            '<div class="alert alert-error">Upload failed: ' + error + '</div>';
    });
}

function cancelUpload() {
    pendingFile = null;
    document.getElementById('upload-result').innerHTML = '';
    document.getElementById('gamefile').value = '';
}
</script>

{{if .Games}}
<div id="batch-actions" class="batch-actions" style="display: none; margin-bottom: 1rem; padding: 0.75rem; background: #f8f9fa; border-radius: 4px;">
    <span id="selected-count">0</span> game(s) selected
    <button class="btn-small btn-danger" onclick="showBatchDeleteModal()" style="margin-left: 1rem;">Delete Selected</button>
    <button class="btn-small btn-secondary" onclick="clearSelection()" style="margin-left: 0.5rem;">Clear</button>
</div>

    {{range .Games}}
    <article class="game-card">
        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
            <input type="checkbox" class="game-checkbox" data-game-id="{{.GameID}}" onchange="updateSelection()" style="margin-top: 0.3rem; width: 18px; height: 18px;">
            <div style="flex: 1;">
                <h3>
                    <a href="/games/{{.GameID}}">Game {{.GameID}}</a>
                    <span class="status-badge {{if eq .RunStatus "Running"}}running{{else}}finished{{end}}">
                        {{.RunStatus}}
                    </span>
                </h3>
                <div class="meta">
                    Round {{.CurrentRound}} &bull; {{.ActionCount}} actions
                </div>
                <div class="players">
                    {{range .Players}}
                    <span class="player-badge {{if .IsHuman}}human{{else}}ai{{end}}">
                        {{.FactionName}}{{if .IsHuman}} ({{.UserName}}){{end}}
                    </span>
                    {{end}}
                </div>
                <div class="actions">
                    <a href="/games/{{.GameID}}" role="button" class="outline">View History</a>
                    <button class="btn-small btn-danger" onclick="showDeleteModal('{{.GameID}}')">Delete</button>
                </div>
            </div>
        </div>
    </article>
    {{end}}

<!-- Delete Game Modal -->
<dialog id="delete-game-modal">
    <form method="dialog">
        <h3>Delete Game</h3>
        <p>Are you sure you want to delete game <strong id="delete-game-id-display"></strong>?</p>
        <div class="form-group">
            <label>
                <input type="checkbox" id="delete-save-files" name="delete_save_files">
                Also delete save files from disk
            </label>
        </div>
        <p class="warning" style="color: #e74c3c; font-size: 0.9em;">
            <strong>Warning:</strong> This action cannot be undone.
        </p>
        <input type="hidden" id="delete-game-id" name="game_id">
        <div class="modal-actions">
            <button type="button" class="btn-secondary" onclick="document.getElementById('delete-game-modal').close()">Cancel</button>
            <button type="button" class="btn-danger" onclick="submitDeleteGame()">Delete</button>
        </div>
    </form>
</dialog>

<div id="delete-result"></div>

<!-- Batch Delete Modal -->
<dialog id="batch-delete-modal">
    <form method="dialog">
        <h3>Delete Multiple Games</h3>
        <p>Are you sure you want to delete <strong id="batch-delete-count"></strong> game(s)?</p>
        <div class="form-group">
            <label>
                <input type="checkbox" id="batch-delete-save-files" name="delete_save_files">
                Also delete save files from disk
            </label>
        </div>
        <p class="warning" style="color: #e74c3c; font-size: 0.9em;">
            <strong>Warning:</strong> This action cannot be undone.
        </p>
        <div class="modal-actions">
            <button type="button" class="btn-secondary" onclick="document.getElementById('batch-delete-modal').close()">Cancel</button>
            <button type="button" class="btn-danger" onclick="submitBatchDelete()">Delete All</button>
        </div>
    </form>
</dialog>

<script>
function getSelectedGameIds() {
    var checkboxes = document.querySelectorAll('.game-checkbox:checked');
    var ids = [];
    checkboxes.forEach(function(cb) {
        ids.push(cb.getAttribute('data-game-id'));
    });
    return ids;
}

function updateSelection() {
    var selectedIds = getSelectedGameIds();
    var batchActions = document.getElementById('batch-actions');
    var selectedCount = document.getElementById('selected-count');

    if (selectedIds.length > 0) {
        batchActions.style.display = 'block';
        selectedCount.textContent = selectedIds.length;
    } else {
        batchActions.style.display = 'none';
    }
}

function clearSelection() {
    var checkboxes = document.querySelectorAll('.game-checkbox');
    checkboxes.forEach(function(cb) {
        cb.checked = false;
    });
    updateSelection();
}

function showBatchDeleteModal() {
    var selectedIds = getSelectedGameIds();
    if (selectedIds.length === 0) {
        alert('No games selected');
        return;
    }
    document.getElementById('batch-delete-count').textContent = selectedIds.length;
    document.getElementById('batch-delete-save-files').checked = false;
    document.getElementById('batch-delete-modal').showModal();
}

function submitBatchDelete() {
    var selectedIds = getSelectedGameIds();
    var deleteSaveFiles = document.getElementById('batch-delete-save-files').checked;

    document.getElementById('batch-delete-modal').close();
    document.getElementById('delete-result').innerHTML = '<div class="alert">Deleting ' + selectedIds.length + ' game(s)...</div>';

    var promises = selectedIds.map(function(gameId) {
        return fetch('/games/' + gameId + '/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: 'delete_save_files=' + (deleteSaveFiles ? 'true' : 'false')
        });
    });

    Promise.all(promises).then(function(responses) {
        var failed = responses.filter(function(r) { return !r.ok; });
        if (failed.length === 0) {
            window.location.reload();
        } else {
            document.getElementById('delete-result').innerHTML =
                '<div class="alert alert-error">' + failed.length + ' of ' + selectedIds.length + ' deletions failed. Refresh to see current state.</div>';
        }
    }).catch(function(error) {
        document.getElementById('delete-result').innerHTML =
            '<div class="alert alert-error">Batch delete failed: ' + error + '</div>';
    });
}

function showDeleteModal(gameId) {
    document.getElementById('delete-game-id').value = gameId;
    document.getElementById('delete-game-id-display').textContent = gameId;
    document.getElementById('delete-save-files').checked = false;
    document.getElementById('delete-game-modal').showModal();
}

function submitDeleteGame() {
    const gameId = document.getElementById('delete-game-id').value;
    const deleteSaveFiles = document.getElementById('delete-save-files').checked;

    fetch('/games/' + gameId + '/delete', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'delete_save_files=' + (deleteSaveFiles ? 'true' : 'false')
    }).then(function(response) {
        if (response.ok) {
            // Reload page to show updated list
            window.location.reload();
        } else {
            return response.text().then(function(text) {
                document.getElementById('delete-result').innerHTML =
                    '<div class="alert alert-error">' + text + '</div>';
            });
        }
    }).catch(function(error) {
        document.getElementById('delete-result').innerHTML =
            '<div class="alert alert-error">Delete failed: ' + error + '</div>';
    });

    document.getElementById('delete-game-modal').close();
}
</script>

{{else}}
    <div class="empty-state">
        <p>No games currently running.</p>
        <p>Start a game from the Unity client to see it here.</p>
    </div>
{{end}}
{{end}}