@extends('backend.layouts.app')

@section('title', \App\Http\Helpers\MenuHelper::getPageTitle())

@push('styles')
    <link href="{{ asset('vendor/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <!-- Breadcrumb Start -->
    <div x-data="{ pageName: @js(\App\Http\Helpers\MenuHelper::getPageTitle()) }" class="mb-6">
        <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90" x-text="pageName"></h2>
            <nav>
                <ol class="flex items-center gap-1.5">
                    <li>
                        <a class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                            href="{{ route('admin.home') }}">Home</a>
                    </li>
                    <li class="flex items-center gap-1.5 text-sm text-gray-800 dark:text-white/90">
                        <svg class="stroke-current" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" /></svg>
                        <span x-text="pageName"></span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <div class="space-y-5 sm:space-y-6">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="px-5 py-4 sm:px-6 sm:py-5">
                <!-- Stats Cards -->
                <div class="mb-6 flex flex-wrap items-stretch gap-4">
                    <div class="min-w-[200px] flex-1 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-white/[0.03]">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Permissions</p>
                                <p class="mt-1 text-2xl font-bold text-gray-800 dark:text-white">{{ $stats['total'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                <svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="min-w-[200px] flex-1 rounded-xl border border-green-200 bg-green-50 p-5 dark:border-green-800 dark:bg-green-900/20">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-green-600 dark:text-green-400">Generated</p>
                                <p class="mt-1 text-2xl font-bold text-green-700 dark:text-green-300">{{ $stats['generated'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/50">
                                <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="min-w-[200px] flex-1 rounded-xl border border-red-200 bg-red-50 p-5 dark:border-red-800 dark:bg-red-900/20">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-red-600 dark:text-red-400">Missing</p>
                                <p class="mt-1 text-2xl font-bold text-red-700 dark:text-red-300">{{ $stats['missing'] }}</p>
                            </div>
                            <div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50">
                                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Generate Form -->
                <div class="mb-6 overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="border-b border-gray-100 bg-gray-50/80 px-6 py-4 dark:border-gray-800 dark:bg-gray-900/30">
                        <div class="flex items-center gap-3">
                            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-base font-semibold text-gray-800 dark:text-white/90">Generate New Permission</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Select a model and actions to create permissions automatically.</p>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('auto-permissions.generate') }}" method="POST" class="p-4 sm:p-6">
                        @csrf
                        <div class="space-y-5">
                            <!-- Row 1: Model & Roles -->
                            <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                                <!-- Model -->
                                <div>
                                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                        Model <span class="text-error-500">*</span>
                                    </label>
                                    <select name="model" required
                                        class="js-model-select dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        <option value="">-- Select Model --</option>
                                        @foreach ($models as $model)
                                            <option value="{{ $model['class'] }}" {{ old('model') == $model['class'] ? 'selected' : '' }}>
                                                {{ $model['name'] }} ({{ $model['prefix'] }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-500">Permissions will be prefixed using the model route prefix.</p>
                                </div>

                                <!-- Roles -->
                                <div>
                                    <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Assign to Roles</label>
                                    <select name="roles[]" multiple
                                        class="js-role-select dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                                        @foreach ($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                    <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-500">Optional. Leave empty to create permissions without role assignment.</p>
                                </div>
                            </div>

                            <!-- Row 2: Actions -->
                            <div>
                                <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Actions</label>
                                <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-3">
                                    @php
                                        $actionMeta = [
                                            'view' => ['color' => 'blue', 'icon' => 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'],
                                            'create' => ['color' => 'green', 'icon' => 'M12 4v16m8-8H4'],
                                            'update' => ['color' => 'yellow', 'icon' => 'M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'],
                                            'delete' => ['color' => 'red', 'icon' => 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'],
                                        ];
                                    @endphp
                                    @foreach ($actionMeta as $action => $meta)
                                        @php($checked = in_array($action, old('actions', ['view', 'create', 'update', 'delete']), true))
                                        <label class="group flex cursor-pointer items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2.5 transition-all hover:border-{{ $meta['color'] }}-300 hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-{{ $meta['color'] }}-500/50 sm:gap-3 sm:px-4 sm:py-3">
                                            <input type="checkbox" name="actions[]" value="{{ $action }}" {{ $checked ? 'checked' : '' }}
                                                class="peer h-4 w-4 shrink-0 rounded border-gray-300 text-{{ $meta['color'] }}-500 focus:ring-{{ $meta['color'] }}-500 dark:border-gray-600">
                                            <div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-{{ $meta['color'] }}-50 text-{{ $meta['color'] }}-500 transition-colors group-hover:bg-{{ $meta['color'] }}-100 dark:bg-{{ $meta['color'] }}-900/20 dark:text-{{ $meta['color'] }}-400 sm:h-8 sm:w-8">
                                                <svg class="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ $meta['icon'] }}" />
                                                </svg>
                                            </div>
                                            <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ ucfirst($action) }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Submit -->
                        <div class="mt-6 flex flex-col-reverse gap-3 border-t border-gray-100 pt-5 sm:flex-row sm:items-center sm:justify-end dark:border-gray-800">
                            <div class="flex gap-3">
                                <button type="button" onclick="toggleActions(true)"
                                    class="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 sm:flex-none">
                                    Select All
                                </button>
                                <button type="button" onclick="toggleActions(false)"
                                    class="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 sm:flex-none">
                                    Clear
                                </button>
                            </div>
                            <button type="submit"
                                class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-brand-600 focus:ring-3 focus:ring-brand-500/20">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                                </svg>
                                Generate Permissions
                            </button>
                        </div>
                    </form>
                </div>

                <div class="rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.02]">
                    <div class="p-5">
                        <!-- Search -->
                        <form method="GET" action="{{ route('auto-permissions.index') }}" id="search-form" class="mb-4 flex items-center justify-end gap-3">
                            <input type="text" name="search" value="{{ $search ?? '' }}" placeholder="Search permission..."
                                oninput="debounceSearch(this)"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 w-full max-w-xs rounded-lg border border-gray-300 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                        </form>
                        <script>
                            let searchTimer;
                            function debounceSearch(el) {
                                clearTimeout(searchTimer);
                                searchTimer = setTimeout(() => el.form.submit(), 1500);
                            }
                        </script>
                        <!-- Table -->
                        <div class="max-w-full overflow-x-auto">
                            <div class="min-w-[700px]">
                                <table class="w-full">
                                    <thead>
                                        <tr class="border-b border-gray-100 dark:border-gray-800">
                                            <th class="px-5 py-3 text-left">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">#</span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Permission</span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Module</span>
                                            </th>
                                            <th class="px-5 py-3 text-left">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Action</span>
                                            </th>
                                            <th class="px-5 py-3 text-center">
                                                <span class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Status</span>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                        @forelse($permissions as $index => $perm)
                                            <tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50 {{ $perm['generated'] ? '' : 'bg-red-50/50 dark:bg-red-900/10' }}">
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm font-medium text-gray-800 dark:text-white/90">
                                                        {{ ($paginator->currentPage() - 1) * $paginator->perPage() + $index + 1 }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block font-mono text-xs text-gray-700 dark:text-gray-300">
                                                        {{ $perm['permission'] }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="block text-sm text-gray-600 dark:text-gray-400">
                                                        {{ $perm['module'] }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4">
                                                    <span class="rounded-full px-2 py-0.5 text-xs font-medium
                                                        @if($perm['action'] == 'view') bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400
                                                        @elseif($perm['action'] == 'create') bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400
                                                        @elseif($perm['action'] == 'update') bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400
                                                        @elseif($perm['action'] == 'delete') bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400
                                                        @endif">
                                                        {{ ucfirst($perm['action']) }}
                                                    </span>
                                                </td>
                                                <td class="px-5 py-4 text-center">
                                                    @if($perm['generated'])
                                                        <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
                                                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                                            </svg>
                                                            Generated
                                                        </span>
                                                    @else
                                                        <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
                                                            <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                                            </svg>
                                                            Missing
                                                        </span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="px-5 py-12 text-center">
                                                    <div class="mx-auto max-w-md">
                                                        <h4 class="mb-1 text-base font-medium text-gray-700 dark:text-gray-300">
                                                            No permissions found</h4>
                                                        <p class="text-sm text-gray-500 dark:text-gray-500">
                                                            No permissions match your search criteria.
                                                        </p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- Pagination -->
                        <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                            {{ $paginator->appends(request()->query())->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/jquery.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/dist/js/select2.min.js') }}"></script>
    <script>
        function toggleActions(checked) {
            document.querySelectorAll('input[name="actions[]"]').forEach(cb => cb.checked = checked);
        }

        document.addEventListener('DOMContentLoaded', function() {
            $('.js-role-select').select2({
                searchable: true,
                width: '100%',
                placeholder: 'Select roles',
                closeOnSelect: false
            });

            $('.js-model-select').select2({
                searchable: true,
                width: '100%',
                placeholder: '-- Select Model --'
            });
        });
    </script>
@endpush