@extends('layouts.cp')
@section('title', 'Dashboard')

@section('content')

{{-- Header with refresh --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-sm font-medium text-gray-900">Welcome back, {{ auth()->user()->first_name }}.</h2>
        <p class="text-xs text-gray-400 mt-0.5">Last refreshed: <span id="last-refresh">just now</span></p>
    </div>
    <button onclick="refreshDashboard()"
        class="flex items-center gap-2 px-3 py-2 text-sm border border-gray-200 rounded-lg hover:bg-gray-50 text-gray-600">
        <svg id="refresh-icon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        Refresh
    </button>
</div>

{{-- User Stats --}}
<div class="mb-6">
    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Web Administrasi — Users</p>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Total Users</p>
            <p class="text-2xl font-semibold text-gray-900" id="stat-total">{{ $userStats['total'] }}</p>
            <p class="text-xs text-gray-400 mt-1">all registered users</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Active Users</p>
            <p class="text-2xl font-semibold text-green-600" id="stat-active">{{ $userStats['active'] }}</p>
            <p class="text-xs text-gray-400 mt-1">currently active</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Inactive Users</p>
            <p class="text-2xl font-semibold text-red-500" id="stat-inactive">{{ $userStats['inactive'] }}</p>
            <p class="text-xs text-gray-400 mt-1">deactivated accounts</p>
        </div>
    </div>
</div>

{{-- Role Stats --}}
<div class="mb-6">
    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Roles — Web Administrasi</p>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Total Roles</p>
            <p class="text-2xl font-semibold text-gray-900" id="stat-role-total">{{ $cpStats['total_roles'] }}</p>
            <p class="text-xs text-gray-400 mt-1">all roles</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Active Roles</p>
            <p class="text-2xl font-semibold text-green-600" id="stat-role-active">{{ $cpStats['active_roles'] }}</p>
            <p class="text-xs text-gray-400 mt-1">currently active</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Inactive Roles</p>
            <p class="text-2xl font-semibold text-red-500" id="stat-role-inactive">{{ $cpStats['inactive_roles'] }}</p>
            <p class="text-xs text-gray-400 mt-1">deactivated</p>
        </div>
    </div>
</div>

{{-- CP Stats --}}
<div class="mb-6">
    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Control Panel</p>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 p-5 cursor-pointer hover:border-gray-300"
             onclick="openMenuDetailModal()">
            <p class="text-xs text-gray-400 mb-1">Web Menus</p>
            <p class="text-2xl font-semibold text-gray-900">{{ $cpStats['web_menus'] }}</p>
            <p class="text-xs text-blue-500 mt-1">click for details →</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Active OTP Bypass</p>
            <p class="text-2xl font-semibold text-gray-900">{{ $cpStats['active_bypass'] }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">Error Logs</p>
            <p class="text-2xl font-semibold text-gray-900">{{ $cpStats['error_logs'] }}</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 p-5">
            <p class="text-xs text-gray-400 mb-1">CP Roles</p>
            <p class="text-2xl font-semibold text-gray-900">{{ $cpStats['cp_roles'] }}</p>
        </div>
    </div>
</div>

{{-- Manual Sync --}}
<div class="mb-6">
    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Manual Sync to Main App</p>
    <div class="bg-white rounded-xl border border-gray-200 p-5">
        <p class="text-xs text-gray-500 mb-4">Push latest data from CP to the main app.</p>
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
            <div class="border border-gray-100 rounded-lg p-3">
                <p class="text-xs font-medium text-gray-700 mb-1">Roles</p>
                <code class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded block mb-2 truncate">cp:sync-roles</code>
                <button onclick="triggerSync('roles')"
                    class="w-full text-xs py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                    Sync Roles
                </button>
            </div>
            <div class="border border-gray-100 rounded-lg p-3">
                <p class="text-xs font-medium text-gray-700 mb-1">Menus</p>
                <code class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded block mb-2 truncate">cp:sync-menus</code>
                <button onclick="triggerSync('menus')"
                    class="w-full text-xs py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                    Sync Menus
                </button>
            </div>
            <div class="border border-gray-100 rounded-lg p-3">
                <p class="text-xs font-medium text-gray-700 mb-1">Approval Flows</p>
                <code class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded block mb-2 truncate">cp:sync-approval-flows</code>
                <button onclick="triggerSync('approval-flows')"
                    class="w-full text-xs py-1.5 bg-gray-900 text-white rounded-lg hover:bg-gray-700">
                    Sync Flows
                </button>
            </div>
            <div class="border border-gray-100 rounded-lg p-3">
                <p class="text-xs font-medium text-gray-700 mb-1">Sync All</p>
                <code class="text-xs text-gray-400 bg-gray-50 px-2 py-1 rounded block mb-2 truncate">all at once</code>
                <button onclick="triggerSync('all')"
                    class="w-full text-xs py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Sync All
                </button>
            </div>
        </div>
        <div id="sync-result" class="mt-3 hidden">
            <div class="px-3 py-2 bg-gray-50 rounded-lg">
                <p class="text-xs font-medium text-gray-700" id="sync-message"></p>
                <div id="sync-details" class="mt-1 space-y-1 hidden"></div>
            </div>
        </div>
    </div>
</div>

{{-- Menu Detail Modal --}}
<div id="menu-detail-modal" class="fixed inset-0 z-50 hidden">
    <div class="absolute inset-0 bg-black/30" onclick="closeMenuDetailModal()"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-xl w-full max-w-lg p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="text-sm font-semibold text-gray-900">Web Menu Breakdown</h3>
                <p class="text-xs text-gray-400 mt-0.5">Total {{ $menuBreakdown['total'] }} menus</p>
            </div>
            <button onclick="closeMenuDetailModal()" class="text-gray-400 hover:text-gray-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div class="grid grid-cols-3 gap-3 mb-5">
            <div class="bg-gray-50 rounded-lg p-3 text-center">
                <p class="text-lg font-semibold text-gray-900">{{ $menuBreakdown['level1'] }}</p>
                <p class="text-xs text-gray-400">Parent Menus</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-3 text-center">
                <p class="text-lg font-semibold text-gray-900">{{ $menuBreakdown['level2'] }}</p>
                <p class="text-xs text-gray-400">Sub Menus</p>
            </div>
            <div class="bg-gray-50 rounded-lg p-3 text-center">
                <p class="text-lg font-semibold text-gray-900">{{ $menuBreakdown['level3'] }}</p>
                <p class="text-xs text-gray-400">Sub-sub Menus</p>
            </div>
        </div>

        <div class="space-y-2 max-h-64 overflow-y-auto">
            @foreach($menuBreakdown['detail'] as $item)
            <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg">
                <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full {{ $item['is_active'] ? 'bg-green-400' : 'bg-red-400' }}"></span>
                    <p class="text-sm text-gray-900">{{ $item['name'] }}</p>
                </div>
                <div class="flex items-center gap-3 text-xs text-gray-400">
                    @if($item['sub'] > 0)
                        <span>{{ $item['sub'] }} sub</span>
                    @endif
                    @if($item['level3'] > 0)
                        <span>{{ $item['level3'] }} sub-sub</span>
                    @endif
                    @if($item['sub'] === 0 && $item['level3'] === 0)
                        <span>no children</span>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<script>
function refreshDashboard() {
    const icon = document.getElementById('refresh-icon');
    icon.classList.add('animate-spin');

    fetch('{{ route('dashboard.stats') }}')
        .then(r => r.json())
        .then(data => {
            document.getElementById('stat-total').textContent = data.userStats.total;
            document.getElementById('stat-active').textContent = data.userStats.active;
            document.getElementById('stat-inactive').textContent = data.userStats.inactive;

            document.getElementById('stat-role-total').textContent = data.roleStats.total;
            document.getElementById('stat-role-active').textContent = data.roleStats.active;
            document.getElementById('stat-role-inactive').textContent = data.roleStats.inactive;

            const now = new Date();
            document.getElementById('last-refresh').textContent =
                now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
        })
        .finally(() => {
            icon.classList.remove('animate-spin');
        });
}

// Auto refresh when coming back to this page
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        refreshDashboard();
    }
});

function openMenuDetailModal() {
    document.getElementById('menu-detail-modal').classList.remove('hidden');
}

function closeMenuDetailModal() {
    document.getElementById('menu-detail-modal').classList.add('hidden');
}

function triggerSync(type) {
    const resultDiv = document.getElementById('sync-result');
    const messageEl = document.getElementById('sync-message');
    const detailsEl = document.getElementById('sync-details');

    resultDiv.classList.remove('hidden');
    detailsEl.classList.add('hidden');
    detailsEl.innerHTML = '';
    messageEl.className = 'text-xs font-medium text-gray-500';
    messageEl.textContent = 'Syncing ' + type + '...';

    fetch('{{ route('dashboard.sync') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ type: type })
    })
    .then(r => r.json())
    .then(data => {
        messageEl.textContent = data.message;
        messageEl.className = data.success
            ? 'text-xs font-medium text-green-700'
            : 'text-xs font-medium text-red-700';

        if (data.results) {
            detailsEl.classList.remove('hidden');
            if (typeof data.results === 'object') {
                Object.entries(data.results).forEach(([key, val]) => {
                    detailsEl.innerHTML += `<p class="text-xs text-gray-500">• ${key}: ${val}</p>`;
                });
            } else {
                detailsEl.innerHTML = `<p class="text-xs text-gray-500">${data.results}</p>`;
            }
        }

        // Show debug info if available
        if (data.debug) {
            detailsEl.classList.remove('hidden');
            detailsEl.innerHTML += `<p class="text-xs text-red-400 mt-1">Debug: ${data.debug}</p>`;
        }
    })
    .catch(err => {
        messageEl.textContent = 'Request failed: ' . err.message;
        messageEl.className = 'text-xs font-medium text-red-700';
    });
}
</script>

@endsection