@extends('adminlte::page')

@section('title', 'Dashboard de Métricas')

@section('content_header')
@stop

@section('content')
@php
    $totalMetricas = $estatisticas['total_metricas'] ?? 0;
    $dataInicioFmt = \Carbon\Carbon::parse($filtros['data_inicio'])->format('d/m/Y');
    $dataFimFmt = \Carbon\Carbon::parse($filtros['data_fim'])->format('d/m/Y');
    $periodosRapidos = [
        ['label' => '7 dias', 'dias' => 7],
        ['label' => '14 dias', 'dias' => 14],
        ['label' => '30 dias', 'dias' => 30],
    ];
@endphp

<div class="dashboard-page dashboard-stagger">
    {{-- Hero --}}
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Monitoramento</p>
                <h1 class="dashboard-hero__title">
                    Dashboard de <em>métricas</em>
                </h1>
                <p class="dashboard-hero__subtitle">
                    @if($instalacaoSelecionada ?? null)
                        {{ $instalacaoSelecionada->nome }} · {{ $dataInicioFmt }} — {{ $dataFimFmt }}
                    @else
                        Todas as instalações · {{ $dataInicioFmt }} — {{ $dataFimFmt }}
                    @endif
                    · {{ number_format($totalMetricas, 0, ',', '.') }} pontos no período
                </p>
            </div>
            <div class="dashboard-hero__actions">
                <button type="button"
                        id="btn-coletar-metricas"
                        class="btn-dashboard-hero btn-dashboard-hero--primary"
                        onclick="coletarTodasMetricas(this)">
                    <i class="fas fa-sync-alt" aria-hidden="true"></i>
                    Coletar métricas
                </button>
                <a href="{{ route('metricas.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-list" aria-hidden="true"></i>
                    Lista detalhada
                </a>
            </div>
        </div>
    </section>

    {{-- KPIs --}}
    <div class="dashboard-kpi-grid">
        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--purple"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--purple">
                    <i class="fas fa-chart-line" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value" id="total-metricas">{{ number_format($totalMetricas, 0, ',', '.') }}</p>
            <p class="dashboard-kpi__label">Total de métricas</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--success"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--success">
                    <i class="fas fa-server" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value" id="instalacoes-metricas">{{ $estatisticas['instalacoes_com_metricas'] ?? 0 }}</p>
            <p class="dashboard-kpi__label">Instalações monitoradas</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--info"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--info">
                    <i class="fas fa-clock" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--time" id="ultima-coleta">
                @if(!empty($estatisticas['ultima_coleta']))
                    {{ \Carbon\Carbon::parse($estatisticas['ultima_coleta'])->diffForHumans() }}
                @else
                    —
                @endif
            </p>
            <p class="dashboard-kpi__label">Última coleta</p>
        </div>

        <div class="dashboard-kpi">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--{{ ($alertasCount ?? 0) > 0 ? 'danger' : 'neutral' }}"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--{{ ($alertasCount ?? 0) > 0 ? 'danger' : 'neutral' }}">
                    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value" id="alertas-count">{{ $alertasCount ?? 0 }}</p>
            <p class="dashboard-kpi__label">Alertas ativos (1h)</p>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="dashboard-panel mb-4">
        <div class="dashboard-panel__header">
            <h2 class="dashboard-panel__title">
                <i class="fas fa-filter" aria-hidden="true"></i>
                Período e instalação
            </h2>
        </div>
        <div class="dashboard-panel__body">
            <div class="metricas-period-pills">
                @foreach($periodosRapidos as $periodo)
                    @php
                        $inicioRapido = now()->subDays($periodo['dias'])->format('Y-m-d');
                        $fimRapido = now()->format('Y-m-d');
                        $isActive = ($filtros['data_inicio'] ?? '') === $inicioRapido
                            && ($filtros['data_fim'] ?? '') === $fimRapido
                            && empty($filtros['instalacao_id']);
                        $urlRapido = route('metricas.dashboard', [
                            'data_inicio' => $inicioRapido,
                            'data_fim' => $fimRapido,
                        ]);
                    @endphp
                    <a href="{{ $urlRapido }}"
                       class="metricas-period-pill {{ $isActive ? 'metricas-period-pill--active' : '' }}">
                        {{ $periodo['label'] }}
                    </a>
                @endforeach
            </div>

            @if($temFiltros ?? false)
                <div class="listagem-chips">
                    <span class="listagem-chip listagem-chip--muted">Filtros ativos:</span>
                    @if($instalacaoSelecionada ?? null)
                        <a href="{{ request()->fullUrlWithQuery(['instalacao_id' => null]) }}" class="listagem-chip">
                            Instalação: {{ $instalacaoSelecionada->nome }}
                            <i class="fas fa-times listagem-chip__remove" aria-hidden="true"></i>
                        </a>
                    @endif
                    @if(($filtros['data_inicio'] ?? '') !== now()->subDays(7)->format('Y-m-d') || ($filtros['data_fim'] ?? '') !== now()->format('Y-m-d'))
                        <span class="listagem-chip listagem-chip--muted">
                            Período: {{ $dataInicioFmt }} — {{ $dataFimFmt }}
                        </span>
                    @endif
                    <a href="{{ route('metricas.dashboard') }}" class="listagem-chip">
                        Limpar todos
                        <i class="fas fa-eraser listagem-chip__remove" aria-hidden="true"></i>
                    </a>
                </div>
            @endif

            <form method="GET" action="{{ route('metricas.dashboard') }}" id="metricas-filter-form">
                <div class="listagem-filters metricas-filters">
                    <div class="listagem-filters__field">
                        <label for="data_inicio">Data início</label>
                        <input type="date" class="form-control" id="data_inicio" name="data_inicio"
                               value="{{ $filtros['data_inicio'] }}">
                    </div>
                    <div class="listagem-filters__field">
                        <label for="data_fim">Data fim</label>
                        <input type="date" class="form-control" id="data_fim" name="data_fim"
                               value="{{ $filtros['data_fim'] }}">
                    </div>
                    <div class="listagem-filters__field">
                        <label for="instalacao_id">Instalação</label>
                        <select class="form-control" id="instalacao_id" name="instalacao_id">
                            <option value="">Todas as instalações</option>
                            @foreach($instalacoes as $instalacao)
                                <option value="{{ $instalacao->id }}"
                                    @selected(($filtros['instalacao_id'] ?? '') == $instalacao->id)>
                                    {{ $instalacao->nome }} ({{ $instalacao->slug }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="listagem-filters__actions">
                        <button type="submit" class="btn-listagem btn-listagem--primary">
                            <i class="fas fa-search" aria-hidden="true"></i>
                            Aplicar
                        </button>
                        <a href="{{ route('metricas.dashboard') }}" class="btn-listagem btn-listagem--ghost">
                            <i class="fas fa-undo" aria-hidden="true"></i>
                            Limpar
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Gráficos principais --}}
    <div class="row metricas-chart-grid mb-4">
        <div class="col-lg-6 mb-4 mb-lg-0">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-tachometer-alt" aria-hidden="true"></i>
                        Tempo de resposta médio
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart" id="wrap-tempoRespostaChart">
                    <canvas id="tempoRespostaChart" aria-label="Gráfico de tempo de resposta médio"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-memory" aria-hidden="true"></i>
                        Uso de memória
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart" id="wrap-usoMemoriaChart">
                    <canvas id="usoMemoriaChart" aria-label="Gráfico de uso de memória"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row metricas-chart-grid mb-4">
        <div class="col-lg-6 mb-4 mb-lg-0">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-microchip" aria-hidden="true"></i>
                        Uso de CPU
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart" id="wrap-usoCpuChart">
                    <canvas id="usoCpuChart" aria-label="Gráfico de uso de CPU"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                        Erros por hora
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart" id="wrap-errosChart">
                    <canvas id="errosChart" aria-label="Gráfico de erros por hora"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row metricas-chart-grid mb-4">
        <div class="col-md-4 mb-4 mb-md-0">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-users" aria-hidden="true"></i>
                        Usuários ativos
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart dashboard-panel__body--chart--sm" id="wrap-usuariosAtivosChart">
                    <canvas id="usuariosAtivosChart" aria-label="Gráfico de usuários ativos"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4 mb-md-0">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-exchange-alt" aria-hidden="true"></i>
                        Requisições / min
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart dashboard-panel__body--chart--sm" id="wrap-requisicoesChart">
                    <canvas id="requisicoesChart" aria-label="Gráfico de requisições por minuto"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-database" aria-hidden="true"></i>
                        Tamanho do banco
                    </h2>
                </div>
                <div class="dashboard-panel__body dashboard-panel__body--chart dashboard-panel__body--chart--sm" id="wrap-tamanhoBancoChart">
                    <canvas id="tamanhoBancoChart" aria-label="Gráfico de tamanho do banco"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- Rankings + alertas --}}
    <div class="row">
        <div class="col-lg-4 mb-4 mb-lg-0">
            <div class="dashboard-panel h-100">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-bell" aria-hidden="true"></i>
                        Alertas recentes
                    </h2>
                    @if(($alertasCount ?? 0) > 0)
                        <span class="dashboard-status dashboard-status--erro">{{ $alertasCount }}</span>
                    @endif
                </div>
                <div class="dashboard-panel__body">
                    @if(!empty($alertas))
                        <ul class="metricas-alert-list">
                            @foreach(array_slice($alertas, 0, 5) as $alerta)
                                <li class="metricas-alert-item">
                                    <span class="metricas-alert-item__icon metricas-alert-item__icon--{{ $alerta['tipo'] ?? 'warning' }}">
                                        <i class="fas fa-{{ ($alerta['tipo'] ?? '') === 'danger' ? 'times-circle' : 'exclamation-triangle' }}" aria-hidden="true"></i>
                                    </span>
                                    <div>
                                        <p class="metricas-alert-item__title">{{ $alerta['titulo'] ?? 'Alerta' }}</p>
                                        <p class="metricas-alert-item__msg">{{ $alerta['mensagem'] ?? '' }}</p>
                                        @if(!empty($alerta['timestamp']))
                                            <p class="metricas-alert-item__meta">
                                                {{ \Carbon\Carbon::parse($alerta['timestamp'])->diffForHumans() }}
                                            </p>
                                        @endif
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <div class="dashboard-empty dashboard-empty--compact">
                            <i class="fas fa-check-circle" aria-hidden="true"></i>
                            <p>Nenhum alerta crítico na última hora.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4 mb-4 mb-lg-0">
            <div class="dashboard-panel h-100">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-chart-pie" aria-hidden="true"></i>
                        Métricas mais coletadas
                    </h2>
                </div>
                <div class="dashboard-panel__body p-0">
                    @if(!empty($estatisticas['metricas_mais_coletadas']) && $totalMetricas > 0)
                        <div class="dashboard-table-wrap">
                            <table class="dashboard-table">
                                <thead>
                                    <tr>
                                        <th>Métrica</th>
                                        <th>Total</th>
                                        <th>Share</th>
                                    </tr>
                                </thead>
                                <tbody id="metricas-mais-coletadas">
                                    @foreach($estatisticas['metricas_mais_coletadas'] as $metrica)
                                        @php $pct = ($metrica->total / $totalMetricas) * 100; @endphp
                                        <tr>
                                            <td>{{ $metricasDisponiveis[$metrica->metrica] ?? $metrica->metrica }}</td>
                                            <td>{{ number_format($metrica->total, 0, ',', '.') }}</td>
                                            <td>
                                                <div class="metricas-rank-bar">
                                                    <div class="metricas-rank-bar__track">
                                                        <div class="metricas-rank-bar__fill" style="width: {{ min(100, $pct) }}%"></div>
                                                    </div>
                                                    <span class="metricas-rank-bar__pct">{{ number_format($pct, 1) }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="dashboard-panel__body">
                            <div class="dashboard-empty dashboard-empty--compact">
                                <i class="fas fa-chart-bar" aria-hidden="true"></i>
                                <p>Sem dados de ranking no período.</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="dashboard-panel h-100">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-server" aria-hidden="true"></i>
                        Instalações com mais métricas
                    </h2>
                </div>
                <div class="dashboard-panel__body p-0">
                    @if(!empty($estatisticas['instalacoes_com_mais_metricas']) && $totalMetricas > 0)
                        <div class="dashboard-table-wrap">
                            <table class="dashboard-table">
                                <thead>
                                    <tr>
                                        <th>Instalação</th>
                                        <th>Total</th>
                                        <th>Share</th>
                                    </tr>
                                </thead>
                                <tbody id="instalacoes-mais-metricas">
                                    @foreach($estatisticas['instalacoes_com_mais_metricas'] as $instalacao)
                                        @php $pct = ($instalacao->total / $totalMetricas) * 100; @endphp
                                        <tr>
                                            <td>{{ $instalacao->nome }}</td>
                                            <td>{{ number_format($instalacao->total, 0, ',', '.') }}</td>
                                            <td>
                                                <div class="metricas-rank-bar">
                                                    <div class="metricas-rank-bar__track">
                                                        <div class="metricas-rank-bar__fill" style="width: {{ min(100, $pct) }}%"></div>
                                                    </div>
                                                    <span class="metricas-rank-bar__pct">{{ number_format($pct, 1) }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="dashboard-panel__body">
                            <div class="dashboard-empty dashboard-empty--compact">
                                <i class="fas fa-server" aria-hidden="true"></i>
                                <p>Sem dados por instalação no período.</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/adminlte-inter.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-colors.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-listagem.css') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-metricas.css') }}">
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const dadosGraficos = @json($dadosGraficos);

    const brandColors = {
        purple: '#6C63FF',
        purpleLight: 'rgba(108, 99, 255, 0.15)',
        success: '#28a745',
        successLight: 'rgba(40, 167, 69, 0.15)',
        warning: '#FF6B35',
        warningLight: 'rgba(255, 107, 53, 0.15)',
        danger: '#dc3545',
        dangerLight: 'rgba(220, 53, 69, 0.15)',
        info: '#17a2b8',
        infoLight: 'rgba(23, 162, 184, 0.15)',
    };

    const lineChartDefaults = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
        },
        scales: {
            x: {
                grid: { display: false },
                ticks: { maxTicksLimit: 8, font: { size: 11 } },
            },
            y: {
                beginAtZero: true,
                grid: { color: 'rgba(108, 99, 255, 0.06)' },
                ticks: { font: { size: 11 } },
            },
        },
    };

    function showChartEmpty(wrapId, message) {
        const wrap = document.getElementById(wrapId);
        if (!wrap) return;
        wrap.innerHTML = '<div class="metricas-chart-empty"><i class="fas fa-chart-line" aria-hidden="true"></i><p>' + message + '</p></div>';
    }

    function createLineChart(canvasId, wrapId, key, label, borderColor, backgroundColor) {
        const canvas = document.getElementById(canvasId);
        const serie = dadosGraficos[key];
        if (!canvas || !serie || !serie.dados || serie.dados.length === 0) {
            showChartEmpty(wrapId, 'Sem dados no período selecionado');
            return null;
        }

        return new Chart(canvas, {
            type: 'line',
            data: {
                labels: serie.dados.map(function (d) { return d.x; }),
                datasets: [{
                    label: label,
                    data: serie.dados.map(function (d) { return d.y; }),
                    borderColor: borderColor,
                    backgroundColor: backgroundColor,
                    tension: 0.35,
                    fill: true,
                    pointRadius: 2,
                    pointHoverRadius: 5,
                    borderWidth: 2,
                }],
            },
            options: lineChartDefaults,
        });
    }

    function createBarChart(canvasId, wrapId, key, label) {
        const canvas = document.getElementById(canvasId);
        const serie = dadosGraficos[key];
        if (!canvas || !serie || !serie.dados || serie.dados.length === 0) {
            showChartEmpty(wrapId, 'Sem dados no período selecionado');
            return null;
        }

        return new Chart(canvas, {
            type: 'bar',
            data: {
                labels: serie.dados.map(function (d) { return d.x; }),
                datasets: [{
                    label: label,
                    data: serie.dados.map(function (d) { return d.y; }),
                    backgroundColor: brandColors.dangerLight,
                    borderColor: brandColors.danger,
                    borderWidth: 1,
                    borderRadius: 6,
                }],
            },
            options: lineChartDefaults,
        });
    }

    document.addEventListener('DOMContentLoaded', function () {
        createLineChart('tempoRespostaChart', 'wrap-tempoRespostaChart', 'tempo_resposta_medio', 'Tempo (ms)', brandColors.danger, brandColors.dangerLight);
        createLineChart('usoMemoriaChart', 'wrap-usoMemoriaChart', 'uso_memoria', 'Memória (MB)', brandColors.info, brandColors.infoLight);
        createLineChart('usoCpuChart', 'wrap-usoCpuChart', 'uso_cpu', 'CPU (%)', brandColors.warning, brandColors.warningLight);
        createBarChart('errosChart', 'wrap-errosChart', 'erros_por_hora', 'Erros/hora');
        createLineChart('usuariosAtivosChart', 'wrap-usuariosAtivosChart', 'usuarios_ativos', 'Usuários', brandColors.purple, brandColors.purpleLight);
        createLineChart('requisicoesChart', 'wrap-requisicoesChart', 'requisicoes_por_minuto', 'Req/min', brandColors.purple, brandColors.purpleLight);
        createLineChart('tamanhoBancoChart', 'wrap-tamanhoBancoChart', 'tamanho_banco', 'Banco (MB)', brandColors.success, brandColors.successLight);
    });

    function coletarTodasMetricas(button) {
        if (!confirm('Deseja coletar métricas de todas as instalações ativas? Isso pode levar alguns minutos.')) {
            return;
        }

        const originalHtml = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Coletando…';
        button.disabled = true;

        fetch('{{ route("metricas.coletar-todas") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
        })
            .then(function (response) { return response.json(); })
            .then(function (data) {
                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert('Erro: ' + (data.message || 'Falha na coleta'));
                }
            })
            .catch(function (error) {
                alert('Erro ao coletar métricas: ' + error.message);
            })
            .finally(function () {
                button.innerHTML = originalHtml;
                button.disabled = false;
            });
    }
</script>
@stop