@extends('layouts.app')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
    <div>
        <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight">Welcome back, {{ $employee->first_name ?? $user->name }}</h2>
        <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">{{ $user->role }} Overview &bull; {{ $evalMonthName }}</p>
    </div>
    
    @if(in_array($user->role, ['Admin', 'HR']))
        <form action="{{ route('generate.cycle') }}" method="POST">
            @csrf
            <button type="submit" onclick="return confirm('Generate Monthly Cycle?')" class="bg-brand-600 hover:bg-brand-700 text-white px-6 py-3 rounded-xl shadow-lg transition flex items-center font-bold text-sm tracking-widest uppercase">
                <i class="fas fa-bolt mr-2"></i> Run Monthly Cycle
            </button>
        </form>
    @endif
</div>

@if(in_array($user->role, ['Admin', 'HR']))
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition duration-300">
            <div class="absolute -right-4 -top-4 w-24 h-24 bg-brand-50 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-500"></div>
            <div class="relative z-10">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Company Avg Score</p>
                <h3 class="text-4xl font-black text-brand-700 mt-2 font-sans">{{ number_format($adminStats['avg_score'] ?? 0, 1) }} <span class="text-lg text-gray-400 font-medium">/ 100</span></h3>
            </div>
            <div class="mt-4 text-xs font-bold text-gray-400 relative z-10">Based on finalized evaluations</div>
        </div>

        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition duration-300">
            <div class="absolute -right-4 -top-4 w-24 h-24 bg-green-50 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-500"></div>
            <div class="relative z-10">
                <div class="flex justify-between items-center">
                    <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Completion Rate</p>
                    <span class="text-green-600 font-black">{{ $adminStats['completion_rate'] }}%</span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2.5 mt-4">
                    <div class="bg-green-500 h-2.5 rounded-full" style="width: {{ $adminStats['completion_rate'] }}%"></div>
                </div>
            </div>
            <div class="mt-4 text-xs font-bold text-gray-400 relative z-10">{{ $adminStats['total_completed'] }} of {{ $adminStats['total_evals'] }} Submitted</div>
        </div>

        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition duration-300">
            <div class="absolute -right-4 -top-4 w-24 h-24 bg-orange-50 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-500"></div>
            <div class="relative z-10">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Awaiting Managers</p>
                <h3 class="text-4xl font-black text-orange-600 mt-2 font-sans">{{ $adminStats['total_draft'] }}</h3>
            </div>
            <div class="mt-4 text-xs font-bold text-orange-400 relative z-10">Evaluations stuck in Draft</div>
        </div>

        <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col justify-between relative overflow-hidden group hover:shadow-md transition duration-300">
            <div class="absolute -right-4 -top-4 w-24 h-24 bg-purple-50 rounded-full opacity-50 group-hover:scale-110 transition-transform duration-500"></div>
            <div class="relative z-10">
                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Awaiting Cross-Dept</p>
                <h3 class="text-4xl font-black text-purple-600 mt-2 font-sans">{{ $adminStats['total_cross'] }}</h3>
            </div>
            <div class="mt-4 text-xs font-bold text-purple-400 relative z-10">Bottlenecked at other depts</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm p-6 mb-8 border border-gray-100">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-2 border-b border-gray-100 pb-4 gap-4">
            <div>
                <h3 class="text-xl font-black text-gray-900 uppercase tracking-widest flex items-center">
                    <i class="fas fa-robot text-brand-500 mr-2"></i> AI Executive Summary
                </h3>
                <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">Powered by Gemini AI</p>
            </div>
            <div class="flex gap-3 w-full sm:w-auto">
                <button type="button" id="btn-dash-ai" onclick="generateDashboardAI()" class="flex-1 sm:flex-none bg-gray-900 text-white px-6 py-3 rounded-xl shadow-md hover:bg-black transition text-xs font-bold uppercase tracking-widest">Generate Report</button>
                <button type="button" id="btn-download-dash-pdf" onclick="downloadDashboardAIReport()" style="display: none;" class="flex-1 sm:flex-none bg-brand-600 text-white px-6 py-3 rounded-xl shadow-md hover:bg-brand-700 transition text-xs font-bold uppercase tracking-widest items-center justify-center">Download PDF</button>
            </div>
        </div>
        <div id="dash-ai-loading" class="hidden py-10 text-center">
            <i class="fas fa-spinner fa-spin text-4xl text-brand-500 mb-4"></i>
            <p class="text-brand-600 font-bold uppercase text-[10px] tracking-widest animate-pulse">Analyzing company-wide data...</p>
        </div>
        <div id="dash-ai-results-wrapper" class="hidden mt-4">
            <div id="dash-ai-results" class="p-6 bg-[#f5f5f5] rounded-xl border border-gray-200"></div>
        </div>
    </div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
            <h3 class="text-lg font-bold text-gray-900 font-sans">Recent Submissions</h3>
            <a href="{{ route('hr_evaluations.index') }}" class="text-sm font-bold text-brand-600 hover:underline">View All &rarr;</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50/50">
                    <tr>
                        <th class="px-6 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider">Employee</th>
                        <th class="px-6 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider">Department</th>
                        <th class="px-6 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider">Final Score</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($recentSubmissions as $submission)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 font-bold text-gray-900 flex items-center">
                                {{ $submission->employee->first_name }} {{ $submission->employee->last_name }}
                                @if($submission->employee->hasDoubleKpiAward($submission->start_date, $submission->total_score))
                                    <span class="ml-2 text-xs" title="Double KPI Award!">🏆</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ optional($submission->employee->department)->name }}</td>
                            <td class="px-6 py-4"><span class="bg-green-50 text-green-700 font-black px-3 py-1 rounded-lg border border-green-200">{{ floatval($submission->total_score) }}</span></td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-6 py-8 text-center text-gray-400">No recent submissions found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-lg font-bold text-gray-900 font-sans mb-4">Administration</h3>
        <div class="space-y-3">
            <a href="{{ route('employees.index') }}" class="flex items-center p-4 rounded-xl border border-gray-100 hover:border-brand-300 hover:bg-brand-50 transition group">
                <div class="w-10 h-10 bg-brand-100 text-brand-600 rounded-lg flex items-center justify-center mr-4 group-hover:bg-brand-600 group-hover:text-white transition">
                    <i class="fas fa-users-cog"></i>
                </div>
                <div><h4 class="font-bold text-gray-900">Manage Staff</h4><p class="text-xs text-gray-500">Edit employee records</p></div>
            </a>
            <a href="{{ route('kpis.index') }}" class="flex items-center p-4 rounded-xl border border-gray-100 hover:border-brand-300 hover:bg-brand-50 transition group">
                <div class="w-10 h-10 bg-brand-100 text-brand-600 rounded-lg flex items-center justify-center mr-4 group-hover:bg-brand-600 group-hover:text-white transition">
                    <i class="fas fa-clipboard-list"></i>
                </div>
                <div><h4 class="font-bold text-gray-900">KPI Templates</h4><p class="text-xs text-gray-500">Update grading metrics</p></div>
            </a>
        </div>
    </div>
</div>

@if($employee)
    <div class="bg-white rounded-2xl shadow-sm overflow-hidden max-w-4xl mt-8 border border-gray-100">
        <div class="p-6 border-b border-gray-100 bg-gray-50 flex items-center">
            <div class="w-10 h-10 bg-brand-200 text-brand-700 rounded-full flex items-center justify-center font-bold mr-4"><i class="fas fa-chart-line"></i></div>
            <h3 class="text-xl font-bold text-gray-900 font-sans">My Performance History</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-white border-b border-gray-100">
                    <tr>
                        <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest">Month</th>
                        <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest">Status</th>
                        <th class="px-6 py-4 text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest">Final Score</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50 bg-white">
                    @forelse($myHistory as $h)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-5 font-bold text-gray-900">
                                {{ \Carbon\Carbon::parse($h->start_date)->format('F Y') }}
                                @if($h->status == 'Submitted' && $employee->hasDoubleKpiAward($h->start_date, $h->total_score))
                                    <span class="ml-3 bg-gradient-to-r from-yellow-400 to-yellow-600 text-white px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest">🏆 Awarded</span>
                                @endif
                            </td>
                            <td class="px-6 py-5">
                                <span class="px-3 py-1.5 rounded-full text-[10px] font-bold uppercase {{ $h->status == 'Submitted' ? 'bg-green-50 text-green-700' : 'bg-orange-50 text-orange-600' }}">
                                    {{ $h->status == 'Submitted' ? 'Finalized' : 'Under Review' }}
                                </span>
                            </td>
                            <td class="px-6 py-5 text-right">
                                <span class="text-2xl font-black text-brand-600">{{ floatval($h->total_score) }}</span><span class="text-gray-400 text-sm">/100</span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3" class="px-6 py-10 text-center text-gray-400">No evaluations recorded yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endif

<script>
    function generateDashboardAI() {
        const btn = document.getElementById('btn-dash-ai');
        const pdfBtn = document.getElementById('btn-download-dash-pdf');
        const loading = document.getElementById('dash-ai-loading');
        const resultsWrapper = document.getElementById('dash-ai-results-wrapper');
        const results = document.getElementById('dash-ai-results');

        btn.disabled = true;
        btn.innerText = 'Analyzing...';
        resultsWrapper.classList.add('hidden');
        pdfBtn.style.display = 'none';
        loading.classList.remove('hidden');

        fetch('{{ route("ai.dashboard") }}', { 
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        })
        .then(r => r.json())
        .then(data => {
            loading.classList.add('hidden');
            if(data.success) {
                results.innerHTML = data.html;
                resultsWrapper.classList.remove('hidden');
                pdfBtn.style.display = 'flex'; 
            } else {
                results.innerHTML = `<div class="text-red-600 font-bold p-4">Error: ${data.error}</div>`;
                resultsWrapper.classList.remove('hidden');
            }
            btn.disabled = false;
            btn.innerText = 'Update Report';
        });
    }

    function downloadDashboardAIReport() {
        html2pdf().set({ margin: 0.5, filename: 'MOHM_Executive_Summary.pdf' })
        .from(document.getElementById('dash-ai-results')).save();
    }
</script>
@endsection