@extends('adminlte::page')

@section('title', 'Detalhes da Métrica - ' . $metrica->metrica)

@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> 
            Detalhes da Métrica: 
            <span class="text-primary">{{ $metricasDisponiveis[$metrica->metrica] ?? $metrica->metrica }}</span>
        </h1>
        <div>
            <a href="{{ route('metricas.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Voltar
            </a>
            <a href="{{ route('metricas.dashboard') }}" class="btn btn-info btn-sm">
                <i class="fas fa-chart-bar"></i> Dashboard
            </a>
            <a href="{{ route('instalacoes.web.show', $metrica->instalacao) }}" class="btn btn-primary btn-sm">
                <i class="fas fa-server"></i> Ver Instalação
            </a>
        </div>
    </div>
@stop

@section('content')
    <!-- Informações Gerais -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-info-circle"></i> Informações da Métrica
                    </h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>ID:</strong></td>
                                    <td>{{ $metrica->id }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Instalação:</strong></td>
                                    <td>
                                        <span class="badge badge-primary">
                                            {{ $metrica->instalacao->nome ?? 'N/A' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Métrica:</strong></td>
                                    <td>
                                        <strong>{{ $metricasDisponiveis[$metrica->metrica] ?? $metrica->metrica }}</strong>
                                        <br>
                                        <small class="text-muted">{{ $metrica->metrica }}</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Valor:</strong></td>
                                    <td>
                                        <span class="badge badge-{{ $this->getValorBadgeClass($metrica->valor, $metrica->metrica) }} badge-lg">
                                            {{ $metrica->valor_formatado }}
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Unidade:</strong></td>
                                    <td>
                                        @if($metrica->unidade)
                                            <span class="badge badge-secondary">{{ $metrica->unidade }}</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Coletado em:</strong></td>
                                    <td>
                                        {{ $metrica->coletado_em->format('d/m/Y H:i:s') }}
                                        <br>
                                        <small class="text-muted">{{ $metrica->coletado_em->diffForHumans() }}</small>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></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>
                                </tr>
                                <tr>
                                    <td><strong>Criado em:</strong></td>
                                    <td>
                                        {{ $metrica->created_at->format('d/m/Y H:i:s') }}
                                        <br>
                                        <small class="text-muted">{{ $metrica->created_at->diffForHumans() }}</small>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-chart-pie"></i> Análise Rápida
                    </h3>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="mb-3">
                            <h2 class="text-{{ $this->getValorBadgeClass($metrica->valor, $metrica->metrica) }}">
                                {{ $metrica->valor_formatado }}
                            </h2>
                            <p class="text-muted">{{ $metricasDisponiveis[$metrica->metrica] ?? $metrica->metrica }}</p>
                        </div>
                        
                        @php
                            $analise = $this->getAnaliseMetrica($metrica->valor, $metrica->metrica);
                        @endphp
                        
                        <div class="alert alert-{{ $analise['class'] }}">
                            <i class="fas fa-{{ $analise['icon'] }}"></i>
                            <strong>{{ $analise['titulo'] }}</strong>
                            <br>
                            <small>{{ $analise['descricao'] }}</small>
                        </div>
                        
                        @if($analise['recomendacoes'])
                            <div class="mt-3">
                                <h6><i class="fas fa-lightbulb"></i> Recomendações:</h6>
                                <ul class="list-unstyled text-left">
                                    @foreach($analise['recomendacoes'] as $recomendacao)
                                        <li><i class="fas fa-arrow-right text-muted"></i> {{ $recomendacao }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Detalhes JSON -->
    @if($metrica->detalhes)
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-code"></i> Detalhes Técnicos
                        </h3>
                    </div>
                    <div class="card-body">
                        <pre class="bg-light p-3 rounded"><code>{{ json_encode($metrica->detalhes, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</code></pre>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Histórico da Métrica -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-history"></i> Histórico da Métrica
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Data/Hora</th>
                                    <th>Valor</th>
                                    <th>Unidade</th>
                                    <th>Status</th>
                                    <th>Diferença</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $historico = \App\Models\MetricaInstalacao::where('instalacao_id', $metrica->instalacao_id)
                                        ->where('metrica', $metrica->metrica)
                                        ->orderBy('coletado_em', 'desc')
                                        ->limit(10)
                                        ->get();
                                @endphp
                                
                                @forelse($historico as $index => $item)
                                    <tr>
                                        <td>
                                            {{ $item->coletado_em->format('d/m/Y H:i:s') }}
                                            <br>
                                            <small class="text-muted">{{ $item->coletado_em->diffForHumans() }}</small>
                                        </td>
                                        <td>
                                            <span class="badge badge-{{ $this->getValorBadgeClass($item->valor, $item->metrica) }}">
                                                {{ $item->valor_formatado }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($item->unidade)
                                                <span class="badge badge-secondary">{{ $item->unidade }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $status = $this->getMetricaStatus($item->valor, $item->metrica);
                                            @endphp
                                            <span class="badge badge-{{ $status['class'] }}">
                                                <i class="fas fa-{{ $status['icon'] }}"></i> {{ $status['text'] }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($index > 0)
                                                @php
                                                    $diferenca = $item->valor - $historico[$index - 1]->valor;
                                                    $percentual = $historico[$index - 1]->valor > 0 ? ($diferenca / $historico[$index - 1]->valor) * 100 : 0;
                                                @endphp
                                                @if($diferenca > 0)
                                                    <span class="text-success">
                                                        <i class="fas fa-arrow-up"></i> +{{ number_format($diferenca, 2) }}
                                                        ({{ number_format($percentual, 1) }}%)
                                                    </span>
                                                @elseif($diferenca < 0)
                                                    <span class="text-danger">
                                                        <i class="fas fa-arrow-down"></i> {{ number_format($diferenca, 2) }}
                                                        ({{ number_format($percentual, 1) }}%)
                                                    </span>
                                                @else
                                                    <span class="text-muted">
                                                        <i class="fas fa-minus"></i> 0
                                                    </span>
                                                @endif
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-4">
                                            <i class="fas fa-history fa-2x mb-2"></i><br>
                                            Nenhum histórico encontrado.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
<style>
    .badge-lg {
        font-size: 1.1em;
        padding: 0.5em 0.8em;
    }
    
    .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;
    }
    
    pre {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .alert {
        border-radius: 0.5rem;
    }
    
    .list-unstyled li {
        margin-bottom: 0.25rem;
    }
</style>
@stop

@section('js')
<script>
    // Auto-refresh a cada 30 segundos
    setInterval(function() {
        window.location.reload();
    }, 30000);
</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'];
        }
    }

    function getAnaliseMetrica($valor, $metrica) {
        switch ($metrica) {
            case 'tempo_resposta_medio':
                if ($valor > 5000) {
                    return [
                        'class' => 'danger',
                        'icon' => 'exclamation-triangle',
                        'titulo' => 'Performance Crítica',
                        'descricao' => 'O tempo de resposta está muito alto, impactando a experiência do usuário.',
                        'recomendacoes' => [
                            'Verificar otimizações de banco de dados',
                            'Implementar cache de consultas',
                            'Revisar queries lentas',
                            'Considerar escalonamento horizontal'
                        ]
                    ];
                } elseif ($valor > 2000) {
                    return [
                        'class' => 'warning',
                        'icon' => 'clock',
                        'titulo' => 'Performance Degradada',
                        'descricao' => 'O tempo de resposta está acima do ideal, mas ainda aceitável.',
                        'recomendacoes' => [
                            'Monitorar tendências',
                            'Otimizar consultas frequentes',
                            'Implementar cache'
                        ]
                    ];
                } else {
                    return [
                        'class' => 'success',
                        'icon' => 'check',
                        'titulo' => 'Performance Excelente',
                        'descricao' => 'O tempo de resposta está dentro dos parâmetros ideais.',
                        'recomendacoes' => []
                    ];
                }
            case 'uso_memoria':
                if ($valor > 1000) {
                    return [
                        'class' => 'danger',
                        'icon' => 'exclamation-triangle',
                        'titulo' => 'Uso de Memória Crítico',
                        'descricao' => 'O uso de memória está muito alto, podendo causar instabilidade.',
                        'recomendacoes' => [
                            'Verificar vazamentos de memória',
                            'Otimizar carregamento de dados',
                            'Implementar paginação',
                            'Considerar aumento de RAM'
                        ]
                    ];
                } elseif ($valor > 500) {
                    return [
                        'class' => 'warning',
                        'icon' => 'memory',
                        'titulo' => 'Uso de Memória Elevado',
                        'descricao' => 'O uso de memória está acima do ideal, mas ainda gerenciável.',
                        'recomendacoes' => [
                            'Monitorar tendências',
                            'Otimizar consultas',
                            'Implementar cache'
                        ]
                    ];
                } else {
                    return [
                        'class' => 'success',
                        'icon' => 'check',
                        'titulo' => 'Uso de Memória Ideal',
                        'descricao' => 'O uso de memória está dentro dos parâmetros ideais.',
                        'recomendacoes' => []
                    ];
                }
            case 'uso_cpu':
                if ($valor > 80) {
                    return [
                        'class' => 'danger',
                        'icon' => 'exclamation-triangle',
                        'titulo' => 'Uso de CPU Crítico',
                        'descricao' => 'O uso de CPU está muito alto, podendo impactar a performance.',
                        'recomendacoes' => [
                            'Verificar processos em execução',
                            'Otimizar algoritmos',
                            'Implementar processamento assíncrono',
                            'Considerar escalonamento'
                        ]
                    ];
                } elseif ($valor > 60) {
                    return [
                        'class' => 'warning',
                        'icon' => 'microchip',
                        'titulo' => 'Uso de CPU Elevado',
                        'descricao' => 'O uso de CPU está acima do ideal, mas ainda gerenciável.',
                        'recomendacoes' => [
                            'Monitorar processos',
                            'Otimizar consultas',
                            'Implementar cache'
                        ]
                    ];
                } else {
                    return [
                        'class' => 'success',
                        'icon' => 'check',
                        'titulo' => 'Uso de CPU Ideal',
                        'descricao' => 'O uso de CPU está dentro dos parâmetros ideais.',
                        'recomendacoes' => []
                    ];
                }
            case 'erros_por_hora':
                if ($valor > 10) {
                    return [
                        'class' => 'danger',
                        'icon' => 'exclamation-triangle',
                        'titulo' => 'Muitos Erros',
                        'descricao' => 'O número de erros está muito alto, indicando problemas no sistema.',
                        'recomendacoes' => [
                            'Investigar logs de erro',
                            'Verificar configurações',
                            'Implementar tratamento de exceções',
                            'Revisar código crítico'
                        ]
                    ];
                } elseif ($valor > 5) {
                    return [
                        'class' => 'warning',
                        'icon' => 'exclamation',
                        'titulo' => 'Alguns Erros',
                        'descricao' => 'Há alguns erros sendo reportados, mas ainda dentro do aceitável.',
                        'recomendacoes' => [
                            'Monitorar logs',
                            'Investigar causas',
                            'Implementar melhorias'
                        ]
                    ];
                } else {
                    return [
                        'class' => 'success',
                        'icon' => 'check',
                        'titulo' => 'Sistema Estável',
                        'descricao' => 'O número de erros está dentro dos parâmetros ideais.',
                        'recomendacoes' => []
                    ];
                }
            default:
                return [
                    'class' => 'info',
                    'icon' => 'info',
                    'titulo' => 'Métrica Normal',
                    'descricao' => 'A métrica está dentro dos parâmetros normais.',
                    'recomendacoes' => []
                ];
        }
    }

    // Obter métricas disponíveis
    $metricasDisponiveis = \App\Models\MetricaInstalacao::getMetricasDisponiveis();
@endphp