{% extends "base.html" %}

{% block title %}Lista de Sinais{% endblock %}

{% block content %}
<div class="container">
    <h4 class="mb-3">Sinais Detectados</h4>
  
    <div class="btn-group mb-3" role="group" aria-label="Filtro de status">
      <button class="btn btn-outline-primary" onclick="filterByStatus('all')">Todos</button>
      <button class="btn btn-outline-success" onclick="filterByStatus('win')">Ganhos</button>
      <button class="btn btn-outline-danger" onclick="filterByStatus('lost')">Perdidos</button>
      <button class="btn btn-outline-info" onclick="filterByStatus('inverted')">Pago na inversão</button>
      <button class="btn btn-outline-warning" onclick="filterByStatus('processing')">Ativos</button>
      <button class="btn btn-outline-secondary" onclick="filterByStatus('pending')">Aguardando</button>
    </div>
  
    <table class="table table-bordered table-sm table-hover text-center signals">
      <thead class="table-light">
        <tr>
          <th>Padrão</th>
          <th>Roleta</th>
          <th>Alvos</th>
          <th>Gatilho</th>
          <th width="200px">Aposta</th>
          <th>Status</th>
          <th>Hora</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody id="signalsTable">
        {% for sinal in sinais %}
          <tr id="signal-{{ sinal.id }}" data-status="{{ sinal.status }}"
              class="{% if sinal.status == 'win' %}table-success
                      {% elif sinal.status == 'lost' %}table-danger
                      {% elif sinal.status in ['processing', 'gale'] %}table-warning
                      {% elif sinal.status == 'inverted' %}table-info
                      {% elif sinal.status == 'pending' %}table-default
                      {% endif %}">
            <td>{{ sinal.pattern }}</td>
            <td>{{ sinal.roulette_name }}</td>
            <td>
              <div class="grid-numbers">
                {% for target in sinal.targets | default([]) %}
                  <div class="cell {{ get_color_class(target) }} number-{{target}}">{{target}}</div>
                {% endfor %}
              </div>
            </td>
            <td>
              <div class="grid-numbers">
                {% for trigger in sinal.triggers | default([]) %}
                  <div class="cell {{ get_color_class(trigger) }} number-{{trigger}}">{{trigger}}</div>
                {% endfor %}
              </div>
            </td>
            <td>
              <div class="grid-numbers">
                {% for bet in sinal.bets | default([]) %}
                  <div class="cell {{ get_color_class(bet) }} number-{{bet}}">{{bet}}</div>
                {% endfor %}
              </div>
            </td>
            <td id="status-{{ sinal.id }}">{{ sinal.message }}</td>
            <td>{{ sinal.created_at_formatted }}</td>
            <td>
                <button class="btn btn-sm btn-primary">Abrir mesa</button>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  

  <!-- Modal com iframe -->
<div class="modal fade" id="iframeModal" tabindex="-1" aria-labelledby="iframeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="iframeModalLabel">Mesa da Roleta</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
        </div>
        <div class="modal-body" style="height: 80vh;">
          <iframe id="rouletteIframe" src="" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
        </div>
      </div>
    </div>


    <script>

        function openIframeModal(url) {
        const iframe = document.getElementById("rouletteIframe");
        iframe.src = url;

        const modal = new bootstrap.Modal(document.getElementById('iframeModal'));
        modal.show();
        }

        function filterByStatus(status) {
        const rows = document.querySelectorAll("#signalsTable tr");

        rows.forEach(row => {
            const rowStatus = row.getAttribute("data-status");
            row.style.display = (status === 'all' || rowStatus === status) ? '' : 'none';
        });
        }

        const ws = new WebSocket(`ws://${window.location.host}/ws/signals`);
    
        ws.onopen = () => console.log("🔌 WebSocket conectado");
    
        ws.onmessage = (event) => {
            const data = JSON.parse(event.data);  
            if (data.type === "signal_update") {
                const row = document.getElementById(`signal-${data.id}`);
                const statusCell = document.getElementById(`status-${data.id}`);

                if (row && statusCell) {
                    statusCell.textContent = data.message;
                    row.classList.remove("table-success", "table-danger", "table-warning");
                    switch (data.status) {
                        case "processing":
                            row.classList.add("table-warning");
                            statusCell.textContent = data.message;
                            row.setAttribute("data-status", "processing");
                            break;
                        
                        case "gale":
                            row.classList.add("table-warning");
                            statusCell.textContent = data.message;
                            row.setAttribute("data-status", "processing");
                            break;

                        case "inverted":
                            row.classList.add("table-info");
                            statusCell.textContent = data.message;
                            row.setAttribute("data-status", "inverted");
                            break;
                        
                        case "win":
                            row.classList.add("table-success");
                            statusCell.textContent = data.message;
                            row.setAttribute("data-status", "win");
                            break;
                        
                        case "lost":
                            row.classList.add("table-danger");
                            statusCell.textContent = data.message;
                            row.setAttribute("data-status", "lost");
                            break;
                    
                        default:
                            break;
                    }

                }
            }else if (data.type === "new_signal") {
                const signal = data;

                const tbody = document.querySelector("table.signals tbody");

                const existingRow = document.getElementById(`signal-${signal.id}`);
                if (existingRow) return;

                const tr = document.createElement("tr");
                tr.setAttribute("id", `signal-${signal.id}`);
                tr.setAttribute("data-status", signal.status);

                // Aplica a classe visual
                let rowClass = "";
                if (signal.status === "win") rowClass = "table-success";
                else if (signal.status === "lost") rowClass = "table-danger";
                else if (["processing", "gale"].includes(signal.status)) rowClass = "table-warning";
                else if (signal.status === "pending") rowClass = "table-default";

                tr.className = rowClass;


                tr.innerHTML = `
                    <td>${signal.pattern || ''}</td>
                    <td>${signal.roulette_name || signal.roulette_id || ''}</td>
                    <td>
                        <div class="grid-numbers">
                            ${(signal.targets || []).map(num => `<div class="cell ${getColorClass(num)} number-${num}">${num}</div>`).join('')}
                        </div>
                    </td>
                    <td>
                        <div class="grid-numbers">
                            ${(signal.triggers || []).map(num => `<div class="cell ${getColorClass(num)} number-${num}">${num}</div>`).join('')}
                        </div>
                    </td>
                    <td>
                        <div class="grid-numbers">
                            ${(signal.bets || []).map(num => `<div class="cell ${getColorClass(num)} number-${num}">${num}</div>`).join('')}
                        </div>
                    </td>
                    <td id="status-${signal.id}">${signal.message || '---'}</td>
                    <td>${signal.created_at_formatted || '---'}</td>
                    <td><a target="_blank" href="${signal.url || '#'}" class="btn btn-sm btn-primary">Abrir mesa</a></td>
                `;

                tbody.prepend(tr);
            }
        };
    
        ws.onerror = (err) => console.error("❌ WebSocket erro:", err);
        ws.onclose = () => console.warn("🔌 WebSocket desconectado");
    
        function getColorClass(num) {
            num = parseInt(num);
            if ([1,3,5,7,9,12,14,16,18,19,21,23,25,27,30,32,34,36].includes(num)) return 'red';
            if ([2,4,6,8,10,11,13,15,17,20,22,24,26,28,29,31,33,35].includes(num)) return 'black';
            return 'green';
        }
    </script>
    
{% endblock %}