@extends('layouts.app')

@section('title', 'Controle do ETL VIMAN ➔ Oracle')
@section('topbar_title', '⚡ Gestão & Controle do ETL VIMAN ➔ Oracle')

@section('styles')
<style>
    :root {
        --vh-vinho: #8b0000;
        --vh-vinho-hover: #700000;
        --vh-vinho-light: #fdf2f2;
        --vh-vinho-border: #fecaca;
        --status-running: #f59e0b;
        --status-completed: #10b981;
        --status-error: #ef4444;
        --status-idle: #64748b;
    }

    .etl-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 40px;
    }

    /* Header e Ações */
    .etl-header-card {
        background: var(--surface, #ffffff);
        border: 1px solid var(--surface-border, #e2e8f0);
        border-radius: 16px;
        padding: 24px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        border-left: 5px solid var(--vh-vinho);
    }

    .etl-header-info h1 {
        font-size: 22px;
        font-weight: 800;
        color: var(--text, #0f172a);
        margin: 0 0 6px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .etl-header-info p {
        font-size: 13.5px;
        color: var(--text-muted, #64748b);
        margin: 0;
    }

    .etl-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Badges de Status */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-badge.RUNNING {
        background: #fef3c7;
        color: #b45309;
        border: 1px solid #fde68a;
    }

    .status-badge.COMPLETED {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .status-badge.COMPLETED_WITH_ERRORS {
        background: #ffedd5;
        color: #9a3412;
        border: 1px solid #fed7aa;
    }

    .status-badge.ERROR {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

    .status-badge.IDLE, .status-badge.STOPPED {
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

    .pulse-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: currentColor;
    }

    .status-badge.RUNNING .pulse-dot {
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.2); }
    }

    /* Botões */
    .btn-etl {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid transparent;
        text-decoration: none;
    }

    .btn-etl-primary {
        background: var(--vh-vinho);
        color: #ffffff;
        box-shadow: 0 2px 4px rgba(139, 0, 0, 0.25);
    }
    .btn-etl-primary:hover:not(:disabled) {
        background: var(--vh-vinho-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(139, 0, 0, 0.35);
    }

    .btn-etl-danger {
        background: #dc2626;
        color: #ffffff;
    }
    .btn-etl-danger:hover:not(:disabled) {
        background: #b91c1c;
    }

    .btn-etl-secondary {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #334155;
    }
    .btn-etl-secondary:hover:not(:disabled) {
        background: #f1f5f9;
        border-color: #94a3b8;
    }

    .btn-etl:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none !important;
    }

    /* Grid de Métricas / KPIs */
    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
    }

    .metric-card {
        background: var(--surface, #ffffff);
        border: 1px solid var(--surface-border, #e2e8f0);
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .metric-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .metric-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted, #64748b);
    }

    .metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .metric-value {
        font-size: 24px;
        font-weight: 800;
        color: var(--text, #0f172a);
        line-height: 1.2;
    }

    .metric-subtext {
        font-size: 12px;
        color: var(--text-muted, #94a3b8);
        margin-top: 6px;
    }

    /* Barra de Progresso do Ciclo Ativo */
    .progress-card {
        background: var(--surface, #ffffff);
        border: 1px solid var(--surface-border, #e2e8f0);
        border-radius: 14px;
        padding: 20px 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .progress-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .progress-title {
        font-size: 14px;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .progress-meta {
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
    }

    .progress-bar-bg {
        width: 100%;
        height: 12px;
        background: #f1f5f9;
        border-radius: 9999px;
        overflow: hidden;
        position: relative;
    }

    .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #b91c1c, #10b981);
        border-radius: 9999px;
        transition: width 0.4s ease;
        position: relative;
    }

    .progress-bar-fill.active {
        background-size: 30px 30px;
        background-image: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
        animation: progress-stripes 1s linear infinite;
    }

    @keyframes progress-stripes {
        from { background-position: 30px 0; }
        to { background-position: 0 0; }
    }

    .progress-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 12.5px;
        color: #64748b;
        flex-wrap: wrap;
        gap: 12px;
    }

    .progress-details strong {
        color: #0f172a;
    }

    /* Card do Crontab / Ajuda */
    .crontab-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .crontab-info {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        max-width: 750px;
    }

    .crontab-info svg {
        flex-shrink: 0;
        color: #0284c7;
        margin-top: 3px;
    }

    .crontab-info h4 {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: #0f172a;
    }

    .crontab-info p {
        font-size: 12.5px;
        color: #475569;
        margin: 0;
        line-height: 1.5;
    }

    .crontab-code-box {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #0f172a;
        color: #38bdf8;
        padding: 8px 14px;
        border-radius: 8px;
        font-family: 'JetBrains Mono', 'Fira Code', monospace;
        font-size: 12px;
        border: 1px solid #1e293b;
    }

    .crontab-code-box button {
        background: transparent;
        border: none;
        color: #94a3b8;
        cursor: pointer;
        padding: 2px;
        display: flex;
        align-items: center;
    }
    .crontab-code-box button:hover {
        color: #ffffff;
    }

    /* Terminal Console de Logs */
    .terminal-container {
        background: #090d16;
        border: 1px solid #1e293b;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
    }

    .terminal-header {
        background: #0f172a;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #1e293b;
        flex-wrap: wrap;
        gap: 12px;
    }

    .terminal-tabs {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .terminal-tab-btn {
        background: transparent;
        border: 1px solid transparent;
        color: #94a3b8;
        padding: 6px 14px;
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    .terminal-tab-btn.active {
        background: #1e293b;
        color: #f8fafc;
        border-color: #334155;
    }
    .terminal-tab-btn:hover:not(.active) {
        color: #e2e8f0;
    }

    .terminal-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .terminal-search-input {
        background: #090d16;
        border: 1px solid #334155;
        color: #f8fafc;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        outline: none;
        width: 180px;
        transition: border-color 0.2s;
    }
    .terminal-search-input:focus {
        border-color: #38bdf8;
    }

    .terminal-select {
        background: #090d16;
        border: 1px solid #334155;
        color: #f8fafc;
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 12px;
        outline: none;
    }

    .terminal-btn-sm {
        background: #1e293b;
        border: 1px solid #334155;
        color: #cbd5e1;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        transition: all 0.2s;
    }
    .terminal-btn-sm:hover {
        background: #334155;
        color: #ffffff;
    }

    .terminal-body {
        padding: 16px 20px;
        min-height: 420px;
        max-height: 580px;
        overflow-y: auto;
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
        font-size: 12.5px;
        line-height: 1.65;
        color: #e2e8f0;
        display: flex;
        flex-direction: column;
    }

    /* Linhas formatadas do terminal */
    .log-line {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 2px 0;
        word-break: break-all;
    }
    .log-line:hover {
        background: rgba(255, 255, 255, 0.03);
    }
    .log-ts {
        color: #64748b;
        flex-shrink: 0;
        user-select: none;
    }
    .log-level-INFO {
        color: #34d399;
        font-weight: 700;
        flex-shrink: 0;
    }
    .log-level-ERRO {
        color: #f87171;
        font-weight: 700;
        flex-shrink: 0;
    }
    .log-level-AVISO {
        color: #fbbf24;
        font-weight: 700;
        flex-shrink: 0;
    }
    .log-content {
        flex: 1;
    }
    .log-content.highlight-success {
        color: #a7f3d0;
    }
    .log-content.highlight-empty {
        color: #94a3b8;
    }
    .log-content.highlight-error {
        color: #fca5a5;
    }

    .terminal-footer {
        background: #0f172a;
        padding: 8px 20px;
        border-top: 1px solid #1e293b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11.5px;
        color: #64748b;
    }

    /* Toast Notification */
    .etl-toast {
        position: fixed;
        bottom: 24px;
        right: 24px;
        padding: 14px 22px;
        border-radius: 12px;
        font-size: 13.5px;
        font-weight: 600;
        color: #ffffff;
        background: #0f172a;
        box-shadow: 0 10px 25px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        gap: 10px;
        z-index: 99999;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        pointer-events: none;
    }
    .etl-toast.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .etl-toast.success { background: #059669; }
    .etl-toast.error { background: #dc2626; }
    .etl-toast.info { background: #0284c7; }
</style>
@endsection

@section('content')
<div class="etl-container">

    <!-- 1. Header Principal e Controles Globais -->
    <div class="etl-header-card">
        <div class="etl-header-info">
            <h1>
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--vh-vinho);"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>
                Controle do ETL: DBMaker ➔ Oracle (Schema VIMAN)
            </h1>
            <p>Gerencie a replicação completa dos dados, execute sincronizações pontuais e acompanhe o fluxo de logs em tempo real.</p>
        </div>

        <div class="etl-header-actions">
            <!-- Badge de Status Dinâmico -->
            <div id="statusBadge" class="status-badge {{ $status['status'] }}">
                <span class="pulse-dot"></span>
                <span id="statusLabel">{{ $status['status_label'] }}</span>
            </div>

            <!-- Botão Iniciar -->
            <button
                id="btnIniciar"
                class="btn-etl btn-etl-primary"
                onclick="iniciarEtl()"
                @if($status['em_execucao']) disabled @endif
            >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                Iniciar Sincronização
            </button>

            <!-- Botão Parar -->
            <button
                id="btnParar"
                class="btn-etl btn-etl-danger"
                onclick="pararEtl()"
                @if(!$status['em_execucao']) disabled @endif
            >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg>
                Parar Processo
            </button>

            <!-- Botão Atualizar Manual -->
            <button class="btn-etl btn-etl-secondary" onclick="atualizarTudo(true)" title="Recarregar Status e Logs">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
                Atualizar
            </button>
        </div>
    </div>

    <!-- 2. Barra de Progresso em Tempo Real (Visível quando em execução ou recém concluído) -->
    <div class="progress-card" id="progressCard">
        <div class="progress-header">
            <span class="progress-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--vh-vinho);"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                Progresso da Sincronização:
                <span id="txtTabelaAtual" style="color: var(--vh-vinho); font-weight: 800;">
                    {{ $status['tabela_atual'] ?? ($status['em_execucao'] ? 'Iniciando...' : 'Aguardando execução') }}
                </span>
            </span>
            <span class="progress-meta" id="txtProgressoPct">
                {{ number_format($status['progresso_pct'] ?? 0, 1) }}%
            </span>
        </div>

        <div class="progress-bar-bg">
            <div
                id="progressBarFill"
                class="progress-bar-fill @if($status['em_execucao']) active @endif"
                style="width: {{ min(100, max(0, $status['progresso_pct'] ?? 0)) }}%;"
            ></div>
        </div>

        <div class="progress-details">
            <div>
                Tabelas: <strong id="txtIndiceTabelas">{{ $status['indice_atual'] ?? 0 }} / {{ $status['total_tabelas'] ?? 677 }}</strong>
            </div>
            <div>
                Linhas Replicadas: <strong id="txtLinhasReplicadas">{{ number_format($status['linhas_inseridas'] ?? 0, 0, ',', '.') }}</strong>
            </div>
            <div>
                Tempo Decorrido: <strong id="txtTempoDecorrido">{{ $status['duracao_formatada'] ?? '--:--:--' }}</strong>
            </div>
            <div id="boxPidInfo">
                PID Servidor: <strong id="txtPid">{{ $status['pid'] ?? 'Nenhum' }}</strong>
            </div>
        </div>
    </div>

    <!-- 3. Grid de Cards de Métricas / Indicadores (KPIs) -->
    <div class="metrics-grid">
        <!-- Card 1: Status Operacional -->
        <div class="metric-card">
            <div class="metric-card-top">
                <span class="metric-label">Status do ETL</span>
                <div class="metric-icon" style="background: #e0f2fe; color: #0284c7;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                </div>
            </div>
            <div class="metric-value" id="kpiStatusLabel">
                {{ $status['status_label'] }}
            </div>
            <div class="metric-subtext" id="kpiModo">
                Origem: {{ strtoupper($status['modo'] ?? 'MANUAL') }}
            </div>
        </div>

        <!-- Card 2: Última Execução -->
        <div class="metric-card">
            <div class="metric-card-top">
                <span class="metric-label">Última Execução</span>
                <div class="metric-icon" style="background: #f3e8ff; color: #7e22ce;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
            </div>
            <div class="metric-value" style="font-size: 19px;" id="kpiDataInicio">
                {{ !empty($status['inicio']) ? date('d/m H:i', strtotime($status['inicio'])) : '--/-- --:--' }}
            </div>
            <div class="metric-subtext" id="kpiDuracao">
                Duração: {{ $status['duracao_formatada'] ?? '--' }}
            </div>
        </div>

        <!-- Card 3: Tabelas com Dados -->
        <div class="metric-card">
            <div class="metric-card-top">
                <span class="metric-label">Tabelas Populadas</span>
                <div class="metric-icon" style="background: #ecfdf5; color: #059669;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                </div>
            </div>
            <div class="metric-value" id="kpiTabelasPopuladas">
                {{ number_format($status['sucessos'] ?? 0, 0, ',', '.') }}
            </div>
            <div class="metric-subtext" id="kpiTabelasVazias">
                {{ number_format($status['vazias'] ?? 0, 0, ',', '.') }} vazias no DBMaker
            </div>
        </div>

        <!-- Card 4: Linhas Inseridas -->
        <div class="metric-card">
            <div class="metric-card-top">
                <span class="metric-label">Linhas Inseridas</span>
                <div class="metric-icon" style="background: #fef2f2; color: var(--vh-vinho);">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                </div>
            </div>
            <div class="metric-value" id="kpiLinhasTotal">
                {{ number_format($status['linhas_inseridas'] ?? 0, 0, ',', '.') }}
            </div>
            <div class="metric-subtext">
                Destino: Schema VIMAN (Oracle)
            </div>
        </div>

        <!-- Card 5: Falhas e Erros -->
        <div class="metric-card">
            <div class="metric-card-top">
                <span class="metric-label">Erros / Falhas</span>
                <div class="metric-icon" style="background: {{ ($status['erros'] ?? 0) > 0 ? '#fee2e2' : '#f1f5f9' }}; color: {{ ($status['erros'] ?? 0) > 0 ? '#dc2626' : '#64748b' }};">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                </div>
            </div>
            <div class="metric-value" style="color: {{ ($status['erros'] ?? 0) > 0 ? '#dc2626' : 'inherit' }};" id="kpiErrosTotal">
                {{ number_format($status['erros'] ?? 0, 0, ',', '.') }}
            </div>
            <div class="metric-subtext">
                {{ ($status['erros'] ?? 0) === 0 ? 'Nenhum erro registrado' : 'Verifique o log de falhas' }}
            </div>
        </div>
    </div>

    <!-- 4. Card de Informações e Configuração do Crontab -->
    <div class="crontab-card">
        <div class="crontab-info">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
            <div>
                <h4>Agendamento Automático via Crontab (2x ao dia)</h4>
                <p>
                    O script agora executa <strong>uma única rodada completa e finaliza com sucesso</strong> (sem loop infinito), possuindo proteção contra concorrência via <em>lockfile</em>. No Crontab do servidor, use a linha abaixo para rodar pontualmente duas vezes ao dia (ex: às 06:00 e 18:00):
                </p>
            </div>
        </div>

        <div class="crontab-code-box">
            <code id="cronLine">0 6,18 * * * cd /var/www/html && python3 scripts/sincronizar_viman_oracle.py --modo cron >> /var/www/html/logs/cron_etl.log 2>&1</code>
            <button onclick="copiarCrontab()" title="Copiar comando">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            </button>
        </div>
    </div>

    <!-- 5. Terminal Console de Logs Interativo -->
    <div class="terminal-container">
        <div class="terminal-header">
            <div class="terminal-tabs">
                <button id="tabLogGeral" class="terminal-tab-btn active" onclick="trocarTab('geral')">
                    📄 Log Geral de Sincronização
                </button>
                <button id="tabLogErros" class="terminal-tab-btn" onclick="trocarTab('erros')">
                    ⚠️ Log de Erros
                </button>
            </div>

            <div class="terminal-controls">
                <!-- Busca -->
                <input
                    type="text"
                    id="inputBusca"
                    class="terminal-search-input"
                    placeholder="Filtrar logs..."
                    onkeyup="debounceBusca()"
                />

                <!-- Seletor de Nível -->
                <select id="selectNivel" class="terminal-select" onchange="carregarLogs()">
                    <option value="TODOS">Todos os Níveis</option>
                    <option value="INFO">Apenas [INFO]</option>
                    <option value="ERRO">Apenas [ERRO]</option>
                </select>

                <!-- Seletor de Quantidade de Linhas -->
                <select id="selectLinhas" class="terminal-select" onchange="carregarLogs()">
                    <option value="80">80 Linhas</option>
                    <option value="150" selected>150 Linhas</option>
                    <option value="300">300 Linhas</option>
                    <option value="500">500 Linhas</option>
                </select>

                <!-- Botão Download -->
                <a id="btnDownloadLog" href="{{ route('etl.download-log', ['tipo' => 'geral']) }}" class="terminal-btn-sm" title="Baixar arquivo de log completo">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Download .log
                </a>

                <!-- Botão Limpar Logs -->
                <button class="terminal-btn-sm" onclick="limparLogs()" style="color: #f87171;" title="Limpar logs antigos">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    Limpar
                </button>
            </div>
        </div>

        <div class="terminal-body" id="terminalOutput">
            @forelse($linhasLogGeral as $linha)
                @php
                    $isErro = stripos($linha, '[ERRO]') !== false || stripos($linha, 'FALHA') !== false;
                    $isInfo = stripos($linha, '[INFO ]') !== false || stripos($linha, '[INFO]') !== false;
                    $isSucesso = stripos($linha, 'Sincronizado com Sucesso') !== false;
                    $isVazia = stripos($linha, 'Tabela Vazia') !== false;

                    preg_match('/^(\[[0-9\- :]+\])/', $linha, $matchesTs);
                    $ts = $matchesTs[1] ?? '';
                    $resto = $ts ? trim(substr($linha, strlen($ts))) : $linha;
                @endphp
                <div class="log-line">
                    @if($ts)<span class="log-ts">{{ $ts }}</span>@endif
                    @if($isErro)
                        <span class="log-level-ERRO">[ERRO]</span>
                    @elseif($isInfo)
                        <span class="log-level-INFO">[INFO]</span>
                    @endif
                    <span class="log-content @if($isSucesso) highlight-success @elseif($isVazia) highlight-empty @elseif($isErro) highlight-error @endif">
                        {{ preg_replace('/^\[(INFO|ERRO|AVISO)[\s]*\]\s*/', '', $resto) }}
                    </span>
                </div>
            @empty
                <div style="color: #64748b; padding: 20px; text-align: center;">
                    Nenhum registro de log encontrado para exibir no momento.
                </div>
            @endforelse
        </div>

        <div class="terminal-footer">
            <span id="terminalFooterMeta">
                Exibindo as últimas {{ count($linhasLogGeral) }} linhas | Arquivo: sincronizacao_viman.log
            </span>
            <div style="display: flex; align-items: center; gap: 14px;">
                <label style="cursor: pointer; display: flex; align-items: center; gap: 6px;">
                    <input type="checkbox" id="chkAutoScroll" checked> Auto-scroll
                </label>
                <label style="cursor: pointer; display: flex; align-items: center; gap: 6px;">
                    <input type="checkbox" id="chkAutoRefresh" checked onchange="toggleAutoRefresh()"> Auto-refresh (3s)
                </label>
            </div>
        </div>
    </div>

</div>

<!-- Toast Notification -->
<div id="etlToast" class="etl-toast">
    <span id="etlToastMsg">Mensagem</span>
</div>

@endsection

@section('scripts')
<script>
    let abaAtiva = 'geral';
    let timerPolling = null;
    let debounceTimer = null;
    let emExecucao = @json($status['em_execucao'] ?? false);

    document.addEventListener('DOMContentLoaded', () => {
        iniciarPolling();
        autoScrollTerminal();
    });

    function showToast(msg, tipo = 'info') {
        const toast = document.getElementById('etlToast');
        const toastMsg = document.getElementById('etlToastMsg');
        toastMsg.textContent = msg;
        toast.className = `etl-toast show ${tipo}`;

        setTimeout(() => {
            toast.className = 'etl-toast';
        }, 4000);
    }

    function copiarCrontab() {
        const text = document.getElementById('cronLine').textContent;
        navigator.clipboard.writeText(text).then(() => {
            showToast('Linha do Crontab copiada para a área de transferência!', 'success');
        });
    }

    function trocarTab(tipo) {
        abaAtiva = tipo;
        document.getElementById('tabLogGeral').className = `terminal-tab-btn ${tipo === 'geral' ? 'active' : ''}`;
        document.getElementById('tabLogErros').className = `terminal-tab-btn ${tipo === 'erros' ? 'active' : ''}`;

        const urlDownload = "{{ url('/modulos/integracoes/etl-viman/download-log') }}/" + tipo;
        document.getElementById('btnDownloadLog').setAttribute('href', urlDownload);

        carregarLogs();
    }

    function debounceBusca() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            carregarLogs();
        }, 350);
    }

    function autoScrollTerminal() {
        const chk = document.getElementById('chkAutoScroll');
        if (chk && chk.checked) {
            const out = document.getElementById('terminalOutput');
            out.scrollTop = out.scrollHeight;
        }
    }

    function toggleAutoRefresh() {
        const chk = document.getElementById('chkAutoRefresh');
        if (chk.checked) {
            iniciarPolling();
        } else {
            pararPolling();
        }
    }

    function iniciarPolling() {
        pararPolling();
        // A cada 3 segundos atualiza status e logs
        timerPolling = setInterval(() => {
            atualizarTudo(false);
        }, 3000);
    }

    function pararPolling() {
        if (timerPolling) {
            clearInterval(timerPolling);
            timerPolling = null;
        }
    }

    async function atualizarTudo(showNotification = false) {
        await Promise.all([
            carregarStatus(),
            carregarLogs()
        ]);
        if (showNotification) {
            showToast('Dados e logs atualizados com sucesso!', 'info');
        }
    }

    async function carregarStatus() {
        try {
            const res = await fetch("{{ route('etl.status') }}");
            if (!res.ok) return;
            const data = await res.json();
            if (data && data.dados) {
                renderizarStatus(data.dados);
            }
        } catch (e) {
            console.error('Falha ao atualizar status ETL:', e);
        }
    }

    function renderizarStatus(d) {
        emExecucao = !!d.em_execucao;

        // Atualiza Badge
        const badge = document.getElementById('statusBadge');
        badge.className = `status-badge ${d.status}`;
        document.getElementById('statusLabel').textContent = d.status_label || d.status;

        // Atualiza Botões
        document.getElementById('btnIniciar').disabled = emExecucao;
        document.getElementById('btnParar').disabled = !emExecucao;

        // Atualiza Barra de Progresso
        const pct = Math.min(100, Math.max(0, d.progresso_pct || 0));
        document.getElementById('txtProgressoPct').textContent = `${pct.toFixed(1)}%`;
        const barFill = document.getElementById('progressBarFill');
        barFill.style.width = `${pct}%`;
        if (emExecucao) {
            barFill.classList.add('active');
        } else {
            barFill.classList.remove('active');
        }

        document.getElementById('txtTabelaAtual').textContent = d.tabela_atual || (emExecucao ? 'Processando...' : 'Concluído');
        document.getElementById('txtIndiceTabelas').textContent = `${d.indice_atual || 0} / ${d.total_tabelas || 677}`;
        document.getElementById('txtLinhasReplicadas').textContent = Number(d.linhas_inseridas || 0).toLocaleString('pt-BR');
        document.getElementById('txtTempoDecorrido').textContent = d.duracao_formatada || '--:--:--';
        document.getElementById('txtPid').textContent = d.pid ? `${d.pid}` : 'Nenhum';

        // Atualiza KPIs
        document.getElementById('kpiStatusLabel').textContent = d.status_label || d.status;
        document.getElementById('kpiModo').textContent = `Origem: ${(d.modo || 'MANUAL').toUpperCase()}`;
        if (d.inicio) {
            const dt = new Date(d.inicio.replace(/-/g, '/'));
            const dFmt = !isNaN(dt) ? `${dt.getDate().toString().padStart(2, '0')}/${(dt.getMonth()+1).toString().padStart(2, '0')} ${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}` : d.inicio;
            document.getElementById('kpiDataInicio').textContent = dFmt;
        }
        document.getElementById('kpiDuracao').textContent = `Duração: ${d.duracao_formatada || '--'}`;
        document.getElementById('kpiTabelasPopuladas').textContent = Number(d.sucessos || 0).toLocaleString('pt-BR');
        document.getElementById('kpiTabelasVazias').textContent = `${Number(d.vazias || 0).toLocaleString('pt-BR')} vazias no DBMaker`;
        document.getElementById('kpiLinhasTotal').textContent = Number(d.linhas_inseridas || 0).toLocaleString('pt-BR');
        document.getElementById('kpiErrosTotal').textContent = Number(d.erros || 0).toLocaleString('pt-BR');
    }

    async function carregarLogs() {
        const busca = document.getElementById('inputBusca').value;
        const nivel = document.getElementById('selectNivel').value;
        const linhas = document.getElementById('selectLinhas').value;

        const params = new URLSearchParams({
            tipo: abaAtiva,
            busca: busca,
            nivel: nivel,
            linhas: linhas
        });

        try {
            const res = await fetch(`{{ route('etl.logs') }}?${params.toString()}`);
            if (!res.ok) return;
            const data = await res.json();
            if (data && data.linhas) {
                renderizarLinhasLog(data.linhas, data.arquivo);
            }
        } catch (e) {
            console.error('Falha ao carregar logs:', e);
        }
    }

    function renderizarLinhasLog(linhas, arquivo) {
        const container = document.getElementById('terminalOutput');
        if (!linhas || linhas.length === 0) {
            container.innerHTML = `<div style="color: #64748b; padding: 20px; text-align: center;">Nenhum registro encontrado correspondente aos filtros atuais.</div>`;
            return;
        }

        const fragment = document.createDocumentFragment();

        linhas.forEach(linha => {
            const isErro = linha.includes('[ERRO]') || linha.includes('FALHA');
            const isInfo = linha.includes('[INFO ]') || linha.includes('[INFO]');
            const isAviso = linha.includes('[AVISO]');
            const isSucesso = linha.includes('Sincronizado com Sucesso');
            const isVazia = linha.includes('Tabela Vazia');

            const matchTs = linha.match(/^(\[[0-9\- :]+\])/);
            const ts = matchTs ? matchTs[1] : '';
            const resto = ts ? linha.substring(ts.length).trim() : linha;

            const div = document.createElement('div');
            div.className = 'log-line';

            let html = '';
            if (ts) {
                html += `<span class="log-ts">${ts}</span>`;
            }

            if (isErro) {
                html += `<span class="log-level-ERRO">[ERRO]</span>`;
            } else if (isInfo) {
                html += `<span class="log-level-INFO">[INFO]</span>`;
            } else if (isAviso) {
                html += `<span class="log-level-AVISO">[AVISO]</span>`;
            }

            let highlightClass = '';
            if (isSucesso) highlightClass = 'highlight-success';
            else if (isVazia) highlightClass = 'highlight-empty';
            else if (isErro) highlightClass = 'highlight-error';

            const cleanContent = resto.replace(/^\[(INFO|ERRO|AVISO)[\s]*\]\s*/, '');
            html += `<span class="log-content ${highlightClass}">${escapeHtml(cleanContent)}</span>`;

            div.innerHTML = html;
            fragment.appendChild(div);
        });

        container.innerHTML = '';
        container.appendChild(fragment);

        document.getElementById('terminalFooterMeta').textContent = `Exibindo ${linhas.length} linhas | Arquivo: ${arquivo}`;
        autoScrollTerminal();
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    async function iniciarEtl() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
        const resConfirm = await Swal.fire({
            title: 'Iniciar Ciclo ETL',
            text: 'Deseja iniciar o ciclo completo de sincronização do ETL agora?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#c8102e',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Sim, iniciar',
            cancelButtonText: 'Cancelar',
            background: isDark ? '#111827' : '#ffffff',
            color: isDark ? '#f3f4f6' : '#0f172a'
        });

        if (!resConfirm.isConfirmed) {
            return;
        }

        const btn = document.getElementById('btnIniciar');
        btn.disabled = true;

        try {
            const res = await fetch("{{ route('etl.iniciar') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await res.json();
            if (res.ok && data.sucesso) {
                showToast(data.mensagem || 'Sincronização iniciada com sucesso!', 'success');
                atualizarTudo();
            } else {
                showToast(data.mensagem || 'Não foi possível iniciar a sincronização.', 'error');
                btn.disabled = false;
            }
        } catch (e) {
            showToast('Erro de comunicação ao disparar o processo.', 'error');
            btn.disabled = false;
        }
    }

    async function pararEtl() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
        const resConfirm = await Swal.fire({
            title: 'Interromper ETL',
            text: 'Tem certeza que deseja forçar a interrupção do processo de sincronização em execução?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#c8102e',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Sim, interromper',
            cancelButtonText: 'Cancelar',
            background: isDark ? '#111827' : '#ffffff',
            color: isDark ? '#f3f4f6' : '#0f172a'
        });

        if (!resConfirm.isConfirmed) {
            return;
        }

        const btn = document.getElementById('btnParar');
        btn.disabled = true;

        try {
            const res = await fetch("{{ route('etl.parar') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            });

            const data = await res.json();
            if (res.ok && data.sucesso) {
                showToast(data.mensagem, 'success');
                atualizarTudo();
            } else {
                showToast(data.mensagem || 'Falha ao interromper processo.', 'error');
            }
        } catch (e) {
            showToast('Erro de comunicação ao enviar sinal de parada.', 'error');
        }
    }

    async function limparLogs() {
        const isDark = document.documentElement.getAttribute('data-theme') === 'dark' || document.body.classList.contains('erp-theme-dark');
        const resConfirm = await Swal.fire({
            title: 'Limpar Histórico de Logs',
            text: `Deseja limpar o histórico do arquivo de log (${abaAtiva === 'erros' ? 'Erros' : 'Geral'})? Esta ação não pode ser desfeita.`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#c8102e',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Sim, limpar',
            cancelButtonText: 'Cancelar',
            background: isDark ? '#111827' : '#ffffff',
            color: isDark ? '#f3f4f6' : '#0f172a'
        });

        if (!resConfirm.isConfirmed) {
            return;
        }

        try {
            const res = await fetch("{{ route('etl.limpar-logs') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ tipo: abaAtiva })
            });

            const data = await res.json();
            if (res.ok && data.sucesso) {
                showToast(data.mensagem, 'success');
                carregarLogs();
            } else {
                showToast(data.mensagem || 'Falha ao limpar arquivo de log.', 'error');
            }
        } catch (e) {
            showToast('Erro ao solicitar limpeza dos logs.', 'error');
        }
    }
</script>
@endsection