{% extends "base.html" %}

{% block title %}Resultados para {{ roulette.name }}{% endblock %}

{% block content %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">API - Revesbot</a>
    </div>
</nav>

<div class="container">
    <div class="card">
        <div class="card-header">
            <h3>{{ roulette.name }}</h3>
        </div>
        <div class="card-body">
          <p class="card-text">histórico dos últimos 200 resultados.</p>
          <div class="grid" id="history">
            {% for num in numbers %}
                <div class="cell {{ get_color_class(num) }} number-{{num}}">{{num}}</div>
            {% endfor %}
        </div>
          
        </div>
      </div>

      <div class="card">
        <div class="card-header">

        </div>
        <div class="card-body">
           <div class="grid">
            <div class="cell green number-0">0</div>
            <div class="cell red number-32">32</div>
            <div class="cell black number-15">15</div>
            <div class="cell red number-19">19</div>
            <div class="cell black number-4">4</div>
            <div class="cell red number-21">21</div>
            <div class="cell black number-2">2</div>
            <div class="cell red number-25">25</div>
            <div class="cell black number-17">17</div>
            <div class="cell red number-34">34</div>
            <div class="cell black number-6">6</div>
            <div class="cell red number-27">27</div>
            <div class="cell black number-13">13</div>
            <div class="cell red number-36">36</div>
            <div class="cell black number-11">11</div>
            <div class="cell red number-30">30</div>
            <div class="cell black number-8">8</div>
            <div class="cell red number-23">23</div>
            <div class="cell black number-6">10</div>
            <div class="cell red number-5">5</div>
            <div class="cell black number-24">24</div>
            <div class="cell red number-16">16</div>
            <div class="cell black number-33">33</div>
            <div class="cell red number-1">1</div>
            <div class="cell black number-20">20</div>
            <div class="cell red number-30">30</div>
            <div class="cell black number-8">8</div>
            <div class="cell red number-23">23</div>
            <div class="cell black number-6">10</div>
            <div class="cell red number-5">5</div>
            <div class="cell black number-24">24</div>
            <div class="cell red number-16">16</div>
            <div class="cell black number-33">33</div>
            <div class="cell red number-1">1</div>
            <div class="cell black number-20">20</div>
            <div class="cell red number-14">14</div>
            <div class="cell black number-31">31</div>
            <div class="cell red number-9">9</div>
            <div class="cell black number-22">22</div>
            <div class="cell red number-18">18</div>
            <div class="cell black number-29">29</div>
            <div class="cell red number-7">7</div>
            <div class="cell black number-28">28</div>
            <div class="cell red number-12">12</div>
            <div class="cell black number-35">35</div>
            <div class="cell red number-3">3</div>
            <div class="cell black number-26">26</div>
            </div>
            
        </div>
      </div>

    <script>
        const historyEl = document.getElementById("history");

        // Evento de hover em grupo
        historyEl.addEventListener("mouseover", (event) => {
            const target = event.target;
            if (target.classList.contains("cell")) {
                const num = target.textContent;
                document.querySelectorAll(`.cell`).forEach(el => {
                    if (el.textContent === num) {
                        el.classList.add("hovered");
                    }
                });
            }
        });

        historyEl.addEventListener("mouseout", (event) => {
            const target = event.target;
            if (target.classList.contains("cell")) {
                document.querySelectorAll(`.cell.hovered`).forEach(el => {
                    el.classList.remove("hovered");
                });
            }
        });
        
        const history = Array.from(historyEl.children).map(el => parseInt(el.textContent));
        const socket = new WebSocket("ws://localhost:8000/ws");
    
        // Defina o slug da mesa que você deseja exibir
        const mesaDesejada = "{{ slug }}"
    
        function getColor(num) {
            if (num === 0) return 'green';
            const redNumbers = [1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36];
            return redNumbers.includes(num) ? 'red' : 'black';
        }
       

        socket.onmessage = function(event) {
            const data = JSON.parse(event.data);

            if (data.slug !== mesaDesejada) return;

            const num = data.result;

            history.unshift(num);
            if (history.length > 200) history.pop();

            historyEl.innerHTML = history.map((n, i) => {
                const highlight = i === 0 ? 'highlight' : '';
                return `<div class="cell ${getColor(n)} ${highlight}">${n}</div>`;
            }).join('');
        };
    </script>
{% endblock %}