@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
@stop

@section('content')
@php
    $userName = auth()->user()->name ?? 'Operador';
    $firstName = explode(' ', trim($userName))[0];
    $statusLabels = [
        'ativa' => 'Ativa',
        'inativa' => 'Inativa',
        'manutencao' => 'Manutenção',
        'erro' => 'Erro',
    ];
@endphp

<div class="dashboard-page dashboard-stagger">
    {{-- Hero --}}
    <section class="dashboard-hero">
        <div class="dashboard-hero__inner">
            <div>
                <p class="dashboard-hero__eyebrow">Central de operações</p>
                <h1 class="dashboard-hero__title">
                    Olá, {{ $firstName }} — visão geral do <em>ecossistema</em>
                </h1>
                <p class="dashboard-hero__subtitle">
                    Acompanhe instalações, saúde operacional e métricas em tempo real. Provisione novos ambientes e responda a incidentes com agilidade.
                </p>
                <p class="dashboard-hero__meta">
                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                    {{ now()->translatedFormat('l, d \d\e F \d\e Y') }}
                </p>
            </div>
            <div class="dashboard-hero__actions">
                <a href="{{ route('instalacoes.web.create') }}" class="btn-dashboard-hero btn-dashboard-hero--primary">
                    <i class="fas fa-plus" aria-hidden="true"></i>
                    Nova instalação
                </a>
                <a href="{{ route('instalacoes.web.index') }}" class="btn-dashboard-hero btn-dashboard-hero--ghost">
                    <i class="fas fa-server" aria-hidden="true"></i>
                    Gerenciar instalações
                </a>
            </div>
        </div>
    </section>

    @if(($instalacoes_erro ?? 0) > 0 || ($alertas_count ?? 0) > 0)
        <a href="{{ route('logs.index') }}" class="dashboard-alert-banner dashboard-alert-banner--warning text-decoration-none" role="status">
            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
            <span>
                <strong>Atenção:</strong>
                @if(($instalacoes_erro ?? 0) > 0)
                    {{ $instalacoes_erro }} instalação(ões) com erro
                @endif
                @if(($instalacoes_erro ?? 0) > 0 && ($alertas_count ?? 0) > 0)
                    ·
                @endif
                @if(($alertas_count ?? 0) > 0)
                    {{ $alertas_count }} alerta(s) crítico(s) nas últimas 24h
                @endif
                <i class="fas fa-arrow-right ml-2" aria-hidden="true"></i>
            </span>
        </a>
    @endif

    {{-- KPIs principais --}}
    <div class="dashboard-kpi-grid">
        <a href="{{ route('instalacoes.web.index') }}" class="dashboard-kpi dashboard-kpi--link">
            <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-server" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value">{{ $instalacoes_count ?? 0 }}</p>
            <p class="dashboard-kpi__label">Total de instalações</p>
            <div class="dashboard-kpi__footer">
                Ver todas <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
        </a>

        <a href="{{ route('instalacoes.web.index', ['status' => 'ativa']) }}" class="dashboard-kpi dashboard-kpi--link">
            <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-check-circle" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value">{{ $instalacoes_ativas ?? 0 }}</p>
            <p class="dashboard-kpi__label">Instalações ativas</p>
            <div class="dashboard-kpi__footer">
                Ver ativas <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
        </a>

        <a href="{{ route('instalacoes.web.index', ['status' => 'manutencao']) }}" class="dashboard-kpi dashboard-kpi--link">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--warning"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--warning">
                    <i class="fas fa-tools" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value">{{ $instalacoes_manutencao ?? 0 }}</p>
            <p class="dashboard-kpi__label">Em manutenção</p>
            <div class="dashboard-kpi__footer">
                Ver em manutenção <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
        </a>

        <a href="{{ route('instalacoes.web.index', ['status' => 'erro']) }}" class="dashboard-kpi dashboard-kpi--link">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--danger"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--danger">
                    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value">{{ $instalacoes_erro ?? 0 }}</p>
            <p class="dashboard-kpi__label">Com erro</p>
            <div class="dashboard-kpi__footer">
                Ver com erro <i class="fas fa-arrow-right" aria-hidden="true"></i>
            </div>
        </a>
    </div>

    {{-- KPIs secundários --}}
    <div class="dashboard-kpi-grid dashboard-kpi-grid--secondary">
        <div class="dashboard-kpi dashboard-kpi--compact">
            <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-calendar-day" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--sm">{{ $total_instalacoes_hoje ?? 0 }}</p>
            <p class="dashboard-kpi__label">Novas hoje</p>
        </div>

        <div class="dashboard-kpi dashboard-kpi--compact">
            <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-calendar-week" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--sm">{{ $total_instalacoes_semana ?? 0 }}</p>
            <p class="dashboard-kpi__label">Esta semana</p>
        </div>

        <div class="dashboard-kpi dashboard-kpi--compact">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--neutral"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--neutral">
                    <i class="fas fa-calendar-alt" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--sm">{{ $total_instalacoes_mes ?? 0 }}</p>
            <p class="dashboard-kpi__label">Este mês</p>
        </div>

        <div class="dashboard-kpi dashboard-kpi--compact">
            <div class="dashboard-kpi__accent dashboard-kpi__accent--neutral"></div>
            <div class="dashboard-kpi__head">
                <div class="dashboard-kpi__icon dashboard-kpi__icon--neutral">
                    <i class="fas fa-code-branch" aria-hidden="true"></i>
                </div>
            </div>
            <p class="dashboard-kpi__value dashboard-kpi__value--sm">{{ $versao_mais_usada ?? 'N/A' }}</p>
            <p class="dashboard-kpi__label">Versão mais usada</p>
        </div>
    </div>

    <div class="row">
        {{-- Gráficos --}}
        <div class="col-lg-8 mb-4">
            <div class="row">
                <div class="col-md-6 mb-4 mb-md-0">
                    <div class="dashboard-panel">
                        <div class="dashboard-panel__header">
                            <h2 class="dashboard-panel__title">
                                <i class="fas fa-chart-pie" aria-hidden="true"></i>
                                Distribuição por status
                            </h2>
                        </div>
                        <div class="dashboard-panel__body dashboard-panel__body--chart">
                            <canvas id="statusChart" aria-label="Gráfico de distribuição por status"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="dashboard-panel">
                        <div class="dashboard-panel__header">
                            <h2 class="dashboard-panel__title">
                                <i class="fas fa-chart-line" aria-hidden="true"></i>
                                Instalações por mês
                            </h2>
                        </div>
                        <div class="dashboard-panel__body dashboard-panel__body--chart">
                            <canvas id="monthlyChart" aria-label="Gráfico de instalações por mês"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sidebar: atividade + ações --}}
        <div class="col-lg-4 mb-4">
            <div class="dashboard-panel mb-4">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-heartbeat" aria-hidden="true"></i>
                        Saúde operacional
                    </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-file-alt" aria-hidden="true"></i>
                                Logs hoje
                            </span>
                            <span class="dashboard-activity-item__value">{{ $logs_count ?? 0 }}</span>
                        </li>
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-chart-line" aria-hidden="true"></i>
                                Métricas (24h)
                            </span>
                            <span class="dashboard-activity-item__value">{{ $metricas_count ?? 0 }}</span>
                        </li>
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-bell" aria-hidden="true"></i>
                                Alertas críticos
                            </span>
                            <span class="dashboard-activity-item__value">{{ $alertas_count ?? 0 }}</span>
                        </li>
                        <li class="dashboard-activity-item">
                            <span class="dashboard-activity-item__label">
                                <i class="fas fa-pause-circle" aria-hidden="true"></i>
                                Instalações inativas
                            </span>
                            <span class="dashboard-activity-item__value">{{ $instalacoes_inativas ?? 0 }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <h2 class="dashboard-panel__title">
                        <i class="fas fa-bolt" aria-hidden="true"></i>
                        Ações rápidas
                    </h2>
                </div>
                <div class="dashboard-panel__body">
                    <div class="dashboard-actions-grid">
                        <a href="{{ route('instalacoes.web.create') }}" class="dashboard-action">
                            <span class="dashboard-action__icon dashboard-action__icon--primary">
                                <i class="fas fa-plus" aria-hidden="true"></i>
                            </span>
                            <span class="dashboard-action__text">
                                <strong>Nova instalação</strong>
                                <span>Provisionar ambiente</span>
                            </span>
                        </a>
                        <a href="{{ route('instalacoes.web.index') }}" class="dashboard-action">
                            <span class="dashboard-action__icon dashboard-action__icon--neutral">
                                <i class="fas fa-list" aria-hidden="true"></i>
                            </span>
                            <span class="dashboard-action__text">
                                <strong>Gerenciar</strong>
                                <span>Lista completa</span>
                            </span>
                        </a>
                        <a href="{{ route('logs.index') }}" class="dashboard-action">
                            <span class="dashboard-action__icon dashboard-action__icon--orange">
                                <i class="fas fa-file-alt" aria-hidden="true"></i>
                            </span>
                            <span class="dashboard-action__text">
                                <strong>Ver logs</strong>
                                <span>Diagnóstico</span>
                            </span>
                        </a>
                        <a href="{{ route('metricas.dashboard') }}" class="dashboard-action">
                            <span class="dashboard-action__icon dashboard-action__icon--orange">
                                <i class="fas fa-chart-bar" aria-hidden="true"></i>
                            </span>
                            <span class="dashboard-action__text">
                                <strong>Métricas</strong>
                                <span>Dashboard avançado</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Instalações recentes --}}
    <div class="dashboard-panel">
        <div class="dashboard-panel__header">
            <h2 class="dashboard-panel__title">
                <i class="fas fa-clock" aria-hidden="true"></i>
                Instalações recentes
            </h2>
            <a href="{{ route('instalacoes.web.index') }}" class="btn btn-sm btn-primary">
                Ver todas
            </a>
        </div>
        <div class="dashboard-panel__body p-0">
            @if(($instalacoes_recentes ?? collect())->isNotEmpty())
                <div class="dashboard-table-wrap">
                    <table class="dashboard-table">
                        <thead>
                            <tr>
                                <th>Instalação</th>
                                <th>Subdomínio</th>
                                <th>Status</th>
                                <th>Versão</th>
                                <th>Criado em</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($instalacoes_recentes as $instalacao)
                                <tr>
                                    <td>
                                        <span class="dashboard-table__name">{{ $instalacao->nome }}</span>
                                        <span class="dashboard-table__sub d-block">#{{ $instalacao->id }}</span>
                                    </td>
                                    <td>{{ $instalacao->subdominio }}</td>
                                    <td>
                                        <span class="dashboard-status dashboard-status--{{ $instalacao->status }}">
                                            {{ $statusLabels[$instalacao->status] ?? ucfirst($instalacao->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $instalacao->versao ?? '—' }}</td>
                                    <td>{{ $instalacao->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <a href="{{ route('instalacoes.web.show', $instalacao) }}" class="dashboard-table__link">
                                            Detalhes <i class="fas fa-arrow-right" aria-hidden="true"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="dashboard-empty">
                    <i class="fas fa-server" aria-hidden="true"></i>
                    <p>Ainda não há instalações registradas.</p>
                    <a href="{{ route('instalacoes.web.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus mr-1" aria-hidden="true"></i>
                        Criar primeira instalação
                    </a>
                </div>
            @endif
        </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/waygest-components.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const brandColors = {
        purple: '#6C63FF',
        success: '#28a745',
        warning: '#FF6B35',
        danger: '#dc3545',
        gray: '#6c757d',
        purpleLight: 'rgba(108, 99, 255, 0.12)',
    };

    const statusData = @json($instalacoes_por_status ?? []);
    const statusLabels = Object.keys(statusData).map(function (key) {
        const labels = { ativa: 'Ativa', inativa: 'Inativa', manutencao: 'Manutenção', erro: 'Erro' };
        return labels[key] || key.charAt(0).toUpperCase() + key.slice(1);
    });
    const statusColors = {
        ativa: brandColors.success,
        inativa: brandColors.gray,
        manutencao: brandColors.warning,
        erro: brandColors.danger,
    };
    const statusKeys = Object.keys(statusData);

    const statusCtx = document.getElementById('statusChart');
    if (statusCtx && statusKeys.length > 0) {
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: statusLabels,
                datasets: [{
                    data: Object.values(statusData),
                    backgroundColor: statusKeys.map(function (k) { return statusColors[k] || brandColors.purple; }),
                    borderWidth: 0,
                    hoverOffset: 6,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '68%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 16, usePointStyle: true, pointStyle: 'circle' },
                    },
                },
            },
        });
    } else if (statusCtx) {
        statusCtx.parentElement.innerHTML = '<p class="text-muted text-center py-4 mb-0">Sem dados para exibir</p>';
    }

    const monthlyData = @json($instalacoes_por_mes ?? []);
    const monthlyCtx = document.getElementById('monthlyChart');
    if (monthlyCtx && Object.keys(monthlyData).length > 0) {
        new Chart(monthlyCtx, {
            type: 'line',
            data: {
                labels: Object.keys(monthlyData),
                datasets: [{
                    label: 'Instalações',
                    data: Object.values(monthlyData),
                    borderColor: brandColors.purple,
                    backgroundColor: brandColors.purpleLight,
                    tension: 0.35,
                    fill: true,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    borderWidth: 2,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, ticks: { stepSize: 1 } },
                    x: { grid: { display: false } },
                },
            },
        });
    } else if (monthlyCtx) {
        monthlyCtx.parentElement.innerHTML = '<p class="text-muted text-center py-4 mb-0">Sem dados para exibir</p>';
    }
});
</script>
@stop