@extends('layouts.dashboard')

@section('title', 'لوحة التحكم')

@section('content')
<div class="space-y-6">
    <!-- Stats Cards - Using the new component -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Total Conversations -->
        <x-stat-card 
            title="إجمالي المحادثات"
            :value="number_format($stats['total_conversations'])"
            :subtitle="'+' . $stats['today_conversations'] . ' اليوم'"
            icon="💬"
            color="emerald"
        />

        <!-- Total Leads -->
        <x-stat-card 
            title="العملاء المحتملين"
            :value="number_format($stats['total_leads'])"
            :subtitle="$stats['qualified_leads'] . ' مؤهل'"
            icon="👥"
            color="blue"
        />

        <!-- Response Rate -->
        <x-stat-card 
            title="معدل الاستجابة"
            :value="$stats['response_rate'] . '%'"
            :subtitle="$stats['pending_replies'] . ' في الانتظار'"
            icon="⚡"
            color="amber"
        />

        <!-- Conversion Rate -->
        <x-stat-card 
            title="معدل التحويل"
            :value="$stats['conversion_rate'] . '%'"
            :subtitle="$stats['converted_leads'] . ' محول'"
            icon="🎯"
            color="purple"
        />
    </div>

    <!-- Channel & Intent Stats -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Channel Breakdown -->
        <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
            <h3 class="text-lg font-bold text-gray-800 mb-4">📊 توزيع القنوات</h3>
            <div class="space-y-4">
                @php
                    $totalChannels = array_sum($stats['channel_stats']);
                @endphp
                @foreach($stats['channel_stats'] as $channel => $count)
                    @php 
                        $percentage = $totalChannels > 0 ? ($count / $totalChannels) * 100 : 0;
                        $config = $channelConfig[$channel] ?? ['icon' => '📩', 'name' => $channel, 'color' => 'bg-gray-500'];
                    @endphp
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-gray-700">{{ $config['icon'] }} {{ $config['name'] }}</span>
                            <span class="text-gray-500">{{ number_format($count) }} ({{ number_format($percentage, 1) }}%)</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="{{ $config['color'] }} h-2 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Top Intents -->
        <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
            <h3 class="text-lg font-bold text-gray-800 mb-4">🎯 أكثر النوايا شيوعاً</h3>
            <div class="space-y-3">
                @forelse($stats['top_intents'] as $intent => $count)
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                        <span class="text-gray-700">{{ $intentNames[$intent] ?? $intent }}</span>
                        <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm font-medium">{{ number_format($count) }}</span>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">لا توجد بيانات بعد</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Hot Leads & Recent Conversations -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Hot Leads -->
        <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-800">🔥 عملاء محتملين ساخنين</h3>
                <a href="{{ route('leads.index') }}?min_score=100" class="text-emerald-600 hover:underline text-sm">عرض الكل</a>
            </div>
            <div class="space-y-3" id="hot-leads-container">
                @forelse($hotLeads as $lead)
                    <div class="flex items-center justify-between p-3 bg-gradient-to-l from-amber-50 to-orange-50 rounded-lg border border-amber-200 hover:border-amber-300 transition">
                        <div>
                            <p class="font-medium text-gray-800">{{ $lead->display_name }}</p>
                            <p class="text-sm text-gray-500">
                                {{ $channelConfig[$lead->channel]['icon'] ?? '📩' }} {{ $channelConfig[$lead->channel]['name'] ?? $lead->channel }}
                                • {{ $lead->last_contact_date->diffForHumans() }}
                            </p>
                        </div>
                        <div class="text-center">
                            <span class="bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-1 rounded-full text-sm font-bold shadow-sm">{{ $lead->lead_score }}</span>
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">لا توجد عملاء ساخنين حالياً</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Conversations -->
        <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-800">💬 آخر المحادثات</h3>
                <div class="flex items-center gap-3">
                    <span id="live-indicator" class="flex items-center gap-1 text-xs text-gray-400">
                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                        مباشر
                    </span>
                    <a href="{{ route('dashboard.conversations') }}" class="text-emerald-600 hover:underline text-sm">عرض الكل</a>
                </div>
            </div>
            <div class="space-y-3 max-h-80 overflow-y-auto" id="live-conversations">
                @forelse($recentConversations as $conversation)
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <p class="text-gray-800 line-clamp-1">{{ Str::limit($conversation->text, 50) }}</p>
                                <p class="text-sm text-gray-500 mt-1">
                                    {{ $channelConfig[$conversation->channel]['icon'] ?? '📩' }}
                                    {{ $conversation->created_at->diffForHumans() }}
                                    @if($conversation->detected_intent)
                                        • <span class="text-emerald-600">{{ $intentNames[$conversation->detected_intent] ?? $conversation->detected_intent }}</span>
                                    @endif
                                </p>
                            </div>
                            @if($conversation->sent)
                                <span class="text-green-500" title="تم الإرسال">✓</span>
                            @else
                                <span class="text-amber-500 animate-pulse" title="في الانتظار">⏳</span>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-gray-500 text-center py-4">لا توجد محادثات بعد</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">⚡ إجراءات سريعة</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('dashboard.conversations') }}?sent=0" class="flex items-center gap-3 p-4 bg-amber-50 rounded-xl hover:bg-amber-100 transition group">
                <span class="text-2xl group-hover:scale-110 transition-transform">⏳</span>
                <div>
                    <p class="font-medium text-gray-800">ردود معلقة</p>
                    <p class="text-sm text-amber-600">{{ $stats['pending_replies'] }} رسالة</p>
                </div>
            </a>
            <a href="{{ route('leads.index') }}?status=new" class="flex items-center gap-3 p-4 bg-blue-50 rounded-xl hover:bg-blue-100 transition group">
                <span class="text-2xl group-hover:scale-110 transition-transform">🆕</span>
                <div>
                    <p class="font-medium text-gray-800">عملاء جدد</p>
                    <p class="text-sm text-blue-600">{{ $stats['new_leads'] }} عميل</p>
                </div>
            </a>
            <a href="{{ route('leads.index') }}?min_score=70" class="flex items-center gap-3 p-4 bg-emerald-50 rounded-xl hover:bg-emerald-100 transition group">
                <span class="text-2xl group-hover:scale-110 transition-transform">⭐</span>
                <div>
                    <p class="font-medium text-gray-800">عملاء مميزون</p>
                    <p class="text-sm text-emerald-600">{{ $stats['qualified_leads'] }} مؤهل</p>
                </div>
            </a>
            <a href="{{ route('dashboard.conversations') }}" class="flex items-center gap-3 p-4 bg-purple-50 rounded-xl hover:bg-purple-100 transition group">
                <span class="text-2xl group-hover:scale-110 transition-transform">📊</span>
                <div>
                    <p class="font-medium text-gray-800">هذا الأسبوع</p>
                    <p class="text-sm text-purple-600">{{ $stats['week_conversations'] }} محادثة</p>
                </div>
            </a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Dashboard Real-time Updates
    (function() {
        'use strict';

        const REFRESH_INTERVAL_LIVE = 30000; // 30 seconds for live conversations
        const REFRESH_INTERVAL_STATS = 60000; // 60 seconds for stats
        
        let liveRefreshTimer = null;
        let statsRefreshTimer = null;

        // Channel configuration for JavaScript
        const channelConfig = @json($channelConfig);
        const intentNames = @json($intentNames);

        /**
         * Fetch and update live conversations
         */
        async function refreshLiveConversations() {
            try {
                const response = await fetch('{{ route("dashboard.live") }}', {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!response.ok) throw new Error('Network response was not ok');

                const conversations = await response.json();
                updateLiveConversations(conversations);

            } catch (error) {
                console.error('Failed to refresh live conversations:', error);
            }
        }

        /**
         * Update the live conversations container
         */
        function updateLiveConversations(conversations) {
            const container = document.getElementById('live-conversations');
            if (!container || conversations.length === 0) return;

            const html = conversations.map(conv => {
                const channelIcon = channelConfig[conv.platform]?.icon || '📩';
                
                return `
                    <div class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition animate-fade-in">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <p class="text-gray-800 line-clamp-1">${escapeHtml(conv.last_message)}</p>
                                <p class="text-sm text-gray-500 mt-1">
                                    ${channelIcon} ${conv.ago}
                                </p>
                            </div>
                        </div>
                    </div>
                `;
            }).join('');

            container.innerHTML = html;
        }

        /**
         * Escape HTML to prevent XSS
         */
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        /**
         * Initialize real-time updates
         */
        function init() {
            // Start live conversations refresh
            liveRefreshTimer = setInterval(refreshLiveConversations, REFRESH_INTERVAL_LIVE);

            // Cleanup on page unload
            window.addEventListener('beforeunload', cleanup);
            
            // Pause when page is hidden (battery saving)
            document.addEventListener('visibilitychange', handleVisibilityChange);
        }

        /**
         * Handle page visibility changes
         */
        function handleVisibilityChange() {
            if (document.hidden) {
                // Pause refreshing when tab is not visible
                clearInterval(liveRefreshTimer);
                clearInterval(statsRefreshTimer);
            } else {
                // Resume when tab becomes visible
                refreshLiveConversations();
                liveRefreshTimer = setInterval(refreshLiveConversations, REFRESH_INTERVAL_LIVE);
            }
        }

        /**
         * Cleanup timers
         */
        function cleanup() {
            clearInterval(liveRefreshTimer);
            clearInterval(statsRefreshTimer);
        }

        // Initialize when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }
    })();
</script>

<style>
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fade-in {
        animation: fade-in 0.3s ease-out;
    }
</style>
@endpush