// ARQUIVO: gestao_ponto/logic_ponto_v3.js

let currentUser = null;
let registrosHoje = [null, null, null, null, null, null, null, null]; 
let bancoHorasAcumulado = 0;
let cronometroInterval = null; 

// --- CORREÇÃO: MOVIDO PARA O TOPO ---
let relogioInterval = null; 
// ------------------------------------

const META_SEMANA = parseInt(localStorage.getItem('cfg_meta_dia')) || 480; 
const META_SABADO = parseInt(localStorage.getItem('cfg_meta_sab')) || 240;

document.addEventListener('DOMContentLoaded', async () => {
    // 1. Recupera Sessão do Sistema Principal
    const authUser = localStorage.getItem('ponto_auth_user');
    if (authUser) {
        sessionStorage.setItem('currentUser', authUser);
        currentUser = JSON.parse(authUser);
    } else {
        const sessionUser = sessionStorage.getItem('currentUser');
        if (sessionUser) currentUser = JSON.parse(sessionUser);
    }

    // --- CORREÇÃO 2: FIM DO LOOP INFINITO ---
    if (!currentUser) {
        Swal.fire({ 
            icon: 'error', 
            title: 'Sessão não encontrada', 
            text: 'Redirecionando para o sistema principal...',
            timer: 2000,
            showConfirmButton: false
        }).then(() => {
            window.location.href = "../"; // <--- Manda de volta para o sistema principal
        });
        return; 
    }

    // --- NOVO: INICIA O RELÓGIO EM TEMPO REAL ---
    iniciarRelogio();

    // 2. Inicia o Sistema
    await carregarPontoDoBanco();
    
    // Adiciona evento ao mudar o tipo de dia
    const selectDia = document.getElementById('simulador-dia');
    if(selectDia) {
        selectDia.addEventListener('change', atualizarInterface);
    }
    
});

async function carregarPontoDoBanco() {
    const dataObjeto = new Date();
    const ano = dataObjeto.getFullYear();
    const mes = String(dataObjeto.getMonth() + 1).padStart(2, '0');
    const dia = String(dataObjeto.getDate()).padStart(2, '0');
    const dataString = `${ano}-${mes}-${dia}`;

    const elData = document.getElementById('ponto-data-display');
    if(elData) {
        elData.innerText = dataObjeto.toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' });
    }
    
    atualizarHoraInput();
    const selectModo = document.getElementById('simulador-dia');
    
    try {
        const resp = await fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({ acao: 'ler_ponto_dia', usuario_id: currentUser.id, data: dataString })
        });
        
        // AQUI NASCE A VARIÁVEL JSON
        const json = await resp.json(); 
        
        if (json.status === 'sucesso') {
            bancoHorasAcumulado = parseInt(json.acumulado || 0);
            let obsSalva = json.justificativa || (json.dados_hoje ? json.dados_hoje.observacao : '') || '';

            if (json.dados_hoje) {
                let horarios = json.dados_hoje.horarios;
                if (typeof horarios === 'string') {
                    try { horarios = JSON.parse(horarios); } catch(e) { horarios = []; }
                }
                
                if (Array.isArray(horarios)) {
                    while(horarios.length < 8) {
                        horarios.push(null);
                    }
                    registrosHoje = horarios.map(h => h === "" ? null : h);
                } else {
                    registrosHoje = [null, null, null, null, null, null, null, null];
                }

                if(json.dados_hoje.meta_minutos !== undefined && selectModo) {
                    const metaSalva = parseInt(json.dados_hoje.meta_minutos);
                    const diaSemana = dataObjeto.getDay();
                    if(metaSalva === 0) selectModo.value = 'feriado_trab'; 
                    else if(diaSemana === 6 && metaSalva > 0) selectModo.value = 'sabado_trab';
                    else selectModo.value = 'semana';
                }
            } else {
                registrosHoje = [null, null, null, null, null, null, null, null];
            }
            
            renderizarTimeline(obsSalva);
            atualizarInterface(); 
        }

        // --- CÓDIGO DO HISTÓRICO MOBILE (AGORA NO LUGAR CERTO) ---
        // Ele deve ficar DENTRO do 'try', pois precisa usar a variável 'json'
        
        const divMobile = document.getElementById('lista-timeline-mobile');
    
        // [FIX] Se a API não mandou 'horarios', usa o registrosHoje que acabamos de processar
        if (!json.horarios) {
            json.horarios = registrosHoje;
        }

        if (divMobile && json.horarios) {
            let listaH = Array.isArray(json.horarios) ? json.horarios : JSON.parse(json.horarios || '[]');
            if (!listaH) listaH = ["", "", "", "", "", "", "", ""];

            let html = `<div class="absolute left-[7px] top-2 bottom-2 w-[2px] bg-slate-100"></div>`; 
            
            const rotulos = ["Entrada", "Saída Almoço", "Volta Almoço", "Saída"];
            let temAlgum = false;

            for (let i = 0; i < 4; i++) { 
                const valorHorario = listaH[i];
                if (valorHorario && valorHorario !== "" && valorHorario !== "null") {
                    temAlgum = true;
                    html += `
                    <div class="relative flex items-center gap-3 z-10 mb-3">
                        <div class="w-4 h-4 rounded-full bg-emerald-100 border-2 border-emerald-500 flex-shrink-0"></div>
                        <div class="flex justify-between w-full items-center bg-slate-50 rounded-lg px-3 py-2 border border-slate-100">
                            <span class="text-[10px] font-bold text-slate-400 uppercase">${rotulos[i] || 'Extra'}</span>
                            <span class="text-sm font-bold text-slate-700 font-mono">${valorHorario}</span>
                        </div>
                    </div>`;
                } else {
                    html += `
                    <div class="relative flex items-center gap-3 z-10 opacity-40 mb-3">
                        <div class="w-3 h-3 ml-0.5 rounded-full bg-slate-200 flex-shrink-0"></div>
                        <div class="flex justify-between w-full items-center">
                            <span class="text-[10px] text-slate-300 uppercase">${rotulos[i] || '--'}</span>
                            <span class="text-xs text-slate-300">--:--</span>
                        </div>
                    </div>`;
                }
            }
            if (!temAlgum) html = `<div class="text-center text-xs text-slate-400 py-4">Nenhum registro hoje.</div>`;
            divMobile.innerHTML = html;
        }
        // -----------------------------------------------------------

    } catch(e) { console.error("Erro API:", e); }

    if (typeof openPontoModal === 'function') openPontoModal();

} // <--- FIM DA FUNÇÃO CARREGAR PONTO

async function confirmarRegistroPonto() {
    // 1. TRAVAMENTO IMEDIATO (Anti-Duplicidade)
    // Tenta pegar pelo ID do modal ou do painel manual
    let campoObs = document.getElementById('justificativa-ponto') || document.getElementById('justificativa-input');
    const textoParaEnvio = campoObs ? campoObs.value.trim() : '';
    const btn = document.getElementById('btn-confirmar');
    const textoOriginal = btn ? btn.innerHTML : 'Confirmar';

    // Trava o botão no exato momento do clique
    if (btn) {
        btn.disabled = true;
        btn.style.pointerEvents = 'none';
        btn.className = "col-span-2 bg-emerald-600 text-white py-3 md:py-3.5 rounded-xl shadow-inner flex items-center justify-center gap-2 text-sm font-bold w-full opacity-90 cursor-not-allowed";
        btn.innerHTML = `<i class="fas fa-check animate-bounce"></i> REGISTRADO!`;
    }

    // Feedback Tátil
    if (navigator.vibrate) navigator.vibrate([50, 50]);

    // 2. FEEDBACK VISUAL INSTANTÂNEO (Não espera internet)
    const agora = new Date();
    const horaVisual = String(agora.getHours()).padStart(2, '0') + ':' + String(agora.getMinutes()).padStart(2, '0');

    Swal.fire({
        icon: 'success',
        title: 'PONTO REGISTRADO!',
        html: `
            <div class="mt-2 animate-fade-in-up">
                <div class="text-5xl font-mono font-bold text-slate-700 tracking-tighter my-4">${horaVisual}</div>
                <div id="status-sync-estagio" class="text-xs text-orange-400 uppercase tracking-wide font-bold bg-orange-50 py-1 px-3 rounded-full inline-flex items-center gap-2">
                    <i class="fas fa-circle-notch fa-spin"></i> Sincronizando...
                </div>
            </div>
        `,
        showConfirmButton: true,
        confirmButtonText: 'OK, FECHAR',
        confirmButtonColor: '#10B981',
        timer: 4000,
        timerProgressBar: true,
        backdrop: 'rgba(15, 23, 42, 0.95)'
    });

    // 3. ENVIO EM SEGUNDO PLANO
    try {
        const payload = {
            acao: 'registrar_ponto',
            usuario_id: currentUser.id,
            latitude: 0, 
            longitude: 0,
            justificativa_nova: textoParaEnvio
        };

        const resp = await fetch('api.php', {
            method: 'POST',
            body: JSON.stringify(payload)
        });

        const json = await resp.json();

        if (json.status === 'sucesso') {
            // Sucesso confirmado: Atualiza ícone visual
            const elStatus = document.getElementById('status-sync-estagio');
            if(elStatus) {
                elStatus.className = "text-[10px] text-emerald-600 uppercase tracking-wide font-bold bg-emerald-50 py-1 px-3 rounded-full inline-block animate-pulse";
                elStatus.innerHTML = "<i class='fas fa-check'></i> Salvo na nuvem";
            }

            // Limpa campos
            if (campoObs) campoObs.value = '';
            const inputManual = document.getElementById('justificativa-input');
            if(inputManual) inputManual.value = '';

            // Atualiza dados no fundo
            if (typeof carregarPontoDoBanco === 'function') await carregarPontoDoBanco();

        } else {
            throw new Error(json.msg || "Erro no servidor");
        }

    } catch (e) {
        // 4. ROLLBACK (Só avisa se der erro grave de conexão)
        console.error(e);
        if (navigator.vibrate) navigator.vibrate(500);
        
        Swal.fire({
            icon: 'error',
            title: 'FALHA DE CONEXÃO',
            text: 'O registro visual ocorreu, mas a internet falhou. Tente novamente.',
            confirmButtonColor: '#EF4444'
        });

        // Destrava botão para tentar de novo
        if (btn) {
            btn.disabled = false;
            btn.style.pointerEvents = 'auto';
            btn.className = "col-span-2 bg-indigo-600 hover:bg-indigo-700 text-white py-3 md:py-3.5 rounded-xl shadow-lg flex items-center justify-center gap-2 text-sm font-bold w-full active:scale-95 transition-all";
            btn.innerHTML = textoOriginal;
        }
    }
}

// --- FUNÇÕES DE UI ---

window.openPontoModal = function() {
    const modal = document.getElementById('ponto-modal');
    if(modal) modal.classList.remove('hidden');
    atualizarInterface(); 
}

window.closePontoModal = function() { 
    // Como é integrado, apenas fecha o modal ou volta pro sistema principal se possível
    // Se for iframe ou popup:
    const modal = document.getElementById('ponto-modal');
    if(modal) modal.classList.add('hidden');
}

function calcularSaldos() {
    // 1. CARREGA CONFIGURAÇÕES (Para quem for CLT)
    const cfgMetaSemana = parseInt(localStorage.getItem('cfg_meta_dia')) || 480; 
    const cfgMetaSabado = parseInt(localStorage.getItem('cfg_meta_sab')) || 240; 

    // 2. DETECTA SE É HORISTA (CORRIGIDO: SEM OPERADOR)
    // Apenas nível 'horista' ou 'estagiario' ativa o modo "Positivo Sempre"
    let nivel = (currentUser && currentUser.nivel_acesso) ? currentUser.nivel_acesso.toLowerCase().trim() : '';
    
    // REMOVIDO 'OPERADOR' DAQUI. AGORA É ESTRITO.
    let ehHorista = (nivel === 'horista' || nivel.includes('estagi'));

    // 3. DEFINE META DO DIA
    const dataHoje = new Date();
    const diaSemana = dataHoje.getDay(); 
    
    const elFeriado = document.getElementById('check-feriado');
    const elExtra = document.getElementById('check-extra-sabado');
    const isFeriado = elFeriado ? elFeriado.checked : false;
    const isExtraSabado = elExtra ? elExtra.checked : false;

    let metaAtual = 0;

    if (ehHorista) {
        // --- MODO HORISTA: META SEMPRE ZERO ---
        metaAtual = 0; 
        
        // Ajusta visual
        const elSub = document.getElementById('ponto-data-display')?.nextElementSibling;
        if(elSub) {
            elSub.innerText = "HORISTA / LIVRE";
            elSub.className = "text-[10px] font-bold text-emerald-600 uppercase tracking-wider";
        }
    } else {
        // --- MODO CLT (OPERADORES ENTRAM AQUI) ---
        // Aqui eles recebem a meta de 8h (480min) e podem ficar negativos
        if (isFeriado) {
            metaAtual = 0; 
        } else if (diaSemana === 0) {
            metaAtual = 0; 
        } else if (diaSemana === 6) {
            metaAtual = isExtraSabado ? 0 : cfgMetaSabado;
        } else {
            metaAtual = cfgMetaSemana; 
        }
        
        // Restaura texto padrão se não for horista
        const elSub = document.getElementById('ponto-data-display')?.nextElementSibling;
        if(elSub && elSub.innerText.includes('HORISTA')) {
            elSub.innerText = "DIA ÚTIL"; // ou a lógica de texto que você já tinha
            elSub.className = "text-[10px] font-bold text-slate-400 uppercase tracking-wider";
        }
    }

    // 4. CALCULA TRABALHADOS
    let minutosTrabalhados = 0;
    for (let i = 0; i < registrosHoje.length; i += 2) {
        const ent = registrosHoje[i];
        const sai = registrosHoje[i+1];
        if (ent && sai && ent !== "FALTA" && sai !== "FALTA") {
            const mEnt = timeToMins(ent);
            const mSai = timeToMins(sai);
            if (mSai > mEnt) minutosTrabalhados += (mSai - mEnt);
        }
    }

    // 5. CÁLCULO FINAL
    let saldoDia = minutosTrabalhados - metaAtual;
    
    // Ajuste visual neutro
    if(metaAtual === 0 && minutosTrabalhados === 0) saldoDia = 0;

    // 6. ATUALIZA TELA
    let previsaoFinal = bancoHorasAcumulado + saldoDia;
    atualizarDisplay('display-banco-anterior', bancoHorasAcumulado, true);
    
    const elMeta = document.getElementById('display-meta-dia');
    if(elMeta) elMeta.innerText = metaAtual === 0 ? "Livre" : minsToTime(metaAtual);

    atualizarDisplay('display-total-trabalhado', minutosTrabalhados);
    
    const elSaldo = document.getElementById('display-saldo-dia');
    const barSaldo = document.getElementById('bar-saldo-dia');
    
    if(elSaldo && barSaldo) {
        elSaldo.innerText = (saldoDia > 0 ? "+" : "") + minsToTime(saldoDia);
        
        if (ehHorista) {
            // HORISTA: Visual Sempre Verde
            elSaldo.className = "text-xl font-bold text-emerald-600";
            barSaldo.className = "bg-emerald-500 h-1.5 rounded-full w-full";
        } else {
            // CLT (Inclusive Operador): Vermelho se dever, Verde se sobrar
            elSaldo.className = saldoDia >= 0 ? "text-xl font-bold text-emerald-600" : "text-xl font-bold text-rose-600";
            if (saldoDia >= 0) {
                barSaldo.className = "bg-emerald-500 h-1.5 rounded-full w-full";
            } else {
                let pct = metaAtual > 0 ? (minutosTrabalhados / metaAtual) * 100 : 0;
                barSaldo.className = "bg-rose-500 h-1.5 rounded-full";
                barSaldo.style.width = `${Math.min(100, pct)}%`;
            }
        }
    }
    
    const elFinal = document.getElementById('display-banco-final');
    if(elFinal) {
        elFinal.innerText = (previsaoFinal > 0 ? "+" : "") + minsToTime(previsaoFinal);
        if (ehHorista) {
            elFinal.className = "font-bold text-emerald-600 text-sm";
        } else {
            elFinal.className = previsaoFinal >= 0 ? "font-bold text-emerald-600 text-sm" : "font-bold text-rose-600 text-sm";
        }
    }

    return { meta: metaAtual, saldo: saldoDia };
}

window.atualizarInterface = function() {
    const elSubtitulo = document.getElementById('ponto-data-display')?.nextElementSibling;
    const dataHoje = new Date();
    const isSabado = dataHoje.getDay() === 6;
    const isDomingo = dataHoje.getDay() === 0;

    // 1. LÓGICA DO BOTÃO EXTRA (Só aparece sábado)
    const btnExtraDesk = document.getElementById('container-extra-desktop');
    const btnExtraMob = document.getElementById('container-extra-mobile');
    
    if (isSabado) {
        if(btnExtraDesk) btnExtraDesk.classList.remove('hidden');
        if(btnExtraMob) btnExtraMob.classList.remove('hidden');
    } else {
        if(btnExtraDesk) btnExtraDesk.classList.add('hidden');
        if(btnExtraMob) btnExtraMob.classList.add('hidden');
        // Se não é sábado, desmarca forçado para não bugar
        const chkExtra = document.getElementById('check-extra-sabado');
        if(chkExtra) chkExtra.checked = false;
    }

    // 2. ATUALIZA TEXTO DO DIA
    let textoDia = "DIA ÚTIL";
    const isFeriado = document.getElementById('check-feriado').checked;
    const isExtra = document.getElementById('check-extra-sabado') ? document.getElementById('check-extra-sabado').checked : false;

    if (isFeriado) textoDia = "FERIADO (100% EXTRA)";
    else if (isDomingo) textoDia = "DOMINGO";
    else if (isSabado) {
        textoDia = isExtra ? "SÁBADO EXTRA (100%)" : "SÁBADO LETIVO";
    }

    if(elSubtitulo) elSubtitulo.innerText = textoDia;
    const txtMobile = document.getElementById('ponto-tipo-dia-mobile');
    if(txtMobile) txtMobile.innerText = textoDia;

    // Sincroniza checkbox mobile do Extra
    const chkExtraDesk = document.getElementById('check-extra-sabado');
    const chkExtraMob = document.getElementById('check-extra-mobile');
    if(chkExtraMob && chkExtraDesk) chkExtraMob.checked = chkExtraDesk.checked;

    renderizarTimeline();
    calcularSaldos();
    
    // Atualiza botões de ação
    const passo = registrosHoje.findIndex(r => r === null);
    const btnConfirmar = document.getElementById('btn-confirmar');
    const btnFalta = document.getElementById('btn-falta');
    const stepTitle = document.getElementById('step-title');
    const titulos = ["Entrada Manhã", "Saída Almoço", "Entrada Tarde", "Saída Tarde", "Extra Entrada", "Extra Saída", "Extra 2 Ent", "Extra 2 Sai"];
    
    if(stepTitle) stepTitle.innerText = (passo >= 0) ? titulos[passo] : "Dia Encerrado";

    // --- AQUI ESTÁ A MUDANÇA (Lógica do Botão Falta) ---
    // Pegamos o elemento de texto (span) dentro do botão
    const lblFalta = document.getElementById('lbl-falta-periodo'); // Pega o <span> do texto

    if(btnFalta) {
        if(passo === 0) {
            btnFalta.classList.remove('hidden');
            if(lblFalta) lblFalta.innerText = "Manhã"; // Muda texto para Manhã
        } 
        else if(passo === 2) {
            btnFalta.classList.remove('hidden');
            if(lblFalta) lblFalta.innerText = "Tarde"; // Muda texto para Tarde
        } 
        else {
            btnFalta.classList.add('hidden'); // Esconde nos outros horários
        }
    }
    // ----------------------------------------------------

    if(btnConfirmar) {
        if (passo === -1) {
            btnConfirmar.innerHTML = 'Dia Fechado';
            btnConfirmar.disabled = true;
            btnConfirmar.className = "w-full bg-gray-400 text-white font-bold py-4 rounded-xl cursor-not-allowed";
        } else {
            btnConfirmar.innerHTML = 'Confirmar Ponto';
            btnConfirmar.disabled = false;
            btnConfirmar.className = "w-full bg-indigo-600 text-white font-bold py-4 rounded-xl shadow-lg hover:bg-indigo-700 transition-all";
        }
    }
}

// --- AÇÕES ---

window.registrarPonto = async function() {
    const elInput = document.getElementById('current-time-input');
    const hora = elInput.value;
    if(!hora) return Swal.fire('Atenção', 'Informe o horário.', 'warning');

    const index = registrosHoje.findIndex(r => r === null);
    if(index !== -1) {
        registrosHoje[index] = hora;
        await salvarNoBanco();
    }
}

window.registrarFalta = function() {
    Swal.fire({
        title: 'Registrar Falta?', text: "Marcar falta neste período?", icon: 'warning',
        showCancelButton: true, confirmButtonColor: '#d33', confirmButtonText: 'Sim'
    }).then(async (r) => {
        if(r.isConfirmed) {
            const index = registrosHoje.findIndex(r => r === null);
            if(index !== -1) {
                registrosHoje[index] = "FALTA";
                if(index % 2 === 0) registrosHoje[index+1] = "FALTA"; 
                await salvarNoBanco();
            }
        }
    });
}

async function salvarNoBanco() {
    const dados = calcularSaldos();
    const dataObjeto = new Date();
    
    // Data correta BR
    const ano = dataObjeto.getFullYear();
    const mes = String(dataObjeto.getMonth() + 1).padStart(2, '0');
    const dia = String(dataObjeto.getDate()).padStart(2, '0');
    const dataString = `${ano}-${mes}-${dia}`;

    // Pega o valor do campo de justificativa
    const inputObs = document.getElementById('justificativa-input') || document.getElementById('justificativa-ponto');
    
    // [MODIFICAÇÃO 1] Troquei 'const' por 'let' para poder alterar o valor
    let textoObs = inputObs ? inputObs.value.trim() : '';

    // [MODIFICAÇÃO 2] Lógica para adicionar o horário automático
    if (textoObs.length > 0) {
        // Usa o 'dataObjeto' que você já criou lá em cima
        const hora = String(dataObjeto.getHours()).padStart(2, '0');
        const min = String(dataObjeto.getMinutes()).padStart(2, '0');
        
        // Cola o horário na frente do texto
        textoObs = `${hora}:${min} - ${textoObs}`;
    }

    try {
        const resp = await fetch('api.php', {
            method: 'POST',
            body: JSON.stringify({
                acao: 'salvar_ponto', 
                usuario_id: currentUser.id, 
                data: dataString,
                horarios: registrosHoje, 
                meta: dados.meta, 
                saldo: dados.saldo,
                justificativa_nova: textoObs // Agora vai com o horário!
            })
        });
        const json = await resp.json();
        if(json.status === 'sucesso') {
            // 1. Limpeza padrão
            if(inputObs) inputObs.value = '';
            await carregarPontoDoBanco();

            const agora = new Date();
            const horaFormatada = agora.toLocaleTimeString('pt-BR', {hour: '2-digit', minute:'2-digit'});
            
            // --- NOVA LÓGICA: DETECTA SAÍDA DE ALMOÇO ---
            let htmlExtraAlmoco = '';
            
            // Verifica se o registro atual (índice 1) existe e se a volta (índice 2) ainda está vazia
            // json.horarios[1] é a Saída Almoço. json.horarios[2] é a Volta.
            const isSaidaAlmoco = (json.horarios && json.horarios[1] && !json.horarios[2] && json.msg.includes(json.horarios[1]));

            if (isSaidaAlmoco) {
                // Calcula volta (Hora atual + 60 minutos)
                // Se seu intervalo for 1h30, mude 60 para 90 na linha abaixo
                const dataVolta = new Date(agora.getTime() + 90 * 60000); 
                const hV = String(dataVolta.getHours()).padStart(2,'0');
                const mV = String(dataVolta.getMinutes()).padStart(2,'0');

                htmlExtraAlmoco = `
                    <div class="mt-4 mb-2 bg-orange-50 border border-orange-100 rounded-xl p-3 animate-pulse">
                        <div class="text-[10px] font-bold text-orange-400 uppercase tracking-widest mb-1">Previsão de Volta</div>
                        <div class="text-3xl font-mono font-black text-orange-500">
                            ${hV}:${mV}
                        </div>
                        <div class="text-[10px] text-orange-300 font-medium">Respeite o intervalo mínimo</div>
                    </div>
                `;
            }
            // ---------------------------------------------

            // --- GERA O HISTÓRICO (SEU CÓDIGO ORIGINAL MANTIDO) ---
            let htmlHistorico = '';
            if (json.horarios && Array.isArray(json.horarios)) {
                htmlHistorico = `<div class="mt-6 w-full bg-white rounded-xl border border-slate-100 p-4 text-left">
                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3 border-b border-slate-100 pb-2">Histórico Hoje</div>
                    <div class="space-y-3 relative">
                        <div class="absolute left-[7px] top-2 bottom-2 w-[2px] bg-slate-100"></div>`;

                const labels = ["Entrada", "Saída Almoço", "Volta Almoço", "Saída"];
                let cont = 0;

                json.horarios.forEach((h, index) => {
                    // Só mostra se tiver horário preenchido e for par (Entrada/Saida) ou se for o atual
                    if (h && h !== "" && index < 4) { 
                        // Define cor: O último registrado ganha destaque verde
                        // Verifica se é o horário da mensagem ou a hora atual formatada
                        const isLast = (json.msg.includes(h) || h === horaFormatada); 
                        const corBolinha = isLast ? 'bg-emerald-500 ring-4 ring-emerald-100' : 'bg-slate-300';
                        const corTexto = isLast ? 'text-emerald-700 font-bold' : 'text-slate-600 font-medium';
                        
                        htmlHistorico += `
                        <div class="relative flex items-center gap-3 z-10">
                            <div class="w-4 h-4 rounded-full ${corBolinha} flex-shrink-0 transition-all"></div>
                            <div class="flex justify-between w-full text-sm">
                                <span class="text-slate-400 text-xs uppercase pt-0.5">${labels[index] || 'Extra'}</span>
                                <span class="${corTexto}">${h}</span>
                            </div>
                        </div>`;
                        cont++;
                    }
                });

                if (cont === 0) htmlHistorico += `<div class="text-xs text-slate-400 italic pl-6">Início de jornada</div>`;
                htmlHistorico += `</div></div>`;
            }

            // --- EXIBE O ALERTA ---
            await Swal.fire({ 
                title: '',
                html: `
                    <div class="flex flex-col items-center font-sans max-h-[80vh] overflow-y-auto custom-scrollbar">
                        <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mb-3 mt-4 animate-bounce-short flex-shrink-0">
                            <i class="fas fa-check text-3xl text-emerald-500"></i>
                        </div>

                        <h2 class="text-xl font-bold text-slate-800">Ponto Registrado</h2>
                        
                        <div class="text-5xl font-mono font-bold text-slate-700 tracking-tighter my-2">${horaFormatada}</div>
                        
                        ${htmlExtraAlmoco}

                        ${htmlHistorico}
                        
                        <div class="h-4"></div>
                    </div>
                `,
                showConfirmButton: true,
                confirmButtonText: 'OK, Fechar',
                buttonsStyling: false,
                customClass: {
                    popup: 'rounded-3xl shadow-2xl p-0 font-sans', 
                    htmlContainer: '!m-0 !p-0',
                    confirmButton: 'w-[90%] bg-slate-900 text-white font-bold py-3.5 rounded-xl shadow-lg hover:bg-slate-800 active:scale-95 transition-all text-base mb-6 mx-auto block'
                },
                backdrop: `rgba(15, 23, 42, 0.9)`,
                timer: 10000,
                timerProgressBar: true
            });
        }
    } catch(e) { console.error(e); }
}

// --- HELPERS ---
function atualizarHoraInput() {
    const d = new Date();
    const el = document.getElementById('current-time-input');
    if(el) el.value = `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}
function timeToMins(t) {
    if(!t || t === "FALTA") return 0;
    const [h, m] = t.split(':').map(Number);
    return (h * 60) + m;
}
function minsToTime(m) {
    const s = m < 0 ? "-" : ""; m = Math.abs(m);
    const hh = Math.floor(m / 60); const mm = m % 60;
    return `${s}${String(hh).padStart(2,'0')}:${String(mm).padStart(2,'0')}`;
}
function atualizarDisplay(id, valor, cor = false) {
    const el = document.getElementById(id);
    if(el) {
        el.innerText = minsToTime(valor);
        if(cor) el.className = valor >= 0 ? "text-2xl font-bold text-emerald-600" : "text-2xl font-bold text-rose-500";
    }
}
function renderizarTimeline(observacaoTexto = '') {
    const container = document.getElementById('timeline-container');
    if(!container) return;
    
    container.innerHTML = ''; // Limpa tudo
    const labels = ["Entrada Manhã", "Saída Almoço", "Entrada Tarde", "Saída Tarde", "Extra 1", "Extra 2", "Extra 3", "Extra 4"];
    
    // 1. SE TIVER JUSTIFICATIVA, MOSTRA NO TOPO (Garantido)
    if (observacaoTexto && observacaoTexto.trim() !== '') {
        // Remove aspas extras se houver e formata bonitinho
        let textoLimpo = observacaoTexto.replace(/\|/g, '<br>• ');
        
        container.innerHTML += `
            <div class="mb-4 p-3 rounded-lg bg-yellow-50 border border-yellow-200 shadow-sm animate-fade-in">
                <p class="text-[10px] font-bold text-yellow-700 uppercase mb-1 flex items-center gap-1">
                    <i class="fas fa-comment-dots"></i> Observações do Dia:
                </p>
                <p class="text-sm text-slate-700 font-medium leading-relaxed pl-1">
                    • ${textoLimpo}
                </p>
            </div>
        `;
    }

    // 2. DESENHA A LINHA DO TEMPO
    registrosHoje.forEach((val, i) => {
        if(val) {
            const isFalta = val === "FALTA";
            
            // Tenta ver se a justificativa pertence a essa hora (Bônus visual)
            let detalheExtra = '';
            if (observacaoTexto.includes(val)) { 
                // Se o texto contiver o horário (ex: "(07:07) Teste"), destaca
                let partes = observacaoTexto.split(val);
                if(partes[1]) {
                    // Pega o texto logo após o horário até a próxima barra ou fim
                    let trecho = partes[1].split('|')[0].replace(/[()]/g, '').trim(); 
                    if(trecho) detalheExtra = `<span class="ml-2 text-[10px] text-indigo-500 font-bold bg-indigo-50 px-1 rounded truncate max-w-[100px]">${trecho}</span>`;
                }
            }

            container.innerHTML += `
                <div class="relative pl-4 pb-4 border-l-2 border-slate-200 last:border-0">
                    <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full border-2 border-white ${isFalta ? 'bg-red-500' : 'bg-indigo-600'} shadow-sm"></div>
                    <div class="-mt-1">
                        <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">${labels[i]}</span>
                        <div class="flex flex-row items-center">
                            <div class="${isFalta ? 'text-red-600' : 'text-slate-800'} font-mono font-bold text-lg leading-tight">
                                ${val}
                            </div>
                            ${detalheExtra}
                        </div>
                    </div>
                </div>`;
        }
    });
}

// --- CÁLCULO DE FERIADOS BRASIL ---
function getFeriadosNacionais(ano) {
    const f = { 
        [`${ano}-01-01`]: 'Confraternização Universal', 
        [`${ano}-04-21`]: 'Tiradentes', 
        [`${ano}-05-01`]: 'Dia do Trabalho', 
        [`${ano}-09-07`]: 'Independência do Brasil', 
        [`${ano}-10-12`]: 'Nossa Senhora Aparecida', 
        [`${ano}-11-02`]: 'Finados', 
        [`${ano}-11-15`]: 'Proclamação da República', 
        [`${ano}-11-20`]: 'Dia da Consciência Negra', 
        [`${ano}-12-25`]: 'Natal' 
    };
    
    // SRS
    f[`${ano}-05-22`] = 'Dia de Santa Rita de Cássia (Padroeira)';
    f[`${ano}-05-24`] = 'Emancipação Política';

    const a=ano%19, b=Math.floor(ano/100), c=ano%100, d=Math.floor(b/4), e=b%4, fl=Math.floor((b+8)/25), g=Math.floor((b-fl+1)/3), h=(19*a+b-d-g+15)%30, i=Math.floor(c/4), k=c%4, l=(32+2*e+2*i-h-k)%7, m=Math.floor((a+11*h+22*l)/451), mes=Math.floor((h+l-7*m+114)/31), dia=((h+l-7*m+114)%31)+1;
    const dtPascoa = new Date(ano, mes-1, dia);
    const addDias = (dt, dias) => { const d = new Date(dt); d.setDate(dt.getDate() + dias); return d.toISOString().split('T')[0]; };
    
    f[addDias(dtPascoa, -48)] = 'Carnaval (Segunda-feira)';
    f[addDias(dtPascoa, -47)] = 'Carnaval (Terça-feira)';
    f[addDias(dtPascoa, -46)] = 'Quarta-feira de Cinzas (Facultativo)';
    f[addDias(dtPascoa, -2)]  = 'Paixão de Cristo (Sexta-feira Santa)';
    f[addDias(dtPascoa, 60)]  = 'Corpus Christi';

    return f;
}
// --- FUNÇÃO PARA VOLTAR AO SISTEMA PRINCIPAL ---
window.voltarAoSistema = function() {
    // Redireciona para um nível acima (pasta anterior)
    window.location.href = "../"; 
}

// --- RELÓGIO EM TEMPO REAL ---
function iniciarRelogio() {
    if(relogioInterval) clearInterval(relogioInterval);
    
    const atualizar = () => {
        const d = new Date();
        const el = document.getElementById('current-time-input');
        // Só atualiza se o elemento existir e o modal estiver visível (opcional, mas economiza recurso)
        if(el) {
            const hora = String(d.getHours()).padStart(2, '0');
            const min = String(d.getMinutes()).padStart(2, '0');
            el.value = `${hora}:${min}`;
        }
    };
    
    atualizar(); // Chama na hora
    relogioInterval = setInterval(atualizar, 1000); // Atualiza a cada segundo
}
function renderizarCronometroAlmoco() {
    // 1. Limpa timer anterior e remove visual antigo
    if (cronometroInterval) clearInterval(cronometroInterval);
    const elAntigo = document.getElementById('overlay-cronometro-almoco');
    if (elAntigo) elAntigo.remove();

    // 2. Verifica se está no almoço (Saiu [1] e não Voltou [2])
    const saidaAlmoco = registrosHoje[1]; 
    const voltaAlmoco = registrosHoje[2];  
    if (!saidaAlmoco || (voltaAlmoco && voltaAlmoco !== "FALTA") || saidaAlmoco === "FALTA") return;

    // 3. CONFIGURAÇÃO DE TEMPO (90 MINUTOS)
    const TEMPO_INTERVALO_MINUTOS = 90; // <--- AJUSTADO PARA 1h30

    const [h, m] = saidaAlmoco.split(':').map(Number);
    const dataSaida = new Date();
    dataSaida.setHours(h, m, 0);
    const dataLimite = new Date(dataSaida.getTime() + (TEMPO_INTERVALO_MINUTOS * 60000));

    // 4. CRIA A TELA SOBREPOSTA (OVERLAY)
    const divOverlay = document.createElement('div');
    divOverlay.id = 'overlay-cronometro-almoco';
    // Estilo: Fixo, Tela Cheia, Fundo Escuro Blur, Acima de tudo (z-50)
    divOverlay.className = "fixed inset-0 z-[60] bg-slate-900/95 backdrop-blur-md flex flex-col items-center justify-center p-6 animate-fade-in";

    // 5. INSERE DIRETO NO BODY (Para ficar por cima de tudo)
    document.body.appendChild(divOverlay);

    // 6. ATUALIZAÇÃO DO TIMER
    const atualizar = () => {
        const agora = new Date();
        const diff = dataLimite - agora;
        
        // Formata hora de volta
        const hV = String(dataLimite.getHours()).padStart(2,'0');
        const mV = String(dataLimite.getMinutes()).padStart(2,'0');

        let conteudoHTML = '';

        if (diff < 0) {
            // ESTOUROU O TEMPO
            const excesso = Math.abs(diff);
            const hEx = Math.floor(excesso / 3600000);
            const mEx = Math.floor((excesso % 3600000) / 60000);
            const sEx = Math.floor((excesso % 60000) / 1000);

            conteudoHTML = `
                <div class="flex flex-col items-center animate-pulse">
                    <i class="fas fa-exclamation-triangle text-6xl text-red-500 mb-4"></i>
                    <h2 class="text-white text-2xl font-bold uppercase tracking-widest mb-2">Intervalo Excedido</h2>
                    <div class="text-6xl font-mono font-black text-red-500 tracking-tighter mb-2">
                        -${String(hEx).padStart(2,'0')}:${String(mEx).padStart(2,'0')}:${String(sEx).padStart(2,'0')}
                    </div>
                    <p class="text-red-300 font-medium text-lg mb-8">Volte ao trabalho imediatamente!</p>
                </div>
            `;
        } else {
            // CONTAGEM REGRESSIVA NORMAL
            const hRest = Math.floor(diff / 3600000);
            const mRest = Math.floor((diff % 3600000) / 60000);
            const sRest = Math.floor((diff % 60000) / 1000);
            
            // Fica laranja/vermelho no finalzinho
            const isEnding = (mRest < 5 && hRest === 0);
            const corTexto = isEnding ? "text-orange-500" : "text-emerald-400";
            const msgStatus = isEnding ? "Retorne logo..." : "Em Intervalo";

            conteudoHTML = `
                <div class="flex flex-col items-center">
                    <div class="mb-6 p-4 rounded-full bg-slate-800 border border-slate-700 shadow-2xl">
                        <i class="fas fa-utensils text-3xl text-slate-400"></i>
                    </div>
                    
                    <h3 class="text-slate-400 text-sm font-bold uppercase tracking-[0.2em] mb-4">${msgStatus}</h3>
                    
                    <div class="text-7xl font-mono font-black ${corTexto} tracking-tighter drop-shadow-2xl mb-2">
                        ${String(hRest).padStart(2,'0')}:${String(mRest).padStart(2,'0')}:${String(sRest).padStart(2,'0')}
                    </div>
                    
                    <div class="flex items-center gap-2 bg-slate-800/50 px-4 py-2 rounded-full border border-slate-700 mt-2 mb-10">
                        <i class="fas fa-clock text-slate-400 text-xs"></i>
                        <span class="text-slate-300 font-mono font-bold text-sm">Volta prevista: ${hV}:${mV}</span>
                    </div>
                </div>
            `;
        }

        // Botão para Minimizar (Para o usuário conseguir clicar em "Voltar Almoço")
        const botaoMinimizar = `
            <button onclick="document.getElementById('overlay-cronometro-almoco').remove()" 
                class="absolute bottom-10 px-8 py-3 rounded-xl bg-slate-800 text-white font-bold border border-slate-700 hover:bg-slate-700 transition-all active:scale-95 flex items-center gap-2 shadow-lg">
                <i class="fas fa-chevron-down"></i> Acessar Painel
            </button>
        `;

        divOverlay.innerHTML = conteudoHTML + botaoMinimizar;
    };

    atualizar();
    cronometroInterval = setInterval(atualizar, 1000);
}