@extends('v2-cms::layouts.app', ['title' => 'Dashboard V2'])

@section('content')
    {{-- ============================================================ --}}
    {{-- Welcome Bar                                                 --}}
    {{-- ============================================================ --}}
    <div class="d-flex flex-wrap align-items-center gap-3 mb-3 p-3 bg-white rounded-3 shadow-sm">
        <div class="d-flex align-items-center gap-2">
            <span class="avatar-placeholder d-inline-flex align-items-center justify-content-center bg-primary text-white rounded-circle"
                  style="width: 42px; height: 42px; font-weight: 600;"
                  aria-hidden="true">{{ substr($userWelcome['name'], 0, 1) }}</span>
            <div>
                <h5 class="mb-0 fw-semibold">👋 Olá, {{ $userWelcome['name'] ?: 'Visitante' }}!</h5>
                <small class="text-muted">
                    <i class="bi bi-clock-history me-1"></i>Último acesso: {{ $userWelcome['lastLogin'] }}
                </small>
            </div>
        </div>
        <div class="ms-auto d-flex align-items-center gap-2">
            <span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-3 py-2 rounded-pill">
                <i class="bi bi-person-badge me-1"></i>{{ $userWelcome['roles'] }}
            </span>
            <span class="text-muted small">{{ $userWelcome['email'] }}</span>
        </div>
    </div>

    {{-- Quick Actions — logo abaixo do welcome --}}
    @if(!empty($quickActions))
        <div class="d-flex flex-wrap gap-2 mb-4 ps-1">
            @foreach($quickActions as $action)
                <a href="{{ $action['url'] }}"
                   class="btn btn-outline-{{ $action['color'] }} btn-sm d-inline-flex align-items-center gap-2 shadow-sm">
                    <i class="bi {{ $action['icon'] }}"></i>
                    {{ $action['label'] }}
                </a>
            @endforeach
        </div>
    @endif

    <div class="row g-4">
        {{-- ============================================================ --}}
        {{-- LEFT COLUMN: Content Stats + Treemap                        --}}
        {{-- ============================================================ --}}
        <div class="col-lg-8 d-flex flex-column gap-4">

            {{-- Content Stats Grid — cartões brancos, sombra suave --}}
            @if(!empty($contentStats))
                <div class="row g-3">
                    @foreach($contentStats as $stat)
                        <div class="col-6 col-md-4 col-xl-3">
                            <div class="card border-0 shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <i class="bi {{ $stat['icon'] }} fs-2 text-{{ $stat['color'] }}"></i>
                                    <h3 class="mt-2 mb-0 fw-bold">{{ $stat['count'] }}</h3>
                                    <small class="text-muted d-block">{{ $stat['label'] }}</small>
                                    @if(isset($stat['sublabel']))
                                        <small class="text-muted opacity-50 d-block mt-1">
                                            {{ $stat['sublabel'] }}
                                        </small>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- Treemap Hierárquico — Acessos por Página (ECharts) --}}
            @if(is_array($treemapData) && !empty($treemapData['children']))
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h6 class="card-title mb-3 fw-semibold d-flex flex-wrap align-items-center justify-content-between gap-2">
                            <span>
                                <i class="bi bi-bar-chart-fill me-2"></i>Acessos por Página
                                <span class="badge bg-secondary-subtle text-secondary fw-normal ms-1 small">{{ count($treemapData['children']) }} módulos</span>
                            </span>
                            <small class="text-muted fw-normal">
                                <i class="bi bi-info-circle me-1"></i>Passe o mouse para detalhes
                            </small>
                        </h6>
                        <div id="treemap-chart" class="rounded-3 border bg-white position-relative"
                             style="width:100%;height:420px;min-height:320px;"
                             role="img"
                             aria-label="Gráfico de árvore hierárquico dos acessos por página, agrupados por módulo ou categoria. O tamanho de cada bloco representa o volume de visitas.">
                            {{-- Loading state while ECharts initializes --}}
                            <div class="treemap-loading d-flex align-items-center justify-content-center h-100 text-muted">
                                <div class="text-center">
                                    <div class="spinner-border spinner-border-sm mb-2" role="status">
                                        <span class="visually-hidden">Carregando gráfico…</span>
                                    </div>
                                    <div class="small">Renderizando treemap…</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @push('scripts')
                <script src="{{ asset('assets/vendor/echarts/echarts.min.js') }}"></script>
                <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var container = document.getElementById('treemap-chart');
                    if (!container) return;

                    // Remove loading state
                    var loadingEl = container.querySelector('.treemap-loading');
                    if (loadingEl) loadingEl.style.display = 'none';

                    var chart = echarts.init(container, null, {
                        renderer: 'canvas'
                    });

                    var treemapData = @json($treemapData);

                    var option = {
                        aria: {
                            show: true,
                            label: {
                                description: 'Treemap hierárquico de acessos por página no portal. '
                                    + 'O tamanho de cada bloco representa o volume de visitas. '
                                    + 'Cada cor representa um módulo ou categoria do portal.'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var data = params.data || {};
                                var html = '<strong>' + data.name + '</strong>';
                                if (data.path) {
                                    html += '<br><span class="text-muted">URL:</span> <code class="small">/'
                                        + data.path + '</code>';
                                }
                                html += '<br><span class="fw-semibold">Visitas:</span> '
                                    + (data.value || 0).toLocaleString('pt-BR');
                                if (data.pct) {
                                    html += '<br><span class="fw-semibold">% Total:</span> ' + data.pct + '%';
                                }
                                return html;
                            },
                            backgroundColor: 'rgba(255,255,255,0.96)',
                            borderColor: '#dee2e6',
                            borderWidth: 1,
                            textStyle: { color: '#212529', fontSize: 13 },
                            padding: [10, 14]
                        },
                        series: [{
                            type: 'treemap',
                            data: treemapData.children || [],
                            width: '100%',
                            height: '100%',
                            top: 0,
                            left: 0,
                            roam: false,
                            nodeClick: false,
                            breadcrumb: { show: false },
                            label: {
                                show: true,
                                position: 'inside',
                                formatter: function (params) {
                                    var name = params.name || '';
                                    return name.length > 22 ? name.substring(0, 20) + '…' : name;
                                },
                                fontSize: 11,
                                color: '#fff',
                                textShadowColor: 'rgba(0,0,0,0.45)',
                                textShadowBlur: 3,
                                ellipsis: true
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                borderRadius: 3
                            },
                            levels: [
                                {
                                    itemStyle: {
                                        borderColor: '#fff',
                                        borderWidth: 3,
                                        gapWidth: 3
                                    }
                                },
                                {
                                    itemStyle: {
                                        borderColor: 'rgba(255,255,255,0.6)',
                                        borderWidth: 1,
                                        gapWidth: 1
                                    }
                                }
                            ],
                            animationDuration: 500,
                            animationEasing: 'cubicOut'
                        }],
                        color: [
                            '#4361ee','#3a86ff','#4cc9f0','#7209b7','#f72585',
                            '#e63946','#f4a261','#2a9d8f','#264653','#6d597a',
                            '#b56576','#e56b6f','#355070','#6d6875','#ffb703'
                        ]
                    };

                    chart.setOption(option);

                    // Responsive: redimensiona ao alterar o tamanho da janela
                    var resizeTimer;
                    var resizeHandler = function () {
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(function () { chart.resize(); }, 150);
                    };
                    window.addEventListener('resize', resizeHandler);

                    // Observa mudanças de tamanho no container (ex.: toggle da sidebar)
                    if (window.ResizeObserver) {
                        var ro = new ResizeObserver(function () { chart.resize(); });
                        ro.observe(container);
                    }

                    // Expõe a instância para debug
                    container._echartInstance = chart;

                    // Cleanup: se o container for removido do DOM (Turbolinks etc.)
                    var observer = new MutationObserver(function () {
                        if (!document.contains(container)) {
                            chart.dispose();
                            observer.disconnect();
                            window.removeEventListener('resize', resizeHandler);
                        }
                    });
                    observer.observe(document.body, { childList: true, subtree: true });
                });
                </script>
                @endpush
            @else
                <div class="card border-0 shadow-sm">
                    <div class="card-body text-center py-4">
                        <i class="bi bi-bar-chart d-block mb-2 fs-2 text-muted"></i>
                        <p class="text-muted mb-0">Nenhum acesso registrado ainda.</p>
                        <small class="text-muted opacity-75">
                            Os dados de acesso aparecerão aqui conforme visitantes navegarem pelo portal.
                        </small>
                    </div>
                </div>
            @endif
        </div>

        {{-- ============================================================ --}}
        {{-- RIGHT COLUMN: SEO Ranking                                    --}}
        {{-- ============================================================ --}}
        <div class="col-lg-4 d-flex flex-column gap-4">

            {{-- SEO Ranking --}}
            @component('v2-cms::components.box', ['title' => 'Páginas Mais Acessadas (SEO)'])
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle mb-0" aria-label="Atividade recente">
                        <thead>
                            <tr>
                                <th scope="col">URL</th>
                                <th scope="col" class="text-center" style="width: 20%;">Visitas</th>
                                <th scope="col" class="text-center" style="width: 20%;">Bots</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($seoRanking as $rank)
                                <tr>
                                    <td class="small">
                                        <span class="d-inline-block text-truncate" style="max-width: 140px;" title="/{{ $rank->url_path }}">/{{ $rank->url_path }}</span>
                                        @if(isset($rank->module))
                                            <span class="badge bg-secondary-subtle text-secondary border ms-1 small">{{ $rank->module }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center"><span class="badge bg-primary">{{ $rank->total_visits }}</span></td>
                                    <td class="text-center"><span class="badge bg-dark">{{ $rank->bot_visits ?? 0 }}</span></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-3">
                                        <i class="bi bi-bar-chart d-block mb-1 fs-5"></i>
                                        Nenhum acesso registrado.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @endcomponent
        </div>
    </div>
@endsection