@extends('layouts.app')

@section('title', 'Kullanıcı Yetkileri')

@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">Kullanıcı ve rol 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

    {{-- AJAX Kullanıcı Arama --}}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title mb-0">Kullanıcı Seç</h5>
        </div>
        <div class="card-body">
            <form method="get" action="{{ route('admin.users.permissions') }}" id="userSearchForm">
                <input type="hidden" name="user_id" id="userIdInput" value="{{ $userId ?: '' }}">
                <div style="max-width:480px;position:relative">
                    <input
                        type="text"
                        id="userSearchInput"
                        class="form-control"
                        placeholder="Kullanıcı adı, e-posta veya kod ile arayın..."
                        autocomplete="off"
                        value="{{ $user ? $user->name . ' (' . ($user->user_code ?? $user->email) . ')' : '' }}"
                    >
                    {{-- Dropdown body'e append edilecek, position:fixed ile --}}
                </div>
                @if ($userId)
                    <div class="mt-2">
                        <a href="{{ route('admin.users.permissions') }}" class="btn btn-sm btn-outline-secondary">Temizle</a>
                    </div>
                @endif
            </form>
        </div>
    </div>

    @if (!$user)
        <div class="alert alert-light">Devam etmek için kullanıcı seçin.</div>
    @else
        @php
            $rolePermissionKeyMap = array_fill_keys($rolePermissionKeys ?? [], true);
            $roleMenuMap = array_fill_keys($roleMenuPermissions ?? [], true);
            $moduleKeys = $modules->pluck('key')->map(static fn ($value) => (string) $value)->all();
        @endphp

        <form method="post" action="{{ route('admin.users.permissions.save') }}" data-user-permissions>
            @csrf
            <input type="hidden" name="user_id" value="{{ $user->id }}">

            <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">{{ $user->name }}</h5>
                            <div class="text-muted small">{{ $user->email }}</div>
                            @if (!empty($userRoles))
                                <div class="mt-2">
                                    @foreach ($userRoles as $roleName)
                                        <span class="badge bg-light text-dark me-1">{{ $roleName }}</span>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        <div class="btn-group" role="group" aria-label="Yetki tipi">
                            <input type="radio"
                                   class="btn-check"
                                   name="permission_type"
                                   id="permissionTypeRole"
                                   value="role"
                                   {{ $permissionMode === 'role' ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="permissionTypeRole">Rol</label>

                            <input type="radio"
                                   class="btn-check"
                                   name="permission_type"
                                   id="permissionTypeCustom"
                                   value="custom"
                                   {{ $permissionMode === 'custom' ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="permissionTypeCustom">Özel</label>
                        </div>
                        <div class="text-muted small mt-2">Rol seçildiğinde kullanıcıya ait Özel yetkiler temizlenir.</div>
                    </div>
                </div>
            </div>
            @if (false)
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Pazarlama Destek Talep Açma</h5>
                </div>
                <div class="card-body">
                    <div class="form-check form-switch">
                        <input class="form-check-input"
                               type="checkbox"
                               id="marketingDestekCreate"
                               name="marketing_destek_can_create"
                               value="1"
                               {{ !empty($marketingDestekCreateAllowed) ? 'checked' : '' }}
                               {{ !empty($marketingDestekTeamMember) ? 'disabled' : '' }}>
                        <label class="form-check-label" for="marketingDestekCreate">
                            Bu kullanıcı Pazarlama Destek'te talep açabilsin
                        </label>
                    </div>
                    @if (!empty($marketingDestekTeamMember))
                        <div class="form-text text-success mt-2">
                            Kullanıcı Pazarlama Birimi üyesi olduğu için bu erişim otomatik olarak açıktır.
                        </div>
                    @else
                        <div class="form-text mt-2">
                            Pazarlama Birimi dışında kalan kullanıcılara sadece talep açma erişimi vermek için kullanın.
                        </div>
                    @endif
                </div>
            </div>
            @endif

            <div data-mode-section="role" class="{{ $permissionMode === 'role' ? '' : 'd-none' }}">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Rol Yetkileri</h5>
                    </div>
                    <div class="card-body">
                        @if (!$moduleTablesReady)
                            <div class="alert alert-warning mb-0">Modül tabloları hazır değil.</div>
                        @else
                            <div class="table-responsive">
                                <table class="table align-middle mb-0">
                                    <thead class="table-light">
                                    <tr>
                                        <th>Modül</th>
                                        <th class="text-center">Görüntüle</th>
                                        <th class="text-center">Yönet</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @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]);
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="fw-semibold">{{ $moduleLabel }}</div>
                                                <div class="text-muted small">{{ $moduleKey }}</div>
                                            </td>
                                            <td class="text-center">
                                                <input type="checkbox" class="form-check-input" {{ $viewAllowed ? 'checked' : '' }} disabled>
                                            </td>
                                            <td class="text-center">
                                                <input type="checkbox" class="form-check-input" {{ $manageAllowed ? 'checked' : '' }} disabled>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Menü Yetkileri</h5>
                    </div>
                    <div class="card-body">
                        @if (!$menuTablesReady)
                            <div class="alert alert-warning mb-0">Menü tabloları hazır değil.</div>
                        @else
                            @foreach ($menuTreeByModule as $moduleKey => $nodes)
                                @php
                                    $menuModuleLabel = $menuModuleLabels[$moduleKey] ?? ($moduleKey === 'assets' ? 'Envanter Yönetimi' : ($moduleKey !== '' ? ucfirst($moduleKey) : 'Genel'));
                                @endphp
                                <div class="mb-4">
                                    <h6 class="mb-2">{{ $menuModuleLabel }}</h6>
                                    @include('admin.users.partials.menu-tree', [
                                        'nodes' => $nodes,
                                        'menuSelections' => $roleMenuMap,
                                        'editable' => false,
                                        'disabled' => true,
                                        'moduleKey' => $moduleKey,
                                    ])
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div data-mode-section="custom" class="{{ $permissionMode === 'custom' ? '' : 'd-none' }}">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Özel Yetkiler</h5>
                    </div>
                    <div class="card-body">
                        @if (!$moduleTablesReady)
                            <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';
                                        $viewOverride = $userModuleOverrides[$viewKey] ?? null;
                                        $manageOverride = $userModuleOverrides[$manageKey] ?? null;
                                        $viewChecked = $viewOverride === 1;
                                        $manageChecked = $manageOverride === 1;
                                        $moduleActive = $viewChecked || $manageChecked;
                                        $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="module_view_{{ $moduleKey }}"
                                                           name="module_permissions[{{ $viewKey }}]"
                                                           value="allow"
                                                           data-module-key="{{ $moduleKey }}"
                                                           data-permission-input="1"
                                                           {{ $viewAvailable ? '' : 'data-force-disabled=1' }}
                                                           {{ $viewChecked ? 'checked' : '' }}
                                                           {{ $viewAvailable ? '' : 'disabled' }}>
                                                    <label class="form-check-label" for="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="module_manage_{{ $moduleKey }}"
                                                           name="module_permissions[{{ $manageKey }}]"
                                                           value="allow"
                                                           data-module-key="{{ $moduleKey }}"
                                                           data-permission-input="1"
                                                           {{ $manageAvailable ? '' : 'data-force-disabled=1' }}
                                                           {{ $manageChecked ? 'checked' : '' }}
                                                           {{ $manageAvailable ? '' : 'disabled' }}>
                                                    <label class="form-check-label" for="module_manage_{{ $moduleKey }}">Yönet</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="module-menu-tree mt-3" data-module-key="{{ $moduleKey }}">
                                            @if (!$menuTablesReady)
                                                <div class="text-muted small">Menü tabloları hazır değil.</div>
                                            @elseif (!empty($menuTreeByModule[$moduleKey]))
                                                {{-- Tümünü Seç --}}
                                                <div class="d-flex align-items-center gap-2 mb-2 pb-2 border-bottom">
                                                    <input
                                                        type="checkbox"
                                                        class="form-check-input js-select-all-menus"
                                                        id="selectAll_{{ $moduleKey }}"
                                                        data-target-module="{{ $moduleKey }}"
                                                        title="Tümünü Seç / Kaldır"
                                                        {{ $moduleActive ? '' : 'disabled' }}
                                                    >
                                                    <label class="form-check-label small fw-semibold text-muted" for="selectAll_{{ $moduleKey }}">
                                                        Tümünü Seç
                                                    </label>
                                                </div>
                                                @include('admin.users.partials.menu-tree', [
                                                    'nodes' => $menuTreeByModule[$moduleKey],
                                                    'menuSelections' => $userMenuPermissions,
                                                    'editable' => true,
                                                    'disabled' => !$moduleActive,
                                                    'moduleKey' => $moduleKey,
                                                ])
                                            @else
                                                <div class="text-muted small">Bu modüle bağlı menü bulunamadı.</div>
                                            @endif
                                        </div>
                                        @if ($moduleKey === 'marketing')
                                            <ul class="list-unstyled ms-3 border-start ps-3 mt-2">
                                                <li class="mb-2">
                                                    <div class="form-check d-flex align-items-start gap-2" data-menu-toggle>
                                                        <input
                                                            class="form-check-input"
                                                            type="checkbox"
                                                            id="marketingDestekCreate"
                                                            name="marketing_destek_can_create"
                                                            value="1"
                                                            {{ !empty($marketingDestekCreateAllowed) ? 'checked' : '' }}
                                                            {{ !$moduleActive || !empty($marketingDestekTeamMember) ? 'disabled' : '' }}>
                                                        <label class="form-check-label" for="marketingDestekCreate">
                                                            <span class="fw-semibold">Pazarlama Destek Talep Açma</span>
                                                            <span class="text-muted small d-block">Bu kullanıcı Pazarlama Destek'te talep acabilsin</span>
                                                        </label>
                                                    </div>
                                                    @if (!empty($marketingDestekTeamMember))
                                                        <div class="form-text text-success mt-1">Pazarlama Birimi uyesi oldugu icin bu erişim otomatik açıktır.</div>
                                                    @endif
                                                </li>
                                            </ul>
                                            @if (false)
                                            <div class="border-top pt-3 mt-3">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input"
                                                        type="checkbox"
                                                        id="marketingDestekCreate"
                                                        name="marketing_destek_can_create"
                                                        value="1"
                                                        {{ !empty($marketingDestekCreateAllowed) ? 'checked' : '' }}
                                                        {{ !empty($marketingDestekTeamMember) ? 'disabled' : '' }}>
                                                    <label class="form-check-label" for="marketingDestekCreate">
                                                        Bu kullanıcı Pazarlama Destek'te talep açabilsin
                                                    </label>
                                                </div>
                                                @if (!empty($marketingDestekTeamMember))
                                                    <div class="form-text text-success mt-2">
                                                        Kullanıcı Pazarlama Birimi üyesi olduğu için bu erişim otomatik olarak açıktır.
                                                    </div>
                                                @else
                                                    <div class="form-text mt-2">
                                                        Pazarlama Birimi dışında kalan kullanıcılara sadece talep açma erişimi vermek için kullanın.
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="form-text mt-3">Modül yetkisi kapalıysa menüler pasif olur.</div>
                        @endif
                    </div>
                </div>

                @if ($menuTablesReady)
                    @php
                        $hasExtraMenus = false;
                    @endphp
                    @foreach ($menuTreeByModule as $moduleKey => $nodes)
                        @if (!in_array($moduleKey, $moduleKeys, true))
                            @php $hasExtraMenus = true; @endphp
                        @endif
                    @endforeach
                    @if ($hasExtraMenus)
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Tüm Menü Yetkileri (Alt Menü Bazlı)</h5>
                            </div>
                            <div class="card-body">
                                <div class="text-muted small mb-3">Bu alanda tüm menü ve alt menüler için ayrı ayrı yetki verebilirsiniz.</div>
                                @foreach ($menuTreeByModule as $moduleKey => $nodes)
                                    @if (in_array($moduleKey, $moduleKeys, true))
                                        @continue
                                    @endif
                                    @php
                                        $menuModuleLabel = $menuModuleLabels[$moduleKey] ?? ($moduleKey === 'assets' ? 'Envanter Yönetimi' : ($moduleKey !== '' ? ucfirst($moduleKey) : 'Genel'));
                                    @endphp
                                    <div class="mb-4">
                                        <div class="d-flex align-items-center gap-2 mb-2 pb-2 border-bottom">
                                            <input
                                                type="checkbox"
                                                class="form-check-input js-select-all-menus"
                                                id="selectAll_extra_{{ $moduleKey }}"
                                                data-target-module="{{ $moduleKey }}"
                                                title="Tümünü Seç / Kaldır"
                                            >
                                            <label class="form-check-label small fw-semibold" for="selectAll_extra_{{ $moduleKey }}">
                                                {{ $menuModuleLabel }} ” Tümünü Seç
                                            </label>
                                        </div>
                                        @include('admin.users.partials.menu-tree', [
                                            'nodes' => $nodes,
                                            'menuSelections' => $userMenuPermissions,
                                            'editable' => true,
                                            'disabled' => false,
                                            'moduleKey' => $moduleKey,
                                        ])
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </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 Kullanıcı Arama ” position:fixed dropdown (body'e eklenir, overflow:hidden'ı aşar)
        ========================================================= */
        const searchInput = document.getElementById('userSearchInput');
        const userIdInput = document.getElementById('userIdInput');
        const searchForm  = document.getElementById('userSearchForm');

        // Dropdown body'e append edilir
        const dropdown = document.createElement('ul');
        dropdown.className = 'list-group shadow';
        dropdown.id = 'userSearchDropdown';
        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';
        };

        if (searchInput && searchForm) {
            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 (userIdInput) userIdInput.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.users.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) Yetki Formu: Rol/Custom Mod Geçişi
        ========================================================= */

        const setSectionState = (section, enabled) => {
            if (!section) return;
            section.classList.toggle('d-none', !enabled);
            section.querySelectorAll('[data-permission-input]').forEach((input) => {
                const forceDisabled = input.dataset.forceDisabled === '1';
                input.disabled = forceDisabled || !enabled;
            });
        };

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

            const container = root.querySelector(`.module-menu-tree[data-module-key="${moduleKey}"]`);
            if (!container) return;

            // Tümünü seç checkbox'ı
            const selectAll = container.querySelector('.js-select-all-menus');
            if (selectAll) selectAll.disabled = !active;

            container.querySelectorAll('input[type="checkbox"]:not(.js-select-all-menus)').forEach((cb) => {
                cb.disabled = !active;
                if (!active) cb.checked = false;
            });

            // Tümünü seç durumunu güncelle
            syncSelectAll(container, moduleKey);
        };

        const updateMode = () => {
            const root = document.querySelector('[data-user-permissions]');
            if (!root) return;
            const mode = root.querySelector('input[name="permission_type"]:checked')?.value || 'role';
            const roleSection = root.querySelector('[data-mode-section="role"]');
            const customSection = root.querySelector('[data-mode-section="custom"]');
            
            setSectionState(roleSection,   mode === 'role');
            setSectionState(customSection, mode === 'custom');
            if (mode === 'custom') {
                root.querySelectorAll('.js-module-toggle').forEach((input) => {
                    updateModuleMenus(input.dataset.moduleKey);
                });
            }
        };

        /* =========================================================
           3) Tümünü Seç
        ========================================================= */
        const syncSelectAll = (container, moduleKey) => {
            const selectAll = container ? container.querySelector('.js-select-all-menus') : null;
            if (!selectAll) return;
            const checkboxes = container.querySelectorAll('input[type="checkbox"][name^="menu_permissions"]');
            const allChecked = checkboxes.length > 0 && [...checkboxes].every(cb => cb.checked);
            selectAll.checked = allChecked;
            selectAll.indeterminate = !allChecked && [...checkboxes].some(cb => cb.checked);
        };

        // "Tümünü Seç" - delegated
        document.addEventListener('change', (e) => {
            const target = e.target;
            if (target && target.classList.contains('js-select-all-menus')) {
                const container = target.closest('.module-menu-tree, .mb-4');
                if (!container) return;
                const checkboxes = container.querySelectorAll('input[type="checkbox"][name^="menu_permissions"]');
                checkboxes.forEach((cb) => {
                    if (!cb.disabled) cb.checked = target.checked;
                });
            } else if (target && target.matches('input[type="checkbox"][name^="menu_permissions"]')) {
                const moduleKey = target.dataset.moduleKey || '';
                const root = document.querySelector('[data-user-permissions]');
                const container = moduleKey
                    ? root?.querySelector(`.module-menu-tree[data-module-key="${moduleKey}"]`)
                    : target.closest('.mb-4');
                if (container) {
                    syncSelectAll(container);
                }
            } else if (target && target.name === 'permission_type') {
                updateMode();
            } else if (target && target.classList.contains('js-module-toggle')) {
                const moduleKey = target.dataset.moduleKey;
                if (moduleKey) {
                    updateModuleMenus(moduleKey);
                }
            }
        });

        // initial state
        updateMode();
    })();
</script>
@endpush