@extends('layout')

@section('content')
    @php
        $cashflowReceive = (float) ($finance['to_receive'] ?? 0);
        $cashflowPay = (float) ($finance['to_pay'] ?? 0);
        $cashflowTotal = $cashflowReceive + $cashflowPay;
        $cashflowReceivePercent = $cashflowTotal > 0 ? ($cashflowReceive / $cashflowTotal) * 100 : 0;
        $cashflowPayPercent = $cashflowTotal > 0 ? ($cashflowPay / $cashflowTotal) * 100 : 0;
        $projectStatusLabels = [
            'backlog' => 'Backlog',
            'ativo' => 'Em andamento',
            'pausado' => 'Pausados',
            'concluido' => 'Concluídos',
            'cancelado' => 'Cancelados',
        ];
        $projectStatusTotal = array_sum($projectStatus);
        $leadStageLabels = \App\Models\Lead::STAGE_LABELS;
        $leadStageTotal = array_sum($leadStageCounts);
        $leadStageColors = [
            'novo' => 'var(--text-3)',
            'contato' => 'var(--info)',
            'qualificado' => 'var(--accent)',
            'proposta' => 'var(--warn)',
            'negociacao' => 'var(--chart-3)',
            'ganho' => 'var(--ok)',
            'perdido' => 'var(--bad)',
        ];
    @endphp

    <div class="dashboard-page">
        <div class="page-head page-head--dashboard">
            <div class="t">
                <p class="lead">{{ ucfirst(now_weekday()) }}, {{ datetime_br(now(), 'd \d\e F \d\e Y') }}</p>
            </div>
            <div class="actions">
                <details class="dashboard-quick-menu">
                    <summary class="btn btn--ghost">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24">
                            <path d="M0 0h24v24H0z" fill="none" />
                            <g fill="none" stroke="currentColor" stroke-dasharray="16" stroke-linecap="round"
                                stroke-linejoin="round" stroke-width="2">
                                <path d="M5 12h14">
                                    <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s"
                                        values="16;0" />
                                </path>
                                <path stroke-dashoffset="16" d="M12 5v14">
                                    <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.5s"
                                        to="0" />
                                </path>
                            </g>
                        </svg>

                    </summary>
                    <div class="dashboard-quick-menu__panel" aria-label="Atalhos de criação">
                        <a href="{{ url('leads/novo') }}"><i class="ic">person_add</i>Novo lead</a>
                        <a href="{{ url('tarefas/nova') }}"><i class="ic">add_task</i>Nova tarefa</a>
                        <a href="{{ url('reunioes/nova') }}"><i class="ic">event</i>Agendar reunião</a>
                        <a href="{{ url('financeiro/novo') }}"><i class="ic">payments</i>Lançamento financeiro</a>
                        <a href="{{ url('projetos/novo') }}"><i class="ic">folder</i>Novo projeto</a>
                        <a href="{{ url('clientes/novo') }}"><i class="ic">groups</i>Novo cliente</a>
                    </div>
                </details>
            </div>
        </div>

        <div class="grid cols-5 dashboard-stats">
            <a class="stat" href="{{ url('clientes?status=ativo') }}"><span class="k"><i class="ic">groups</i>
                    Clientes ativos</span>
                <div class="v">{{ $metrics['clients_active'] }}</div>
                <div class="sub">cadastros ativos</div>
            </a>
            <a class="stat" href="{{ url('leads') }}"><span class="k"><i class="ic">person_search</i> Leads em
                    aberto</span>
                <div class="v">{{ $metrics['leads_active'] }}</div>
                <div class="sub">{{ money($metrics['leads_value']) }} em pipeline</div>
            </a>
            <a class="stat" href="{{ url('projetos') }}"><span class="k"><i class="ic">folder_open</i> Projetos
                    em aberto</span>
                <div class="v">{{ $metrics['projects_open'] }}</div>
                <div class="sub">{{ $metrics['tasks_pending'] }} tarefa(s) pendente(s)</div>
            </a>
            <a class="stat" href="{{ url('reunioes?scope=upcoming') }}"><span class="k"><i
                        class="ic">calendar_month</i> Reuniões agendadas</span>
                <div class="v">{{ $metrics['meetings_upcoming'] }}</div>
                <div class="sub">próximos dias</div>
            </a>
            <a class="stat stat--cashflow" href="{{ url('financeiro') }}"><span class="k"><i
                        class="ic">account_balance_wallet</i> Saldo em caixa <button type="button"
                        class="finance-values-toggle" data-financial-toggle aria-pressed="false" title="Ocultar valores"
                        aria-label="Ocultar valores financeiros"><i class="ic"
                            data-financial-toggle-icon>visibility</i></button></span>
                <div class="v sm"><span data-financial-value>{{ money($finance['balance']) }}</span></div>
                @if (($finance['balance_source'] ?? 'local') !== 'local')
                    <div class="sub small">{{ $finance['balance_source_label'] ?? 'Contas conectadas' }} · {{ ($finance['balance_stale'] ?? false) ? 'inclui valor anterior' : 'atualizado '.human_diff((string) $finance['balance_checked_at']) }}</div>
                @endif
                <div class="cashflow-progress" data-financial-progress role="img"
                    aria-label="Comparativo proporcional: a receber em verde e a pagar em amarelo"><span
                        class="cashflow-progress__receive"
                        style="width: {{ number_format($cashflowReceivePercent, 4, '.', '') }}%"></span><span
                        class="cashflow-progress__pay"
                        style="width: {{ number_format($cashflowPayPercent, 4, '.', '') }}%"></span></div>
            </a>
        </div>

        <section class="card dashboard-priorities" aria-labelledby="dashboard-priorities-title">
            <div class="card-head">
                <div>
                    <h2 id="dashboard-priorities-title">Agenda operacional</h2>
                    <p class="dashboard-agenda-caption">Prazos próximos e contatos que precisam de um próximo passo.</p>
                </div>
                <span class="grow"></span>
                <a class="more" href="{{ url('agenda') }}">Abrir agenda</a>
            </div>
            <div class="card-body">
                <div class="dashboard-priority-counts" aria-label="Resumo de prioridades">
                    <a class="dashboard-priority-count dashboard-priority-count--bad"
                        href="{{ url('agenda?period=overdue') }}"><span>Atrasados</span><strong>{{ $dashboardPriorities['overdue'] }}</strong></a>
                    <a class="dashboard-priority-count dashboard-priority-count--warn"
                        href="{{ url('agenda?period=today') }}"><span>Hoje</span><strong>{{ $dashboardPriorities['today'] }}</strong></a>
                    <a class="dashboard-priority-count" href="{{ url('agenda?period=7d') }}"><span>Próximos 7
                            dias</span><strong>{{ $dashboardPriorities['next7'] }}</strong></a>
                    <a class="dashboard-priority-count" href="{{ url('agenda?period=all&type=tarefa') }}"><span>Tarefas sem prazo</span><strong>{{ $dashboardPriorities['undatedTasks'] }}</strong></a>
                    <a class="dashboard-priority-count" href="{{ url('agenda?period=all&type=lead') }}"><span>Leads sem
                            contato agendado</span><strong>{{ $dashboardPriorities['undatedLeads'] }}</strong></a>
                </div>
                <div class="dashboard-priority-list">
                    @forelse($dashboardPriorities['items'] as $item)
                        <a class="dashboard-priority-item" href="{{ url($item['href']) }}">
                            <span class="ico"><i class="ic sm">{{ $item['icon'] }}</i></span>
                            <span class="dashboard-priority-item__content"><span
                                    class="dashboard-priority-item__meta">{{ $item['typeLabel'] }} ·
                                    {{ $item['subtitle'] }}</span><strong>{{ $item['title'] }}</strong></span>
                            <span class="badge badge--{{ $item['windowTone'] }}">{{ $item['windowLabel'] }}</span>
                            @if ($item['amount'] !== null)
                                <strong class="dashboard-priority-item__amount" data-financial-value>{{ money($item['amount']) }}</strong>
                            @elseif($item['date'])
                                <span
                                    class="dashboard-priority-item__date">{{ datetime_br($item['date'], 'd/m · H:i') }}</span>
                            @endif
                        </a>
                    @empty
                        <div class="dashboard-priorities-empty"><i class="ic">task_alt</i><span>Nenhum prazo ou
                                contato
                                pendente por agora.</span></div>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="card dashboard-activity-card" aria-labelledby="dashboard-activity-title"
            data-activity-endpoint="{{ url('dashboard/atividade') }}" data-activity-scope="{{ $activityHeatmap['scope'] }}">
            <div class="card-head dashboard-activity-head">
                <div>
                    <h2 id="dashboard-activity-title">Atividade operacional</h2>
                    <p class="dashboard-agenda-caption">Leads, projetos, tarefas, clientes, afiliados, soluções, reuniões, chamados e financeiro · últimas 20 semanas · {{ number_format($activityHeatmap['total'], 0, ',', '.') }} {{ $activityHeatmap['total'] === 1 ? 'movimentação' : 'movimentações' }} · saldo de trabalho <strong class="dashboard-activity-score dashboard-activity-score--{{ $activityHeatmap['score'] > 0 ? 'positive' : ($activityHeatmap['score'] < 0 ? 'negative' : 'neutral') }}">{{ $activityHeatmap['score'] > 0 ? '+' : '' }}{{ $activityHeatmap['score'] }}</strong></p>
                </div>
                <div class="dashboard-activity-scopes" role="group" aria-label="Escopo das atividades">
                    <a class="btn btn--sm {{ $activityHeatmap['scope'] === 'all' ? 'btn--primary' : 'btn--ghost' }}"
                        href="{{ url('/?activity_scope=all') }}" @if ($activityHeatmap['scope'] === 'all') aria-current="true" @endif>Toda a operação</a>
                    <a class="btn btn--sm {{ $activityHeatmap['scope'] === 'mine' ? 'btn--primary' : 'btn--ghost' }}"
                        href="{{ url('/?activity_scope=mine') }}" @if ($activityHeatmap['scope'] === 'mine') aria-current="true" @endif>Minha atividade</a>
                </div>
            </div>
            <div class="card-body dashboard-activity-body">
                <div class="dashboard-activity-risks" aria-label="Prazos operacionais">
                    <a class="dashboard-activity-risk dashboard-activity-risk--danger" href="{{ url('agenda?period=overdue') }}">
                        <span>Atrasados</span><strong>{{ $activityHeatmap['risks']['overdue'] }}</strong>
                    </a>
                    <a class="dashboard-activity-risk dashboard-activity-risk--warning" href="{{ url('agenda?period=today') }}">
                        <span>Hoje</span><strong>{{ $activityHeatmap['risks']['today'] }}</strong>
                    </a>
                    <a class="dashboard-activity-risk dashboard-activity-risk--upcoming" href="{{ url('agenda?period=7d') }}">
                        <span>Próximos 7 dias</span><strong>{{ $activityHeatmap['risks']['next7'] }}</strong>
                    </a>
                </div>
                <div class="dashboard-activity-months" aria-hidden="true">
                    @foreach ($activityHeatmap['weeks'] as $week)
                        <span>{{ $week[0]['month_label'] ?? '' }}</span>
                    @endforeach
                </div>
                <div class="dashboard-activity-map" role="group" aria-label="Mapa diário de movimentações operacionais">
                    @foreach ($activityHeatmap['weeks'] as $week)
                        <div class="dashboard-activity-week">
                            @foreach ($week as $day)
                                <button type="button" class="dashboard-activity-day" data-activity-date="{{ $day['date'] }}"
                                    data-activity-level="{{ $day['level'] }}" data-activity-impact="{{ $day['tone'] }}"
                                    data-activity-score="{{ $day['score'] }}" @disabled($day['future'])
                                    aria-label="{{ $day['label'] }}: {{ $day['count'] }} {{ $day['count'] === 1 ? 'movimentação' : 'movimentações' }}, saldo {{ $day['score'] > 0 ? '+' : '' }}{{ $day['score'] }}"
                                    title="{{ $day['label'] }} · {{ $day['count'] }} {{ $day['count'] === 1 ? 'movimentação' : 'movimentações' }} · saldo {{ $day['score'] > 0 ? '+' : '' }}{{ $day['score'] }}"></button>
                            @endforeach
                        </div>
                    @endforeach
                </div>
                <div class="dashboard-activity-legend" aria-label="Impacto das movimentações">
                    <span><i data-activity-impact="negative"></i> Atraso/perda −1</span>
                    <span><i data-activity-impact="neutral"></i> Movimento 0</span>
                    <span><i data-activity-impact="positive"></i> Conclusão/ganho +1</span>
                    <span><i data-activity-impact="mixed"></i> Misto</span>
                </div>
            </div>
        </section>

        <dialog class="dashboard-activity-dialog" data-activity-dialog aria-labelledby="dashboard-activity-dialog-title">
            <div class="dashboard-activity-dialog__head">
                <div><h2 id="dashboard-activity-dialog-title">Atividades do dia</h2><p data-activity-dialog-date></p></div>
                <button type="button" class="btn btn--ghost btn--sm" data-activity-close aria-label="Fechar">Fechar</button>
            </div>
            <div class="dashboard-activity-dialog__items" data-activity-dialog-items aria-live="polite"></div>
        </dialog>

        <div class="grid dash dashboard-layout">
            <div class="stack">
                <div class="dashboard-overview">
                    <section class="card dashboard-projects-card">
                        <div class="card-head">
                            <div>
                                <h2>Projetos por situação</h2>
                                <p class="dashboard-agenda-caption">Selecione uma situação para abrir os projetos
                                    correspondentes.</p>
                            </div><span class="grow"></span><a class="more" href="{{ url('projetos') }}">Ver
                                projetos</a>
                        </div>
                        <div class="card-body">
                            @if ($projectStatusTotal > 0)
                                <div class="dashboard-project-status">
                                    <div class="dashboard-chart"><canvas id="projChart" role="img"
                                            aria-label="Gráfico de rosca dos projetos por situação"></canvas><span
                                            class="dashboard-chart-center"><strong>{{ $projectStatusTotal }}</strong><small>projetos</small></span>
                                    </div>
                                    <div class="dashboard-project-legend">
                                        @foreach ($projectStatus as $status => $count)
                                            <a href="{{ url('projetos?status=' . $status) }}"
                                                data-project-status-link="{{ $status }}"><span
                                                    class="dashboard-project-legend__dot"
                                                    data-status-color="{{ $status }}"></span><span>{{ $projectStatusLabels[$status] ?? ucfirst($status) }}</span><strong>{{ $count }}</strong></a>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div class="dashboard-project-empty"><span class="dashboard-project-empty__ring"><i
                                            class="ic">folder_open</i></span><strong>Nenhum projeto
                                        cadastrado</strong><span>Quando houver projetos, a distribuição por situação
                                        aparecerá aqui.</span><a class="btn btn--ghost"
                                        href="{{ url('projetos/novo') }}">Criar primeiro projeto</a></div>
                            @endif
                        </div>
                    </section>

                    <section class="card dashboard-scheduler-queues-card"
                        aria-labelledby="dashboard-scheduler-queues-title"
                        data-schedule-executions-total="{{ $executionTimeline['schedule_total'] }}"
                        data-queue-executions-total="{{ $executionTimeline['jobs_total'] }}"
                        data-schedule-failed-total="{{ $executionTimeline['schedule_failed'] }}"
                        data-queue-failed-total="{{ $executionTimeline['jobs_failed'] }}">
                        <div class="card-head">
                            <div>
                                <h2 id="dashboard-scheduler-queues-title">Agendador e filas</h2>
                                <p class="dashboard-agenda-caption">Execuções por hora · últimas 24 horas.</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="dashboard-execution-summary">
                                <div>
                                    <strong>{{ number_format($executionTimeline['schedule_total'], 0, ',', '.') }}</strong><span>agendador</span>
                                </div>
                                <div>
                                    <strong>{{ number_format($executionTimeline['jobs_total'], 0, ',', '.') }}</strong><span>jobs
                                        da fila</span>
                                </div>
                            </div>
                            <div class="dashboard-execution-chart"><canvas id="executionTimelineChart" role="img"
                                    aria-label="Gráfico das execuções do agendador e das filas por hora nas últimas 24 horas"></canvas>
                            </div>
                            <div class="dashboard-execution-legend" aria-label="Legenda do gráfico">
                                <span><i class="dashboard-execution-legend__dot dashboard-execution-legend__dot--schedule"></i>Agendador · ok</span>
                                <span><i class="dashboard-execution-legend__dot dashboard-execution-legend__dot--failure"></i>Agendador · falhas</span>
                                <span><i class="dashboard-execution-legend__dot dashboard-execution-legend__dot--queue"></i>Fila · ok</span>
                                <span><i class="dashboard-execution-legend__dot dashboard-execution-legend__dot--failure"></i>Fila · falhas</span>
                            </div>
                            <p class="dashboard-execution-failures">Falhas:
                                {{ number_format($executionTimeline['schedule_failed'], 0, ',', '.') }} no agendador ·
                                {{ number_format($executionTimeline['jobs_failed'], 0, ',', '.') }} na fila</p>
                        </div>
                    </section>
                </div>
                <div class="card dashboard-lead-stages-card">
                    <div class="card-head">
                        <div>
                            <h2>Leads por etapa</h2>
                            <p class="dashboard-agenda-caption">Distribuição do pipeline comercial.</p>
                        </div><span class="grow"></span><a class="more" href="{{ url('leads') }}">Abrir leads</a>
                    </div>
                    <div class="card-body">
                        @if ($leadStageTotal > 0)
                            <div class="dashboard-lead-stages">
                                @foreach ($leadStageCounts as $stage => $count)
                                    @if ($count > 0)
                                        <a class="dashboard-lead-stage dashboard-lead-stage--{{ $stage }}"
                                            href="{{ url('leads?stage=' . $stage) }}"
                                            style="--lead-stage-color: {{ $leadStageColors[$stage] ?? 'var(--accent)' }}">
                                            <span
                                                class="dashboard-lead-stage__label">{{ $leadStageLabels[$stage] ?? ucfirst($stage) }}</span><strong>{{ $count }}</strong>
                                            <span class="dashboard-lead-stage__track" aria-hidden="true"><span
                                                    style="width: {{ number_format(($count / $leadStageTotal) * 100, 2, '.', '') }}%"></span></span>
                                        </a>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <div class="empty dashboard-leads-empty"><i class="ic">person_search</i>
                                <p>Nenhum lead cadastrado.</p><a class="btn btn--ghost"
                                    href="{{ url('leads/novo') }}">Cadastrar primeiro lead</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="stack">
                <div class="card dashboard-meetings-card">
                    <div class="card-head">
                        <h2>Próximas reuniões</h2><span class="grow"></span><a class="more"
                            href="{{ url('reunioes/nova') }}">Agendar</a>
                    </div>
                    <div class="card-body">
                        <div class="rows">
                            @forelse($upcomingMeetings as $meeting)
                                <a class="item" href="{{ url('reunioes/' . $meeting->id) }}"><span class="ico"><i
                                            class="ic sm">event</i></span><span class="tx">
                                        <p>{{ $meeting->title }}</p><span
                                            class="sub">{{ datetime_br($meeting->scheduled_at, 'd/m · H:i') }}</span>
                                    </span></a>
                            @empty
                                <div class="empty dashboard-meetings-empty"><i class="ic">event_available</i>
                                    <p>Nenhuma reunião próxima.</p><a href="{{ url('reunioes/nova') }}">Agendar uma
                                        reunião</a>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-head">
                        <h2>Financeiro</h2><span class="grow"></span><a class="more"
                            href="{{ url('financeiro') }}">Abrir</a>
                    </div>
                    <div class="card-body">
                        <div class="grid cols-3 dashboard-finance-summary">
                            <div>
                                <div class="k muted small">Saldo · {{ $finance['balance_source_label'] ?? 'Livro-caixa local' }}{{ ($finance['balance_stale'] ?? false) ? ' · anterior' : '' }}</div><strong
                                    data-financial-value>{{ money($finance['balance']) }}</strong>
                            </div>
                            <div>
                                <div class="k muted small">A receber <span
                                        class="dashboard-finance-count">({{ $finance['open_counts']['entrada'] ?? 0 }})</span>
                                </div><strong data-financial-value>{{ money($finance['to_receive']) }}</strong>
                            </div>
                            <div>
                                <div class="k muted small">A pagar <span
                                        class="dashboard-finance-count">({{ $finance['open_counts']['saida'] ?? 0 }})</span>
                                </div><strong data-financial-value>{{ money($finance['to_pay']) }}</strong>
                            </div>
                        </div>
                        <p class="dashboard-finance-preview">Prévia:
                            {{ min($financeUpcoming->count(), $finance['planned_count'] ?? 0) }} de
                            {{ $finance['planned_count'] ?? 0 }} lançamentos previstos.</p>
                        <div class="rows dashboard-finance-list">
                            @foreach ($financeUpcoming as $transaction)
                                <a class="item" href="{{ url('financeiro/' . $transaction->id . '/editar') }}"><span
                                        class="ico"><i
                                            class="ic sm">{{ $transaction->direction === 'entrada' ? 'trending_up' : 'trending_down' }}</i></span><span
                                        class="tx">
                                        <p>{{ $transaction->description }}</p><span
                                            class="sub">{{ $transaction->due_date ? 'vence ' . datetime_br($transaction->due_date, 'd/m') : 'sem vencimento' }}</span>
                                    </span><span
                                        data-financial-value>{{ money_signed($transaction->amount, $transaction->direction) }}</span></a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script nonce="{{ $cspNonce }}">
        (() => {
            const menu = document.querySelector('.dashboard-quick-menu');
            document.addEventListener('click', (event) => {
                if (menu?.open && !menu.contains(event.target)) menu.open = false;
            });
            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape' && menu?.open) {
                    menu.open = false;
                    menu.querySelector('summary')?.focus();
                }
            });

            const activityCard = document.querySelector('.dashboard-activity-card');
            const activityDialog = document.querySelector('[data-activity-dialog]');
            const activityItems = activityDialog?.querySelector('[data-activity-dialog-items]');
            const activityDate = activityDialog?.querySelector('[data-activity-dialog-date]');
            activityCard?.addEventListener('click', async (event) => {
                const cell = event.target.closest('[data-activity-date]');
                if (!cell || cell.disabled || !activityDialog || !activityItems || !activityDate) return;
                const date = cell.dataset.activityDate;
                activityDate.textContent = 'Carregando…';
                activityItems.replaceChildren();
                activityDialog.showModal();
                const endpoint = new URL(activityCard.dataset.activityEndpoint, window.location.href);
                endpoint.searchParams.set('date', date);
                endpoint.searchParams.set('scope', activityCard.dataset.activityScope || 'all');
                try {
                    const response = await fetch(endpoint, { headers: { Accept: 'application/json' }, credentials: 'same-origin' });
                    if (!response.ok) throw new Error('Não foi possível carregar as atividades.');
                    const payload = await response.json();
                    activityDate.textContent = payload.label;
                    const scoreLabel = payload.score > 0 ? `+${payload.score}` : `${payload.score}`;
                    activityDate.textContent = `${payload.label} · saldo ${scoreLabel} (${payload.positive} positivo(s), ${payload.negative} negativo(s))`;
                    if (!payload.items.length) {
                        const empty = document.createElement('p');
                        empty.className = 'dashboard-activity-empty';
                        empty.textContent = 'Nenhuma movimentação operacional registrada neste dia.';
                        activityItems.append(empty);
                        return;
                    }
                    payload.items.forEach((item) => {
                        const row = document.createElement(item.url ? 'a' : 'div');
                        row.className = `dashboard-activity-event dashboard-activity-event--${item.tone || 'info'}`;
                        if (item.url) row.href = item.url;
                        const content = document.createElement('span');
                        const title = document.createElement('strong');
                        title.textContent = item.title;
                        const description = document.createElement('span');
                        description.textContent = item.description;
                        const meta = document.createElement('small');
                        const typeLabels = { tarefa: 'Tarefa', lead: 'Lead', projeto: 'Projeto', cliente: 'Cliente', afiliado: 'Afiliado', sistema: 'Solução', reuniao: 'Reunião', financeiro: 'Financeiro', cobranca: 'Cobrança', chamado: 'Chamado' };
                        meta.textContent = `${typeLabels[item.type] || 'Operação'} · ${item.user} · ${item.time}`;
                        const impact = document.createElement('b');
                        impact.className = `dashboard-activity-impact dashboard-activity-impact--${item.impact > 0 ? 'positive' : (item.impact < 0 ? 'negative' : 'neutral')}`;
                        impact.textContent = item.impact > 0 ? '+1' : (item.impact < 0 ? '−1' : '0');
                        content.append(title, description, meta);
                        row.append(impact);
                        row.append(content);
                        activityItems.append(row);
                    });
                    if (payload.truncated) {
                        const note = document.createElement('p');
                        note.className = 'dashboard-activity-empty';
                        note.textContent = `Mostrando 30 de ${payload.count} alterações.`;
                        activityItems.append(note);
                    }
                } catch (error) {
                    activityDate.textContent = 'Não foi possível carregar';
                    const message = document.createElement('p');
                    message.className = 'dashboard-activity-empty';
                    message.textContent = error.message;
                    activityItems.append(message);
                }
            });
            activityDialog?.querySelector('[data-activity-close]')?.addEventListener('click', () => activityDialog.close());

            if (!window.Chart) return;
            const root = getComputedStyle(document.documentElement);
            const canvas = document.getElementById('projChart');
            if (canvas) {
                const statuses = @json(array_keys($projectStatus));
                const labels = @json(array_map(fn($status) => $projectStatusLabels[$status] ?? ucfirst($status), array_keys($projectStatus)));
                const values = @json(array_values($projectStatus));
                const chartColors = ['--chart-1', '--chart-2', '--chart-3', '--chart-4', '--chart-5'].map((token) =>
                    root.getPropertyValue(token).trim());
                const legendLinks = [...document.querySelectorAll('[data-project-status-link]')];
                const palette = Object.fromEntries(statuses.map((status, index) => [status, chartColors[index %
                    chartColors.length]]));
                legendLinks.forEach((link) => {
                    const dot = link.querySelector('[data-status-color]');
                    if (dot) dot.style.backgroundColor = palette[dot.dataset.statusColor];
                });
                new Chart(canvas, {
                    type: 'doughnut',
                    data: {
                        labels,
                        datasets: [{
                            data: values,
                            backgroundColor: chartColors.slice(0, values.length),
                            borderWidth: 3,
                            borderColor: root.getPropertyValue('--surface').trim(),
                            hoverOffset: 5
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '72%',
                        onClick: (_event, elements) => {
                            if (elements.length) window.location.href = legendLinks.find((link) => link
                                    .dataset.projectStatusLink === statuses[elements[0].index])?.href ||
                                new URL(
                                    `projetos?status=${encodeURIComponent(statuses[elements[0].index])}`,
                                    document.baseURI).href;
                        },
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: (context) => `${context.label}: ${context.raw} projeto(s)`
                                }
                            }
                        },
                    },
                });
            }

            const executionCanvas = document.getElementById('executionTimelineChart');
            if (!executionCanvas) return;
            const executionLabels = @json($executionTimeline['labels']);
            const timeline = @json($executionTimeline);
            const accent = root.getPropertyValue('--accent').trim();
            const success = root.getPropertyValue('--ok').trim();
            const failure = root.getPropertyValue('--bad').trim();
            new Chart(executionCanvas, {
                type: 'line',
                data: {
                    labels: executionLabels,
                    datasets: [{
                            label: 'Agendador · ok',
                            data: timeline.schedule.completed,
                            borderColor: accent,
                            backgroundColor: accent,
                            tension: .32,
                            pointRadius: 1.5,
                            borderWidth: 2
                        },
                        {
                            label: 'Agendador · falhas',
                            data: timeline.schedule.failed,
                            borderColor: failure,
                            backgroundColor: failure,
                            tension: .32,
                            pointRadius: 2,
                            borderWidth: 1.5,
                            borderDash: [3, 3]
                        },
                        {
                            label: 'Fila · ok',
                            data: timeline.jobs.completed,
                            borderColor: success,
                            backgroundColor: success,
                            tension: .32,
                            pointRadius: 1.5,
                            borderWidth: 2
                        },
                        {
                            label: 'Fila · falhas',
                            data: timeline.jobs.failed,
                            borderColor: failure,
                            backgroundColor: failure,
                            tension: .32,
                            pointRadius: 2,
                            borderWidth: 1.5
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            enabled: true
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: root.getPropertyValue('--text-3').trim(),
                                autoSkip: true,
                                maxTicksLimit: 6,
                                maxRotation: 0,
                                font: {
                                    size: 9
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            border: {
                                display: false
                            },
                            grid: {
                                color: root.getPropertyValue('--border').trim()
                            },
                            ticks: {
                                color: root.getPropertyValue('--text-3').trim(),
                                precision: 0,
                                maxTicksLimit: 4,
                                font: {
                                    size: 9
                                }
                            }
                        },
                    },
                },
            });
        })();
    </script>
@endsection