@extends('layouts.app')

@section('title', 'Yetki Yönetimi')

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
        <div>
            <h1 class="h4 mb-1">Yetki Yönetimi</h1>
            <p class="text-muted mb-0">Role bağlı modül ve menü yetkilerini yönetin.</p>
        </div>
    </div>

    @include('admin.partials.permissions-nav')

    @if (request()->query('saved'))
        <div class="alert alert-soft">Yetkiler kaydedildi.</div>
    @elseif (request()->query('error'))
        <div class="alert alert-danger">İşlem sırasında hata oluştu.</div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">Rol Seç</h5>
        </div>
        <div class="card-body">
            <form method="get" action="{{ route('admin.roles.permissions.index') }}" id="roleSearchForm">
                <input type="hidden" name="role_id" id="roleIdInput" value="{{ $roleId ?: '' }}">
                <div style="max-width:480px;position:relative">
                    <input
                        type="text"
                        id="roleSearchInput"
                        class="form-control"
                        placeholder="Rol adı veya kod ile arayın…"
                        autocomplete="off"
                        value="{{ $role ? ($role->label ?? ucfirst($role->name)) . ' (' . $role->name . ')' : '' }}"
                    >
                    {{-- Dropdown body'e append edilecek, position:fixed ile --}}
                </div>
                @if ($roleId)
                    <div class="mt-2">
                        <a href="{{ route('admin.roles.permissions.index') }}" class="btn btn-sm btn-outline-secondary">Temizle</a>
                    </div>
                @endif
            </form>
        </div>
    </div>

    @if (!$role)
        <div class="alert alert-light">Devam etmek için rol seçin.</div>
    @else
        @php
            $rolePermissionKeyMap = array_fill_keys($rolePermissionKeys ?? [], true);
            $roleMenuMap = array_fill_keys($roleMenuPermissions ?? [], true);
        @endphp

        <form method="post" action="{{ route('admin.roles.permissions.store') }}" data-role-permissions>
            @csrf
            <input type="hidden" name="role_id" value="{{ $role->id }}">
            <input type="hidden" name="role_name" value="{{ $role->name }}">

            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <div>
                            <h5 class="mb-1">{{ $role->label ?? ucfirst($role->name) }}</h5>
                            <div class="text-muted small">{{ $role->name }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Modül Yetkileri</h5>
                </div>
                <div class="card-body">
                    @if (!$modulesReady)
                        <div class="alert alert-warning mb-0">Modül tabloları hazır değil.</div>
                    @else
                        <div class="vstack gap-3">
                            @foreach ($modules as $module)
                                @php
                                    $moduleKey = (string) $module->key;
                                    $moduleLabel = $moduleLabels[$moduleKey] ?? ($moduleKey === 'assets' ? 'Envanter Yönetimi' : $module->name);
                                    $viewKey = 'module.' . $moduleKey . '.view';
                                    $manageKey = 'module.' . $moduleKey . '.manage';
                                    $viewAllowed = !empty($rolePermissionKeyMap[$viewKey]);
                                    $manageAllowed = !empty($rolePermissionKeyMap[$manageKey]);
                                    $moduleActive = $viewAllowed || $manageAllowed;
                                    $viewAvailable = array_key_exists($viewKey, $modulePermissionMap);
                                    $manageAvailable = array_key_exists($manageKey, $modulePermissionMap);
                                @endphp
                                <div class="border rounded p-3">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                                        <div>
                                            <div class="fw-semibold">{{ $moduleLabel }}</div>
                                            <div class="text-muted small">{{ $moduleKey }}</div>
                                        </div>
                                        <div class="d-flex flex-wrap gap-3 align-items-center">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input js-module-toggle"
                                                       type="checkbox"
                                                       id="role_module_view_{{ $moduleKey }}"
                                                       name="module_permissions[{{ $viewKey }}]"
                                                       value="1"
                                                       data-module-key="{{ $moduleKey }}"
                                                       data-permission-input="1"
                                                       {{ $viewAvailable ? '' : 'data-force-disabled=1' }}
                                                       {{ $viewAllowed ? 'checked' : '' }}
                                                       {{ $viewAvailable ? '' : 'disabled' }}>
                                                <label class="form-check-label" for="role_module_view_{{ $moduleKey }}">Görüntüle</label>
                                            </div>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input js-module-toggle"
                                                       type="checkbox"
                                                       id="role_module_manage_{{ $moduleKey }}"
                                                       name="module_permissions[{{ $manageKey }}]"
                                                       value="1"
                                                       data-module-key="{{ $moduleKey }}"
                                                       data-permission-input="1"
                                                       {{ $manageAvailable ? '' : 'data-force-disabled=1' }}
                                                       {{ $manageAllowed ? 'checked' : '' }}
                                                       {{ $manageAvailable ? '' : 'disabled' }}>
                                                <label class="form-check-label" for="role_module_manage_{{ $moduleKey }}">Yönet</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="module-menu-tree mt-3" data-module-key="{{ $moduleKey }}">
                                        @if (!$menusReady)
                                            <div class="text-muted small">Menü tabloları hazır değil.</div>
                                        @elseif (!empty($menuTreeByModule[$moduleKey]))
                                            @include('admin.users.partials.menu-tree', [
                                                'nodes' => $menuTreeByModule[$moduleKey],
                                                'menuSelections' => $roleMenuMap,
                                                'editable' => true,
                                                'disabled' => !$moduleActive,
                                                'moduleKey' => $moduleKey,
                                            ])
                                        @else
                                            <div class="text-muted small">Bu modüle bağlı menü bulunamadı.</div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary">Kaydet</button>
            </div>
        </form>
    @endif
@endsection

@push('scripts')
<script>
    (() => {
        /* =========================================================
           1) AJAX Rol Arama — position:fixed dropdown (body'e eklenir)
        ========================================================= */
        const searchInput = document.getElementById('roleSearchInput');
        const roleIdInput = document.getElementById('roleIdInput');
        const searchForm  = document.getElementById('roleSearchForm');

        if (searchInput && searchForm) {
            const dropdown = document.createElement('ul');
            dropdown.className = 'list-group shadow';
            dropdown.id = 'roleSearchDropdown';
            dropdown.style.cssText = 'position:fixed;z-index:9999;max-height:260px;overflow-y:auto;display:none;min-width:200px';
            document.body.appendChild(dropdown);

            const positionDropdown = () => {
                const rect = searchInput.getBoundingClientRect();
                dropdown.style.top    = (rect.bottom + 2) + 'px';
                dropdown.style.left   = rect.left + 'px';
                dropdown.style.width  = rect.width + 'px';
            };

            let debounceTimer = null;

            const closeDropdown = () => { dropdown.style.display = 'none'; };

            const renderItems = (items) => {
                dropdown.innerHTML = '';
                if (!items.length) {
                    dropdown.innerHTML = '<li class="list-group-item text-muted small">Sonuç bulunamadı.</li>';
                } else {
                    items.forEach((item) => {
                        const li = document.createElement('li');
                        li.className = 'list-group-item list-group-item-action py-2';
                        li.style.cursor = 'pointer';
                        li.textContent = item.label;
                        li.dataset.id  = item.id;
                        li.addEventListener('mousedown', (e) => {
                            e.preventDefault();
                            searchInput.value = item.label;
                            if (roleIdInput) roleIdInput.value = item.id;
                            closeDropdown();
                            searchForm.submit();
                        });
                        dropdown.appendChild(li);
                    });
                }
                positionDropdown();
                dropdown.style.display = 'block';
            };

            searchInput.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                const q = searchInput.value.trim();
                if (q.length < 1) { closeDropdown(); return; }
                debounceTimer = setTimeout(async () => {
                    try {
                        const url = `{{ route('admin.roles.search') }}?q=${encodeURIComponent(q)}`;
                        const res = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                        const data = await res.json();
                        renderItems(data);
                    } catch (_) { closeDropdown(); }
                }, 250);
            });

            searchInput.addEventListener('focus', () => {
                if (searchInput.value.trim().length >= 1) searchInput.dispatchEvent(new Event('input'));
            });

            window.addEventListener('scroll', positionDropdown, true);
            window.addEventListener('resize', positionDropdown);

            document.addEventListener('click', (e) => {
                if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) closeDropdown();
            });

            searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    const first = dropdown.querySelector('li[data-id]');
                    if (first) first.dispatchEvent(new MouseEvent('mousedown'));
                }
            });
        }

        /* =========================================================
           2) Select All Checkbox Mantığı
        ========================================================= */

        const root = document.querySelector('[data-role-permissions]');
        if (!root) {
            return;
        }

        const updateModuleMenus = (moduleKey) => {
            if (!moduleKey) {
                return;
            }
            const toggles = root.querySelectorAll(`.js-module-toggle[data-module-key="${moduleKey}"]`);
            let active = false;
            toggles.forEach((toggle) => {
                if (toggle.checked) {
                    active = true;
                }
            });

            const container = root.querySelector(`.module-menu-tree[data-module-key="${moduleKey}"]`);
            if (!container) {
                return;
            }
            container.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
                checkbox.disabled = !active;
                if (!active) {
                    checkbox.checked = false;
                }
            });
        };

        root.querySelectorAll('.js-module-toggle').forEach((input) => {
            input.addEventListener('change', () => updateModuleMenus(input.dataset.moduleKey));
        });

        const moduleKeys = new Set();
        root.querySelectorAll('.js-module-toggle').forEach((input) => {
            if (input.dataset.moduleKey) {
                moduleKeys.add(input.dataset.moduleKey);
            }
        });
        moduleKeys.forEach((key) => updateModuleMenus(key));
    })();
</script>
@endpush