@php
    $maxDaily = max(1, (int) ($daily->max('visits') ?? 0));
    $labelEvery = max(1, (int) ceil(max(1, $daily->count()) / 12));
    $peakDay = $daily->sortByDesc('visits')->first();
    $chartWidth = max(760, $daily->count() * 34);
    $chartTicks = collect([1, .75, .5, .25, 0])
        ->map(fn (float|int $ratio): int => (int) round($maxDaily * $ratio));
    $uniqueRate = $visits > 0 ? round(($uniques / $visits) * 100, 1) : 0;
    $visitsPerCampaign = $campaigns > 0 ? round($visits / $campaigns, 1) : 0;
@endphp

@include('filament.pages.partials.analytics-dashboard-styles')

<x-filament-panels::page>
    <div class="vm-analytics-dashboard">
        <section class="vm-analytics-hero" aria-label="Resumo das campanhas">
            <div class="vm-analytics-toolbar">
                <div class="vm-analytics-copy">
                    <div class="vm-analytics-eyebrow">Aquisicao &amp; campanhas</div>
                    <p class="vm-analytics-description">
                        Acompanhe acessos identificados por UTM, gclid e fbclid até o pedido, o pagamento e a receita líquida.
                    </p>
                </div>

                <nav class="vm-period-filter" aria-label="Periodo das campanhas">
                    @foreach ($periodOptions as $value => $label)
                        <a
                            href="{{ request()->fullUrlWithQuery(['dias' => $value]) }}"
                            @class(['vm-period-link', 'is-active' => $days === $value])
                            @if ($days === $value) aria-current="page" @endif
                        >
                            {{ $label }}
                        </a>
                    @endforeach
                </nav>
            </div>

            <div class="vm-metrics-grid">
                <article class="vm-metric-card" data-tone="forest">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Visitas totais</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="M4 18.5V13m5.3 5.5V8.8m5.4 9.7V5.5m5.3 13V10" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($visits) }}</div>
                    <div class="vm-metric-note">Todos os acessos atribuidos no periodo</div>
                </article>

                <article class="vm-metric-card" data-tone="lime">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Visitas unicas</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round" />
                                <circle cx="12" cy="12" r="9" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($uniques) }}</div>
                    <div class="vm-metric-note">{{ $uniqueRate }}% das visitas registradas</div>
                </article>

                <article class="vm-metric-card" data-tone="gold">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Campanhas ativas</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="M4 13.5v-3l13-5v13l-13-5Z" stroke-linejoin="round" />
                                <path d="M7 14.5 8.5 20h3L10 15.5M17 9a3 3 0 0 1 0 6" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($campaigns) }}</div>
                    <div class="vm-metric-note">{{ $visitsPerCampaign }} visitas em media por campanha</div>
                </article>

                <article class="vm-metric-card" data-tone="slate">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Visitantes</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="M16 19.5v-1.4a4.1 4.1 0 0 0-4.1-4.1H7.1A4.1 4.1 0 0 0 3 18.1v1.4" stroke-linecap="round" />
                                <circle cx="9.5" cy="7.5" r="3.5" />
                                <path d="M17 9.5a3 3 0 0 1 0 6m1.5-11a3.5 3.5 0 0 1 0 6.8" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($visitors) }}</div>
                    <div class="vm-metric-note">Pessoas distintas reconhecidas pelo navegador</div>
                </article>
            </div>
        </section>

        @include('filament.pages.partials.campaign-funnel', [
            'funnelId' => 'campaign-overview-funnel',
            'funnelTitle' => 'Funil comercial atribuído',
            'funnelSubtitle' => 'Participantes únicos por etapa; pedidos e pagamentos são deduplicados por pedido.',
        ])

        <section class="vm-panel" aria-labelledby="campaign-daily-title">
            <header class="vm-panel-header">
                <div>
                    <h2 class="vm-panel-title" id="campaign-daily-title">Evolucao diaria</h2>
                    <p class="vm-panel-subtitle">Volume total e visitas unicas lado a lado, com escala fixa e detalhes ao passar o mouse.</p>
                </div>
                @if ($peakDay && $peakDay['visits'] > 0)
                    <div class="vm-chart-summary">
                        <span>Pico do periodo</span>
                        <strong>{{ number_format($peakDay['visits']) }} em {{ $peakDay['label'] }}</strong>
                    </div>
                @else
                    <span class="vm-panel-badge">Sem atividade no periodo</span>
                @endif
            </header>

            <div class="vm-panel-body">
                <div class="vm-chart-legend" aria-label="Legenda do grafico">
                    <span class="vm-chart-legend-item">
                        <span class="vm-chart-legend-dot" style="--legend-color: #385347;"></span>
                        Visitas
                    </span>
                    <span class="vm-chart-legend-item">
                        <span class="vm-chart-legend-dot" style="--legend-color: #2eaa74;"></span>
                        Unicas
                    </span>
                </div>

                <div class="vm-chart-scroll">
                    <div class="vm-chart-frame" style="width: {{ $chartWidth }}px;">
                        <div class="vm-chart-layout">
                            <div class="vm-chart-axis" aria-hidden="true">
                                @foreach ($chartTicks as $tick)
                                    <span>{{ number_format($tick) }}</span>
                                @endforeach
                            </div>

                            <div class="vm-chart-plot">
                                <div class="vm-chart-grid" aria-hidden="true">
                                    @foreach ($chartTicks as $tick)
                                        <span class="vm-chart-grid-line"></span>
                                    @endforeach
                                </div>

                                <div class="vm-chart-columns" style="--chart-points: {{ max(1, $daily->count()) }};">
                                    @forelse ($daily as $day)
                                        @php
                                            $visitHeight = $day['visits'] > 0 ? max(3, round($day['visits'] / $maxDaily * 100, 2)) : 0;
                                            $uniqueHeight = $day['uniques'] > 0 ? max(3, round($day['uniques'] / $maxDaily * 100, 2)) : 0;
                                        @endphp
                                        <div class="vm-chart-column" tabindex="0" aria-label="{{ $day['label'] }}: {{ $day['visits'] }} visitas e {{ $day['uniques'] }} unicas">
                                            <div class="vm-chart-tooltip">
                                                <strong>{{ $day['label'] }}</strong>
                                                {{ number_format($day['visits']) }} visitas · {{ number_format($day['uniques']) }} unicas
                                            </div>
                                            <div class="vm-chart-bar-group" aria-hidden="true">
                                                <span
                                                    class="vm-chart-bar"
                                                    style="--bar-color: #385347; --bar-min-height: {{ $day['visits'] > 0 ? '6px' : '0' }}; height: {{ $visitHeight }}%;"
                                                ></span>
                                                <span
                                                    class="vm-chart-bar"
                                                    style="--bar-color: #2eaa74; --bar-min-height: {{ $day['uniques'] > 0 ? '6px' : '0' }}; height: {{ $uniqueHeight }}%;"
                                                ></span>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="vm-empty-state" style="grid-column: 1 / -1;">Sem visitas no periodo.</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>

                        @if ($daily->isNotEmpty())
                            <div class="vm-chart-labels" style="--chart-points: {{ $daily->count() }};" aria-hidden="true">
                                @foreach ($daily as $day)
                                    <span @class(['vm-chart-label', 'is-hidden' => $loop->index % $labelEvery !== 0 && ! $loop->last])>
                                        {{ $day['label'] }}
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <section class="vm-panel" aria-labelledby="campaign-list-title">
            <header class="vm-panel-header">
                <div>
                    <h2 class="vm-panel-title" id="campaign-list-title">Campanhas no periodo</h2>
                    <p class="vm-panel-subtitle">Desempenho consolidado por campanha, fonte e meio de aquisicao.</p>
                </div>
                <span class="vm-panel-badge">{{ number_format($rows->count()) }} campanhas</span>
            </header>

            <div class="vm-data-table-wrap">
                <table class="vm-data-table">
                    <thead>
                        <tr>
                            <th>Campanha</th>
                            <th>Fonte / meio</th>
                            <th class="is-right">Visitas</th>
                            <th class="is-right">Unicas</th>
                            <th class="is-right">Visitantes</th>
                            <th class="is-right">Pedidos</th>
                            <th class="is-right">Conversão</th>
                            <th class="is-right">Pagos</th>
                            <th class="is-right">Receita líquida</th>
                            <th>Primeira</th>
                            <th>Ultima</th>
                            <th class="is-right"><span class="sr-only">Acoes</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            @php
                                $campaignName = $row['utm_campaign'] !== '' ? $row['utm_campaign'] : '(sem nome)';
                                $rate = $row['visits'] > 0 ? round(($row['uniques'] / $row['visits']) * 100, 1) : 0;
                                $campaignIds = collect($row['campaign_ids'])->take(2);
                            @endphp
                            <tr>
                                <td>
                                    <div class="vm-table-primary">{{ $campaignName }}</div>
                                    @if ($campaignIds->isNotEmpty())
                                        <div class="vm-table-muted" style="margin-top: .25rem; word-break: break-all;">
                                            ID: {{ $campaignIds->join(', ') }}@if (count($row['campaign_ids']) > 2) +{{ count($row['campaign_ids']) - 2 }}@endif
                                        </div>
                                    @endif
                                </td>
                                <td>
                                    <span class="vm-source-badge">{{ $row['utm_source'] !== '' ? $row['utm_source'] : 'direto' }}</span>
                                    @if ($row['utm_medium'])
                                        <span class="vm-table-muted" style="margin-left: .35rem;">/ {{ $row['utm_medium'] }}</span>
                                    @endif
                                </td>
                                <td class="is-right">
                                    <span class="vm-table-primary">{{ number_format($row['visits']) }}</span>
                                </td>
                                <td class="is-right">
                                    <span class="vm-table-primary" style="color: #16845b;">{{ number_format($row['uniques']) }}</span>
                                    <div class="vm-table-muted">{{ $rate }}%</div>
                                </td>
                                <td class="is-right">{{ number_format($row['visitors']) }}</td>
                                <td class="is-right">
                                    <span class="vm-table-primary">{{ number_format($row['orders']) }}</span>
                                </td>
                                <td class="is-right">{{ number_format($row['order_conversion_rate'], 1) }}%</td>
                                <td class="is-right">{{ number_format($row['paid_orders']) }}</td>
                                <td class="is-right">
                                    <span class="vm-table-primary" style="color: #16845b;">
                                        ${{ number_format($row['net_paid_revenue'], 2) }}
                                    </span>
                                </td>
                                <td class="vm-table-muted">{{ $row['first_visit'] ? \Illuminate\Support\Carbon::parse($row['first_visit'])->format('m/d/Y H:i') : '-' }}</td>
                                <td class="vm-table-muted">{{ $row['last_visit'] ? \Illuminate\Support\Carbon::parse($row['last_visit'])->format('m/d/Y H:i') : '-' }}</td>
                                <td class="is-right">
                                    <div class="flex justify-end gap-2">
                                        <x-filament::button
                                            size="xs"
                                            color="gray"
                                            tag="a"
                                            icon="heroicon-o-arrow-right"
                                            href="{{ $row['campaign_visit_id'] !== null
                                                ? \App\Filament\Pages\CampaignDetail::getUrl(['visit' => $row['campaign_visit_id'], 'dias' => $days])
                                                : \App\Filament\Pages\CampaignDetail::getUrl(['campaign' => $row['utm_campaign'], 'source' => $row['utm_source'], 'medium' => $row['utm_medium'], 'dias' => $days]) }}"
                                        >
                                            Detalhes
                                        </x-filament::button>
                                        @if ($row['campaign_visit_id'] !== null)
                                            <form
                                                method="POST"
                                                action="{{ route('admin.analytics.campaigns.destroy', ['campaignVisitId' => $row['campaign_visit_id']]) }}"
                                                onsubmit="return window.confirm('Apagar todos os dados desta campanha? Esta ação não pode ser desfeita.');"
                                            >
                                                @csrf
                                                @method('DELETE')
                                                <input type="hidden" name="days" value="{{ $days }}">
                                                <x-filament::button
                                                    type="submit"
                                                    size="xs"
                                                    color="danger"
                                                    icon="heroicon-o-trash"
                                                >
                                                    Apagar
                                                </x-filament::button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="12" class="vm-empty-state">
                                    <div class="vm-empty-title">Nenhuma campanha rastreada neste periodo</div>
                                    <div class="vm-empty-copy">Use URLs com parâmetros UTM, gclid ou fbclid.</div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</x-filament-panels::page>