@extends('admin.layouts.app')
@section('title', 'Analitik')
@section('page-title', 'Kullanıcı Analitikleri')

@push('styles')
<style>
.period-btn { padding: 6px 18px; border-radius: 99px; border: 1px solid var(--border2); background: transparent; color: var(--text2); font-size: 0.82rem; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; font-weight:600; }
.period-btn.active, .period-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.an-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.an-card .val { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); letter-spacing:-0.5px; }
.an-card .lbl { font-size: 0.78rem; color: var(--text2); margin-top: 4px; font-weight:600; }
.an-card .ico { font-size: 1.8rem; opacity: 0.5; }
.an-card .delta { font-size: 0.72rem; font-weight: 600; margin-top: 6px; }
.delta-up   { color: var(--success); }
.delta-down { color: var(--danger); }

.chart-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.chart-card .chart-title { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.chart-wrap { position: relative; }

.geo-flag { font-size: 1.1rem; }
.pbar-wrap { height: 6px; background: var(--surface); border-radius: 3px; flex: 1; }
.pbar-fill  { height: 100%; background: linear-gradient(90deg,var(--accent),var(--accent-lt)); border-radius: 3px; transition: width .4s; }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; animation: blink 1.2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.tbl-sm th { font-size: 0.73rem; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; }
.tbl-sm td { font-size: 0.84rem; padding: 8px 10px; vertical-align: middle; border-top: 1px solid var(--border); color: var(--text); }
.tbl-sm tr:first-child td { border-top: none; }

.badge-type { font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; }
.badge-home      { background: rgba(6,182,212,0.12); color: var(--info); }
.badge-anime     { background: rgba(16,185,129,0.12); color: var(--success); }
.badge-player    { background: rgba(124,58,237,0.12); color: var(--accent-lt); }
.badge-search    { background: rgba(245,158,11,0.12); color: var(--warning); }
.badge-ai        { background: rgba(124,58,237,0.12); color: var(--accent-lt); }
.badge-genre     { background: rgba(6,182,212,0.12); color: var(--info); }
.badge-other     { background: rgba(255,255,255,0.06); color: var(--text2); }

.pct-pill { font-size: 0.7rem; padding: 1px 7px; border-radius: 10px; }
.pct-high   { background: var(--success); color: #fff; }
.pct-mid    { background: var(--warning); color: #000; }
.pct-low    { background: var(--surface); color: var(--text2); }

.ai-q-text { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--text2); }

.section-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .7px; color: var(--text2); font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
</style>
@endpush

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

{{-- Period seçici --}}
<div class="d-flex align-items-center gap-2 mb-4 flex-wrap">
    <span class="text-muted me-1" style="font-size:.82rem">Dönem:</span>
    @foreach(['today'=>'Bugün','7d'=>'7 Gün','30d'=>'30 Gün','90d'=>'90 Gün'] as $key=>$lbl)
        <a href="{{ route('admin.analytics.index', ['period'=>$key]) }}"
           class="period-btn {{ $period===$key ? 'active' : '' }}">{{ $lbl }}</a>
    @endforeach
    <span class="ms-auto text-muted" style="font-size:.75rem">
        <span class="live-dot me-1"></span> Canlı — Son güncelleme: {{ now()->format('H:i') }}
    </span>
</div>

{{-- Özet kartlar --}}
<div class="row g-3 mb-4">
    <div class="col-6 col-sm-4 col-lg">
        <div class="an-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($totalViews) }}</div>
                    <div class="lbl">Sayfa Görüntüleme</div>
                    @if($period === '7d' || $period === 'today')
                    <div class="delta {{ $viewsDelta >= 0 ? 'delta-up' : 'delta-down' }}">
                        <i class="bi bi-arrow-{{ $viewsDelta >= 0 ? 'up' : 'down' }}"></i>
                        {{ abs($viewsDelta) }}% dünden
                    </div>
                    @endif
                </div>
                <i class="bi bi-eye ico text-info"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="an-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($uniqueVisitors) }}</div>
                    <div class="lbl">Tekil Ziyaretçi</div>
                </div>
                <i class="bi bi-people ico text-success"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="an-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    @php
                        $wh = floor($watchSeconds / 3600);
                        $wm = floor(($watchSeconds % 3600) / 60);
                    @endphp
                    <div class="val">{{ $wh > 0 ? $wh.'s' : $wm.'d' }}</div>
                    <div class="lbl">Toplam İzleme Süresi</div>
                    <div class="delta" style="color:var(--text2)">{{ number_format($watchSeconds/3600, 1) }} saat</div>
                </div>
                <i class="bi bi-play-circle ico" style="color:#a371f7"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="an-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($aiTotal) }}</div>
                    <div class="lbl">AI Sorgusu</div>
                </div>
                <i class="bi bi-stars ico" style="color:#e8393c"></i>
            </div>
        </div>
    </div>
    <div class="col-6 col-sm-4 col-lg">
        <div class="an-card h-100">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <div class="val">{{ number_format($newUsers) }}</div>
                    <div class="lbl">Yeni Kayıt</div>
                </div>
                <i class="bi bi-person-plus ico" style="color:#f0883e"></i>
            </div>
        </div>
    </div>
</div>

{{-- Görüntüleme trendi + Cihaz dağılımı --}}
<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="chart-card h-100">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <div class="chart-title mb-0">Görüntüleme ve İzleme Trendi</div>
                <div class="d-flex gap-3" style="font-size:.72rem;color:var(--text2)">
                    <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--accent);margin-right:4px"></span>Görüntüleme</span>
                    <span><span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#a371f7;margin-right:4px"></span>İzleme (saat)</span>
                </div>
            </div>
            <div class="chart-wrap" style="height:220px">
                <canvas id="trendChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="chart-card h-100">
            <div class="chart-title">Cihaz Dağılımı</div>
            <div class="chart-wrap" style="height:160px;display:flex;align-items:center;justify-content:center">
                <canvas id="deviceChart"></canvas>
            </div>
            <div class="mt-3">
                @php $deviceTotal = $deviceStats->sum(); @endphp
                @foreach(['mobile'=>['bi-phone','var(--accent)'],'desktop'=>['bi-laptop','var(--success)'],'tablet'=>['bi-tablet','#79c0ff']] as $dv=>[$ico,$col])
                    @if(($cnt=$deviceStats[$dv]??0) > 0)
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi {{ $ico }}" style="color:{{ $col }};width:16px"></i>
                        <span style="font-size:.82rem;width:60px">{{ ucfirst($dv) }}</span>
                        <div class="pbar-wrap"><div class="pbar-fill" style="width:{{ $deviceTotal>0?round($cnt/$deviceTotal*100):0 }}%;background:{{ $col }}"></div></div>
                        <span style="font-size:.78rem;color:var(--text2);width:40px;text-align:right">{{ number_format($cnt) }}</span>
                    </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- Top anime + AI sorgular --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="chart-card h-100">
            <div class="chart-title">En Çok İzlenen 10 Anime</div>
            @if($topAnimes->count())
            @php $maxV = $topAnimes->max('views') ?: 1; @endphp
            @foreach($topAnimes as $i => $a)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="font-size:.72rem;color:var(--text2);width:16px;text-align:right">{{ $i+1 }}</span>
                <span style="font-size:.84rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $a['title'] }}</span>
                <div class="pbar-wrap" style="width:120px"><div class="pbar-fill" style="width:{{ round($a['views']/$maxV*100) }}%"></div></div>
                <span style="font-size:.78rem;color:var(--text2);width:42px;text-align:right">{{ number_format($a['views']) }}</span>
            </div>
            @endforeach
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Bu dönemde veri yok</div>
            @endif
        </div>
    </div>
    <div class="col-lg-5">
        <div class="chart-card h-100">
            <div class="chart-title">AI Sorgu Türleri</div>
            <div class="chart-wrap" style="height:160px;display:flex;align-items:center;justify-content:center">
                <canvas id="aiChart"></canvas>
            </div>
            @php
                $aiLabels = ['chat'=>'Sohbet','recommend'=>'Öneri','search'=>'Arama','episode_info'=>'Bölüm Analiz','similar'=>'Benzer'];
                $aiColors = ['chat'=>'var(--accent)','recommend'=>'#a371f7','search'=>'var(--success)','episode_info'=>'#f0883e','similar'=>'#79c0ff'];
                $aiTotalQ = $aiByType->sum();
            @endphp
            <div class="mt-3">
                @foreach($aiByType->sortDesc() as $type => $cnt)
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $aiColors[$type]??'var(--text2)' }}"></span>
                    <span style="font-size:.82rem;flex:1">{{ $aiLabels[$type]??$type }}</span>
                    <span style="font-size:.78rem;color:var(--text2)">{{ number_format($cnt) }}</span>
                    <span style="font-size:.72rem;color:#6e7681">{{ $aiTotalQ>0?round($cnt/$aiTotalQ*100):0 }}%</span>
                </div>
                @endforeach
                @if($aiByType->isEmpty())
                <div class="text-muted text-center py-2" style="font-size:.82rem">Bu dönemde AI sorgusu yok</div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Saatlik dağılım --}}
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="chart-card">
            <div class="chart-title">Bugünkü Saatlik Görüntüleme Dağılımı</div>
            <div class="chart-wrap" style="height:130px">
                <canvas id="hourlyChart"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- Top bölümler + Coğrafi --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="chart-card h-100">
            <div class="section-head">En Çok İzlenen Bölümler (İzleme Süresi)</div>
            @if($topEpisodes->count())
            <table class="table mb-0 tbl-sm" style="color:#c9d1d9">
                <thead><tr>
                    <th>Anime</th><th>Bölüm</th><th>Oynatma</th><th>Süre</th><th>Ort. %</th>
                </tr></thead>
                <tbody>
                @foreach($topEpisodes as $ep)
                <tr>
                    <td style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $ep['anime'] }}</td>
                    <td><span class="badge" style="background:var(--border);color:#c9d1d9">{{ $ep['label'] }}</span></td>
                    <td>{{ number_format($ep['plays']) }}</td>
                    <td>{{ $ep['hours'] }} s</td>
                    <td>
                        @php $pct=$ep['avg_pct']??0; @endphp
                        <span class="pct-pill {{ $pct>=70?'pct-high':($pct>=40?'pct-mid':'pct-low') }}">%{{ $pct }}</span>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Bu dönemde izleme verisi yok</div>
            @endif
        </div>
    </div>
    <div class="col-lg-5">
        <div class="chart-card h-100">
            <div class="section-head">Coğrafi Dağılım (Şehir)</div>
            @if($geoStats->count())
            @php $maxGeo = $geoStats->max('cnt') ?: 1; @endphp
            @foreach($geoStats as $g)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="font-size:.82rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                    {{ $g->city }}
                    <span style="color:var(--text2);font-size:.75rem"> · {{ $g->country }}</span>
                </span>
                <div class="pbar-wrap" style="width:80px"><div class="pbar-fill" style="width:{{ round($g->cnt/$maxGeo*100) }}%"></div></div>
                <span style="font-size:.75rem;color:var(--text2);width:32px;text-align:right">{{ $g->cnt }}</span>
            </div>
            @endforeach
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Coğrafi veri yok (IP geolocation bekliyor)</div>
            @endif
        </div>
    </div>
</div>

{{-- En aktif kullanıcılar + AI top sorular --}}
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="chart-card h-100">
            <div class="section-head">En Aktif Kullanıcılar</div>
            @if($activeUsers->count())
            <table class="table mb-0 tbl-sm" style="color:#c9d1d9">
                <thead><tr>
                    <th>#</th><th>Kullanıcı</th><th>Görüntüleme</th><th>Aktif Gün</th>
                </tr></thead>
                <tbody>
                @foreach($activeUsers as $i => $au)
                <tr>
                    <td style="color:var(--text2)">{{ $i+1 }}</td>
                    <td>
                        <div style="font-size:.83rem">{{ $au['user']->name }}</div>
                        <div style="font-size:.72rem;color:var(--text2)">{{ $au['user']->email }}</div>
                    </td>
                    <td>{{ number_format($au['views']) }}</td>
                    <td>{{ $au['days'] }} gün</td>
                </tr>
                @endforeach
                </tbody>
            </table>
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Bu dönemde giriş yapan kullanıcı yok</div>
            @endif
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card h-100">
            <div class="section-head">Popüler AI Soruları (Sohbet)</div>
            @if($aiTopQuestions->count())
            @foreach($aiTopQuestions as $q)
            <div class="d-flex align-items-start gap-2 mb-3">
                <i class="bi bi-chat-right-text" style="color:var(--accent);margin-top:2px;flex-shrink:0"></i>
                <div class="flex-1" style="flex:1">
                    <div class="ai-q-text" title="{{ $q->query_text }}">{{ $q->query_text }}</div>
                    <div style="font-size:.7rem;color:var(--text2);margin-top:2px">{{ $q->cnt }} kez soruldu</div>
                </div>
            </div>
            @endforeach
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Bu dönemde chat sorusu yok</div>
            @endif

            @if($aiTopUsers->count())
            <div class="section-head mt-3">AI'ı En Çok Kullananlar</div>
            @foreach($aiTopUsers as $au)
            <div class="d-flex align-items-center justify-content-between mb-2" style="font-size:.83rem">
                <span>{{ $au['name'] }}</span>
                <span class="badge" style="background:var(--border);color:#a371f7">{{ $au['cnt'] }} sorgu</span>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</div>

{{-- Sayfa türleri + Tarayıcılar --}}
<div class="row g-3 mb-4">
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="section-head">Sayfa Türü Dağılımı</div>
            @php
                $ptLabels = ['home'=>'Ana Sayfa','anime'=>'Anime Detay','player'=>'Video Player','search'=>'Arama','ai'=>'AI Hub','genre'=>'Tür','other'=>'Diğer'];
                $ptColors = ['home'=>'#79c0ff','anime'=>'var(--success)','player'=>'#a371f7','search'=>'#f0883e','ai'=>'var(--accent)','genre'=>'#ffa657','other'=>'#6e7681'];
                $ptTotal = $pageTypeStats->sum();
            @endphp
            <div class="row">
                @foreach($pageTypeStats->sortDesc() as $pt => $cnt)
                <div class="col-6 mb-3">
                    <div class="d-flex align-items-center gap-2">
                        <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:{{ $ptColors[$pt]??'var(--text2)' }};flex-shrink:0"></span>
                        <span style="font-size:.82rem;flex:1">{{ $ptLabels[$pt]??$pt }}</span>
                        <span style="font-size:.78rem;color:var(--text2)">{{ number_format($cnt) }}</span>
                    </div>
                    <div class="pbar-wrap mt-1"><div class="pbar-fill" style="width:{{ $ptTotal>0?round($cnt/$ptTotal*100):0 }}%;background:{{ $ptColors[$pt]??'var(--text2)' }}"></div></div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="section-head">Tarayıcı Dağılımı</div>
            @php $brTotal = $browserStats->sum(); @endphp
            @foreach($browserStats->sortDesc()->take(6) as $br => $cnt)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="font-size:.82rem;width:80px">{{ $br ?: 'Diğer' }}</span>
                <div class="pbar-wrap"><div class="pbar-fill" style="width:{{ $brTotal>0?round($cnt/$brTotal*100):0 }}%;background:var(--accent)"></div></div>
                <span style="font-size:.78rem;color:var(--text2);width:40px;text-align:right">{{ number_format($cnt) }}</span>
                <span style="font-size:.72rem;color:#6e7681;width:32px;text-align:right">{{ $brTotal>0?round($cnt/$brTotal*100):0 }}%</span>
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Trafik Kaynakları --}}
<div class="row g-3 mb-4">
    <div class="col-lg-7">
        <div class="chart-card h-100">
            <div class="section-head">Trafik Kaynakları (Referrer)</div>
            @php
                $refTotal = $referrerStats->sum() + $directTraffic;
                $allSources = collect(['Direkt / Boş' => $directTraffic])->merge($referrerStats)->sortDesc();
                $srcColors = ['Direkt / Boş'=>'var(--text2)'];
                $palette = ['var(--accent)','var(--success)','#79c0ff','#f0883e','#a371f7','#ffa657','#58a6ff','#7ee787','#ff7bc6','#d2a8ff','#ffa198','#56d364'];
                $pi = 0;
                foreach($referrerStats->keys() as $k) { $srcColors[$k] = $palette[$pi % count($palette)]; $pi++; }
            @endphp
            @if($allSources->sum() > 0)
            @foreach($allSources->take(12) as $src => $cnt)
            <div class="d-flex align-items-center gap-2 mb-2">
                <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:{{ $srcColors[$src]??'var(--text2)' }};flex-shrink:0"></span>
                <span style="font-size:.82rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $src }}">
                    @if($src === 'Direkt / Boş')
                        <i class="bi bi-link-45deg me-1" style="color:var(--text2)"></i>{{ $src }}
                    @else
                        <i class="bi bi-globe2 me-1" style="color:{{ $srcColors[$src]??'var(--text2)' }}"></i>{{ $src }}
                    @endif
                </span>
                <div class="pbar-wrap" style="width:100px"><div class="pbar-fill" style="width:{{ $refTotal>0?round($cnt/$refTotal*100):0 }}%;background:{{ $srcColors[$src]??'var(--text2)' }}"></div></div>
                <span style="font-size:.78rem;color:var(--text2);width:38px;text-align:right">{{ number_format($cnt) }}</span>
                <span style="font-size:.72rem;color:#6e7681;width:30px;text-align:right">{{ $refTotal>0?round($cnt/$refTotal*100):0 }}%</span>
            </div>
            @endforeach
            @else
            <div class="text-muted text-center py-4" style="font-size:.85rem">Bu dönemde referrer verisi yok</div>
            @endif
        </div>
    </div>
    <div class="col-lg-5">
        <div class="chart-card h-100">
            <div class="section-head">Kaynak Dağılımı</div>
            <div class="chart-wrap" style="height:180px;display:flex;align-items:center;justify-content:center">
                <canvas id="referrerChart"></canvas>
            </div>
            <div class="mt-3 text-center">
                <div style="font-size:.78rem;color:var(--text2)">
                    Toplam kayıtlı trafik: <strong style="color:var(--text)">{{ number_format($refTotal) }}</strong>
                </div>
                <div style="font-size:.75rem;color:#6e7681;margin-top:4px">
                    Direkt: {{ $refTotal>0?round($directTraffic/$refTotal*100):0 }}% · Referral: {{ $refTotal>0?round($referrerStats->sum()/$refTotal*100):0 }}%
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Son aktiviteler (canlı akış) --}}
<div class="chart-card mb-4">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="section-head mb-0">Son Sayfa Görüntülemeleri</div>
        <span class="live-dot"></span>
    </div>
    <table class="table mb-0 tbl-sm" style="color:#c9d1d9">
        <thead><tr>
            <th>Zaman</th><th>Kullanıcı</th><th>Sayfa Türü</th><th>URL</th><th>Şehir</th><th>Cihaz</th>
        </tr></thead>
        <tbody>
        @forelse($recentViews as $rv)
        <tr>
            <td style="white-space:nowrap;color:var(--text2);font-size:.75rem">{{ $rv->created_at->diffForHumans() }}</td>
            <td>
                @if($rv->user)
                    <span style="font-size:.82rem">{{ $rv->user->name }}</span>
                @else
                    <span style="color:#6e7681;font-size:.78rem">Misafir</span>
                @endif
            </td>
            <td><span class="badge-type badge-{{ $rv->page_type }}">{{ $rv->page_type }}</span></td>
            <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:var(--text2)" title="{{ $rv->url }}">{{ $rv->url }}</td>
            <td style="font-size:.78rem">{{ $rv->city ?: '—' }}</td>
            <td><i class="bi bi-{{ match($rv->device){'mobile'=>'phone','tablet'=>'tablet',default=>'laptop'} }}" style="color:var(--text2)"></i></td>
        </tr>
        @empty
        <tr><td colspan="6" class="text-center text-muted py-4" style="font-size:.85rem">Bu dönemde görüntüleme yok</td></tr>
        @endforelse
        </tbody>
    </table>
</div>

{{-- ── BOT TRAFİK PANELİ ─────────────────────────────────────────────────── --}}
<div class="an-card mt-4">
  <div class="section-head" style="display:flex;align-items:center;justify-content:space-between">
    <span>🤖 Bot & Güvenlik</span>
    <span style="font-size:.78rem;color:var(--text2)">Son dönem</span>
  </div>

  {{-- Bot özet kartları --}}
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px">
    <div class="an-card" style="text-align:center">
      <div style="font-size:1.6rem;font-weight:800;color:var(--danger)">{{ number_format($botViews) }}</div>
      <div style="font-size:.78rem;color:var(--text2)">Bot İsteği</div>
    </div>
    <div class="an-card" style="text-align:center">
      <div style="font-size:1.6rem;font-weight:800;color:var(--success)">{{ number_format($humanViews) }}</div>
      <div style="font-size:.78rem;color:var(--text2)">İnsan İsteği</div>
    </div>
    <div class="an-card" style="text-align:center">
      <div style="font-size:1.6rem;font-weight:800;color:{{ ($botRatio ?? 0) > 50 ? 'var(--danger)' : '#d29922' }}">{{ $botRatio ?? 0 }}%</div>
      <div style="font-size:.78rem;color:var(--text2)">Bot Oranı</div>
    </div>
    <div class="an-card" style="text-align:center">
      <div style="font-size:1.6rem;font-weight:800;color:var(--info)">{{ $blockedIps->count() }}</div>
      <div style="font-size:.78rem;color:var(--text2)">Engelli IP</div>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">

    {{-- En çok vuran botlar --}}
    <div>
      <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:10px">Top Bot IP'leri</div>
      <table class="table table-sm" style="font-size:.78rem">
        <thead><tr><th>IP</th><th>İstek</th><th>Durum</th><th></th></tr></thead>
        <tbody>
        @forelse($botTopIps as $b)
        <tr>
          <td><code style="color:var(--info);font-size:.75rem">{{ $b->ip }}</code></td>
          <td>{{ number_format($b->cnt) }}</td>
          <td>
            <span style="font-size:.7rem;padding:2px 7px;border-radius:4px;background:{{ $b->action === 'blocked' ? 'rgba(248,81,73,.15)' : 'rgba(63,185,80,.15)' }};color:{{ $b->action === 'blocked' ? 'var(--danger)' : 'var(--success)' }}">
              {{ $b->action }}
            </span>
          </td>
          <td>
            <form method="POST" action="{{ route('admin.analytics.block-ip') }}" style="display:inline">
              @csrf
              <input type="hidden" name="ip" value="{{ $b->ip }}">
              <input type="hidden" name="reason" value="Admin: bot trafiği">
              <button type="submit" class="btn btn-sm" style="padding:1px 8px;font-size:.7rem;background:rgba(248,81,73,.15);border:1px solid rgba(248,81,73,.3);color:var(--danger);border-radius:4px">Engelle</button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="4" class="text-muted text-center py-3">Bot logu yok</td></tr>
        @endforelse
        </tbody>
      </table>
    </div>

    {{-- Bot türleri --}}
    <div>
      <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:10px">Bot Türleri</div>
      <table class="table table-sm" style="font-size:.78rem">
        <thead><tr><th>Bot</th><th>İstek</th><th>Durum</th></tr></thead>
        <tbody>
        @forelse($botByName as $b)
        <tr>
          <td style="max-width:150px;overflow:hidden;text-overflow:ellipsis">{{ $b->bot_name ?: '—' }}</td>
          <td>{{ number_format($b->cnt) }}</td>
          <td>
            <span style="font-size:.7rem;padding:2px 7px;border-radius:4px;background:{{ $b->action === 'blocked' ? 'rgba(248,81,73,.15)' : 'rgba(210,153,34,.15)' }};color:{{ $b->action === 'blocked' ? 'var(--danger)' : '#d29922' }}">
              {{ $b->action }}
            </span>
          </td>
        </tr>
        @empty
        <tr><td colspan="3" class="text-muted text-center py-3">Kayıt yok</td></tr>
        @endforelse
        </tbody>
      </table>
    </div>
  </div>

  {{-- Manuel IP Engelleme --}}
  <div style="margin-top:20px;border-top:1px solid var(--border);padding-top:16px">
    <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:10px">Manuel IP Engelle</div>
    <form method="POST" action="{{ route('admin.analytics.block-ip') }}" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
      @csrf
      <div>
        <label style="font-size:.75rem;color:var(--text2);display:block;margin-bottom:4px">IP Adresi</label>
        <input type="text" name="ip" class="form-control form-control-sm" placeholder="1.2.3.4" style="width:160px">
      </div>
      <div>
        <label style="font-size:.75rem;color:var(--text2);display:block;margin-bottom:4px">Sebep</label>
        <input type="text" name="reason" class="form-control form-control-sm" placeholder="Manuel engel" style="width:200px">
      </div>
      <div>
        <label style="font-size:.75rem;color:var(--text2);display:block;margin-bottom:4px">Bitiş (boşsa kalıcı)</label>
        <input type="date" name="expires_at" class="form-control form-control-sm" style="width:150px">
      </div>
      <button type="submit" class="btn btn-sm" style="background:rgba(248,81,73,.2);border:1px solid rgba(248,81,73,.4);color:var(--danger);border-radius:6px">Engelle</button>
    </form>
  </div>

  {{-- Engelli IP listesi --}}
  @if($blockedIps->count())
  <div style="margin-top:16px">
    <div style="font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:8px">Aktif Engeller</div>
    <table class="table table-sm" style="font-size:.78rem">
      <thead><tr><th>IP</th><th>Sebep</th><th>Tür</th><th>Bitiş</th><th></th></tr></thead>
      <tbody>
      @foreach($blockedIps as $bi)
      <tr>
        <td><code style="color:var(--danger);font-size:.75rem">{{ $bi->ip }}</code></td>
        <td>{{ $bi->reason ?: '—' }}</td>
        <td><span style="font-size:.7rem;color:{{ $bi->auto_blocked ? '#d29922' : 'var(--text2)' }}">{{ $bi->auto_blocked ? 'Otomatik' : 'Manuel' }}</span></td>
        <td style="font-size:.75rem;color:var(--text2)">{{ $bi->expires_at ? \Carbon\Carbon::parse($bi->expires_at)->diffForHumans() : 'Kalıcı' }}</td>
        <td>
          <form method="POST" action="{{ route('admin.analytics.unblock-ip') }}" style="display:inline">
            @csrf
            <input type="hidden" name="ip" value="{{ $bi->ip }}">
            <button type="submit" class="btn btn-sm" style="padding:1px 8px;font-size:.7rem;background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.3);color:var(--success);border-radius:4px">Kaldır</button>
          </form>
        </td>
      </tr>
      @endforeach
      </tbody>
    </table>
  </div>
  @endif
</div>

{{-- ── OTURUM DETAYLARI ────────────────────────────────────────────────────── --}}
<div class="an-card mt-4">
  <div class="section-head" style="display:flex;align-items:center;justify-content:space-between">
    <span>📊 Oturum Analizi</span>
    <div style="display:flex;gap:16px;font-size:.82rem">
      <span>Ort. Süre: <strong style="color:var(--info)">{{ gmdate('i:s', $avgSessionTime) }}</strong></span>
      <span>Ort. Sayfa: <strong style="color:var(--info)">{{ $avgPages }}</strong></span>
    </div>
  </div>
  <table class="table table-sm" style="font-size:.78rem">
    <thead>
      <tr>
        <th>IP</th><th>Ülke</th><th>Cihaz</th><th>Tarayıcı</th>
        <th>Sayfalar</th><th>Süre</th><th>Kaynak</th><th>Bot?</th><th>Başlangıç</th>
      </tr>
    </thead>
    <tbody>
    @forelse($sessions as $s)
    <tr style="{{ $s->is_bot ? 'opacity:.5' : '' }}">
      <td><code style="font-size:.72rem;color:var(--info)">{{ $s->ip }}</code></td>
      <td>{{ $s->country ?: '—' }}</td>
      <td><i class="bi bi-{{ match($s->device ?? ''){  'mobile'=>'phone','tablet'=>'tablet',default=>'laptop'} }}"></i></td>
      <td>{{ $s->browser ?: '—' }}</td>
      <td>{{ $s->pages_visited }}</td>
      <td>{{ gmdate('i:s', $s->total_seconds) }}</td>
      <td style="max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ $s->referrer }}">{{ $s->referrer ? parse_url($s->referrer, PHP_URL_HOST) : 'Direkt' }}</td>
      <td>
        @if($s->is_bot)
        <span style="font-size:.7rem;color:var(--danger)">{{ $s->bot_type }}</span>
        @else
        <span style="font-size:.7rem;color:var(--success)">İnsan</span>
        @endif
      </td>
      <td style="color:var(--text2)">{{ \Carbon\Carbon::parse($s->started_at)->diffForHumans() }}</td>
    </tr>
    @empty
    <tr><td colspan="9" class="text-center text-muted py-4">Oturum kaydı yok</td></tr>
    @endforelse
    </tbody>
  </table>
</div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
Chart.defaults.color = 'var(--text2)';
Chart.defaults.borderColor = 'var(--border)';

// ── Trend grafiği ────────────────────────────────────────────────────────────
new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
        labels: @json($trendLabels),
        datasets: [
            {
                label: 'Görüntüleme',
                data: @json($trendData),
                borderColor: 'var(--accent)',
                backgroundColor: 'rgba(232,67,147,.08)',
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointBackgroundColor: 'var(--accent)',
                yAxisID: 'y',
            },
            {
                label: 'İzleme (saat)',
                data: @json($watchTrendData),
                borderColor: '#a371f7',
                backgroundColor: 'rgba(163,113,247,.08)',
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointBackgroundColor: '#a371f7',
                yAxisID: 'y1',
            }
        ]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { color: 'var(--border)' }, ticks: { maxTicksLimit: 12, font: { size: 10 } } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
            y1: { position: 'right', grid: { display: false }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});

// ── Cihaz pasta grafiği ──────────────────────────────────────────────────────
@php
    $dvKeys = ['mobile','desktop','tablet','unknown'];
    $dvData = array_map(fn($k) => $deviceStats[$k] ?? 0, $dvKeys);
@endphp
new Chart(document.getElementById('deviceChart'), {
    type: 'doughnut',
    data: {
        labels: ['Mobil', 'Masaüstü', 'Tablet', 'Diğer'],
        datasets: [{
            data: @json($dvData),
            backgroundColor: ['var(--accent)','var(--success)','#79c0ff','#6e7681'],
            borderWidth: 0,
            hoverOffset: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { callbacks: {
            label: ctx => ` ${ctx.label}: ${ctx.parsed.toLocaleString()}`
        }}}
    }
});

// ── AI sorgu türleri grafiği ─────────────────────────────────────────────────
@php
    $aiK = $aiByType->keys()->toArray();
    $aiV = $aiByType->values()->toArray();
    $aiColorMap = ['chat'=>'var(--accent)','recommend'=>'#a371f7','search'=>'var(--success)','episode_info'=>'#f0883e','similar'=>'#79c0ff'];
    $aiC = array_map(fn($k) => $aiColorMap[$k] ?? 'var(--text2)', $aiK);
    $aiLabelMap = ['chat'=>'Sohbet','recommend'=>'Öneri','search'=>'Arama','episode_info'=>'Bölüm','similar'=>'Benzer'];
    $aiL = array_map(fn($k) => $aiLabelMap[$k] ?? $k, $aiK);
@endphp
new Chart(document.getElementById('aiChart'), {
    type: 'doughnut',
    data: {
        labels: @json($aiL),
        datasets: [{
            data: @json($aiV),
            backgroundColor: @json($aiC),
            borderWidth: 0,
            hoverOffset: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } }
    }
});

// ── Saatlik dağılım ──────────────────────────────────────────────────────────
new Chart(document.getElementById('hourlyChart'), {
    type: 'bar',
    data: {
        labels: Array.from({length:24}, (_,i) => `${String(i).padStart(2,'0')}:00`),
        datasets: [{
            label: 'Görüntüleme',
            data: @json($hourlyData),
            backgroundColor: 'rgba(232,67,147,.5)',
            borderColor: 'var(--accent)',
            borderWidth: 1,
            borderRadius: 3,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { grid: { display: false }, ticks: { font: { size: 9 } } },
            y: { grid: { color: 'var(--border)' }, ticks: { font: { size: 10 } }, beginAtZero: true },
        }
    }
});

// ── Referrer pasta grafiği ────────────────────────────────────────────────────
@php
    $refChartLabels = $allSources->take(8)->keys()->map(fn($k) => strlen($k)>22 ? substr($k,0,20).'…' : $k)->values()->toArray();
    $refChartData   = $allSources->take(8)->values()->toArray();
    $refChartColors = $allSources->take(8)->keys()->map(fn($k) => $srcColors[$k] ?? 'var(--text2)')->values()->toArray();
@endphp
new Chart(document.getElementById('referrerChart'), {
    type: 'doughnut',
    data: {
        labels: @json($refChartLabels),
        datasets: [{
            data: @json($refChartData),
            backgroundColor: @json($refChartColors),
            borderWidth: 0,
            hoverOffset: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { callbacks: {
            label: ctx => ` ${ctx.label}: ${ctx.parsed.toLocaleString()}`
        }}}
    }
});

// ── Otomatik yenileme (60 saniye) ────────────────────────────────────────────
setTimeout(() => location.reload(), 60000);
</script>
@endpush

