@php $quality = $session_quality ?? []; @endphp

<div class="analytics-kpi-grid">
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Converted sessions</p>
        <p class="analytics-kpi__value">{{ number_format($quality['converted'] ?? 0) }}</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Abandoned sessions</p>
        <p class="analytics-kpi__value">{{ number_format($quality['abandoned'] ?? 0) }}</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Avg events / session</p>
        <p class="analytics-kpi__value">{{ number_format($quality['avg_events'] ?? 0, 1) }}</p>
    </div>
    <div class="home-seo-card analytics-kpi">
        <p class="analytics-kpi__label">Avg pages / session</p>
        <p class="analytics-kpi__value">{{ number_format($quality['avg_pages'] ?? 0, 1) }}</p>
    </div>
</div>

<section class="home-seo-card mt-4">
    <div class="seo-hub__card-head">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Duration distribution</h3>
            <p class="text-xs text-slate-500">How long sessions stay active</p>
        </div>
    </div>
    <div class="analytics-bucket-row">
        @foreach($duration_buckets ?? [] as $label => $count)
            <div class="analytics-bucket">
                <strong>{{ number_format($count) }}</strong>
                <span>{{ $label }}</span>
            </div>
        @endforeach
    </div>
</section>

<section class="home-seo-card mt-4">
    <div class="seo-hub__card-head">
        <div>
            <h3 class="text-sm font-semibold text-slate-900">Session explorer</h3>
            <p class="text-xs text-slate-500">Recent sessions with conversion / abandonment flags</p>
        </div>
    </div>
    <div class="content-table-wrap">
        <table class="content-table">
            <thead>
                <tr>
                    <th>Session</th>
                    <th>IP</th>
                    <th>Location</th>
                    <th>Device</th>
                    <th>Pages</th>
                    <th>Events</th>
                    <th>Duration</th>
                    <th>Status</th>
                    <th>Last activity</th>
                </tr>
            </thead>
            <tbody>
                @forelse($sessions_table ?? [] as $row)
                    <tr>
                        <td class="font-mono text-xs">{{ Str::limit($row->session_id, 14) }}</td>
                        <td class="font-mono text-xs">
                            @php $ip = (string) $row->ip_address; @endphp
                            {{ strlen($ip) === 64 && !str_contains($ip, '.') ? Str::limit($ip, 12).'…' : ($ip ?: '—') }}
                        </td>
                        <td>{{ collect([$row->city, $row->country])->filter()->implode(', ') ?: '—' }}</td>
                        <td class="capitalize">{{ $row->device_type ?: '—' }}</td>
                        <td>{{ number_format($row->page_views) }}</td>
                        <td>{{ number_format($row->events) }}</td>
                        <td>{{ number_format($row->duration_seconds) }}s</td>
                        <td>
                            @if($row->converted)
                                <span class="content-badge is-success">Converted</span>
                            @else
                                <span class="content-badge is-warn">Abandoned</span>
                            @endif
                        </td>
                        <td class="text-xs text-slate-500">{{ $row->ended_at ? \Illuminate\Support\Carbon::parse($row->ended_at)->diffForHumans() : '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="content-table__empty">No sessions in range.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>