@extends('layouts.app')

@section('title', 'Activity & Performance Report - OVMSA')

@section('content')
    <!-- Report Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Activity & Performance Report</h1>
                <p class="text-gray-600 mt-1">System-Wide Activity Tracking and Performance Metrics</p>
            </div>
            <div class="flex items-center gap-3">
                <button onclick="window.print()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2">
                    <svg 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                    </svg>
                    Print Report
                </button>
                <a href="{{ route('dashboard') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    Back to Dashboard
                </a>
            </div>
        </div>
        <div class="h-1 bg-gradient-to-r from-purple-600 via-blue-500 to-purple-400 rounded-full"></div>
    </div>

    <!-- Report Metadata -->
    <div class="bg-gradient-to-r from-purple-600 to-purple-700 rounded-lg shadow-lg p-6 mb-8 text-white">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div>
                <p class="text-sm opacity-90">Report Generated</p>
                <p class="text-xl font-bold">{{ now()->format('M d, Y') }}</p>
                <p class="text-sm opacity-75">{{ now()->format('h:i A') }}</p>
            </div>
            <div>
                <p class="text-sm opacity-90">Generated By</p>
                <p class="text-xl font-bold">{{ auth()->user()->name }}</p>
                <p class="text-sm opacity-75">{{ auth()->user()->email }}</p>
            </div>
            <div>
                <p class="text-sm opacity-90">Report Type</p>
                <p class="text-xl font-bold">Activity Analysis</p>
                <p class="text-sm opacity-75">Performance tracking</p>
            </div>
            <div>
                <p class="text-sm opacity-90">Reporting Period</p>
                <p class="text-xl font-bold">Last 30 Days</p>
                <p class="text-sm opacity-75">{{ now()->subDays(30)->format('M d') }} - {{ now()->format('M d') }}</p>
            </div>
        </div>
    </div>

    <!-- Performance Metrics -->
    @php
        $totalRecords = collect($elementCounts)->sum('count');
        $activeElements = collect($elementCounts)->where('count', '>', 0)->count();
        $avgRecordsPerElement = $activeElements > 0 ? round($totalRecords / $activeElements, 1) : 0;
        $topPerformer = collect($elementCounts)->sortByDesc('count')->first();
    @endphp

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="p-3 bg-blue-50 rounded-lg">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                    </svg>
                </div>
                <span class="text-xs font-medium text-gray-500 uppercase">Total Activity</span>
            </div>
            <div class="flex items-baseline gap-2">
                <p class="text-4xl font-bold text-blue-600">{{ $totalRecords }}</p>
            </div>
            <p class="text-xs text-gray-600 mt-4">Records created/updated</p>
        </div>

        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="p-3 bg-green-50 rounded-lg">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                    </svg>
                </div>
                <span class="text-xs font-medium text-gray-500 uppercase">Active Elements</span>
            </div>
            <div class="flex items-baseline gap-2">
                <p class="text-4xl font-bold text-green-600">{{ $activeElements }}</p>
                <span class="text-sm text-gray-500">of 13</span>
            </div>
            <p class="text-xs text-gray-600 mt-4">Elements with activity</p>
        </div>

        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="p-3 bg-purple-50 rounded-lg">
                    <svg class="w-6 h-6 text-purple-600" 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>
                </div>
                <span class="text-xs font-medium text-gray-500 uppercase">Average Activity</span>
            </div>
            <div class="flex items-baseline gap-2">
                <p class="text-4xl font-bold text-purple-600">{{ $avgRecordsPerElement }}</p>
            </div>
            <p class="text-xs text-gray-600 mt-4">Records per active element</p>
        </div>

        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="p-3 bg-orange-50 rounded-lg">
                    <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                    </svg>
                </div>
                <span class="text-xs font-medium text-gray-500 uppercase">Top Performer</span>
            </div>
            <div class="flex items-baseline gap-2">
                <p class="text-2xl font-bold text-orange-600">Element {{ $topPerformer['id'] }}</p>
            </div>
            <p class="text-xs text-gray-600 mt-4">{{ $topPerformer['count'] }} records</p>
        </div>
    </div>

    <!-- Element Activity Breakdown -->
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm mb-8">
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
            <h2 class="text-xl font-bold text-gray-900">Element Activity Breakdown</h2>
            <p class="text-sm text-gray-600 mt-1">Recent activity across all OVMSA elements</p>
        </div>
        <div class="p-6">
            <div class="space-y-4">
                @foreach($elementCounts->sortByDesc('count') as $element)
                    <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex items-center gap-3">
                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-gradient-to-br from-purple-600 to-purple-700 text-white font-bold text-sm">
                                    {{ $element['id'] }}
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">{{ $element['name'] }}</h3>
                                    <p class="text-xs text-gray-500">{{ $element['count'] }} total records</p>
                                </div>
                            </div>
                            <div class="text-right">
                                @if($element['count'] > 0)
                                    @php
                                        $percentage = $totalRecords > 0 ? round(($element['count'] / $totalRecords) * 100, 1) : 0;
                                    @endphp
                                    <span class="text-2xl font-bold text-purple-600">{{ $percentage }}%</span>
                                    <p class="text-xs text-gray-500">of total activity</p>
                                @else
                                    <span class="text-sm text-gray-400">No activity</span>
                                @endif
                            </div>
                        </div>
                        <div class="h-3 bg-gray-100 rounded-full overflow-hidden">
                            @if($element['count'] > 0)
                                @php
                                    $barWidth = $totalRecords > 0 ? ($element['count'] / $totalRecords) * 100 : 0;
                                @endphp
                                <div class="h-full bg-gradient-to-r from-purple-500 to-purple-600 rounded-full transition-all" style="width: {{ $barWidth }}%"></div>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Performance Insights -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- Top Performing Elements -->
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="bg-gradient-to-r from-green-50 to-green-100 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-bold text-green-900">Top Performing Elements</h3>
                <p class="text-sm text-green-700 mt-1">Highest activity levels</p>
            </div>
            <div class="p-6">
                <div class="space-y-3">
                    @foreach($elementCounts->sortByDesc('count')->take(5) as $index => $element)
                        @if($element['count'] > 0)
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex items-center gap-3">
                                    <div class="flex items-center justify-center w-8 h-8 rounded-full bg-green-600 text-white font-bold text-sm">
                                        {{ $index + 1 }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900 text-sm">{{ $element['name'] }}</p>
                                    </div>
                                </div>
                                <span class="text-lg font-bold text-green-600">{{ $element['count'] }}</span>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Activity Trends -->
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm">
            <div class="bg-gradient-to-r from-blue-50 to-blue-100 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-bold text-blue-900">Activity Trends</h3>
                <p class="text-sm text-blue-700 mt-1">Key performance indicators</p>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="p-2 bg-blue-100 rounded-lg">
                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-900">System Growth</p>
                            <p class="text-sm text-gray-600">{{ $totalRecords }} records demonstrate consistent documentation</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="p-2 bg-green-100 rounded-lg">
                            <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-900">Element Coverage</p>
                            <p class="text-sm text-gray-600">{{ $activeElements }} of 13 elements actively maintained</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="p-2 bg-purple-100 rounded-lg">
                            <svg class="w-5 h-5 text-purple-600" 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>
                        </div>
                        <div class="flex-1">
                            <p class="font-medium text-gray-900">Distribution Balance</p>
                            <p class="text-sm text-gray-600">Average {{ $avgRecordsPerElement }} records per active element</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recommendations -->
    <div class="bg-white border border-gray-200 rounded-lg shadow-sm mb-8">
        <div class="bg-gradient-to-r from-orange-50 to-orange-100 px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-bold text-orange-900">Recommendations</h3>
            <p class="text-sm text-orange-700 mt-1">Actions to improve system performance</p>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @if(collect($elementCounts)->where('count', '=', 0)->count() > 0)
                    <div class="flex items-start gap-3 p-4 bg-orange-50 border border-orange-200 rounded-lg">
                        <svg class="w-5 h-5 text-orange-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                        <div>
                            <p class="font-medium text-orange-900 text-sm">Initialize Pending Elements</p>
                            <p class="text-xs text-orange-700 mt-1">{{ collect($elementCounts)->where('count', '=', 0)->count() }} elements require initial setup to ensure full system coverage</p>
                        </div>
                    </div>
                @endif
                <div class="flex items-start gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <svg class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <p class="font-medium text-blue-900 text-sm">Regular Reviews</p>
                        <p class="text-xs text-blue-700 mt-1">Schedule periodic reviews of all elements to maintain documentation quality</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <svg class="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <div>
                        <p class="font-medium text-green-900 text-sm">Maintain Momentum</p>
                        <p class="text-xs text-green-700 mt-1">Continue current documentation practices for active elements</p>
                    </div>
                </div>
                <div class="flex items-start gap-3 p-4 bg-purple-50 border border-purple-200 rounded-lg">
                    <svg class="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"/>
                        <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"/>
                    </svg>
                    <div>
                        <p class="font-medium text-purple-900 text-sm">Staff Training</p>
                        <p class="text-xs text-purple-700 mt-1">Ensure all personnel are trained on documentation procedures</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Footer -->
    <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 mt-8">
        <div class="text-center">
            <p class="text-sm text-gray-600">
                This report was automatically generated by the OVMSA Management System
            </p>
            <p class="text-xs text-gray-500 mt-2">
                © {{ now()->year }} BSS OVMSA. All rights reserved. | Report ID: {{ strtoupper(uniqid()) }}
            </p>
        </div>
    </div>
@endsection