@extends('admin.layout')
@section('title', 'Ziyaretçi Analizi')
@section('page-title', 'Ziyaretçi Analizi')

@push('styles')
@endpush

@section('content')
<div class="analytics-wrap">

    {{-- ═══ Toolbar ═══ --}}
    <div class="analytics-toolbar">
        <div class="range-btns">
            @foreach ([1 => 'Bugün', 7 => '7 Gün', 30 => '30 Gün', 90 => '90 Gün', 365 => '1 Yıl'] as $days => $label)
                <a href="{{ route('admin.analytics', ['range' => $days]) }}"
                   class="btn btn-sm {{ (int)$range === $days ? 'btn-dark active' : 'btn-outline-secondary' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
        <div class="live-badge">
            <span class="live-dot"></span>
            <span>Canlı: <strong>{{ $liveCount }}</strong> sayfa/5dk</span>
        </div>
    </div>

    {{-- ═══ Stat Kartları ═══ --}}
    <div class="stat-grid">
        {{-- Toplam Ziyaretçi --}}
        <div class="stat-card">
            <div class="stat-icon bg-primary-soft"><i class="bi bi-people-fill"></i></div>
            <h2>{{ number_format($summary['visitors']) }}</h2>
            <div class="stat-label">Toplam Ziyaretçi</div>
            @php $vc = $summary['visitor_change']; @endphp
            <span class="stat-change {{ $vc > 0 ? 'up' : ($vc < 0 ? 'down' : 'neutral') }}">
                {{ $vc > 0 ? '+' : '' }}{{ $vc }}%
            </span>
        </div>

        {{-- Sayfa Görüntüleme --}}
        <div class="stat-card">
            <div class="stat-icon bg-blue-soft"><i class="bi bi-eye-fill"></i></div>
            <h2>{{ number_format($summary['page_views']) }}</h2>
            <div class="stat-label">Sayfa Görüntüleme</div>
            @php $pc = $summary['pv_change']; @endphp
            <span class="stat-change {{ $pc > 0 ? 'up' : ($pc < 0 ? 'down' : 'neutral') }}">
                {{ $pc > 0 ? '+' : '' }}{{ $pc }}%
            </span>
        </div>

        {{-- Benzersiz Ziyaretçi --}}
        <div class="stat-card">
            <div class="stat-icon bg-green-soft"><i class="bi bi-person-check-fill"></i></div>
            <h2>{{ number_format($summary['unique_visitors']) }}</h2>
            <div class="stat-label">Benzersiz Ziyaretçi</div>
        </div>

        {{-- Ort. Sayfa Süresi --}}
        <div class="stat-card">
            <div class="stat-icon bg-orange-soft"><i class="bi bi-clock-fill"></i></div>
            <h2>{{ number_format($summary['avg_duration_ms']) }}<small style="font-size:.6em">ms</small></h2>
            <div class="stat-label">Ort. Yüklenme Süresi</div>
        </div>

        {{-- Bounce Rate --}}
        <div class="stat-card">
            <div class="stat-icon bg-red-soft"><i class="bi bi-box-arrow-left"></i></div>
            <h2>%{{ $summary['bounce_rate'] }}</h2>
            <div class="stat-label">Hemen Çıkma Oranı</div>
        </div>

        {{-- Sayfa / Ziyaretçi --}}
        <div class="stat-card">
            <div class="stat-icon bg-purple-soft"><i class="bi bi-layers-fill"></i></div>
            <h2>{{ $summary['pages_per_visitor'] }}</h2>
            <div class="stat-label">Sayfa / Ziyaretçi</div>
        </div>

        {{-- Bot --}}
        <div class="stat-card">
            <div class="stat-icon bg-gray-soft"><i class="bi bi-robot"></i></div>
            <h2>{{ number_format($summary['bot_count']) }}</h2>
            <div class="stat-label">Bot Ziyareti</div>
        </div>

        {{-- Hata --}}
        <div class="stat-card">
            <div class="stat-icon bg-red-soft"><i class="bi bi-exclamation-triangle-fill"></i></div>
            <h2>{{ number_format($summary['error_count']) }}</h2>
            <div class="stat-label">Hatalı İstek (4xx/5xx)</div>
        </div>
    </div>

    {{-- ═══ Günlük Grafik ═══ --}}
    <div class="analytics-card">
        <h5><i class="bi bi-graph-up"></i> Günlük Ziyaretçi & Sayfa Görüntüleme</h5>
        <div class="chart-container">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>

    {{-- ═══ Dağılım Grafikleri (Pie/Doughnut) ═══ --}}
    <div class="pie-row">
        {{-- Cihaz --}}
        <div class="analytics-card">
            <h5><i class="bi bi-phone"></i> Cihaz Dağılımı</h5>
            <div class="pie-chart-container">
                <canvas id="deviceChart"></canvas>
            </div>
        </div>

        {{-- Tarayıcı --}}
        <div class="analytics-card">
            <h5><i class="bi bi-globe2"></i> Tarayıcı Dağılımı</h5>
            <div class="pie-chart-container">
                <canvas id="browserChart"></canvas>
            </div>
        </div>

        {{-- Platform --}}
        <div class="analytics-card">
            <h5><i class="bi bi-display"></i> Platform Dağılımı</h5>
            <div class="pie-chart-container">
                <canvas id="platformChart"></canvas>
            </div>
        </div>
    </div>

    <div class="row g-3">
        {{-- ═══ En Çok Ziyaret Edilen Sayfalar ═══ --}}
        <div class="col-lg-7">
            <div class="analytics-card" style="height:100%;">
                <h5><i class="bi bi-bar-chart-line"></i> En Çok Ziyaret Edilen Sayfalar</h5>
                <div style="max-height: 400px; overflow-y: auto;">
                    <table class="analytics-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Sayfa</th>
                                <th style="text-align:right">Görüntüleme</th>
                                <th style="text-align:right">Tekil</th>
                                <th style="text-align:right">Ort. Süre</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($topPages as $i => $page)
                                <tr>
                                    <td style="font-weight:700;color:#aaa;">{{ $i + 1 }}</td>
                                    <td>
                                        <span title="{{ $page['path'] }}" style="word-break:break-all;">
                                            {{ Str::limit($page['path'], 50) }}
                                        </span>
                                    </td>
                                    <td style="text-align:right;font-weight:700;">{{ number_format($page['views']) }}</td>
                                    <td style="text-align:right;">{{ number_format($page['unique_visitors']) }}</td>
                                    <td style="text-align:right;color:#888;">
                                        {{ $page['avg_duration'] ? number_format($page['avg_duration']) . 'ms' : '—' }}
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center text-muted py-4">Henüz veri yok</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- ═══ Referrer Kaynakları ═══ --}}
        <div class="col-lg-5">
            <div class="analytics-card" style="height:100%;">
                <h5><i class="bi bi-link-45deg"></i> Trafik Kaynakları</h5>
                <div style="max-height: 400px; overflow-y: auto;">
                    <table class="analytics-table">
                        <thead>
                            <tr>
                                <th>Kaynak</th>
                                <th style="text-align:right">Ziyaretçi</th>
                                <th style="text-align:right">Oran</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $refTotal = array_sum($referrers) ?: 1; @endphp
                            @forelse ($referrers as $source => $count)
                                <tr>
                                    <td>
                                        <span style="font-weight:600;">{{ $source }}</span>
                                    </td>
                                    <td style="text-align:right;font-weight:700;">{{ number_format($count) }}</td>
                                    <td style="text-align:right;color:#888;">
                                        %{{ number_format(($count / $refTotal) * 100, 1) }}
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="text-center text-muted py-4">Referrer verisi yok</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══ Saatlik Yoğunluk Haritası ═══ --}}
    <div class="analytics-card mt-3">
        <h5><i class="bi bi-calendar3"></i> Saatlik Yoğunluk Haritası</h5>
        @php
            $dayNames = [1 => 'Paz', 2 => 'Pzt', 3 => 'Sal', 4 => 'Çar', 5 => 'Per', 6 => 'Cum', 7 => 'Cmt'];
            $maxVal = 1;
            foreach ($hourlyHeatmap as $dow => $hours) {
                foreach ($hours as $val) {
                    if ($val > $maxVal) $maxVal = $val;
                }
            }
        @endphp
        <div style="overflow-x:auto;">
            <div class="heatmap-grid">
                {{-- Saat başlıkları --}}
                <div></div>
                @for ($h = 0; $h < 24; $h++)
                    <div class="heatmap-hour-label">{{ str_pad($h, 2, '0', STR_PAD_LEFT) }}</div>
                @endfor

                {{-- Günler --}}
                @foreach ($dayNames as $dow => $dayName)
                    <div class="heatmap-label">{{ $dayName }}</div>
                    @for ($h = 0; $h < 24; $h++)
                        @php
                            $val = $hourlyHeatmap[$dow][$h] ?? 0;
                            $intensity = $maxVal > 0 ? $val / $maxVal : 0;
                            // Renk: beyazdan koyu yeşile
                            $r = (int)(255 - ($intensity * 200));
                            $g = (int)(255 - ($intensity * 100));
                            $b = (int)(255 - ($intensity * 200));
                            $bg = $val > 0 ? "rgb($r,$g,$b)" : '#f5f5f5';
                            $textColor = $intensity > 0.5 ? '#fff' : '#999';
                        @endphp
                        <div class="heatmap-cell" style="background:{{ $bg }};color:{{ $textColor }};"
                             title="{{ $dayName }} {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00 → {{ $val }} görüntüleme">
                            {{ $val > 0 ? $val : '' }}
                        </div>
                    @endfor
                @endforeach
            </div>
        </div>
    </div>

    {{-- ═══ Son Ziyaretçiler ═══ --}}
    <div class="analytics-card mt-3">
        <h5><i class="bi bi-person-lines-fill"></i> Son Ziyaretçiler</h5>
        <div style="max-height: 450px; overflow-y: auto;">
            <table class="analytics-table">
                <thead>
                    <tr>
                        <th>Ziyaretçi</th>
                        <th>Cihaz</th>
                        <th>Platform</th>
                        <th>Tarayıcı</th>
                        <th>Giriş Sayfası</th>
                        <th>Sayfa</th>
                        <th>Zaman</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentVisitors as $v)
                        <tr>
                            <td>
                                <div style="font-weight:600;font-size:.8rem;">{{ $v->ip ?? '—' }}</div>
                                @if ($v->referer)
                                    <div style="font-size:.72rem;color:#aaa;" title="{{ $v->referer }}">
                                        {{ Str::limit($v->referer, 30) }}
                                    </div>
                                @endif
                            </td>
                            <td>
                                <span class="visitor-device {{ $v->device }}">
                                    {{ ucfirst($v->device) }}
                                </span>
                            </td>
                            <td style="font-size:.82rem;">{{ $v->platform ?? '—' }}</td>
                            <td style="font-size:.82rem;">{{ $v->browser ?? '—' }}</td>
                            <td style="font-size:.78rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                                title="{{ $v->landing_url }}">
                                {{ Str::limit($v->landing_url, 35) }}
                            </td>
                            <td style="text-align:center;font-weight:700;">{{ $v->total_page_views }}</td>
                            <td style="font-size:.78rem;color:#888;white-space:nowrap;">
                                {{ $v->created_at->diffForHumans() }}
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="text-center text-muted py-4">Henüz ziyaretçi yok</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    const chartColors = {
        primary: '#0f5a4f',
        blue:    '#0d6efd',
        green:   '#4caf50',
        orange:  '#ff9800',
        red:     '#f44336',
        purple:  '#9c27b0',
        teal:    '#009688',
        pink:    '#e91e63',
        gray:    '#6c757d',
    };

    const pieColors = [
        '#0f5a4f', '#0d6efd', '#ff9800', '#4caf50', '#e91e63',
        '#9c27b0', '#009688', '#f44336', '#6c757d', '#795548',
    ];

    // ─── Günlük Grafik ───
    const dailyCtx = document.getElementById('dailyChart');
    if (dailyCtx) {
        new Chart(dailyCtx, {
            type: 'line',
            data: {
                labels: @json($dailyChart['labels']),
                datasets: [
                    {
                        label: 'Ziyaretçi',
                        data: @json($dailyChart['visitors']),
                        borderColor: chartColors.primary,
                        backgroundColor: chartColors.primary + '18',
                        fill: true,
                        tension: 0.35,
                        borderWidth: 2.5,
                        pointRadius: 3,
                        pointHoverRadius: 6,
                    },
                    {
                        label: 'Sayfa Görüntüleme',
                        data: @json($dailyChart['page_views']),
                        borderColor: chartColors.blue,
                        backgroundColor: chartColors.blue + '12',
                        fill: true,
                        tension: 0.35,
                        borderWidth: 2,
                        pointRadius: 2,
                        pointHoverRadius: 5,
                        borderDash: [5, 3],
                    },
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'top', labels: { usePointStyle: true, padding: 16 } },
                    tooltip: { padding: 12, cornerRadius: 8 },
                },
                scales: {
                    x: { grid: { display: false } },
                    y: { beginAtZero: true, grid: { color: '#f0f0f0' } },
                },
            }
        });
    }

    // ─── Doughnut Grafik Helper ───
    function createDoughnut(canvasId, dataObj) {
        const ctx = document.getElementById(canvasId);
        if (!ctx) return;
        const labels = Object.keys(dataObj);
        const values = Object.values(dataObj);
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: pieColors.slice(0, labels.length),
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '60%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { usePointStyle: true, padding: 12, font: { size: 12 } },
                    },
                },
            },
        });
    }

    createDoughnut('deviceChart', @json($devices));
    createDoughnut('browserChart', @json($browsers));
    createDoughnut('platformChart', @json($platforms));

});
</script>
@endpush