// Sistema de Acompanhamento de Produção

// Função para fazer requisições autenticadas
async function apiRequest(url, options = {}) {
    const token = localStorage.getItem('token');

    const finalOptions = {
        ...options,
        headers: {
            'Authorization': `Bearer ${token}`,
            ...options.headers
        }
    };

    const response = await fetch(url, finalOptions);

    if (response.status === 401) {
        // Token expirado, redirecionar para login
        localStorage.removeItem('token');
        window.location.href = '/login.html';
        throw new Error('Token expirado');
    }

    return response;
}

// Função principal para carregar acompanhamento
async function carregarAcompanhamento(container) {
    container.innerHTML = `
        <div class="row">
            <div class="col-12">
                <h2><i class="fas fa-tasks me-2 text-primary"></i>Acompanhamento de Produção</h2>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Sistema para acompanhar e atualizar o status das etapas de produção das máquinas.
                </div>
            </div>
        </div>

        <!-- Filtros -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-filter me-2"></i>Filtros</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">Empresa/Cliente:</label>
                        <input type="text" class="form-control" id="filtroEmpresaAcomp" 
                               placeholder="Digite empresa ou cliente">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Código Máquina:</label>
                        <input type="text" class="form-control" id="filtroMatriculaAcomp" 
                               placeholder="Digite código da máquina">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Status:</label>
                        <select class="form-select" id="filtroStatusAcomp">
                            <option value="">Todos os status</option>
                            <option value="pendentes">Pendentes (OF não iniciada)</option>
                            <option value="iniciadas">Iniciadas (OF criada)</option>
                            <option value="em_andamento">Em Andamento</option>
                            <option value="finalizadas">Finalizadas</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button class="btn btn-primary me-2" onclick="buscarOrdensAcompanhamento()">
                            <i class="fas fa-search me-1"></i>Buscar
                        </button>
                        <button class="btn btn-outline-secondary" onclick="limparFiltrosAcompanhamento()">
                            <i class="fas fa-eraser me-1"></i>Limpar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Estatísticas -->
        <div class="row mb-4" id="estatisticas-acompanhamento">
            <!-- Será preenchido dinamicamente -->
        </div>

        <!-- Lista de Ordens -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="fas fa-list me-2"></i>Ordens de Fabricação</h5>
                <button class="btn btn-success btn-sm" onclick="carregarRelatorioAcompanhamento()">
                    <i class="fas fa-chart-bar me-1"></i>Relatório Detalhado
                </button>
            </div>
            <div class="card-body">
                <div id="tabela-acompanhamento">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Carregando...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;

    // Carregar dados iniciais
    await buscarOrdensAcompanhamento();
    await carregarEstatisticasAcompanhamento();
}

// Buscar ordens para acompanhamento
async function buscarOrdensAcompanhamento() {
    const tabelaContainer = document.getElementById('tabela-acompanhamento');

    try {
        const empresa = document.getElementById('filtroEmpresaAcomp')?.value || '';
        const matricula = document.getElementById('filtroMatriculaAcomp')?.value || '';
        const status = document.getElementById('filtroStatusAcomp')?.value || '';

        const params = new URLSearchParams();
        if (empresa) params.append('empresa', empresa);
        if (matricula) params.append('matricula', matricula);
        if (status) params.append('status', status);

        const response = await apiRequest(`${API_BASE}/acompanhamento?${params}`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirTabelaAcompanhamento(data.data, tabelaContainer);
        } else {
            throw new Error(data.message);
        }
    } catch (error) {
        tabelaContainer.innerHTML = `<div class="alert alert-danger">Erro ao buscar ordens: ${error.message}</div>`;
    }
}

// Exibir tabela de acompanhamento
function exibirTabelaAcompanhamento(ordens, container) {
    if (ordens.length === 0) {
        container.innerHTML = '<div class="alert alert-info">Nenhuma ordem encontrada com os filtros aplicados</div>';
        return;
    }

    container.innerHTML = `
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead class="table-dark">
                    <tr>
                        <th>Comessa</th>
                        <th>Cliente</th>
                        <th>Máquina</th>
                        <th>Prazo</th>
                        <th>Workflow Atual</th>
                        <th>Próxima Etapa</th>
                        <th>Responsável</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    ${ordens.map(ordem => {
        const proximaEtapa = obterProximaEtapa(ordem);
        const statusAtual = obterStatusAtual(ordem);
        const isPrazoVencido = new Date(ordem.PrazoEntrega) < new Date();

        return `
                            <tr>
                                <td><strong>${ordem.idOF}</strong></td>
                                <td>${ordem.Empresa || ordem.NomeCliente || '-'}</td>
                                <td><code>${ordem.Matricula || '-'}</code></td>
                                <td class="${isPrazoVencido ? 'text-danger' : ''}">
                                    ${formatarData(ordem.PrazoEntrega)}
                                    ${isPrazoVencido ? '<i class="fas fa-exclamation-triangle text-danger ms-1"></i>' : ''}
                                </td>
                                <td>
                                    <span class="badge ${statusAtual.classe}">${statusAtual.texto}</span>
                                </td>
                                <td>
                                    <span class="badge bg-warning text-dark">${proximaEtapa.nome}</span>
                                </td>
                                <td>
                                    <small>${proximaEtapa.responsavel || '-'}</small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button class="btn btn-outline-primary" onclick="abrirModalAcompanhamento(${JSON.stringify(ordem).replace(/"/g, '&quot;')})" title="Acompanhar">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-outline-info" onclick="verDetalhesAcompanhamento(${ordem.idOF})" title="Detalhes">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        `;
    }).join('')}
                </tbody>
            </table>
        </div>
        <div class="mt-3">
            <small class="text-muted">Total: ${ordens.length} ordem(ns) encontrada(s)</small>
        </div>
    `;
}

// Obter próxima etapa
function obterProximaEtapa(ordem) {
    const etapas = [
        { campo: 'OrdemFabricacao', nome: 'Ordem de Fabricação', responsavel: ordem.ResponsavelOrdemFabricacao },
        { campo: 'AprovacaoLayout', nome: 'Aprovação Layout', responsavel: ordem.ResponsavelAprovacaoLayout },
        { campo: 'LiberacaoListasMecanica', nome: 'Lista Mecânica', responsavel: ordem.ResponsavelLiberacaoListasMecanica },
        { campo: 'LiberacaoListasEletrica', nome: 'Lista Elétrica', responsavel: ordem.ResponsavelLiberacaoListasEletrica },
        { campo: 'Separacao', nome: 'Separação', responsavel: ordem.ResponsavelSeparacao },
        { campo: 'PreMontagem', nome: 'Pré-Montagem', responsavel: ordem.ResponsavelPreMontagem },
        { campo: 'PreMontagemMecanica', nome: 'Montagem Mecânica', responsavel: null },
        { campo: 'PreMontagemEletrica', nome: 'Pré-Montagem Elétrica', responsavel: null },
        { campo: 'PreMontagemPainel', nome: 'Painel Elétrico', responsavel: null },
        { campo: 'EletricaMontagem', nome: 'Cabeamento', responsavel: null },
        { campo: 'Testes', nome: 'Testes', responsavel: null },
        { campo: 'FAT', nome: 'F.A.T.', responsavel: null },
        { campo: 'PreparacaoExpedicao', nome: 'Prep. Expedição', responsavel: null },
        { campo: 'Expedicao', nome: 'Expedição', responsavel: null }
    ];

    for (const etapa of etapas) {
        if (!ordem[etapa.campo] || ordem[etapa.campo] === 0) {
            return etapa;
        }
    }

    return { nome: 'Concluída', responsavel: null };
}

// Obter status atual
function obterStatusAtual(ordem) {
    if (ordem.Expedicao === 1) {
        return { texto: 'Expedição', classe: 'bg-success' };
    }
    if (ordem.PreparacaoExpedicao === 1) {
        return { texto: 'Prep. Expedição', classe: 'bg-info' };
    }
    if (ordem.FAT === 1) {
        return { texto: 'F.A.T.', classe: 'bg-info' };
    }
    if (ordem.Testes === 1) {
        return { texto: 'Testes', classe: 'bg-info' };
    }
    if (ordem.EletricaMontagem === 1) {
        return { texto: 'Cabeamento', classe: 'bg-warning text-dark' };
    }
    if (ordem.PreMontagemPainel === 1) {
        return { texto: 'Painel Elétrico', classe: 'bg-warning text-dark' };
    }
    if (ordem.PreMontagemEletrica === 1) {
        return { texto: 'Pré-Mont. Elétrica', classe: 'bg-warning text-dark' };
    }
    if (ordem.PreMontagemMecanica === 1) {
        return { texto: 'Mont. Mecânica', classe: 'bg-warning text-dark' };
    }
    if (ordem.PreMontagem === 1) {
        return { texto: 'Pré-Montagem', classe: 'bg-warning text-dark' };
    }
    if (ordem.Separacao === 1) {
        return { texto: 'Separação', classe: 'bg-warning text-dark' };
    }
    if (ordem.LiberacaoListasEletrica === 1) {
        return { texto: 'Lista Elétrica', classe: 'bg-warning text-dark' };
    }
    if (ordem.LiberacaoListasMecanica === 1) {
        return { texto: 'Lista Mecânica', classe: 'bg-warning text-dark' };
    }
    if (ordem.AprovacaoLayout === 1) {
        return { texto: 'Layout Aprovado', classe: 'bg-warning text-dark' };
    }
    if (ordem.OrdemFabricacao === 1) {
        return { texto: 'OF Criada', classe: 'bg-primary' };
    }

    return { texto: 'Pendente', classe: 'bg-secondary' };
}

// Abrir modal de acompanhamento
function abrirModalAcompanhamento(ordem) {
    // Criar modal se não existir
    let modal = document.getElementById('modalAcompanhamento');
    if (!modal) {
        const modalHtml = `
            <div class="modal fade" id="modalAcompanhamento" tabindex="-1">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <i class="fas fa-tasks me-2"></i>Acompanhamento de Produção
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body" id="corpo-modal-acompanhamento">
                            <!-- Conteúdo será inserido aqui -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                            <button type="button" class="btn btn-primary" onclick="salvarAcompanhamento()">
                                <i class="fas fa-save me-1"></i>Salvar Alterações
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        modal = document.getElementById('modalAcompanhamento');
    }

    // Preencher modal com dados da ordem
    const modalBody = document.getElementById('corpo-modal-acompanhamento');
    modalBody.innerHTML = gerarConteudoModalAcompanhamento(ordem);

    // Abrir modal
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();

    // Armazenar ordem atual
    window.ordemAtualAcompanhamento = ordem;
}

// Gerar conteúdo do modal de acompanhamento
function gerarConteudoModalAcompanhamento(ordem) {
    const etapas = [
        { campo: 'OrdemFabricacao', nome: 'Ordem de Fabricação', responsavel: 'ResponsavelOrdemFabricacao', data: 'DataOrdemFabricacao' },
        { campo: 'AprovacaoLayout', nome: 'Aprovação do Layout', responsavel: 'ResponsavelAprovacaoLayout', data: 'DataAprovacaoLayout' },
        { campo: 'LiberacaoListasMecanica', nome: 'Liberação Lista Mecânica', responsavel: 'ResponsavelLiberacaoListasMecanica', data: 'DataLiberacaoListasMecanica' },
        { campo: 'LiberacaoListasEletrica', nome: 'Liberação Lista Elétrica', responsavel: 'ResponsavelLiberacaoListasEletrica', data: 'DataLiberacaoListasEletrica' },
        { campo: 'Separacao', nome: 'Separação', responsavel: 'ResponsavelSeparacao', data: 'DataSeparacao' },
        { campo: 'PreMontagem', nome: 'Pré-Montagem', responsavel: 'ResponsavelPreMontagem', data: 'DataPreMontagem' },
        { campo: 'PreMontagemMecanica', nome: 'Montagem Mecânica', data: 'DataPreMontagemMecanica' },
        { campo: 'PreMontagemEletrica', nome: 'Pré-Montagem Elétrica (Painel)', data: 'DataPreMontagemEletrica' },
        { campo: 'PreMontagemPainel', nome: 'Painel Elétrico e Conjuntos', data: 'DataPreMontagemPainel' },
        { campo: 'EletricaMontagem', nome: 'Montagem Elétrica (Cabeamento)', data: 'DataEletricaMontagem' },
        { campo: 'Testes', nome: 'Testes (Funções e Rotulagem)', data: 'DataTestes' },
        { campo: 'FAT', nome: 'F.A.T.', data: 'DataFAT' },
        { campo: 'PreparacaoExpedicao', nome: 'Preparação para Expedição', data: 'DataPreparacaoExpedicao' },
        { campo: 'Expedicao', nome: 'Expedição', data: 'DataExpedicao' }
    ];

    const isPrazoVencido = new Date(ordem.PrazoEntrega) < new Date();

    return `
        <!-- Informações da Ordem -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    Comessa ${ordem.idOF} - ${ordem.Matricula} 
                    <span class="badge ${isPrazoVencido ? 'bg-danger' : 'bg-light text-dark'} ms-2">
                        Prazo: ${formatarData(ordem.PrazoEntrega)}
                        ${isPrazoVencido ? ' (VENCIDO)' : ''}
                    </span>
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <strong>Cliente:</strong> ${ordem.Empresa || ordem.NomeCliente || '-'}<br>
                        <strong>Data Pedido:</strong> ${formatarData(ordem.DataPedido)}
                    </div>
                    <div class="col-md-6">
                        <strong>Código Máquina:</strong> ${ordem.Matricula || '-'}<br>
                        <strong>Status:</strong> ${obterStatusAtual(ordem).texto}
                    </div>
                </div>
            </div>
        </div>

        <!-- Cronograma de Etapas -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-tasks me-2"></i>Cronograma de Serviços</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th width="5%">Status</th>
                                <th width="35%">Etapa</th>
                                <th width="25%">Responsável</th>
                                <th width="20%">Data Prevista</th>
                                <th width="15%">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${etapas.map((etapa, index) => {
        const concluida = ordem[etapa.campo] === 1;
        const responsavelAtual = etapa.responsavel ? ordem[etapa.responsavel] : '';
        const dataAtual = etapa.data ? ordem[etapa.data] : null;

        return `
                                    <tr class="${concluida ? 'table-success' : ''}">
                                        <td class="text-center">
                                            <div class="form-check">
                                                <input class="form-check-input etapa-checkbox" 
                                                       type="checkbox" 
                                                       id="etapa_${etapa.campo}"
                                                       data-etapa="${etapa.campo}"
                                                       ${concluida ? 'checked' : ''}
                                                       onchange="alterarStatusEtapa('${etapa.campo}', this.checked)">
                                            </div>
                                        </td>
                                        <td>
                                            <strong>${etapa.nome}</strong>
                                            ${concluida ? '<i class="fas fa-check-circle text-success ms-2"></i>' : ''}
                                        </td>
                                        <td>
                                            <input type="text" 
                                                   class="form-control form-control-sm responsavel-input" 
                                                   id="resp_${etapa.campo}"
                                                   data-etapa="${etapa.campo}"
                                                   value="${responsavelAtual || ''}"
                                                   placeholder="Nome do responsável">
                                        </td>
                                        <td>
                                            <input type="date" 
                                                   class="form-control form-control-sm data-input" 
                                                   id="data_${etapa.campo}"
                                                   data-etapa="${etapa.campo}"
                                                   value="${dataAtual ? dataAtual.split('T')[0] : ''}">
                                        </td>
                                        <td class="text-center">
                                            <button class="btn btn-outline-primary btn-sm" 
                                                    onclick="atualizarEtapaIndividual('${etapa.campo}')"
                                                    title="Atualizar etapa">
                                                <i class="fas fa-save"></i>
                                            </button>
                                        </td>
                                    </tr>
                                `;
    }).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Observações -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-sticky-note me-2"></i>Observações</h6>
            </div>
            <div class="card-body">
                <textarea class="form-control" 
                          id="observacoes-ordem" 
                          rows="3" 
                          placeholder="Digite observações sobre a ordem...">${ordem.Observacoes || ''}</textarea>
            </div>
        </div>
    `;
}

// Alterar status de etapa
async function alterarStatusEtapa(etapa, concluida) {
    // Esta função será chamada quando o checkbox for alterado
    // A atualização real será feita no salvar ou individualmente
}

// Atualizar etapa individual
async function atualizarEtapaIndividual(etapa) {
    try {
        const ordem = window.ordemAtualAcompanhamento;
        const checkbox = document.getElementById(`etapa_${etapa}`);
        const responsavel = document.getElementById(`resp_${etapa}`).value;
        const data = document.getElementById(`data_${etapa}`).value;

        const dadosAtualizacao = {
            valor: checkbox.checked ? 1 : 0,
            responsavel: responsavel,
            data_termino: data || null
        };

        const response = await apiRequest(`${API_BASE}/acompanhamento/${ordem.idOF}/etapa/${etapa}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(dadosAtualizacao)
        });

        const result = await response.json();

        if (result.status === 'success') {
            mostrarSucesso(`Etapa ${etapa} atualizada com sucesso!`);

            // Atualizar responsável se fornecido
            if (responsavel) {
                await atualizarResponsavelEtapa(ordem.idOF, etapa, responsavel);
            }
        } else {
            throw new Error(result.message);
        }

    } catch (error) {
        mostrarErro('Erro ao atualizar etapa: ' + error.message);
    }
}

// Atualizar responsável de etapa
async function atualizarResponsavelEtapa(idOF, etapa, responsavel) {
    try {
        const response = await apiRequest(`${API_BASE}/acompanhamento/${idOF}/responsavel/${etapa}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ responsavel })
        });

        const result = await response.json();
        if (result.status !== 'success') {
            console.log('Aviso ao atualizar responsável:', result.message);
        }

    } catch (error) {
        console.error('Erro ao atualizar responsável:', error);
    }
}

// Salvar todas as alterações do acompanhamento
async function salvarAcompanhamento() {
    try {
        const ordem = window.ordemAtualAcompanhamento;
        let alteracoes = 0;

        // Percorrer todas as etapas e verificar alterações
        const etapas = [
            'OrdemFabricacao', 'AprovacaoLayout', 'LiberacaoListasMecanica', 'LiberacaoListasEletrica',
            'Separacao', 'PreMontagem', 'PreMontagemMecanica', 'PreMontagemEletrica', 'PreMontagemPainel',
            'EletricaMontagem', 'Testes', 'FAT', 'PreparacaoExpedicao', 'Expedicao'
        ];

        for (const etapa of etapas) {
            const checkbox = document.getElementById(`etapa_${etapa}`);
            const responsavel = document.getElementById(`resp_${etapa}`)?.value;
            const data = document.getElementById(`data_${etapa}`)?.value;

            if (checkbox) {
                const novoValor = checkbox.checked ? 1 : 0;
                const valorOriginal = ordem[etapa] === 1 ? 1 : 0;

                if (novoValor !== valorOriginal || responsavel || data) {
                    await atualizarEtapaIndividual(etapa);
                    alteracoes++;
                }
            }
        }

        // Atualizar observações
        const observacoes = document.getElementById('observacoes-ordem').value;
        if (observacoes !== (ordem.Observacoes || '')) {
            await atualizarObservacoes(ordem.idOF, observacoes);
            alteracoes++;
        }

        if (alteracoes > 0) {
            mostrarSucesso(`${alteracoes} alteração(ões) salva(s) com sucesso!`);

            // Fechar modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('modalAcompanhamento'));
            modal.hide();

            // Recarregar lista
            await buscarOrdensAcompanhamento();
        } else {
            mostrarInfo('Nenhuma alteração detectada.');
        }

    } catch (error) {
        mostrarErro('Erro ao salvar alterações: ' + error.message);
    }
}

// Atualizar observações
async function atualizarObservacoes(idOF, observacao) {
    try {
        const response = await apiRequest(`${API_BASE}/acompanhamento/${idOF}/observacao`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ observacao })
        });

        const result = await response.json();
        if (result.status !== 'success') {
            throw new Error(result.message);
        }

    } catch (error) {
        console.error('Erro ao atualizar observações:', error);
        throw error;
    }
}

// Carregar estatísticas de acompanhamento
async function carregarEstatisticasAcompanhamento() {
    try {
        const response = await apiRequest(`${API_BASE}/acompanhamento/relatorio`);
        const data = await response.json();

        if (data.status === 'success') {
            exibirEstatisticasAcompanhamento(data.data);
        }
    } catch (error) {
        console.error('Erro ao carregar estatísticas:', error);
    }
}

// Exibir estatísticas
function exibirEstatisticasAcompanhamento(stats) {
    const container = document.getElementById('estatisticas-acompanhamento');

    container.innerHTML = `
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-clipboard-list fa-2x text-primary mb-2"></i>
                    <h4 class="text-primary">${stats.total_ordens}</h4>
                    <p class="mb-0">Total de Ordens</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-play fa-2x text-success mb-2"></i>
                    <h4 class="text-success">${stats.ordens_iniciadas}</h4>
                    <p class="mb-0">Ordens Iniciadas</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-cogs fa-2x text-warning mb-2"></i>
                    <h4 class="text-warning">${stats.ordens_em_andamento}</h4>
                    <p class="mb-0">Em Andamento</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <i class="fas fa-check-circle fa-2x text-info mb-2"></i>
                    <h4 class="text-info">${stats.ordens_finalizadas}</h4>
                    <p class="mb-0">Finalizadas</p>
                </div>
            </div>
        </div>
    `;
}

// Limpar filtros
function limparFiltrosAcompanhamento() {
    document.getElementById('filtroEmpresaAcomp').value = '';
    document.getElementById('filtroMatriculaAcomp').value = '';
    document.getElementById('filtroStatusAcomp').value = '';
    buscarOrdensAcompanhamento();
}

// Ver detalhes de acompanhamento
async function verDetalhesAcompanhamento(idOF) {
    // Buscar dados da ordem e abrir modal de detalhes
    try {
        const response = await apiRequest(`${API_BASE}/registros?idof=${idOF}`);
        const data = await response.json();

        if (data.status === 'success' && data.data.length > 0) {
            abrirModalAcompanhamento(data.data[0]);
        } else {
            mostrarErro('Ordem não encontrada');
        }
    } catch (error) {
        mostrarErro('Erro ao carregar detalhes: ' + error.message);
    }
}

// Funções de mensagem
function mostrarSucesso(mensagem) {
    // Implementar toast ou alert de sucesso
    alert('✅ ' + mensagem);
}

function mostrarErro(mensagem) {
    // Implementar toast ou alert de erro
    alert('❌ ' + mensagem);
}

function mostrarInfo(mensagem) {
    // Implementar toast ou alert de info
    alert('ℹ️ ' + mensagem);
}