@php
    $campaignLabels = [
        'draft' => 'Rascunho',
        'queued' => 'Na fila',
        'running' => 'Enviando',
        'paused' => 'Pausada',
        'completed' => 'Concluída',
        'cancelled' => 'Cancelada',
        'failed' => 'Falhou',
    ];
@endphp

<x-filament-panels::page>
    <style>
        .vm-mail-dashboard {
            --vm-ink: #18372d;
            --vm-muted: #61726b;
            --vm-line: #dce6e1;
            --vm-paper: #fff;
            display: grid;
            gap: 1.25rem;
        }

        .dark .vm-mail-dashboard {
            --vm-ink: #effbf5;
            --vm-muted: #a8bbb2;
            --vm-line: rgba(255, 255, 255, .1);
            --vm-paper: rgb(24 24 27);
        }

        .vm-mail-hero {
            position: relative;
            overflow: hidden;
            padding: clamp(1.25rem, 3vw, 2rem);
            border: 1px solid rgba(53, 83, 71, .14);
            border-radius: 1rem;
            color: #f8fffb;
            background:
                radial-gradient(circle at 87% 18%, rgba(205, 226, 79, .3), transparent 30%),
                linear-gradient(130deg, #173c30 0%, #285b48 65%, #34735a 100%);
            box-shadow: 0 18px 42px rgba(23, 60, 48, .13);
        }

        .vm-mail-hero::after {
            content: '';
            position: absolute;
            width: 13rem;
            height: 13rem;
            right: -4rem;
            bottom: -7rem;
            border: 1px solid rgba(255, 255, 255, .2);
            border-radius: 999px;
        }

        .vm-mail-eyebrow {
            margin-bottom: .65rem;
            color: #d6e872;
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .17em;
            text-transform: uppercase;
        }

        .vm-mail-title {
            max-width: 42rem;
            font-size: clamp(1.45rem, 3vw, 2.15rem);
            font-weight: 750;
            letter-spacing: -.035em;
            line-height: 1.1;
        }

        .vm-mail-intro {
            max-width: 43rem;
            margin-top: .7rem;
            color: rgba(248, 255, 251, .76);
            font-size: .92rem;
            line-height: 1.6;
        }

        .vm-mail-health {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-top: 1.2rem;
        }

        .vm-health-pill {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .45rem .65rem;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 999px;
            background: rgba(255, 255, 255, .09);
            color: rgba(255, 255, 255, .9);
            font-size: .75rem;
            font-weight: 650;
            backdrop-filter: blur(8px);
        }

        .vm-health-dot {
            width: .48rem;
            height: .48rem;
            border-radius: 50%;
            background: #d4e76d;
            box-shadow: 0 0 0 3px rgba(212, 231, 109, .16);
        }

        .vm-health-pill[data-ok='false'] .vm-health-dot {
            background: #ffb5a7;
            box-shadow: 0 0 0 3px rgba(255, 181, 167, .14);
        }

        .vm-mail-stats {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .8rem;
        }

        .vm-mail-stat,
        .vm-mail-module,
        .vm-mail-panel,
        .vm-validation-note {
            border: 1px solid var(--vm-line);
            border-radius: .9rem;
            background: var(--vm-paper);
        }

        .vm-mail-stat {
            padding: 1rem;
        }

        .vm-stat-label {
            color: var(--vm-muted);
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .075em;
            text-transform: uppercase;
        }

        .vm-stat-value {
            margin-top: .45rem;
            color: var(--vm-ink);
            font-size: 1.65rem;
            font-weight: 760;
            letter-spacing: -.045em;
        }

        .vm-stat-detail {
            margin-top: .22rem;
            color: var(--vm-muted);
            font-size: .76rem;
        }

        .vm-mail-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr);
            gap: 1.1rem;
            align-items: start;
        }

        .vm-mail-section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .75rem;
        }

        .vm-mail-section-title {
            color: var(--vm-ink);
            font-size: 1rem;
            font-weight: 750;
        }

        .vm-mail-section-copy {
            margin-top: .2rem;
            color: var(--vm-muted);
            font-size: .78rem;
        }

        .vm-mail-modules {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .8rem;
        }

        .vm-mail-module {
            display: flex;
            min-height: 11rem;
            flex-direction: column;
            padding: 1rem;
            transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }

        .vm-mail-module:hover {
            transform: translateY(-2px);
            border-color: rgba(53, 83, 71, .35);
            box-shadow: 0 12px 30px rgba(23, 60, 48, .08);
        }

        .vm-module-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .vm-module-icon {
            display: grid;
            width: 2.3rem;
            height: 2.3rem;
            place-items: center;
            border-radius: .65rem;
            color: #315848;
            background: #edf4ef;
        }

        .dark .vm-module-icon {
            color: #d9eadf;
            background: rgba(95, 145, 121, .2);
        }

        .vm-module-icon svg {
            width: 1.2rem;
            height: 1.2rem;
        }

        .vm-module-count {
            color: var(--vm-muted);
            font-size: .72rem;
            font-weight: 700;
        }

        .vm-module-name {
            margin-top: .85rem;
            color: var(--vm-ink);
            font-size: 1rem;
            font-weight: 750;
        }

        .vm-module-copy {
            margin-top: .25rem;
            color: var(--vm-muted);
            font-size: .78rem;
            line-height: 1.5;
        }

        .vm-module-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            margin-top: auto;
            padding-top: .85rem;
            color: #2f6d55;
            font-size: .77rem;
            font-weight: 750;
        }

        .dark .vm-module-link { color: #9ed1b8; }

        .vm-mail-panel {
            overflow: hidden;
        }

        .vm-mail-panel-header {
            padding: 1rem;
            border-bottom: 1px solid var(--vm-line);
        }

        .vm-campaign-list {
            display: grid;
        }

        .vm-campaign-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: .75rem;
            padding: .85rem 1rem;
            border-bottom: 1px solid var(--vm-line);
        }

        .vm-campaign-row:last-child { border-bottom: 0; }
        .vm-campaign-name { overflow: hidden; color: var(--vm-ink); font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
        .vm-campaign-meta { margin-top: .2rem; color: var(--vm-muted); font-size: .7rem; }

        .vm-status {
            align-self: start;
            padding: .28rem .5rem;
            border-radius: 999px;
            color: #4b6258;
            background: #eef3f0;
            font-size: .65rem;
            font-weight: 750;
        }

        .vm-status[data-status='running'], .vm-status[data-status='completed'] { color: #17633f; background: #e6f6ed; }
        .vm-status[data-status='failed'], .vm-status[data-status='cancelled'] { color: #9b332c; background: #fce9e7; }
        .vm-status[data-status='queued'], .vm-status[data-status='paused'] { color: #7c5a12; background: #fbf2d9; }

        .vm-empty-campaigns {
            padding: 1.35rem 1rem;
            color: var(--vm-muted);
            font-size: .78rem;
            line-height: 1.5;
        }

        .vm-validation-note {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: .75rem;
            padding: 1rem;
            border-color: #eadfb5;
            background: #fffbeb;
        }

        .dark .vm-validation-note {
            border-color: rgba(230, 195, 90, .25);
            background: rgba(103, 77, 18, .14);
        }

        .vm-note-icon { color: #9a741c; }
        .vm-note-icon svg { width: 1.25rem; height: 1.25rem; }
        .vm-note-title { color: #674c0f; font-size: .8rem; font-weight: 780; }
        .dark .vm-note-title { color: #f3d888; }
        .vm-note-copy { margin-top: .25rem; color: #7c6939; font-size: .74rem; line-height: 1.55; }
        .dark .vm-note-copy { color: #cbbd95; }

        @media (max-width: 960px) {
            .vm-mail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .vm-mail-layout { grid-template-columns: 1fr; }
        }

        @media (max-width: 560px) {
            .vm-mail-stats, .vm-mail-modules { grid-template-columns: 1fr; }
        }
    </style>

    <div class="vm-mail-dashboard">
        <section class="vm-mail-hero" aria-labelledby="vm-mail-heading">
            <div class="vm-mail-eyebrow">Relacionamento comercial</div>
            <h2 id="vm-mail-heading" class="vm-mail-title">Campanhas cuidadosas, graduais e mensuráveis.</h2>
            <p class="vm-mail-intro">
                Organize uma audiência com consentimento, personalize cada mensagem e acompanhe a entrega sem misturar esta base com os cadastros do Retail Partner.
            </p>

            <div class="vm-mail-health" aria-label="Saúde da configuração">
                <span class="vm-health-pill" data-ok="{{ $integrations['brevo'] ? 'true' : 'false' }}">
                    <span class="vm-health-dot"></span>
                    Brevo {{ $integrations['brevo'] ? 'configurada' : 'não configurada' }}
                </span>
                <span class="vm-health-pill" data-ok="{{ $integrations['reoon'] ? 'true' : 'false' }}">
                    <span class="vm-health-dot"></span>
                    Reoon {{ $integrations['reoon'] ? 'configurada' : 'não configurada' }}
                </span>
                <span class="vm-health-pill" data-ok="{{ $integrations['sender'] ? 'true' : 'false' }}">
                    <span class="vm-health-dot"></span>
                    Remetente {{ $integrations['sender'] ? 'válido' : 'pendente' }}
                </span>
                <span class="vm-health-pill" data-ok="{{ $integrations['queue'] ? 'true' : 'false' }}">
                    <span class="vm-health-dot"></span>
                    Fila {{ $integrations['queue'] ? 'assíncrona' : 'em modo síncrono' }}
                </span>
                <span class="vm-health-pill" data-ok="{{ $integrations['guardrail'] ? 'true' : 'false' }}">
                    <span class="vm-health-dot"></span>
                    Proteção {{ $integrations['guardrail'] ? 'liberada' : 'travada para revisão' }}
                </span>
            </div>
        </section>

        <section class="vm-mail-stats" aria-label="Indicadores do mail marketing">
            <article class="vm-mail-stat">
                <div class="vm-stat-label">Base separada</div>
                <div class="vm-stat-value">{{ number_format($stats['totalContacts']) }}</div>
                <div class="vm-stat-detail">contatos cadastrados</div>
            </article>
            <article class="vm-mail-stat">
                <div class="vm-stat-label">Público elegível</div>
                <div class="vm-stat-value">{{ number_format($stats['eligibleContacts']) }}</div>
                <div class="vm-stat-detail">{{ $stats['eligibleRate'] }}% da base, com consentimento e validação</div>
            </article>
            <article class="vm-mail-stat">
                <div class="vm-stat-label">Protegidos</div>
                <div class="vm-stat-value">{{ number_format($stats['suppressedContacts']) }}</div>
                <div class="vm-stat-detail">endereços fora de novos envios</div>
            </article>
            <article class="vm-mail-stat">
                <div class="vm-stat-label">Em andamento</div>
                <div class="vm-stat-value">{{ number_format($stats['activeCampaigns']) }}</div>
                <div class="vm-stat-detail">{{ number_format($stats['sentMessages']) }} mensagens enviadas no total</div>
            </article>
        </section>

        <div class="vm-mail-layout">
            <section aria-labelledby="vm-modules-heading">
                <header class="vm-mail-section-heading">
                    <div>
                        <h3 id="vm-modules-heading" class="vm-mail-section-title">Área de trabalho</h3>
                        <p class="vm-mail-section-copy">Da importação ao acompanhamento da campanha.</p>
                    </div>
                </header>

                <div class="vm-mail-modules">
                    @foreach ($modules as $module)
                        <a href="{{ $module['url'] }}" class="vm-mail-module">
                            <div class="vm-module-top">
                                <span class="vm-module-icon">
                                    <x-filament::icon :icon="$module['icon']" />
                                </span>
                                <span class="vm-module-count">{{ number_format($module['count']) }} registro(s)</span>
                            </div>
                            <div class="vm-module-name">{{ $module['name'] }}</div>
                            <p class="vm-module-copy">{{ $module['description'] }}</p>
                            <span class="vm-module-link">
                                {{ $module['action'] }}
                                <span aria-hidden="true">→</span>
                            </span>
                        </a>
                    @endforeach
                </div>
            </section>

            <aside style="display:grid; gap:.8rem;" aria-label="Atividade e orientação">
                <section class="vm-mail-panel">
                    <header class="vm-mail-panel-header">
                        <h3 class="vm-mail-section-title">Campanhas recentes</h3>
                        <p class="vm-mail-section-copy">Últimas criações e situação de envio.</p>
                    </header>
                    <div class="vm-campaign-list">
                        @forelse ($recentCampaigns as $campaign)
                            @php($status = $campaign->status instanceof \BackedEnum ? $campaign->status->value : (string) $campaign->status)
                            @php($campaignPage = $status === \App\Enums\MarketingCampaignStatus::Draft->value ? 'edit' : 'view')
                            <a class="vm-campaign-row" href="{{ \App\Filament\Resources\MarketingCampaignResource::getUrl($campaignPage, ['record' => $campaign]) }}">
                                <div style="min-width:0;">
                                    <div class="vm-campaign-name">{{ $campaign->name }}</div>
                                    <div class="vm-campaign-meta">
                                        {{ number_format($campaign->processed_recipients) }}/{{ number_format($campaign->total_recipients) }} processados
                                        · {{ number_format($campaign->sent_count) }} enviados
                                        · {{ number_format($campaign->opened_count) }} aberturas detectadas
                                    </div>
                                </div>
                                <span class="vm-status" data-status="{{ $status }}">{{ $campaignLabels[$status] ?? $status }}</span>
                            </a>
                        @empty
                            <div class="vm-empty-campaigns">Nenhuma campanha criada. Comece por uma assinatura e um template.</div>
                        @endforelse
                    </div>
                </section>

                <section class="vm-validation-note" aria-labelledby="vm-validation-heading">
                    <span class="vm-note-icon" aria-hidden="true">
                        <x-filament::icon icon="heroicon-o-shield-check" />
                    </span>
                    <div>
                        <h3 id="vm-validation-heading" class="vm-note-title">O que a validação realmente comprova</h3>
                        <p class="vm-note-copy">
                            Formato e domínio são verificados primeiro; depois, a Reoon consulta a caixa postal gradualmente. Somente resultados entregáveis e ainda válidos entram em campanhas. Hard bounce, spam e descadastro permanecem suprimidos por segurança.
                        </p>
                    </div>
                </section>
            </aside>
        </div>
    </div>
</x-filament-panels::page>