@extends('layouts.app')

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

{{-- Toast Container for Security Alerts --}}
<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">Security 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">Pipeline 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. ANALYTICS & FEEDBACK GRID --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 bg-white dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm">
            <h3 class="text-xl font-black uppercase italic tracking-tighter dark:text-white mb-6">Workforce Distribution</h3>
            <div class="h-[300px]"><canvas id="globalUsageChart"></canvas></div>
        </div>

        <div class="bg-white dark:bg-slate-900 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 shadow-sm relative overflow-hidden">
            <h3 class="text-xl font-black uppercase italic tracking-tighter dark:text-white mb-6">Recent Feedbacks</h3>
            <div class="space-y-4 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar" id="feedback-feed">
                @forelse($recentFeedbacks as $feedback)
                    <div class="p-4 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-800">
                        <div class="flex justify-between items-start mb-2">
                            <span class="text-[10px] font-black text-indigo-500 uppercase">{{ $feedback->user->name ?? 'Unknown' }}</span>
                            <span class="text-[8px] font-bold text-slate-400 uppercase">{{ $feedback->updated_at->diffForHumans() }}</span>
                        </div>
                        <p class="text-[10px] text-slate-600 dark:text-slate-400 italic line-clamp-2">"{{ $feedback->employee_feedback }}"</p>
                    </div>
                @empty
                    <div class="py-10 text-center text-slate-500 italic text-xs uppercase font-black">No feedback entry detected</div>
                @endforelse
            </div>
            <div class="absolute -bottom-10 -right-10 text-9xl font-black text-slate-50 dark:text-slate-800/10 -z-0 select-none italic uppercase">Intel</div>
        </div>
    </div>

    {{-- 4. LIVE MONITORING TABLE --}}
    <div class="bg-white dark:bg-slate-900 rounded-[3rem] shadow-xl border border-slate-100 dark:border-slate-800 overflow-hidden border-solid">
        <div class="p-8 border-b dark:border-slate-800 bg-slate-50/30 dark:bg-slate-800/30 flex justify-between items-center border-solid">
            <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 border-solid">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 & Node</th>
                        <th class="px-6 py-5 text-[10px] uppercase text-slate-500 font-black">Watch Time</th>
                        <th class="px-6 py-5 text-[10px] uppercase text-slate-500 font-black text-center border-x dark:border-slate-800 border-solid">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">Current Logic</th>
                        <th class="px-8 py-5 text-right text-[10px] uppercase text-slate-500 font-black">Action</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 hover:bg-slate-50/80 dark:hover:bg-slate-800/50 transition-all border-solid" 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 shadow-lg">{{ 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] bg-rose-600 text-white px-2 py-0.5 rounded-full animate-pulse uppercase font-black">AI Breach</span>
                                    </p>
                                    <p class="text-[9px] text-slate-400 font-bold italic">NODE: {{ $employee->department->name ?? 'System' }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-6">
                            <div class="flex items-center gap-3">
                                <div class="flex-1 min-w-[80px] bg-slate-100 dark:bg-slate-800 rounded-full h-1 overflow-hidden border-none">
                                    <div id="progress-bar-{{ $employee->user_id }}" class="bg-emerald-500 h-full transition-all duration-1000 shadow-[0_0_8px_rgba(16,185,129,0.5)] border-none" style="width: {{ $employee->progress ?? 0 }}%"></div>
                                </div>
                                <span id="watch-time-{{ $employee->user_id }}" class="text-[10px] font-black text-slate-900 dark:text-emerald-400 italic whitespace-nowrap">{{ $employee->watch_time ?? '0h 0m' }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-6 flex justify-center border-x dark:border-slate-800 border-solid">
                            <div class="relative group/sc p-1.5 bg-slate-100 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden border-solid">
                                <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 origin-center" 
                                     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 shadow-lg' : 'bg-slate-300' }} text-white text-[8px] font-black px-4 py-1.5 rounded-full uppercase italic transition-all">
                                {{ $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 space-x-2">
                             <button onclick="sendAdminFeedback({{ $employee->user_id }}, '{{ $employee->name }}')" class="bg-amber-500 hover:bg-amber-600 text-slate-900 px-3 py-2 rounded-xl text-[9px] font-black uppercase italic shadow-md border-none cursor-pointer">
                                💬 Msg
                            </button>
                            <a href="{{ route('admin.employees.show', $employee->user_id) }}" 
                               class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 rounded-xl text-[10px] font-black uppercase italic shadow-lg no-underline inline-flex items-center gap-2">
                                🔍 Details
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ✅ Security Notification Sound --}}
<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>
    // 📊 GLOBAL CHART: Distributes categories
    document.addEventListener('DOMContentLoaded', function() {
        const ctxUsage = document.getElementById('globalUsageChart').getContext('2d');
        new Chart(ctxUsage, {
            type: 'bar',
            data: {
                labels: ['Productive', 'AI Tools', 'Social'],
                datasets: [{
                    data: [{{ $globalAiStats['work'] ?? 0 }}, {{ $globalAiStats['ai_tool'] ?? 0 }}, {{ $globalAiStats['social_media'] ?? 0 }}],
                    backgroundColor: ['#10b981', '#f59e0b', '#f43f5e'],
                    borderRadius: 12,
                }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
        });
    });

    // 📡 LIVE TELEMETRY: Automatic Pulse Every 5 Seconds
    let lastKnownAI = {};
    async function refreshTracking() {
        try {
            const res = await fetch('{{ route("admin.live.status") }}');
            if (!res.ok) throw new Error('Satellite severed');
            const users = await res.json();
            
            document.getElementById('last-sync').innerText = 'LIVE LINK: ' + new Date().toLocaleTimeString();

            const onlineCount = users.filter(u => u.is_online).length;
            const aiHits = users.filter(u => u.is_violating).length;
            document.getElementById('online-count').innerText = onlineCount;
            document.getElementById('global-ai-hits').innerText = aiHits;

            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}`);
                const watchText = document.getElementById(`watch-time-${uid}`);
                const activityText = document.getElementById(`activity-${uid}`);

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

                lastKnownAI[uid] = user.last_window;
                if(watchText) watchText.innerText = user.watch_time;
                if(document.getElementById(`progress-bar-${uid}`)) document.getElementById(`progress-bar-${uid}`).style.width = user.progress + '%';
                if(activityText) activityText.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 transition-all" : "bg-slate-300 text-white text-[8px] font-black px-4 py-1.5 rounded-full uppercase italic transition-all";
                }

                if(user.screenshot && document.getElementById(`screenshot-${uid}`)) {
                    // Cache busting prevents "Wait Signal" on refresh
                    document.getElementById(`screenshot-${uid}`).src = user.screenshot + '?v=' + new Date().getTime();
                }
            });

            // Global Security Status Update
            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 scale-[1.02] 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 dark:border-slate-800 shadow-sm border-solid";
                statusText.innerText = "OPTIMAL"; statusText.className = "text-3xl font-black text-emerald-600 uppercase italic";
            }
        } catch(e) { console.log("Satellite link flickering..."); }
    }

    function showToast(name, msg) {
        const wrapper = document.getElementById('toast-wrapper');
        const toast = document.createElement('div');
        toast.className = 'bg-rose-600 text-white p-5 rounded-[2rem] shadow-2xl flex items-center gap-4 animate-slide-in border border-white/10 border-solid';
        toast.innerHTML = `<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center font-black">!</div><div><p class="text-[8px] font-black uppercase italic">Security Alert</p><p class="text-[11px] font-bold">${name}: AI USE</p></div>`;
        wrapper.appendChild(toast);
        setTimeout(() => { toast.classList.add('opacity-0'); setTimeout(() => toast.remove(), 500); }, 5000);
    }

    async function sendAdminFeedback(userId, name) {
        const { value: text } = await Swal.fire({
            title: `Protocol to ${name}`,
            input: 'textarea',
            showCancelButton: true,
            confirmButtonColor: '#4f46e5',
            background: '#0f172a', color: '#fff'
        });
        if (text) {
            fetch("{{ route('admin.messages.send') }}", {
                method: "POST",
                headers: { 
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ receiver_id: userId, message: text })
            }).then(() => {
                Swal.fire({ title: 'Signal Sent!', icon: 'success', timer: 1000, showConfirmButton: false });
            });
        }
    }
    
    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; }
    .no-underline { text-decoration: none !important; }
    .border-solid { border-style: solid !important; }
</style>
@endsection