@extends('layouts.app')

@section('title', 'Admin Dashboard - AgroSmart Pro')

@section('content')
<div class="space-y-8">
    <!-- Admin Header -->
    <div class="bg-gradient-to-r from-red-600 to-pink-600 rounded-2xl p-8 text-white shadow-lg">
        <h1 class="text-4xl font-bold mb-2">🛡️ Admin Control Panel</h1>
        <p class="text-lg text-red-100">System Overview & Management</p>
    </div>

    <!-- Key Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-600">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Total Users</p>
                    <p class="text-4xl font-bold text-blue-600 mt-2">{{ $stats['total_users'] }}</p>
                </div>
                <i class="fas fa-users text-4xl text-blue-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-600">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Farmers</p>
                    <p class="text-4xl font-bold text-green-600 mt-2">{{ $stats['total_farmers'] }}</p>
                </div>
                <i class="fas fa-leaf text-4xl text-green-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-orange-600">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">Officers</p>
                    <p class="text-4xl font-bold text-orange-600 mt-2">{{ $stats['total_officers'] }}</p>
                </div>
                <i class="fas fa-user-tie text-4xl text-orange-200"></i>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-600">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase">System Health</p>
                    <p class="text-4xl font-bold text-purple-600 mt-2">{{ $stats['fake_products_detected'] }}%</p>
                </div>
                <i class="fas fa-heartbeat text-4xl text-purple-200"></i>
            </div>
        </div>
    </div>

    <!-- Management Sections -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- User Management -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">👥 User Management</h2>
            <div class="space-y-3">
                <a href="#" class="flex items-center justify-between p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-list text-blue-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">View All Users</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 bg-green-50 rounded-lg hover:bg-green-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-user-plus text-green-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">Create New User</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 bg-red-50 rounded-lg hover:bg-red-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-ban text-red-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">Inactive Users</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
            </div>
        </div>

        <!-- Content Management -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">📋 Content Management</h2>
            <div class="space-y-3">
                <a href="#" class="flex items-center justify-between p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-virus text-purple-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">Manage Diseases</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-chart-line text-indigo-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">Market Prices</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
                <a href="#" class="flex items-center justify-between p-4 bg-yellow-50 rounded-lg hover:bg-yellow-100 transition">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-exclamation-circle text-yellow-600 text-xl"></i>
                        <span class="font-semibold text-gray-900">Alert Settings</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- Activity & Logs -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Activity -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">⚡ Recent Activity</h2>
            <div class="space-y-4">
                @for($i = 1; $i <= 5; $i++)
                    <div class="flex items-start space-x-4 pb-4 border-b border-gray-200 last:border-b-0">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-green-400 to-blue-500 flex items-center justify-center text-white">
                            <i class="fas fa-{{ ['user-plus', 'upload', 'message-circle', 'check-circle', 'alert-circle'][$i-1] }}"></i>
                        </div>
                        <div class="flex-1">
                            <p class="font-semibold text-gray-900">User {{ $i }} Activity</p>
                            <p class="text-sm text-gray-600">{{ $i * 5 }} minutes ago</p>
                        </div>
                    </div>
                @endfor
            </div>
        </div>

        <!-- System Stats -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">📊 System Performance</h2>
            <div class="space-y-6">
                <div>
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold text-gray-900">API Response Time</span>
                        <span class="text-sm font-bold text-green-600">245ms</span>
                    </div>
                    <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-green-600" style="width: 85%;"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold text-gray-900">Database Usage</span>
                        <span class="text-sm font-bold text-blue-600">62%</span>
                    </div>
                    <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-blue-600" style="width: 62%;"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold text-gray-900">Uptime</span>
                        <span class="text-sm font-bold text-purple-600">99.8%</span>
                    </div>
                    <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-purple-600" style="width: 99.8%;"></div>
                    </div>
                </div>

                <div>
                    <div class="flex justify-between mb-2">
                        <span class="font-semibold text-gray-900">Cache Hit Rate</span>
                        <span class="text-sm font-bold text-orange-600">78%</span>
                    </div>
                    <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-orange-600" style="width: 78%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-gradient-to-r from-gray-800 to-gray-900 rounded-2xl p-8 text-white shadow-lg">
        <h2 class="text-2xl font-bold mb-6">⚙️ System Actions</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <button onclick="clearCache()" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition flex items-center justify-center space-x-2">
                <i class="fas fa-trash"></i>
                <span>Clear Cache</span>
            </button>
            <button onclick="backupDatabase()" class="px-6 py-3 bg-green-600 hover:bg-green-700 rounded-lg font-bold transition flex items-center justify-center space-x-2">
                <i class="fas fa-database"></i>
                <span>Backup DB</span>
            </button>
            <button onclick="exportLogs()" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-bold transition flex items-center justify-center space-x-2">
                <i class="fas fa-download"></i>
                <span>Export Logs</span>
            </button>
            <button onclick="systemRestart()" class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-lg font-bold transition flex items-center justify-center space-x-2">
                <i class="fas fa-power-off"></i>
                <span>Restart</span>
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function clearCache() {
    if (confirm('Are you sure? This will clear all cached data.')) {
        axios.post('/api/admin/clear-cache')
            .then(() => alert('Cache cleared successfully!'))
            .catch(err => alert('Error: ' + err.message));
    }
}

function backupDatabase() {
    if (confirm('Start database backup?')) {
        axios.post('/api/admin/backup-database')
            .then(() => alert('Backup started!'))
            .catch(err => alert('Error: ' + err.message));
    }
}

function exportLogs() {
    window.location.href = '/api/admin/export-logs';
}

function systemRestart() {
    if (confirm('⚠️ This will restart the system. Continue?')) {
        axios.post('/api/admin/restart-system')
            .then(() => alert('System restarting...'))
            .catch(err => alert('Error: ' + err.message));
    }
}
</script>
@endpush