@extends('layouts.app')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

{{-- Security Toast Container --}}
<div id="toast-wrapper" class="fixed bottom-8 left-8 z-[9999] flex flex-col gap-3"></div>

<div class="max-w-7xl mx-auto px-4 py-8 space-y-8 bg-[#F8FAFC] dark:bg-slate-950 min-h-screen font-sans transition-colors duration-500">
    
    {{-- 1. HEADER SECTION --}}
    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl p-6 rounded-[2.5rem] border border-slate-200 dark:border-slate-800 shadow-sm">
        <div>
            <h2 class="text-4xl font-black text-slate-900 dark:text-white tracking-tighter uppercase italic leading-none">Control Center</h2>
            <p class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-[0.3em] flex items-center gap-2 mt-2">
                <span class="relative flex h-2 w-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span> 
                Global Workforce Command (PKT)
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('admin.projects.index') }}" class="no-underline bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-5 py-3 rounded-2xl text-[10px] font-black uppercase hover:bg-emerald-500 hover:text-white transition-all flex items-center gap-2">
                <span class="text-emerald-500 font-black">01</span> PROJECTS
            </a>
            <a href="{{ route('admin.tasks.index') }}" class="no-underline bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-5 py-3 rounded-2xl text-[10px] font-black uppercase hover:bg-emerald-500 hover:text-white transition-all flex items-center gap-2">
                <span class="text-emerald-500 font-black">02</span> TASKS
            </a>
            <a href="{{ route('admin.employees.index') }}" class="no-underline bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-5 py-3 rounded-2xl text-[10px] font-black uppercase hover:bg-emerald-500 hover:text-white transition-all flex items-center gap-2">
                <span class="text-emerald-500 font-black">03</span> EMPLOYEES
            </a>
            <a href="{{ route('admin.reports.index') }}" class="no-underline bg-emerald-500 text-slate-900 px-6 py-3 rounded-2xl text-[10px] font-black uppercase shadow-xl">REPORTS</a>
        </div>
    </div>

    {{-- 2. LIVE METRICS --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-slate-900 p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 shadow-sm">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Personnel Online</p>
            <h4 class="text-3xl font-black text-slate-900 dark:text-white tracking-tighter" id="online-count">{{ $employeePerformance->where('is_online', true)->count() }}</h4>
        </div>
        <div class="bg-white dark:bg-slate-900 p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 shadow-sm transition-all duration-500" id="status-card">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Security Status</p>
            <h4 id="status-text" class="text-3xl font-black text-emerald-600 uppercase italic">Optimal</h4>
        </div>
        <div class="bg-white dark:bg-slate-900 p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 shadow-sm">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">AI Hits Today</p>
            <h4 class="text-3xl font-black text-amber-500 tracking-tighter" id="global-ai-hits">{{ $employeePerformance->where('is_violating', true)->count() }}</h4>
        </div>
        <div class="bg-white dark:bg-slate-900 p-6 rounded-[2rem] border border-slate-100 dark:border-slate-800 shadow-sm">
            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 italic">Recent Intel</p>
            <h4 class="text-3xl font-black text-indigo-600 dark:text-indigo-400 tracking-tighter">{{ $stats['total_tasks'] ?? 0 }}</h4>
        </div>
    </div>

    {{-- 3. MONITORING TABLE --}}
    <div class="bg-white dark:bg-slate-900 rounded-[3rem] shadow-xl border border-slate-100 dark:border-slate-800 overflow-hidden">
        <div class="p-8 border-b dark:border-slate-800 bg-slate-50/30 dark:bg-slate-800/30 flex justify-between items-center">
            <h3 class="text-2xl font-black uppercase italic tracking-tighter dark:text-white">Operator Telemetry Stream</h3>
            <div id="last-sync" class="text-[10px] font-black text-emerald-600 dark:text-emerald-400 uppercase bg-emerald-50 dark:bg-emerald-900/20 px-5 py-2 rounded-2xl border border-emerald-100 dark:border-emerald-800 italic">Syncing...</div>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/80 dark:bg-slate-800/80">
                        <th class="px-8 py-5 text-[10px] uppercase text-slate-500 font-black">Operator</th>
                        <th class="px-6 py-5 text-[10px] uppercase text-slate-500 font-black text-center border-x dark:border-slate-800">Visual Signal</th>
                        <th class="px-6 py-5 text-[10px] uppercase text-slate-500 font-black text-center">Status</th>
                        <th class="px-6 py-5 text-[10px] uppercase text-slate-500 font-black">Active Node</th>
                        <th class="px-8 py-5 text-right text-[10px] uppercase text-slate-500 font-black">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800" id="tracking-table-body">
                    @foreach($employeePerformance as $employee)
                    <tr class="group transition-all" id="row-{{ $employee->user_id }}">
                        <td class="px-8 py-6">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 bg-slate-900 dark:bg-indigo-600 rounded-2xl flex items-center justify-center text-white text-sm font-black">{{ strtoupper(substr($employee->name, 0, 1)) }}</div>
                                <div>
                                    <p class="font-black text-slate-900 dark:text-white text-sm tracking-tight flex items-center gap-2">
                                        {{ $employee->name }}
                                        <span id="ai-alert-{{ $employee->user_id }}" class="{{ $employee->is_violating ? '' : 'hidden' }} text-[8px] font-black bg-rose-600 text-white px-2 py-0.5 rounded-full animate-pulse uppercase">Policy Breach</span>
                                    </p>
                                    <p class="text-[9px] text-slate-400 font-bold italic">ID: {{ $employee->user_id }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-6 flex justify-center border-x dark:border-slate-800">
                            <div class="relative group/sc p-1.5 bg-emerald-500/20 rounded-2xl border border-emerald-500/30">
                                <img src="{{ $employee->last_screenshot }}" id="screenshot-{{ $employee->user_id }}" 
                                     class="w-20 h-12 object-cover rounded-xl shadow-lg hover:scale-[4] transition-all duration-500 z-50 bg-slate-950 cursor-zoom-in" 
                                     onerror="this.src='https://placehold.co/100x60?text=Wait+Signal'">
                            </div>
                        </td>
                        <td class="px-6 py-6 text-center">
                            <span id="status-badge-{{ $employee->user_id }}" class="{{ $employee->is_online ? 'bg-emerald-500' : 'bg-slate-300' }} text-white text-[8px] font-black px-4 py-1.5 rounded-full uppercase italic">
                                {{ $employee->is_online ? 'ONLINE' : 'OFFLINE' }}
                            </span>
                        </td>
                        <td class="px-6 py-6">
                            <p class="text-slate-700 dark:text-slate-400 text-[10px] font-bold italic truncate max-w-[140px]" id="activity-{{ $employee->user_id }}">"{{ $employee->last_window_title ?? 'System Idle' }}"</p>
                        </td>
                        <td class="px-8 py-6 text-right flex items-center justify-end gap-2">
                            <a href="{{ route('admin.employees.show', $employee->user_id) }}" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase italic no-underline shadow-lg">🔍 View</a>
                            <a href="{{ route('admin.employees.gallery', $employee->user_id) }}" class="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-xl text-[10px] font-black uppercase italic no-underline shadow-lg">🖼️ Gallery</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Sound for Breach --}}
<audio id="notif-sound" src="https://assets.mixkit.co/active_storage/sfx/2869/2869-preview.mp3" preload="auto"></audio>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let lastKnownAI = {};

    async function refreshTracking() {
        try {
            const res = await fetch('{{ route("admin.live.status") }}');
            if (!res.ok) throw new Error('Network Severed');
            const users = await res.json();
            
            document.getElementById('last-sync').innerText = 'LIVE LINK: ' + new Date().toLocaleTimeString();
            document.getElementById('online-count').innerText = users.filter(u => u.is_online).length;
            document.getElementById('global-ai-hits').innerText = users.filter(u => u.is_violating).length;

            let anyViolation = false;
            users.forEach(user => {
                const uid = user.id;
                const isAI = user.is_violating;
                const row = document.getElementById(`row-${uid}`);
                const alertBadge = document.getElementById(`ai-alert-${uid}`);
                const statusBadge = document.getElementById(`status-badge-${uid}`);

                if (isAI && user.is_online) {
                    anyViolation = true;
                    if(row) row.className = "bg-rose-900/10 border-l-4 border-rose-600 transition-all animate-pulse";
                    if(alertBadge) alertBadge.classList.remove('hidden');
                    if (!lastKnownAI[uid] || lastKnownAI[uid] !== user.last_window) {
                        showToast(user.name, "SECURITY ALERT: " + user.last_window);
                        document.getElementById('notif-sound').play().catch(e => {});
                    }
                } else {
                    if(row) row.className = "group hover:bg-slate-50 transition-all";
                    if(alertBadge) alertBadge.classList.add('hidden');
                }

                lastKnownAI[uid] = user.last_window;
                if(document.getElementById(`activity-${uid}`)) document.getElementById(`activity-${uid}`).innerText = isAI ? `⚠️ ${user.last_window}` : `"${user.last_window}"`;
                
                if(statusBadge) {
                    statusBadge.innerText = user.is_online ? 'ONLINE' : 'OFFLINE';
                    statusBadge.className = user.is_online ? "bg-emerald-500 shadow-lg text-white text-[8px] font-black px-4 py-1.5 rounded-full uppercase italic" : "bg-slate-300 text-white text-[8px] font-black px-4 py-1.5 rounded-full uppercase italic";
                }

                if(user.screenshot && document.getElementById(`screenshot-${uid}`)) {
                    document.getElementById(`screenshot-${uid}`).src = user.screenshot + '?v=' + new Date().getTime();
                }
            });

            // Security Card Logic
            const statusCard = document.getElementById('status-card');
            const statusText = document.getElementById('status-text');
            if(anyViolation) {
                statusCard.className = "bg-rose-600 p-6 rounded-[2rem] shadow-xl animate-pulse border-none";
                statusText.innerText = "POLICY BREACH"; statusText.className = "text-3xl font-black text-white italic";
            } else {
                statusCard.className = "bg-white dark:bg-slate-900 p-6 rounded-[2rem] border border-slate-100 shadow-sm";
                statusText.innerText = "OPTIMAL"; statusText.className = "text-3xl font-black text-emerald-600 uppercase italic";
            }
        } catch(e) { console.log("Re-establishing satellite link..."); }
    }

    function showToast(name, msg) {
        const wrapper = document.getElementById('toast-wrapper');
        const toast = document.createElement('div');
        toast.className = 'bg-rose-600 text-white p-4 rounded-3xl shadow-2xl flex items-center gap-4 animate-slide-in';
        toast.innerHTML = `<div><p class="text-[8px] font-black uppercase">Violation</p><p class="text-[11px] font-bold">${name}: AI DETECTED</p></div>`;
        wrapper.appendChild(toast);
        setTimeout(() => { toast.classList.add('opacity-0'); setTimeout(() => toast.remove(), 500); }, 5000);
    }
    
    setInterval(refreshTracking, 5000);
</script>

<style>
    @keyframes slide-in { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .animate-slide-in { animation: slide-in 0.5s ease-out forwards; }
    .custom-scrollbar::-webkit-scrollbar { width: 3px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #e11d48; border-radius: 10px; }
</style>
@endsection