@extends('adminlte::page')

@section('title', 'Métricas - Sistema de Monitoramento')

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <style>
        /* Garantir que a fonte Inter seja aplicada imediatamente */
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        }
    </style>
@stop

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="fas fa-chart-line"></i> Métricas do Sistema</h1>
        <div>
            <button type="button" class="btn btn-success btn-sm" onclick="coletarTodasMetricas()">
                <i class="fas fa-sync-alt"></i> Coletar Métricas
            </button>
            <a href="{{ route('metricas.dashboard') }}" class="btn btn-info btn-sm">
                <i class="fas fa-chart-bar"></i> Dashboard
            </a>
            <a href="{{ route('metricas.exportar', request()->query()) }}" class="btn btn-warning btn-sm">
                <i class="fas fa-download"></i> Exportar
            </a>
            <a href="{{ route('instalacoes.web.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-cog"></i> Instalações
            </a>
        </div>
    </div>
@stop

@section('content')
    <!-- Filtros de Data e Instalação -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row align-items-end">
                <div class="col-md-2">
                    <label for="data_inicio">Data Início:</label>
                    <input type="date" class="form-control" id="data_inicio" name="data_inicio" 
                           value="{{ $filtros['data_inicio'] ?? now()->subDays(7)->format('Y-m-d') }}" onchange="filterMetricas()">
                </div>
                <div class="col-md-2">
                    <label for="data_fim">Data Fim:</label>
                    <input type="date" class="form-control" id="data_fim" name="data_fim" 
                           value="{{ $filtros['data_fim'] ?? now()->format('Y-m-d') }}" onchange="filterMetricas()">
                </div>
                <div class="col-md-2">
                    <label for="instalacao_id">Instalação:</label>
                    <select class="form-control" id="instalacao_id" name="instalacao_id" onchange="filterMetricas()">
                        <option value="">Todas as Instalações</option>
                        @foreach($instalacoes as $instalacao)
                            <option value="{{ $instalacao->id }}" {{ ($filtros['instalacao_id'] ?? '') == $instalacao->id ? 'selected' : '' }}>
                                {{ $instalacao->nome }} ({{ $instalacao->slug }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="metrica">Métrica:</label>
                    <select class="form-control" id="metrica" name="metrica" onchange="filterMetricas()">
                        <option value="">Todas as Métricas</option>
                        @foreach($metricasDisponiveis as $chave => $nome)
                            <option value="{{ $chave }}" {{ ($filtros['metrica'] ?? '') == $chave ? 'selected' : '' }}>
                                {{ $nome }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="valor_minimo">Valor Mínimo:</label>
                    <input type="number" class="form-control" id="valor_minimo" name="valor_minimo" 
                           value="{{ $filtros['valor_minimo'] ?? '' }}" 
                           placeholder="0" step="0.01" onchange="filterMetricas()">
                </div>
                <div class="col-md-2">
                    <label for="valor_maximo">Valor Máximo:</label>
                    <input type="number" class="form-control" id="valor_maximo" name="valor_maximo" 
                           value="{{ $filtros['valor_maximo'] ?? '' }}" 
                           placeholder="1000" step="0.01" onchange="filterMetricas()">
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-md-12">
                    <button type="button" class="btn btn-primary btn-sm" onclick="filterMetricas()">
                        <i class="fas fa-search"></i> Filtrar
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
                        <i class="fas fa-times"></i> Limpar Filtros
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Cards de Resumo -->
    <div class="row mb-3">
        <div class="col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-info"><i class="fas fa-chart-line"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total de Métricas</span>
                    <span class="info-box-number">{{ $metricas->total() }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-success"><i class="fas fa-server"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Instalações Monitoradas</span>
                    <span class="info-box-number">{{ $instalacoes->count() }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Última Coleta</span>
                    <span class="info-box-number">
                        @if($metricas->count() > 0)
                            {{ $metricas->first()->coletado_em->diffForHumans() }}
                        @else
                            N/A
                        @endif
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box">
                <span class="info-box-icon bg-danger"><i class="fas fa-exclamation-triangle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Alertas Ativos</span>
                    <span class="info-box-number" id="alertas-count">0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela de Métricas -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-list"></i> Métricas Coletadas
                <span class="badge badge-info" id="total-metricas">{{ $metricas->total() }}</span>
            </h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="refresh" onclick="refreshMetricas()">
                    <i class="fas fa-sync-alt"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="thead-dark">
                        <tr>
                            <th style="width: 8%">
                                <i class="fas fa-hashtag"></i> ID
                            </th>
                            <th style="width: 15%">
                                <i class="fas fa-server"></i> Instalação
                            </th>
                            <th style="width: 20%">
                                <i class="fas fa-chart-line"></i> Métrica
                            </th>
                            <th style="width: 12%">
                                <i class="fas fa-calculator"></i> Valor
                            </th>
                            <th style="width: 8%">
                                <i class="fas fa-ruler"></i> Unidade
                            </th>
                            <th style="width: 15%">
                                <i class="fas fa-clock"></i> Coletado em
                            </th>
                            <th style="width: 10%">
                                <i class="fas fa-info-circle"></i> Status
                            </th>
                            <th style="width: 12%">
                                <i class="fas fa-cogs"></i> Ações
                            </th>
                        </tr>
                    </thead>
                    <tbody id="metricas-table-body">
                        @forelse($metricas as $metrica)
                            <tr class="metrica-row clickable-row" data-metrica="{{ $metrica->metrica }}" data-instalacao="{{ $metrica->instalacao_id }}" onclick="window.location.href='{{ route('metricas.show', $metrica) }}'" style="cursor: pointer;">
                                <td class="text-muted">
                                    <small>{{ $metrica->id }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-primary">
                                        {{ $metrica->instalacao->nome ?? 'N/A' }}
                                    </span>
                                </td>
                                <td>
                                    <strong>{{ $metricasDisponiveis[$metrica->metrica] ?? $metrica->metrica }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $metrica->metrica }}</small>
                                </td>
                                <td>
                                    <span class="badge badge-{{ $this->getValorBadgeClass($metrica->valor, $metrica->metrica) }}">
                                        {{ $metrica->valor_formatado }}
                                    </span>
                                </td>
                                <td>
                                    @if($metrica->unidade)
                                        <span class="badge badge-secondary">{{ $metrica->unidade }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $metrica->coletado_em->format('d/m/Y H:i:s') }}</small>
                                    <br>
                                    <small class="text-muted">{{ $metrica->coletado_em->diffForHumans() }}</small>
                                </td>
                                <td>
                                    @php
                                        $status = $this->getMetricaStatus($metrica->valor, $metrica->metrica);
                                    @endphp
                                    <span class="badge badge-{{ $status['class'] }}">
                                        <i class="fas fa-{{ $status['icon'] }}"></i> {{ $status['text'] }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('metricas.show', $metrica) }}" class="btn btn-sm btn-primary" onclick="event.stopPropagation();">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    <i class="fas fa-chart-line fa-2x mb-2"></i><br>
                                    Nenhuma métrica encontrada para os filtros selecionados.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($metricas->hasPages())
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted">
                        Mostrando {{ $metricas->firstItem() }} a {{ $metricas->lastItem() }} de {{ $metricas->total() }} registros
                    </div>
                    <div>
                        {{ $metricas->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        @endif
    </div>
@stop

@section('css')
<style>
    .metrica-row {
        transition: all 0.2s ease;
    }
    
    .metrica-row:hover {
        background-color: #f8f9fa;
        transform: translateX(2px);
    }
    
    .badge {
        font-size: 0.75em;
        padding: 0.35em 0.65em;
    }
    
    .table th {
        border-top: none;
        font-weight: 600;
        font-size: 0.9em;
    }
    
    .card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .card-header h3 {
        color: white;
        margin: 0;
    }
    
    .btn-tool {
        color: white;
    }
    
    .btn-tool:hover {
        color: #f8f9fa;
    }
    
    .clickable-row:hover {
        background-color: #f8f9fa !important;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
    }
    
    .info-box {
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border-radius: 0.25rem;
        background-color: #fff;
        display: flex;
        margin-bottom: 1rem;
        min-height: 80px;
        padding: 0.5rem;
        position: relative;
        width: 100%;
    }
    
    .info-box-icon {
        align-items: center;
        display: flex;
        font-size: 1.875rem;
        justify-content: center;
        text-align: center;
        width: 70px;
    }
    
    .info-box-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.8;
        margin-left: 0.5rem;
        padding: 0.5rem;
    }
    
    .info-box-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 0.875rem;
    }
    
    .info-box-number {
        display: block;
        font-weight: bold;
        font-size: 1.875rem;
    }
</style>
@stop

@section('js')
<script>
    // Filtrar métricas (atualizar página)
    function filterMetricas() {
        const dataInicio = document.getElementById('data_inicio').value;
        const dataFim = document.getElementById('data_fim').value;
        const instalacao = document.getElementById('instalacao_id').value;
        const metrica = document.getElementById('metrica').value;
        const valorMinimo = document.getElementById('valor_minimo').value;
        const valorMaximo = document.getElementById('valor_maximo').value;
        
        const params = new URLSearchParams();
        if (dataInicio) params.append('data_inicio', dataInicio);
        if (dataFim) params.append('data_fim', dataFim);
        if (instalacao) params.append('instalacao_id', instalacao);
        if (metrica) params.append('metrica', metrica);
        if (valorMinimo) params.append('valor_minimo', valorMinimo);
        if (valorMaximo) params.append('valor_maximo', valorMaximo);
        
        window.location.href = '{{ route("metricas.index") }}?' + params.toString();
    }

    // Limpar filtros
    function clearFilters() {
        document.getElementById('data_inicio').value = '';
        document.getElementById('data_fim').value = '';
        document.getElementById('instalacao_id').value = '';
        document.getElementById('metrica').value = '';
        document.getElementById('valor_minimo').value = '';
        document.getElementById('valor_maximo').value = '';
        
        window.location.href = '{{ route("metricas.index") }}';
    }

    // Refresh métricas
    function refreshMetricas() {
        window.location.reload();
    }

    // Coletar todas as métricas
    function coletarTodasMetricas() {
        if (confirm('Deseja coletar métricas de todas as instalações? Isso pode levar alguns minutos.')) {
            const button = event.target;
            const originalText = button.innerHTML;
            
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Coletando...';
            button.disabled = true;
            
            fetch('{{ route("metricas.coletar-todas") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert('Erro: ' + data.message);
                }
            })
            .catch(error => {
                alert('Erro ao coletar métricas: ' + error.message);
            })
            .finally(() => {
                button.innerHTML = originalText;
                button.disabled = false;
            });
        }
    }

    // Auto-refresh a cada 60 segundos
    setInterval(function() {
        refreshMetricas();
    }, 60000);
</script>
@stop

@php
    // Helper methods para a view
    function getValorBadgeClass($valor, $metrica) {
        switch ($metrica) {
            case 'tempo_resposta_medio':
                return $valor > 5000 ? 'danger' : ($valor > 2000 ? 'warning' : 'success');
            case 'uso_memoria':
                return $valor > 1000 ? 'danger' : ($valor > 500 ? 'warning' : 'success');
            case 'uso_cpu':
                return $valor > 80 ? 'danger' : ($valor > 60 ? 'warning' : 'success');
            case 'erros_por_hora':
                return $valor > 10 ? 'danger' : ($valor > 5 ? 'warning' : 'success');
            default:
                return 'info';
        }
    }

    function getMetricaStatus($valor, $metrica) {
        switch ($metrica) {
            case 'tempo_resposta_medio':
                if ($valor > 5000) return ['class' => 'danger', 'icon' => 'exclamation-triangle', 'text' => 'Crítico'];
                if ($valor > 2000) return ['class' => 'warning', 'icon' => 'clock', 'text' => 'Lento'];
                return ['class' => 'success', 'icon' => 'check', 'text' => 'OK'];
            case 'uso_memoria':
                if ($valor > 1000) return ['class' => 'danger', 'icon' => 'exclamation-triangle', 'text' => 'Alto'];
                if ($valor > 500) return ['class' => 'warning', 'icon' => 'memory', 'text' => 'Médio'];
                return ['class' => 'success', 'icon' => 'check', 'text' => 'OK'];
            case 'uso_cpu':
                if ($valor > 80) return ['class' => 'danger', 'icon' => 'exclamation-triangle', 'text' => 'Alto'];
                if ($valor > 60) return ['class' => 'warning', 'icon' => 'microchip', 'text' => 'Médio'];
                return ['class' => 'success', 'icon' => 'check', 'text' => 'OK'];
            case 'erros_por_hora':
                if ($valor > 10) return ['class' => 'danger', 'icon' => 'exclamation-triangle', 'text' => 'Muitos'];
                if ($valor > 5) return ['class' => 'warning', 'icon' => 'exclamation', 'text' => 'Alguns'];
                return ['class' => 'success', 'icon' => 'check', 'text' => 'OK'];
            default:
                return ['class' => 'info', 'icon' => 'info', 'text' => 'Normal'];
        }
    }
@endphp