{{define "content"}}
<nav class="breadcrumb">
    <a href="/">Games</a>
    <span class="separator">/</span>
    <span>{{.Game.GameID}}</span>
</nav>

<div class="page-header">
    <h1>Game {{.Game.GameID}}</h1>
    <span class="status-badge {{if eq .Game.RunStatus "Running"}}running{{else}}finished{{end}}">
        {{.Game.RunStatus}}
    </span>
</div>

<article>
    <header>
        <strong>Round {{.Game.CurrentRound}}</strong> &bull; {{.Game.ActionCount}} total actions
    </header>
</article>

<h2>Players</h2>
<div id="player-management-result"></div>
<table class="players-table">
    <thead>
        <tr>
            <th>Faction ID</th>
            <th>Faction Name</th>
            <th>Leader</th>
            <th>Type</th>
            <th>User</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {{range .Game.Players}}
        <tr>
            <td>{{.FactionID}}</td>
            <td>{{.FactionName}}</td>
            <td>{{.LeaderName}}</td>
            <td>
                <span class="player-type {{if .IsHuman}}human{{else}}ai{{end}}">
                    {{if .IsHuman}}Human{{else}}AI{{end}}
                </span>
            </td>
            <td>{{if .IsHuman}}{{.UserName}}{{else}}-{{end}}</td>
            <td class="actions">
                {{if .IsHuman}}
                <button class="btn-small btn-danger"
                        onclick="confirmDropToAi('{{$.Game.GameID}}', {{.FactionID}}, '{{.UserName}}')">
                    Drop to AI
                </button>
                <button class="btn-small"
                        onclick="showReassignModal('{{$.Game.GameID}}', {{.FactionID}}, '{{.UserName}}')">
                    Reassign
                </button>
                {{else}}
                <button class="btn-small btn-primary"
                        onclick="showAssignUserModal('{{$.Game.GameID}}', {{.FactionID}})">
                    Assign User
                </button>
                {{end}}
            </td>
        </tr>
        {{end}}
    </tbody>
</table>

<!-- Modal for Assign User -->
<dialog id="assign-user-modal">
    <form method="dialog">
        <h3>Assign User to AI Faction</h3>
        <div class="form-group">
            <label for="assign-username">Username:</label>
            <input type="text" id="assign-username" name="username" required>
        </div>
        <input type="hidden" id="assign-faction-id" name="faction_id">
        <input type="hidden" id="assign-game-id" name="game_id">
        <div class="modal-actions">
            <button type="button" class="btn-secondary" onclick="document.getElementById('assign-user-modal').close()">Cancel</button>
            <button type="button" class="btn-primary" onclick="submitAssignUser()">Assign</button>
        </div>
    </form>
</dialog>

<!-- Modal for Reassign -->
<dialog id="reassign-modal">
    <form method="dialog">
        <h3>Reassign Faction</h3>
        <p id="reassign-current-user"></p>
        <div class="form-group">
            <label for="reassign-username">New Username:</label>
            <input type="text" id="reassign-username" name="username" required>
        </div>
        <input type="hidden" id="reassign-faction-id" name="faction_id">
        <input type="hidden" id="reassign-game-id" name="game_id">
        <div class="modal-actions">
            <button type="button" class="btn-secondary" onclick="document.getElementById('reassign-modal').close()">Cancel</button>
            <button type="button" class="btn-primary" onclick="submitReassign()">Reassign</button>
        </div>
    </form>
</dialog>

<script>
function showAssignUserModal(gameId, factionId) {
    document.getElementById('assign-game-id').value = gameId;
    document.getElementById('assign-faction-id').value = factionId;
    document.getElementById('assign-username').value = '';
    document.getElementById('assign-user-modal').showModal();
}

function submitAssignUser() {
    const gameId = document.getElementById('assign-game-id').value;
    const factionId = document.getElementById('assign-faction-id').value;
    const username = document.getElementById('assign-username').value;

    if (!username.trim()) {
        alert('Username is required');
        return;
    }

    htmx.ajax('POST', '/games/' + gameId + '/player-management/ai-to-human', {
        values: {faction_id: factionId, username: username},
        target: '#player-management-result',
        swap: 'innerHTML'
    });

    document.getElementById('assign-user-modal').close();
}

function confirmDropToAi(gameId, factionId, username) {
    if (confirm('Are you sure you want to convert "' + username + '" to AI control?')) {
        htmx.ajax('POST', '/games/' + gameId + '/player-management/human-to-ai', {
            values: {faction_id: factionId},
            target: '#player-management-result',
            swap: 'innerHTML'
        });
    }
}

function showReassignModal(gameId, factionId, currentUsername) {
    document.getElementById('reassign-game-id').value = gameId;
    document.getElementById('reassign-faction-id').value = factionId;
    document.getElementById('reassign-current-user').textContent = 'Currently assigned to: ' + currentUsername;
    document.getElementById('reassign-username').value = '';
    document.getElementById('reassign-modal').showModal();
}

function submitReassign() {
    const gameId = document.getElementById('reassign-game-id').value;
    const factionId = document.getElementById('reassign-faction-id').value;
    const username = document.getElementById('reassign-username').value;

    if (!username.trim()) {
        alert('Username is required');
        return;
    }

    htmx.ajax('POST', '/games/' + gameId + '/player-management/reassign', {
        values: {faction_id: factionId, username: username},
        target: '#player-management-result',
        swap: 'innerHTML'
    });

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

<h2>Action History</h2>
<div id="rewind-result" class="rewind-result"></div>

<table class="history-table">
    <thead>
        <tr>
            <th style="width: 60px">#</th>
            <th>Action Type</th>
            <th>Faction</th>
            <th style="width: 120px">Date</th>
            <th style="width: 80px">Round</th>
            <th style="width: 80px">Actions</th>
        </tr>
    </thead>
    <tbody id="history-body"
           hx-get="/games/{{.Game.GameID}}/history?start=0&limit=50"
           hx-trigger="load"
           hx-swap="innerHTML">
        <tr>
            <td colspan="6" class="htmx-indicator">Loading history...</td>
        </tr>
    </tbody>
</table>
{{end}}