@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@section('meta_description', 'تحلیل و بررسی عملکرد تیم خرید با استفاده از هوش مصنوعی')

@section('content')
<div class="fixed inset-0 -z-10 h-full w-full bg-slate-900 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]"></div>

<div class="mx-auto w-full max-w-6xl space-y-6">
    <!-- Header -->
    <header class="flex items-center justify-between border-b pb-4 border-slate-700">
        <div>
            <h1 class="text-2xl font-bold text-slate-100">📊 عملکرد تیم خرید</h1>
            <p class="text-slate-400 text-sm mt-2">تحلیل جامع عملکرد تیم خرید با استفاده از هوش مصنوعی</p>
        </div>
    </header>

    @if(session('success'))
        <div class="bg-green-500/20 border border-green-500/30 text-green-400 px-4 py-3 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-500/20 border border-red-500/30 text-red-400 px-4 py-3 rounded-xl">
            {{ session('error') }}
        </div>
    @endif

    <!-- Info Card -->
    <div class="bg-blue-900/20 border border-blue-700/50 rounded-xl p-4">
        <div class="flex items-start gap-3">
            <svg class="w-6 h-6 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <div>
                <h3 class="text-blue-400 font-semibold mb-2">نحوه کار</h3>
                <p class="text-slate-300 text-sm leading-relaxed">
                    این سیستم با استفاده از هوش مصنوعی، داده‌های مربوط به درخواست‌های خرید و استعلام‌های قیمت را تحلیل می‌کند و گزارش جامعی از عملکرد تیم خرید ارائه می‌دهد. 
                    گزارش شامل تحلیل الگوهای استفاده از تامین‌کنندگان، توزیع کار بین اعضای تیم، وضعیت درخواست‌ها، و پیشنهادات عملی برای بهبود عملکرد است.
                </p>
            </div>
        </div>
    </div>

    <!-- Analysis Section -->
    <div class="bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50 p-6 shadow-xl">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-slate-100">تحلیل عملکرد</h2>
            <button 
                id="analyzeBtn"
                onclick="analyzePerformance()"
                class="px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white rounded-lg transition-all font-medium flex items-center gap-2 shadow-lg hover:shadow-xl"
            >
                <svg id="analyzeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
                <span id="analyzeBtnText">شروع تحلیل</span>
            </button>
        </div>

        <!-- Loading State -->
        <div id="loadingState" class="hidden">
            <div class="flex flex-col items-center justify-center py-12">
                <div class="relative">
                    <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                </div>
                <p class="text-slate-300 mt-4">در حال تحلیل داده‌ها و تولید گزارش...</p>
                <p class="text-slate-400 text-sm mt-2">لطفاً صبر کنید، این فرآیند ممکن است چند لحظه طول بکشد</p>
            </div>
        </div>

        <!-- Error State -->
        <div id="errorState" class="hidden">
            <div class="bg-red-900/20 border border-red-700/50 rounded-lg p-4">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-red-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <h3 class="text-red-400 font-semibold mb-2">خطا در تحلیل</h3>
                        <p id="errorMessage" class="text-red-300 text-sm"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Report Section -->
        <div id="reportSection" class="hidden">
            <!-- Data Summary -->
            <div id="dataSummary" class="mb-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Summary cards will be populated here -->
            </div>

            <!-- AI Report -->
            <div class="bg-slate-900/50 rounded-xl border border-slate-700 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                    </svg>
                    <h3 class="text-xl font-bold text-slate-100">گزارش تحلیل هوش مصنوعی</h3>
                </div>
                <div id="aiReport" class="prose prose-invert max-w-none text-slate-300 leading-relaxed">
                    <!-- AI report will be displayed here -->
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
async function analyzePerformance() {
    const analyzeBtn = document.getElementById('analyzeBtn');
    const analyzeBtnText = document.getElementById('analyzeBtnText');
    const analyzeIcon = document.getElementById('analyzeIcon');
    const loadingState = document.getElementById('loadingState');
    const errorState = document.getElementById('errorState');
    const reportSection = document.getElementById('reportSection');
    const errorMessage = document.getElementById('errorMessage');
    const aiReport = document.getElementById('aiReport');
    const dataSummary = document.getElementById('dataSummary');

    // Reset states
    errorState.classList.add('hidden');
    reportSection.classList.add('hidden');
    loadingState.classList.remove('hidden');
    
    // Disable button
    analyzeBtn.disabled = true;
    analyzeBtnText.textContent = 'در حال تحلیل...';
    analyzeIcon.classList.add('animate-spin');

    try {
        const response = await fetch('{{ route("admin.team-performance.analyze") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        });

        const data = await response.json();

        if (data.success) {
            // Hide loading
            loadingState.classList.add('hidden');
            
            // Display data summary
            if (data.data_summary) {
                const summary = data.data_summary;
                dataSummary.innerHTML = `
                    <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                        <div class="text-slate-400 text-sm mb-1">کل درخواست‌های خرید</div>
                        <div class="text-2xl font-bold text-slate-100">${summary.total_purchase_requests || 0}</div>
                    </div>
                    <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                        <div class="text-slate-400 text-sm mb-1">درخواست‌های 30 روز اخیر</div>
                        <div class="text-2xl font-bold text-blue-400">${summary.recent_purchase_requests || 0}</div>
                    </div>
                    <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                        <div class="text-slate-400 text-sm mb-1">کل استعلام‌های قیمت</div>
                        <div class="text-2xl font-bold text-slate-100">${summary.total_price_inquiries || 0}</div>
                    </div>
                    <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
                        <div class="text-slate-400 text-sm mb-1">تامین‌کنندگان فعال</div>
                        <div class="text-2xl font-bold text-green-400">${summary.total_suppliers || 0}</div>
                    </div>
                `;
            }

            // Display AI report
            if (data.report) {
                // Convert markdown-like formatting to HTML
                let reportHtml = data.report
                    .replace(/\n\n/g, '</p><p class="mb-4">')
                    .replace(/\n/g, '<br>')
                    .replace(/\*\*(.*?)\*\*/g, '<strong class="text-slate-100">$1</strong>')
                    .replace(/\*(.*?)\*/g, '<em class="text-slate-300">$1</em>')
                    .replace(/^### (.*$)/gm, '<h3 class="text-xl font-bold text-slate-100 mt-6 mb-3">$1</h3>')
                    .replace(/^## (.*$)/gm, '<h2 class="text-2xl font-bold text-slate-100 mt-8 mb-4">$1</h2>')
                    .replace(/^# (.*$)/gm, '<h1 class="text-3xl font-bold text-slate-100 mt-10 mb-5">$1</h1>')
                    .replace(/^\d+\.\s(.*$)/gm, '<li class="mr-4 mb-2">$1</li>')
                    .replace(/^-\s(.*$)/gm, '<li class="mr-4 mb-2">$1</li>');
                
                aiReport.innerHTML = '<p class="mb-4">' + reportHtml + '</p>';
            }

            // Show report section
            reportSection.classList.remove('hidden');
        } else {
            // Show error
            loadingState.classList.add('hidden');
            errorMessage.textContent = data.error || 'خطای نامشخص در تحلیل داده‌ها';
            errorState.classList.remove('hidden');
        }
    } catch (error) {
        // Show error
        loadingState.classList.add('hidden');
        errorMessage.textContent = 'خطا در ارتباط با سرور: ' + error.message;
        errorState.classList.remove('hidden');
    } finally {
        // Re-enable button
        analyzeBtn.disabled = false;
        analyzeBtnText.textContent = 'شروع تحلیل';
        analyzeIcon.classList.remove('animate-spin');
    }
}
</script>
@endpush
@endsection