@extends('layouts.app')

@section('title', 'Dashboard')
@section('subtitle', 'Overview sistem dan monitoring akses')

@section('content')
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

    <!-- Total Employees -->
    <div class="glass-card rounded-2xl p-6 hover-lift relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-primary-100 rounded-full -mr-16 -mt-16 opacity-50"></div>
        <div class="relative">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-primary-100 text-primary-600 flex items-center justify-center">
                    <i class="fas fa-users text-xl"></i>
                </div>
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">
                    <i class="fas fa-arrow-up mr-1"></i>12%
                </span>
            </div>
            <h3 class="text-3xl font-bold text-secondary-800 mb-1">{{ $stats['total_employees'] }}</h3>
            <p class="text-sm text-secondary-500">Total Pegawai</p>
            <div class="mt-4 flex items-center text-xs text-secondary-400">
                <span class="w-2 h-2 rounded-full bg-emerald-400 mr-2"></span>
                {{ $stats['active_employees'] }} aktif
            </div>
        </div>
    </div>

    <!-- Retiring Soon -->
    <div class="glass-card rounded-2xl p-6 hover-lift relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-amber-100 rounded-full -mr-16 -mt-16 opacity-50"></div>
        <div class="relative">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-amber-100 text-amber-600 flex items-center justify-center">
                    <i class="fas fa-user-clock text-xl"></i>
                </div>
                <span class="text-xs font-medium text-amber-600 bg-amber-50 px-2 py-1 rounded-full">
                    Butuh Perhatian
                </span>
            </div>
            <h3 class="text-3xl font-bold text-secondary-800 mb-1">{{ $stats['retiring_soon'] }}</h3>
            <p class="text-sm text-secondary-500">Akan Pensiun (30 hari)</p>
            <div class="mt-4 w-full bg-secondary-100 rounded-full h-1.5">
                <div class="bg-amber-500 h-1.5 rounded-full" style="width: {{ min($stats['retiring_soon'] / 10 * 100, 100) }}%"></div>
            </div>
        </div>
    </div>

    <!-- Expiring Access -->
    <div class="glass-card rounded-2xl p-6 hover-lift relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-rose-100 rounded-full -mr-16 -mt-16 opacity-50"></div>
        <div class="relative">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center">
                    <i class="fas fa-key text-xl"></i>
                </div>
                <span class="text-xs font-medium text-rose-600 bg-rose-50 px-2 py-1 rounded-full animate-pulse">
                    Segera
                </span>
            </div>
            <h3 class="text-3xl font-bold text-secondary-800 mb-1">{{ $expiringAccess->count() }}</h3>
            <p class="text-sm text-secondary-500">Akses Expiring (7 hari)</p>
            <a href="{{ route('revocations.index') }}" class="mt-4 inline-flex items-center text-xs text-rose-600 hover:text-rose-700 font-medium">
                Proses sekarang <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>

    <!-- Pending Extensions -->
    <div class="glass-card rounded-2xl p-6 hover-lift relative overflow-hidden">
        <div class="absolute top-0 right-0 w-32 h-32 bg-purple-100 rounded-full -mr-16 -mt-16 opacity-50"></div>
        <div class="relative">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center">
                    <i class="fas fa-clock text-xl"></i>
                </div>
                @if($pendingExtensions->count() > 0)
                    <span class="text-xs font-medium text-white bg-purple-500 px-2 py-1 rounded-full animate-pulse">
                        {{ $pendingExtensions->count() }} pending
                    </span>
                @endif
            </div>
            <h3 class="text-3xl font-bold text-secondary-800 mb-1">{{ $pendingExtensions->count() }}</h3>
            <p class="text-sm text-secondary-500">Perpanjangan Pending</p>
            <a href="{{ route('extensions.index') }}" class="mt-4 inline-flex items-center text-xs text-purple-600 hover:text-purple-700 font-medium">
                Lihat request <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
    </div>
</div>

<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Chart Section -->
    <div class="lg:col-span-2 glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-lg font-bold text-secondary-800">Trend Pensiun Tahun {{ date('Y') }}</h3>
                <p class="text-sm text-secondary-500">Grafik pegawai pensiun per bulan</p>
            </div>
            <div class="flex items-center space-x-2">
                <button class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors">
                    Tahun Ini
                </button>
                <button class="px-3 py-1.5 text-xs font-medium text-secondary-500 hover:bg-secondary-50 rounded-lg transition-colors">
                    Bulan Ini
                </button>
            </div>
        </div>
        <div class="h-72">
            <canvas id="retirementChart"></canvas>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-secondary-800">Aktivitas Terbaru</h3>
            <a href="{{ route('reminders.index') }}" class="text-xs text-primary-600 hover:text-primary-700 font-medium">
                Lihat Semua
            </a>
        </div>

        <div class="space-y-4 max-h-72 overflow-y-auto pr-2">
            @forelse($recentReminders as $reminder)
                @php
                    // Format waktu aktivitas
                    $diffInHours = now()->diffInHours($reminder->created_at);
                    $diffInDays = now()->diffInDays($reminder->created_at);

                    if ($diffInHours < 1) {
                        $timeAgo = 'Baru saja';
                    } elseif ($diffInHours < 24) {
                        $timeAgo = round($diffInHours) . ' jam yang lalu';
                    } elseif ($diffInDays < 30) {
                        $timeAgo = round($diffInDays) . ' hari yang lalu';
                    } else {
                        $timeAgo = $reminder->created_at->format('d M Y');
                    }
                @endphp
                <div class="flex items-start space-x-3 p-3 rounded-xl hover:bg-white/50 transition-colors">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0
                        {{ $reminder->status === 'sent' ? 'bg-emerald-100 text-emerald-600' : 'bg-rose-100 text-rose-600' }}">
                        <i class="fas {{ $reminder->status === 'sent' ? 'fa-check' : 'fa-times' }} text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-secondary-800 truncate">
                            {{ $reminder->getTypeLabelAttribute() }}
                        </p>
                        <p class="text-xs text-secondary-500 mt-0.5">
                            {{ $reminder->employee->name ?? 'Unknown' }}
                        </p>
                        <p class="text-xs text-secondary-400 mt-1">
                            <i class="far fa-clock mr-1"></i>{{ $timeAgo }}
                        </p>
                    </div>
                </div>
            @empty
                <div class="text-center py-8 text-secondary-400">
                    <i class="fas fa-inbox text-3xl mb-2"></i>
                    <p class="text-sm">Belum ada aktivitas</p>
                </div>
            @endforelse
        </div>
    </div>
</div>

<!-- Expiring Access Table -->
<div class="mt-8 glass-card rounded-2xl overflow-hidden">
    <div class="px-6 py-4 border-b border-secondary-100 flex items-center justify-between bg-gradient-to-r from-primary-50/50 to-transparent">
        <div>
            <h3 class="text-lg font-bold text-secondary-800">Akses Segera Expire</h3>
            <p class="text-sm text-secondary-500">{{ $expiringAccess->count() }} akses perlu ditinjau</p>
        </div>
        <a href="{{ route('revocations.index') }}" class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white text-sm font-medium rounded-xl transition-all shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30">
            Kelola Semua
        </a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-secondary-50/50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Pegawai</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Akses</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Kategori</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Tanggal Expire</th>
                    <th class="px-6 py-4 text-left text-xs font-semibold text-secondary-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-4 text-right text-xs font-semibold text-secondary-500 uppercase tracking-wider">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-secondary-100">
                @forelse($expiringAccess->take(5) as $access)
                    @php
                        // Calculate time until expiry
                        $timeUntilExpiry = null;
                        $timeLabel = '';
                        $timeColor = '';

                        if ($access->current_expiry_date) {
                            $now = now();
                            $expiryDate = $access->current_expiry_date;

                            if ($expiryDate->isFuture()) {
                                $diffInHours = $now->diffInHours($expiryDate, false);
                                $diffInDays = $now->diffInDays($expiryDate, false);

                                if ($diffInHours < 1) {
                                    // Less than 1 hour
                                    $diffInMinutes = $now->diffInMinutes($expiryDate, false);
                                    $timeUntilExpiry = ceil($diffInMinutes);
                                    $timeLabel = $timeUntilExpiry . ' menit lagi';
                                    $timeColor = 'text-rose-600';
                                } elseif ($diffInHours < 24) {
                                    // Less than 24 hours - show in hours
                                    $timeUntilExpiry = ceil($diffInHours);
                                    $timeLabel = $timeUntilExpiry . ' jam lagi';
                                    $timeColor = 'text-rose-600';
                                } elseif ($diffInDays > 0) {
                                    // More than 24 hours - show in days
                                    $timeUntilExpiry = ceil($diffInDays);
                                    $timeLabel = $timeUntilExpiry . ' hari lagi';
                                    $timeColor = $diffInDays <= 3 ? 'text-rose-500' : 'text-amber-600';
                                }
                            } elseif ($expiryDate->isPast()) {
                                $timeLabel = 'Sudah expired';
                                $timeColor = 'text-gray-500';
                            } else {
                                $timeLabel = 'Expired hari ini';
                                $timeColor = 'text-rose-600';
                            }
                        }

                        $categoryColors = [
                            'physical' => 'bg-blue-100 text-blue-800',
                            'digital' => 'bg-purple-100 text-purple-800',
                            'network' => 'bg-cyan-100 text-cyan-800',
                            'application' => 'bg-amber-100 text-amber-800',
                            'cloud' => 'bg-sky-100 text-sky-800',
                            'file' => 'bg-emerald-100 text-emerald-800',
                            'other' => 'bg-gray-100 text-gray-800',
                        ];
                        $categoryClass = $categoryColors[$access->accessCatalog->category] ?? $categoryColors['other'];

                        $statusColors = [
                            'active' => ['bg' => 'bg-emerald-100', 'text' => 'text-emerald-800', 'dot' => 'bg-emerald-500'],
                            'extended' => ['bg' => 'bg-amber-100', 'text' => 'text-amber-800', 'dot' => 'bg-amber-500'],
                            'revoked' => ['bg' => 'bg-gray-100', 'text' => 'text-gray-800', 'dot' => 'bg-gray-500'],
                        ];
                        $statusStyle = $statusColors[$access->status] ?? $statusColors['active'];
                    @endphp
                    <tr class="hover:bg-white/60 transition-colors group">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 text-white flex items-center justify-center font-bold text-sm">
                                    {{ substr($access->employee->name, 0, 2) }}
                                </div>
                                <div class="ml-3">
                                    <p class="text-sm font-medium text-secondary-800">{{ $access->employee->name }}</p>
                                    <p class="text-xs text-secondary-500">{{ $access->employee->nip }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm font-medium text-secondary-800">{{ $access->accessCatalog->name }}</p>
                            <p class="text-xs text-secondary-500">{{ $access->accessCatalog->code }}</p>
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $categoryClass }}">
                                {{ $access->accessCatalog->getCategoryLabelAttribute() }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex items-center text-sm text-secondary-700">
                                <i class="far fa-calendar-alt mr-2 text-secondary-400"></i>
                                {{ $access->current_expiry_date->format('d M Y') }}
                            </div>
                            @if($timeLabel)
                                <p class="text-xs mt-1 font-medium {{ $timeColor }}">
                                    <i class="far fa-clock mr-1"></i>
                                    {{ $timeLabel }}
                                </p>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusStyle['bg'] }} {{ $statusStyle['text'] }}">
                                <span class="w-1.5 h-1.5 rounded-full mr-1.5 {{ $statusStyle['dot'] }}"></span>
                                {{ ucfirst($access->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end space-x-2">
                                <a href="{{ route('extensions.create', $access) }}" class="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors" title="Perpanjang">
                                    <i class="fas fa-clock"></i>
                                </a>
                                <button onclick="confirmRevoke({{ $access->id }})" class="p-2 text-rose-600 hover:bg-rose-50 rounded-lg transition-colors" title="Cabut Akses">
                                    <i class="fas fa-ban"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-secondary-400">
                            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-100 flex items-center justify-center">
                                <i class="fas fa-check text-emerald-500 text-2xl"></i>
                            </div>
                            <p class="text-sm font-medium">Tidak ada akses yang akan expire dalam 7 hari</p>
                            <p class="text-xs mt-1">Semua akses aman</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
    // Retirement Chart
    const ctx = document.getElementById('retirementChart').getContext('2d');
    const retirementData = @json($retirementChart);

    const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
    const data = labels.map((_, index) => retirementData[index + 1] || 0);

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Pegawai Pensiun',
                data: data,
                borderColor: '#3b82f6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#3b82f6',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
                pointRadius: 5,
                pointHoverRadius: 7
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0,0,0,0.05)',
                        drawBorder: false
                    },
                    ticks: {
                        font: { family: 'Plus Jakarta Sans' }
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        font: { family: 'Plus Jakarta Sans' }
                    }
                }
            }
        }
    });

    function confirmRevoke(accessId) {
        if (confirm('Apakah Anda yakin ingin mencabut akses ini sekarang?')) {
            // Submit form revoke
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/revocations/${accessId}/revoke`;
            form.innerHTML = `
                @csrf
                <input type="hidden" name="confirm" value="REVOKE">
            `;
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
@endpush
@endsection