@page
@model JoshHeaps.Net.Pages.ChessModel
@{
    Layout = "_Layout";
    ViewData["Title"] = "Chess";
}

<div id="chessContainer">
    <section id="boardArea">
        <div class="playerBar" id="topPlayerBar">
            <span class="playerDot black"></span>
            <span class="playerName">Opponent</span>
            <div class="capturedTray" id="captured-top"></div>
            <span class="advantage" id="advantage-top"></span>
        </div>

        <div id="chessBoard">
            <!-- Placeholder squares -->
            @for (int i = 0; i < 64; i++)
            {
                <div id="square-@i" class="chessSquare @( (i + i / 8) % 2 == 0 ? "light" : "dark" )"></div>
            }
        </div>

        <div class="playerBar" id="bottomPlayerBar">
            <span class="playerDot white"></span>
            <span class="playerName">You</span>
            <div class="capturedTray" id="captured-bottom"></div>
            <span class="advantage" id="advantage-bottom"></span>
        </div>
    </section>

    <aside id="gamePanel">
        <header class="panelHeader">
            <span class="panelLogo">&#9822;</span>
            <h1>Chess</h1>
            <button id="menuClose" class="iconBtn" aria-label="Close menu" onclick="closeMenu()">&times;</button>
        </header>

        <div id="moveList">
            <p class="movePlaceholder">Moves will appear here once a game begins.</p>
        </div>

        <div id="statusLine">Start a game to play.</div>

        <div id="panelButtons">
            <button id="startGameBtn" class="btn btn-primary" onclick="startNewGame()">New Game</button>
            <button id="startCPUGame" class="btn btn-secondary" onclick="startCPUGame()">Play vs CPU</button>
            <button id="copyPgnBtn" class="btn btn-ghost" onclick="copyPgn()" style="display: none">Copy PGN</button>
            <a id="watchLink" href="/watch">Watch other games &rarr;</a>
        </div>
    </aside>

    <div id="menuBackdrop" onclick="closeMenu()"></div>

    <div id="mobileBar">
        <span id="mobileStatus">Start a game to play.</span>
        <button id="menuToggle" class="btn btn-primary" onclick="toggleMenu()">Menu</button>
    </div>
</div>

<div id="promotionModal" style="display: none;">
    <p>Promote your pawn to:</p>
    <div id="promotionBtnContainer">
        <button onclick="selectPromotion(4)">
            <img src="/images/Chess Images/WhiteQueen.svg" alt="Queen" />
        </button>
        <button onclick="selectPromotion(1)">
            <img src="/images/Chess Images/WhiteRook.svg" alt="Rook" />
        </button>
        <button onclick="selectPromotion(3)">
            <img src="/images/Chess Images/WhiteBishop.svg" alt="Bishop" />
        </button>
        <button onclick="selectPromotion(2)">
            <img src="/images/Chess Images/WhiteKnight.svg" alt="Knight" />
        </button>
    </div>
</div>

<div id="difficultyModal" style="display: none;">
    <p>Set bot difficulty to:</p>
    <div id="difficultyButtonContainer">
        @for (int i = 1; i <= 20; i++)
        {
            <button onclick="selectDifficulty(@i)">
                @i
            </button>
        }
    </div>
</div>

<div id="colorModal" style="display: none;">
    <p>Play as:</p>
    <div id="colorButtonContainer">
        <button onclick="selectColor('white')">White</button>
        <button onclick="selectColor('black')">Black</button>
        <button onclick="selectColor('random')">Random</button>
    </div>
</div>

@section Scripts {
    <script src="~/js/signalr/signalr.min.js"></script>
    <script src="~/js/ChessScripts/GameState.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessUtils.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessAPI.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessSignalR.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessInteractions.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessBoard.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/ChessModals.js?v=@ViewData["cssVersion"]"></script>
    <script src="~/js/ChessScripts/chessMain.js?v=@ViewData["cssVersion"]"></script>
}

@section Styles {
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/chess/game.css?v=@ViewData["cssVersion"]" />
    <link rel="stylesheet" href="~/css/chess/site.css?v=@ViewData["cssVersion"]" />
}