@extends('layouts.admin')

@section('title', 'Analytics & Visitor Telemetry')
@section('subtitle', 'Privacy-friendly internal telemetry: page views, unique visitors, referrers, and bitstream downloads.')

@section('content')
<div class="space-y-8">

    <!-- Header & Period Filter Toolbar -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-6 rounded-3xl border border-slate-100 shadow-sm">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center text-primary">
                <span class="material-icons text-2xl">insights</span>
            </div>
            <div>
                <h2 class="text-xl font-black text-slate-800 tracking-tight">Repository Telemetry Console</h2>
                <p class="text-xs text-slate-400 font-bold uppercase tracking-wider">Zero-Latency &bull; NDPR-Compliant Daily Salted Hash &bull; Rate-Limited Downloads</p>
            </div>
        </div>

        <!-- Period Toggle Buttons -->
        <div class="flex items-center gap-1.5 bg-slate-100 p-1.5 rounded-2xl">
            <a href="{{ route('admin.analytics', ['period' => 'today']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all {{ $period === 'today' ? 'bg-white text-primary shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                Today
            </a>
            <a href="{{ route('admin.analytics', ['period' => '7']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all {{ $period === '7' ? 'bg-white text-primary shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                7 Days
            </a>
            <a href="{{ route('admin.analytics', ['period' => '30']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all {{ $period === '30' ? 'bg-white text-primary shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                30 Days
            </a>
            <a href="{{ route('admin.analytics', ['period' => 'all']) }}" class="px-3.5 py-1.5 rounded-xl text-xs font-black uppercase tracking-wider transition-all {{ $period === 'all' ? 'bg-white text-primary shadow-sm' : 'text-slate-500 hover:text-slate-800' }}">
                All Time
            </a>
        </div>
    </div>

    <!-- 4 Primary KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

        <!-- Total Page Views -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm relative overflow-hidden group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-blue-50 text-primary flex items-center justify-center shadow-sm">
                    <span class="material-icons text-2xl">visibility</span>
                </div>
                <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-blue-50 text-blue-700">
                    +{{ number_format($metrics['views_today']) }} today
                </span>
            </div>
            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">Total Page Views</p>
            <h3 class="text-3xl font-black text-slate-800 tracking-tight mt-1">{{ number_format($metrics['total_views']) }}</h3>
            <p class="text-[11px] text-slate-400 mt-2 font-medium">All recorded public page hits</p>
        </div>

        <!-- Unique Visitors Today -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm relative overflow-hidden group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shadow-sm">
                    <span class="material-icons text-2xl">fingerprint</span>
                </div>
                <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-50 text-emerald-700">
                    Daily Salted
                </span>
            </div>
            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">Unique Visitors Today</p>
            <h3 class="text-3xl font-black text-slate-800 tracking-tight mt-1">{{ number_format($metrics['unique_visitors_today']) }}</h3>
            <p class="text-[11px] text-slate-400 mt-2 font-medium">{{ number_format($metrics['total_unique_visitors']) }} lifetime unique daily visitors</p>
        </div>

        <!-- Human vs Bot Traffic Ratio -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm relative overflow-hidden group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center shadow-sm">
                    <span class="material-icons text-2xl">smart_toy</span>
                </div>
                <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-amber-50 text-amber-700">
                    {{ $metrics['human_percentage'] }}% Human
                </span>
            </div>
            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">Bot &amp; Crawler Activity</p>
            <h3 class="text-3xl font-black text-slate-800 tracking-tight mt-1">{{ number_format($metrics['bot_views']) }}</h3>
            <p class="text-[11px] text-slate-400 mt-2 font-medium">{{ number_format($metrics['human_views']) }} genuine human visitors</p>
        </div>

        <!-- Bitstream Downloads with Cooldown -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm relative overflow-hidden group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center shadow-sm">
                    <span class="material-icons text-2xl">download</span>
                </div>
                <span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-indigo-50 text-indigo-700">
                    1-Hr Cooldown
                </span>
            </div>
            <p class="text-xs font-black text-slate-400 uppercase tracking-widest">Total File Downloads</p>
            <h3 class="text-3xl font-black text-slate-800 tracking-tight mt-1">{{ number_format($metrics['total_downloads']) }}</h3>
            <p class="text-[11px] text-slate-400 mt-2 font-medium">+{{ number_format($metrics['downloads_today']) }} downloaded today (anti-inflation active)</p>
        </div>

    </div>

    <!-- 14-Day Traffic & Download Velocity Chart -->
    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div>
                <h3 class="text-lg font-black text-slate-800 tracking-tight flex items-center gap-2">
                    <span class="material-icons text-primary text-xl">bar_chart</span>
                    14-Day Activity &amp; Download Velocity
                </h3>
                <p class="text-xs text-slate-400 font-medium">Daily distribution of human visits, search crawler bots, and research downloads</p>
            </div>
            <div class="flex items-center gap-4 text-xs font-bold text-slate-500">
                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-primary"></span> Humans</span>
                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-slate-300"></span> Bots</span>
                <span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-emerald-500"></span> Downloads</span>
            </div>
        </div>

        @php
            $maxDaily = 1;
            foreach ($dailyTrend as $d) {
                $maxDaily = max($maxDaily, $d['total'], $d['downloads']);
            }
        @endphp

        <div class="grid grid-cols-7 sm:grid-cols-14 gap-2 pt-10 pb-2 items-end h-56 border-b border-slate-100">
            @foreach($dailyTrend as $day)
                @php
                    $humanHeight = $maxDaily > 0 ? round(($day['humans'] / $maxDaily) * 160) : 0;
                    $botHeight = $maxDaily > 0 ? round(($day['bots'] / $maxDaily) * 160) : 0;
                    $dlHeight = $maxDaily > 0 ? round(($day['downloads'] / $maxDaily) * 160) : 0;
                @endphp
                <div class="flex flex-col items-center gap-2 h-full justify-end group relative">
                    <!-- Tooltip -->
                    <div class="absolute -top-12 left-1/2 -translate-x-1/2 hidden group-hover:flex flex-col items-center bg-slate-900 text-white text-[10px] px-2.5 py-1.5 rounded-lg shadow-xl whitespace-nowrap z-20 pointer-events-none">
                        <span class="font-bold">{{ $day['label'] }}</span>
                        <span>{{ $day['humans'] }} humans, {{ $day['bots'] }} bots, {{ $day['downloads'] }} dl</span>
                    </div>

                    <!-- Bars -->
                    <div class="w-full flex items-end justify-center gap-1 h-44">
                        <div class="w-2.5 bg-primary rounded-t-md transition-all hover:opacity-80" style="height: {{ max(4, $humanHeight) }}px"></div>
                        <div class="w-2.5 bg-slate-300 rounded-t-md transition-all hover:opacity-80" style="height: {{ max(4, $botHeight) }}px"></div>
                        <div class="w-2 bg-emerald-500 rounded-t-md transition-all hover:opacity-80" style="height: {{ max(4, $dlHeight) }}px"></div>
                    </div>
                    <span class="text-[9px] font-bold text-slate-400 group-hover:text-primary transition-colors">{{ $day['label'] }}</span>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Dual Column Grid: Top Pages & Top Downloads -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        <!-- Top Visited Public Pages -->
        <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm flex flex-col justify-between">
            <div>
                <div class="flex items-center justify-between mb-5">
                    <h3 class="text-base font-black text-slate-800 tracking-tight flex items-center gap-2">
                        <span class="material-icons text-primary text-xl">language</span>
                        Top Visited Public Pages
                    </h3>
                    <span class="text-xs font-bold text-slate-400">Human Views</span>
                </div>

                <div class="divide-y divide-slate-100">
                    @forelse($topPages as $page)
                        <div class="py-3 flex items-center justify-between gap-4">
                            <div class="min-w-0 flex-1">
                                <a href="{{ url($page->path) }}" target="_blank" class="text-xs font-bold text-slate-700 hover:text-primary transition-colors truncate block">
                                    {{ $page->path }}
                                </a>
                                <span class="text-[10px] text-slate-400">{{ number_format($page->uniques) }} unique visitors</span>
                            </div>
                            <div class="text-right">
                                <span class="text-xs font-black text-slate-800">{{ number_format($page->views) }}</span>
                                <span class="text-[10px] text-slate-400 block font-medium">views</span>
                            </div>
                        </div>
                    @empty
                        <div class="py-12 text-center text-slate-400 text-xs font-medium">
                            No public page views recorded yet in this timeframe.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Device Distribution -->
            <div class="mt-6 pt-5 border-t border-slate-100">
                <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">Device Breakdown</p>
                <div class="grid grid-cols-4 gap-2 text-center">
                    <div class="bg-slate-50 p-2.5 rounded-2xl">
                        <span class="material-icons text-base text-slate-600">desktop_windows</span>
                        <p class="text-xs font-black text-slate-800">{{ $devices['percentages']['desktop'] }}%</p>
                        <p class="text-[9px] text-slate-400 uppercase font-bold">Desktop</p>
                    </div>
                    <div class="bg-slate-50 p-2.5 rounded-2xl">
                        <span class="material-icons text-base text-slate-600">smartphone</span>
                        <p class="text-xs font-black text-slate-800">{{ $devices['percentages']['mobile'] }}%</p>
                        <p class="text-[9px] text-slate-400 uppercase font-bold">Mobile</p>
                    </div>
                    <div class="bg-slate-50 p-2.5 rounded-2xl">
                        <span class="material-icons text-base text-slate-600">tablet_mac</span>
                        <p class="text-xs font-black text-slate-800">{{ $devices['percentages']['tablet'] }}%</p>
                        <p class="text-[9px] text-slate-400 uppercase font-bold">Tablet</p>
                    </div>
                    <div class="bg-slate-50 p-2.5 rounded-2xl">
                        <span class="material-icons text-base text-slate-600">smart_toy</span>
                        <p class="text-xs font-black text-slate-800">{{ $devices['percentages']['bot'] }}%</p>
                        <p class="text-[9px] text-slate-400 uppercase font-bold">Crawler</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inbound Referrers & Top Downloads -->
        <div class="space-y-6">

            <!-- Top Referrers -->
            <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-black text-slate-800 tracking-tight flex items-center gap-2">
                        <span class="material-icons text-emerald-600 text-xl">share</span>
                        Inbound Referral Sources
                    </h3>
                    <span class="text-xs font-bold text-slate-400">Traffic Origins</span>
                </div>

                <div class="space-y-2.5">
                    @forelse($topReferrers as $ref)
                        <div class="flex items-center justify-between p-2.5 bg-slate-50 rounded-2xl">
                            <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
                                <span class="material-icons text-sm text-slate-400">arrow_right_alt</span>
                                {{ $ref->referrer_host }}
                            </span>
                            <span class="px-2.5 py-0.5 bg-white rounded-xl text-xs font-black text-slate-800 shadow-sm border border-slate-100">
                                {{ number_format($ref->count) }}
                            </span>
                        </div>
                    @empty
                        <div class="py-8 text-center text-slate-400 text-xs font-medium">
                            No external referrers logged yet. Direct navigation dominant.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Top Downloaded Publications -->
            <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-black text-slate-800 tracking-tight flex items-center gap-2">
                        <span class="material-icons text-indigo-600 text-xl">file_download</span>
                        Most Downloaded Publications
                    </h3>
                    <span class="text-xs font-bold text-slate-400">1-Hr Cooldown Protected</span>
                </div>

                <div class="divide-y divide-slate-100">
                    @forelse($topDownloads as $file)
                        <div class="py-2.5 flex items-center justify-between gap-4">
                            <div class="min-w-0 flex-1">
                                <p class="text-xs font-bold text-slate-800 truncate">
                                    {{ $file->file_name }}
                                </p>
                                <p class="text-[10px] text-slate-400 truncate">
                                    {{ $file->item?->title ?: 'Digital Repository Item' }}
                                </p>
                            </div>
                            <div class="text-right whitespace-nowrap">
                                <span class="px-2.5 py-1 bg-indigo-50 text-indigo-700 text-xs font-black rounded-xl">
                                    {{ number_format($file->downloads) }} dl
                                </span>
                            </div>
                        </div>
                    @empty
                        <div class="py-8 text-center text-slate-400 text-xs font-medium">
                            No bitstream downloads recorded yet.
                        </div>
                    @endforelse
                </div>
            </div>

        </div>

    </div>

    <!-- Recent Visit Log Feed -->
    <div class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-base font-black text-slate-800 tracking-tight flex items-center gap-2">
                    <span class="material-icons text-primary text-xl">history</span>
                    Recent Page Visit Stream
                </h3>
                <p class="text-xs text-slate-400 font-medium">Real-time incoming requests to public repository routes</p>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead>
                    <tr class="border-b border-slate-100 text-slate-400 font-black uppercase text-[10px] tracking-wider">
                        <th class="pb-3">Timestamp</th>
                        <th class="pb-3">Path</th>
                        <th class="pb-3">Client IP / Hash</th>
                        <th class="pb-3">Type</th>
                        <th class="pb-3">Referrer</th>
                        <th class="pb-3 text-right">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
                    @forelse($recentVisits as $visit)
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="py-2.5 text-slate-400 whitespace-nowrap">{{ $visit->created_at->diffForHumans() }}</td>
                            <td class="py-2.5 font-bold text-slate-800 max-w-xs truncate">{{ $visit->path }}</td>
                            <td class="py-2.5 font-mono text-[10px] text-slate-500">{{ $visit->ip_address ?: 'Unknown' }}</td>
                            <td class="py-2.5">
                                @if($visit->is_bot)
                                    <span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-amber-50 text-amber-700">Bot</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase bg-emerald-50 text-emerald-700">{{ $visit->device_type }}</span>
                                @endif
                            </td>
                            <td class="py-2.5 text-slate-500 max-w-xs truncate">{{ $visit->referrer_host ?: 'Direct' }}</td>
                            <td class="py-2.5 text-right font-bold text-emerald-600">{{ $visit->status_code }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="py-8 text-center text-slate-400">No visits logged yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection