{{-- Tema "Plenário Feira Grande" — overlays disparados por eventos.

     Usam as MESMAS variáveis Alpine da raiz do componente (`overlay`,
     `dados`), preenchidas pelos MESMOS ouvintes de sempre
     (resultado-votacao / resultado-votacao-requerimento / novo-pedido-vista)
     e com os MESMOS tempos (3s apurando → resultado até 12s; vista 7s).
     Nada aqui decide resultado: aprovado/rejeitado vem de dados.resultado
     (persistido no servidor). Contagem animada, barras percentuais e o
     destaque de unanimidade são só apresentação, calculados a partir dos
     números já recebidos em `dados` (mesma fórmula do PHP homologado). --}}

{{-- ============ RESULTADO DA VOTAÇÃO (sequência cinematográfica do PHP) ============ --}}
<div class="fg-resultado-final"
     x-show="overlay === 'contando' || overlay === 'resultado'" x-cloak
     x-data="{
        fgTotal(d) { return (Number(d.favor) || 0) + (Number(d.contra) || 0) + (Number(d.abstencao) || 0) },
        fgPct(d, k) { const t = this.fgTotal(d); return t ? ((Number(d[k]) || 0) / t) * 100 : 0 },
        fgClasse(d) { const r = String(d.resultado || ''); return (r === 'aprovada' || r === 'aprovado') ? 'aprovada' : ((r === 'rejeitada' || r === 'rejeitado') ? 'rejeitada' : 'empatada') },
        fgUnanime(d) { const t = this.fgTotal(d); return this.fgClasse(d) === 'aprovada' && t > 0 && (Number(d.favor) || 0) === t },
        fgTexto(d) {
            const c = this.fgClasse(d);
            if (c === 'empatada') return 'EMPATE';
            if (d.ehRequerimento) return c === 'aprovada' ? 'APROVADO' : 'REJEITADO';
            return c === 'aprovada' ? 'APROVADA' : 'REJEITADA';
        },
        fgIcone(d) { const c = this.fgClasse(d); return c === 'aprovada' ? 'fa-circle-check' : (c === 'rejeitada' ? 'fa-circle-xmark' : 'fa-scale-balanced') },
        {{-- Correção "placar zerando": a contagem animada grava o número
             num estado Alpine (definir → x-text), NUNCA direto em
             el.textContent. Motivo: a cada wire:poll.2s o Livewire faz morph
             do DOM e, pra isso, recria este bloco x-if em modo clone a partir
             do HTML do servidor — onde o número é o 0 estático e o x-init
             não roda. Texto escrito à mão no DOM era então sobrescrito por
             esse 0 já no primeiro poll depois do resultado aparecer (e o
             x-init, que só roda uma vez, nunca o reescrevia). Estado Alpine
             é copiado pelo morph (mesmo motivo das barras logo abaixo, com
             x-data próprio, nunca zerarem), então o x-text reaplica o valor
             certo. Valor continua vindo só de `dados` (persistido). --}}
        fgContar(definir, alvo, atraso) {
            const fim = Math.max(0, Number(alvo) || 0);
            definir(0);
            setTimeout(() => {
                const inicio = performance.now();
                const passo = (agora) => {
                    const p = Math.min(1, (agora - inicio) / 900);
                    definir(Math.round(fim * (1 - Math.pow(1 - p, 3))));
                    if (p < 1) requestAnimationFrame(passo); else definir(fim);
                };
                requestAnimationFrame(passo);
            }, atraso);
        },
     }"
     :class="overlay === 'resultado' ? ('fg-rev ' + (fgUnanime(dados) ? 'unanime' : fgClasse(dados))) : ''">
    <div class="fg-resultado-box">
        <template x-if="overlay === 'contando'">
            <div class="fg-resultado-apurando">
                <div class="fg-resultado-separador"></div>
                <div class="fg-resultado-encerrada"><i class="fa-solid fa-square-poll-vertical"></i> Votação encerrada</div>
                <div class="fg-resultado-separador"></div>
                <div class="fg-resultado-apurando-texto">Apurando votos<span class="fg-resultado-pontos"></span></div>
            </div>
        </template>

        <template x-if="overlay === 'resultado'">
            <div class="fg-resultado-revelacao">
                <div class="fg-resultado-titulo" x-text="dados.ehRequerimento ? 'Resultado da votação incidental' : 'Resultado oficial da votação'"></div>
                <div class="fg-resultado-materia" x-text="dados.ehRequerimento ? dados.tipo : dados.titulo"></div>
                <template x-if="dados.ehRequerimento && dados.materia">
                    <div class="fg-resultado-extra" x-text="'Matéria: ' + dados.materia"></div>
                </template>

                <template x-if="fgUnanime(dados)">
                    <div class="fg-resultado-unanimidade"><i class="fa-solid fa-star"></i> Decisão por unanimidade <i class="fa-solid fa-star"></i></div>
                </template>

                <div class="fg-resultado-status" :class="fgUnanime(dados) ? 'unanime' : fgClasse(dados)">
                    <i class="fa-solid" :class="fgIcone(dados)" aria-hidden="true"></i>
                    <span x-text="fgTexto(dados)"></span>
                </div>

                {{-- mesma frase do tema padrão pra votação incidental --}}
                <template x-if="dados.ehRequerimento && dados.materia">
                    <div class="fg-resultado-nota" x-text="dados.resultado === 'aprovado' ? 'Matéria retirada da pauta.' : 'Matéria permanece na sessão.'"></div>
                </template>

                @if($config->painel_mostrar_totalizadores)
                    <div class="fg-resultado-placar">
                        <div class="fg-res-card favor">
                            <span>Favoráveis</span>
                            <strong x-data="{ n: 0 }" x-init="fgContar(v => n = v, dados.favor, 0)" x-text="n">0</strong>
                            <div class="fg-res-barra"><i x-data="{ w: 0 }" x-init="requestAnimationFrame(() => requestAnimationFrame(() => w = fgPct(dados, 'favor')))" :style="'width:' + w + '%'"></i></div>
                        </div>
                        <div class="fg-res-card contra">
                            <span>Contrários</span>
                            <strong x-data="{ n: 0 }" x-init="fgContar(v => n = v, dados.contra, 140)" x-text="n">0</strong>
                            <div class="fg-res-barra"><i x-data="{ w: 0 }" x-init="requestAnimationFrame(() => requestAnimationFrame(() => w = fgPct(dados, 'contra')))" :style="'width:' + w + '%'"></i></div>
                        </div>
                        <div class="fg-res-card abstencao">
                            <span>Abstenções</span>
                            <strong x-data="{ n: 0 }" x-init="fgContar(v => n = v, dados.abstencao, 280)" x-text="n">0</strong>
                            <div class="fg-res-barra"><i x-data="{ w: 0 }" x-init="requestAnimationFrame(() => requestAnimationFrame(() => w = fgPct(dados, 'abstencao')))" :style="'width:' + w + '%'"></i></div>
                        </div>
                    </div>
                @endif

                <div class="fg-resultado-rodape">{{ $config->nome_camara }} · Resultado oficial</div>
            </div>
        </template>
    </div>
</div>

{{-- ============ PEDIDO DE VISTAS (#ovVistas do PHP) ============ --}}
<div class="fg-camada fg-camada-vistas" x-show="overlay === 'vista'" x-cloak>
    <div class="fg-vistas-box">
        <template x-if="dados.foto">
            <img class="fg-vistas-foto" :src="dados.foto" alt="">
        </template>
        <template x-if="! dados.foto">
            <div class="fg-vistas-foto"></div>
        </template>
        <div style="min-width:0">
            <div class="fg-vistas-tag"><i class="fa-solid fa-file-circle-exclamation"></i> Pedido de vistas</div>
            <div class="fg-vistas-nome" x-text="dados.nome"></div>
            <div class="fg-vistas-sub">solicitou vistas da matéria em leitura</div>
            <div class="fg-vistas-materia" x-text="dados.materia"></div>
        </div>
    </div>
</div>