@extends('adminlte::page')

@section('title', 'Log #'.$log->id)

@section('content_header')
@stop

@section('content')
@php
    $tipoClass = in_array($log->tipo, ['info', 'warning', 'error', 'debug', 'critical'], true)
        ? $log->tipo
        : 'default';
    $logsRelacionados = \App\Models\LogInstalacao::where('instalacao_id', $log->instalacao_id)
        ->where('id', '!=', $log->id)
        ->orderBy('created_at', 'desc')
        ->limit(10)
        ->get();
@endphp

<div class="dashboard-page dashboard-stagger">
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Log #{{ $log->id }} · {{ $log->instalacao->nome ?? 'N/A' }}</p>
                <h1 class="dashboard-hero__title">
                    Detalhe do <em>evento</em>
                </h1>
                <p class="dashboard-hero__subtitle">
                    {{ $log->created_at->format('d/m/Y H:i:s') }}
                    · {{ $log->created_at->diffForHumans() }}
                </p>
            </div>
            <div class="dashboard-hero__actions">
                <span class="logs-level-badge logs-level-badge--{{ $tipoClass }} logs-level-badge--hero">
                    <i class="fas fa-{{ $log->tipo_icon }}" aria-hidden="true"></i>
                    {{ strtoupper($log->tipo) }}
                </span>
                <a href="{{ route('logs.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                    Voltar à lista
                </a>
            </div>
        </div>
    </section>

    <div class="row">
        <div class="col-lg-8">
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-comment" aria-hidden="true"></i>
                        Mensagem
                    </h2>
                </div>
                <div class="dashboard-panel__body">
                    <div class="logs-detail-message logs-detail-message--{{ $tipoClass }}">
                        {{ $log->mensagem_viewer }}
                    </div>
                </div>
            </div>

            @if($log->contexto)
                <div class="dashboard-panel mb-4">
                    <div class="dashboard-panel__header">
                        <h2 class="dashboard-panel__title">
                            <i class="fas fa-code" aria-hidden="true"></i>
                            Contexto técnico
                        </h2>
                    </div>
                    <div class="dashboard-panel__body p-0">
                        <pre class="logs-detail-pre">{{ $log->contexto_viewer }}</pre>
                    </div>
                </div>
            @endif

            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-tools" aria-hidden="true"></i>
                        Ferramentas de diagnóstico
                    </h2>
                </div>
                <div class="dashboard-panel__body">
                    <div class="logs-actions-grid mb-3">
                        <button type="button" class="btn-listagem btn-listagem--ghost" onclick="copiarParaClipboard(@js($log->mensagem_viewer))">
                            <i class="fas fa-copy" aria-hidden="true"></i>
                            Copiar mensagem
                        </button>
                        @if($log->contexto)
                            <button type="button" class="btn-listagem btn-listagem--ghost" onclick="copiarParaClipboard(@js($log->contexto_viewer))">
                                <i class="fas fa-copy" aria-hidden="true"></i>
                                Copiar contexto
                            </button>
                        @endif
                        @if($log->ip)
                            <button type="button" class="btn-listagem btn-listagem--ghost" onclick="copiarParaClipboard(@js($log->ip))">
                                <i class="fas fa-copy" aria-hidden="true"></i>
                                Copiar IP
                            </button>
                        @endif
                        <button type="button" class="btn-listagem btn-listagem--primary" onclick="analisarComIA()" id="btn-analisar-ia">
                            <i class="fas fa-robot" aria-hidden="true"></i>
                            Analisar com IA
                        </button>
                    </div>

                    <div class="dashboard-panel" id="card-analise-ia" style="display: none;">
                        <div class="dashboard-panel__header">
                            <h2 class="dashboard-panel__title">
                                <i class="fas fa-brain" aria-hidden="true"></i>
                                Análise com IA
                            </h2>
                        </div>
                        <div class="dashboard-panel__body">
                            <div id="loading-analise" class="text-center py-3" style="display: none;">
                                <i class="fas fa-spinner fa-spin fa-2x text-muted" aria-hidden="true"></i>
                                <p class="mt-2 mb-0 text-muted">Analisando log…</p>
                            </div>
                            <div id="resultado-analise" style="display: none;">
                                <div id="conteudo-analise" class="logs-detail-pre" style="max-height: none;"></div>
                                <div class="mt-3 d-flex gap-2 flex-wrap">
                                    <button type="button" class="btn-listagem btn-listagem--primary" onclick="copiarAnalise()">
                                        <i class="fas fa-copy" aria-hidden="true"></i>
                                        Copiar análise
                                    </button>
                                    <button type="button" class="btn-listagem btn-listagem--ghost" onclick="fecharAnalise()">
                                        <i class="fas fa-times" aria-hidden="true"></i>
                                        Fechar
                                    </button>
                                </div>
                            </div>
                            <div id="erro-analise" class="dashboard-empty dashboard-empty--compact" style="display: none;">
                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                                <p id="mensagem-erro" class="mb-0"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-info-circle" aria-hidden="true"></i>
                        Metadados
                    </h2>
                </div>
                <div class="dashboard-panel__body">
                    <ul class="dashboard-activity-list">
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-server" aria-hidden="true"></i>
                                Instalação
                            </span>
                            <span class="dashboard-activity-item__value">{{ $log->instalacao->nome ?? 'N/A' }}</span>
                        </li>
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-calendar" aria-hidden="true"></i>
                                Data/hora
                            </span>
                            <span class="dashboard-activity-item__value">{{ $log->created_at->format('d/m/Y H:i') }}</span>
                        </li>
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-hashtag" aria-hidden="true"></i>
                                ID
                            </span>
                            <span class="dashboard-activity-item__value">#{{ $log->id }}</span>
                        </li>
                        @if($log->canal)
                            <li class="dashboard-activity-item">
                                <span class="dashboard-activity-item__label">
                                    <i class="fas fa-stream" aria-hidden="true"></i>
                                    Canal
                                </span>
                                <span class="dashboard-activity-item__value">{{ $log->canal }}</span>
                            </li>
                        @endif
                        @if($log->ip)
                            <li class="dashboard-activity-item">
                                <span class="dashboard-activity-item__label">
                                    <i class="fas fa-network-wired" aria-hidden="true"></i>
                                    IP
                                </span>
                                <span class="dashboard-activity-item__value">{{ $log->ip }}</span>
                            </li>
                        @endif
                    </ul>
                    @if($log->user_agent)
                        <p class="small text-muted mt-3 mb-0">
                            <strong>User agent:</strong><br>
                            {{ Str::limit($log->user_agent, 200) }}
                        </p>
                    @endif
                </div>
            </div>

            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-link" aria-hidden="true"></i>
                        Logs relacionados
                    </h2>
                </div>
                <div class="dashboard-panel__body p-0">
                    @if($logsRelacionados->isNotEmpty())
                        <div class="dashboard-table-wrap">
                            <table class="dashboard-table">
                                <thead>
                                    <tr>
                                        <th>Nível</th>
                                        <th>Mensagem</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($logsRelacionados as $logRelacionado)
                                        @php
                                            $relClass = in_array($logRelacionado->tipo, ['info', 'warning', 'error', 'debug', 'critical'], true)
                                                ? $logRelacionado->tipo
                                                : 'default';
                                        @endphp
                                        <tr>
                                            <td>
                                                <span class="logs-level-badge logs-level-badge--{{ $relClass }}">
                                                    {{ strtoupper($logRelacionado->tipo) }}
                                                </span>
                                            </td>
                                            <td class="logs-message-cell">{{ Str::limit($logRelacionado->mensagem_viewer, 60) }}</td>
                                            <td>
                                                <a href="{{ route('logs.show', $logRelacionado) }}"
                                                   class="listagem-row-actions__btn listagem-row-actions__btn--view"
                                                   title="Ver"
                                                   aria-label="Ver log relacionado">
                                                    <i class="fas fa-eye" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="dashboard-panel__body">
                            <div class="dashboard-empty dashboard-empty--compact">
                                <i class="fas fa-inbox" aria-hidden="true"></i>
                                <p>Nenhum log relacionado nesta instalação.</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') }}">
    <link rel="stylesheet" href="{{ asset('css/waygest-logs.css') }}">
    <style>
        .logs-level-badge--hero {
            font-size: 0.8rem;
            padding: 0.45rem 0.85rem;
        }
    </style>
@stop

@section('js')
<script>
function copiarParaClipboard(texto) {
    const msg = 'Texto copiado para a área de transferência.';
    if (navigator.clipboard) {
        navigator.clipboard.writeText(texto).then(function () {
            if (typeof toastr !== 'undefined') toastr.success(msg);
            else alert(msg);
        });
    } else {
        const textArea = document.createElement('textarea');
        textArea.value = texto;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        if (typeof toastr !== 'undefined') toastr.success(msg);
        else alert(msg);
    }
}

function analisarComIA() {
    const cardAnalise = document.getElementById('card-analise-ia');
    const loading = document.getElementById('loading-analise');
    const resultado = document.getElementById('resultado-analise');
    const erro = document.getElementById('erro-analise');
    const btnAnalisar = document.getElementById('btn-analisar-ia');

    cardAnalise.style.display = 'block';
    loading.style.display = 'block';
    resultado.style.display = 'none';
    erro.style.display = 'none';
    btnAnalisar.disabled = true;
    btnAnalisar.innerHTML = '<i class="fas fa-spinner fa-spin" aria-hidden="true"></i> Analisando…';

    fetch('{{ route("logs.analisar", $log) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
    })
        .then(function (response) { return response.json(); })
        .then(function (data) {
            loading.style.display = 'none';

            if (data.success) {
                document.getElementById('conteudo-analise').innerHTML = formatarAnalise(data.analysis);
                resultado.style.display = 'block';

                if (!data.api_configured) {
                    const aviso = document.createElement('p');
                    aviso.className = 'text-muted small mt-2 mb-0';
                    aviso.innerHTML = '<i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Análise básica. Configure <code>GOOGLE_GEMINI_API_KEY</code> para IA completa.';
                    document.getElementById('conteudo-analise').appendChild(aviso);
                }
            } else {
                document.getElementById('mensagem-erro').textContent = data.error || 'Erro desconhecido na análise';
                erro.style.display = 'flex';
            }
        })
        .catch(function (error) {
            loading.style.display = 'none';
            document.getElementById('mensagem-erro').textContent = 'Erro de conexão: ' + error.message;
            erro.style.display = 'flex';
        })
        .finally(function () {
            btnAnalisar.disabled = false;
            btnAnalisar.innerHTML = '<i class="fas fa-robot" aria-hidden="true"></i> Analisar com IA';
        });
}

function formatarAnalise(analise) {
    return analise
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/\n\n/g, '</p><p>')
        .replace(/\n/g, '<br>')
        .replace(/^/, '<p>')
        .replace(/$/, '</p>');
}

function copiarAnalise() {
    copiarParaClipboard(document.getElementById('conteudo-analise').textContent);
}

function fecharAnalise() {
    document.getElementById('card-analise-ia').style.display = 'none';
}
</script>
@stop