{% extends "base.html" %}
{% block title %}Blokus — Home{% endblock %}
{% block content %}
<div class="home">
    <h1>Blokus</h1>

    <div class="section">
        <h2>New Game</h2>
        <form id="new-game-form" action="/game/new" method="POST">
            <div class="form-group">
                <label>Board Size</label>
                <select name="board_size">
                    <option value="14">14×14 (Duo)</option>
                    <option value="20" selected>20×20 (Standard)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Players</label>
                <select name="num_players" id="num_players_select">
                    <option value="2">2 Players</option>
                    <option value="4" selected>4 Players</option>
                </select>
            </div>
            <div class="form-group">
                <label>Your Seat</label>
                <select name="human_player" id="human_player_select">
                    <option value="0" selected>Player 1 (Red)</option>
                    <option value="1">Player 2 (Blue)</option>
                    <option value="2">Player 3 (Yellow)</option>
                    <option value="3">Player 4 (Green)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Opponent Bot</label>
                <select name="bot_type">
                    <option value="random">Random (casual)</option>
                    <option value="greedy" selected>Greedy (moderate)</option>
                    <option value="greedy_corners">Greedy Corners (strong)</option>
                    <option value="minimax">Minimax (2P only)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Random Seed</label>
                <input type="number" name="bot_seed" value="42" min="0">
            </div>
            <button type="submit">Start Game</button>
        </form>
    </div>

    <div class="section">
        <h2>Previous Runs</h2>
        {% if runs %}
        <table class="runs-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Board</th>
                    <th>Players</th>
                    <th>Bot</th>
                    <th>Result</th>
                    <th>Moves</th>
                    <th>Coverage</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for run in runs %}
                <tr>
                    <td>{{ run.created_at[:19] }}</td>
                    <td>{{ run.board_size }}×{{ run.board_size }}</td>
                    <td>{{ run.num_players }}P</td>
                    <td>{{ run.bot_type }}</td>
                    <td>
                        {% if run.game_over %}
                            {% if run.winner is not none %}
                                Winner: P{{ run.winner + 1 }}
                            {% else %}
                                Tie
                            {% endif %}
                        {% else %}
                            In progress
                        {% endif %}
                    </td>
                    <td>{{ run.total_moves }}</td>
                    <td>{{ run.coverage }}%</td>
                    <td>
                        <a href="/replay/{{ run.run_id }}">Replay</a>
                        <form method="POST" action="/runs/{{ run.run_id }}/delete" style="display:inline;">
                            <button type="submit" class="delete-btn" title="Delete">×</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty">No previous runs. Start a new game!</p>
        {% endif %}
    </div>
</div>

<script>
    const numPlayersSelect = document.getElementById('num_players_select');
    const humanPlayerSelect = document.getElementById('human_player_select');

    function updateHumanOptions() {
        const numPlayers = parseInt(numPlayersSelect.value);
        humanPlayerSelect.innerHTML = '';
        const names = ['Player 1 (Red)', 'Player 2 (Blue)', 'Player 3 (Yellow)', 'Player 4 (Green)'];
        for (let i = 0; i < numPlayers; i++) {
            const opt = document.createElement('option');
            opt.value = i;
            opt.textContent = names[i];
            humanPlayerSelect.appendChild(opt);
        }
    }

    numPlayersSelect.addEventListener('change', updateHumanOptions);
    updateHumanOptions();
</script>
{% endblock %}