@extends('layouts-v2.app')

@section('title', 'Chi tiết bài thi')

@section('content')
<div class="bg-gray-50 text-gray-800 antialiased min-h-screen">
    <div class="max-w-full mx-auto">
        
        <div class="mb-5 text-left bg-white shadow-sm rounded-md p-6">
            <h1 class="text-2xl font-bold text-indigo-700">Quản lý quyền Tenant</h1>
            <p class="mt-1 text-sm text-gray-500">Quản lý quyền cho từng Tenant.</p>
        </div>

        <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
            
            <div class="p-6 border-b border-gray-100 bg-gray-50/50">
                <label class="block text-sm font-semibold text-gray-700 mb-2">Chọn Tenant</label>
                <div class="relative w-full group">
                    <select id="tenant-select" 
                            class="peer appearance-none block w-full rounded-md border-0 py-2.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6 shadow-sm cursor-pointer bg-white transition-shadow outline-none disabled:bg-gray-100">
                        <option value="" disabled selected>Đang tải dữ liệu...</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 transition-transform duration-300 ease-in-out peer-focus:rotate-180 peer-focus:text-indigo-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="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="p-6 space-y-4">
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-4">
                    <h3 class="text-lg font-bold text-gray-800 flex items-center shrink-0">
                        <span class="bg-indigo-100 text-indigo-700 text-xs font-bold px-2 py-1 rounded mr-2 uppercase tracking-wide">Groups</span>
                        Danh sách nhóm quyền
                        <span class="ml-2 text-gray-400 font-normal text-sm">
                            (<span id="group-count" class="font-mono text-gray-500 font-medium">0</span>)
                        </span>
                    </h3>

                    <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
                        <div class="relative w-full sm:w-64">
                            <svg class="w-4 h-4 text-gray-400 absolute left-3 top-3 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                            <input type="text" id="permission-search" 
                                class="w-full pl-9 pr-10 py-2.5 border border-gray-300 rounded-md text-sm focus:ring-indigo-600 focus:border-indigo-600 outline-none transition-shadow placeholder-gray-400" 
                                placeholder="Tìm nhóm hoặc quyền...">
                            <button type="button" id="btn-clear-search" class="hidden absolute right-2 top-2 p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors focus:outline-none">
                                <svg class="w-4 h-4" 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>
                            </button>
                        </div>

                        <div class="flex items-center bg-gray-50 px-3 py-2 rounded-md border border-gray-200">
                            <input id="select-all" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded cursor-pointer">
                            <label for="select-all" class="ml-2 block text-sm font-medium text-gray-700 cursor-pointer select-none">Chọn tất cả</label>
                        </div>
                    </div>
                </div>
                
                <div id="group-container" class="space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar relative min-h-[200px]">
                    <div id="loader" class="absolute inset-0 flex items-center justify-center bg-white z-10">
                        <div class="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
                    </div>
                </div>
                
                <div id="empty-search-state" class="hidden text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="mt-2 text-sm text-gray-500">Không tìm thấy kết quả phù hợp.</p>
                </div>
            </div>

            <div class="p-6 bg-gray-50 border-t border-gray-100 flex justify-end">
                <button id="btn-submit" class="disabled:opacity-70 disabled:cursor-not-allowed inline-flex items-center px-6 py-2.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
                    <svg class="w-4 h-4 mr-2" 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>
                    <span>Lưu Cấu Hình</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>

<script>
    $(document).ready(function() {
        // --- CONSTANTS & STATE ---
        let DATA_GROUPS = {};
        let DATA_TENANTS = [];
        let searchTimeout = null;

        // --- CACHED DOM ELEMENTS ---
        const $el = {
            select: $('#tenant-select'),
            container: $('#group-container'),
            loader: $('#loader'),
            emptyState: $('#empty-search-state'),
            searchInput: $('#permission-search'),
            btnClearSearch: $('#btn-clear-search'),
            groupCount: $('#group-count'),
            selectAll: $('#select-all'),
            btnSubmit: $('#btn-submit')
        };

        // --- 1. DATA FETCHING (PARALLEL) ---
        function init() {
            // Sử dụng $.when để gọi 2 API cùng lúc giúp giảm thời gian chờ
            $.when(fetchTenants(), fetchGroups())
                .done(function(tenantsRes, groupsRes) {
                    // Xử lý dữ liệu trả về (jQuery trả về mảng [data, status, xhr])
                    const tenantsData = tenantsRes[0];
                    const groupsData = groupsRes[0];

                    if (!tenantsData.success || !groupsData.success) {
                        return showError('Không thể tải dữ liệu ban đầu.');
                    }

                    DATA_TENANTS = tenantsData.data;
                    DATA_GROUPS = groupsData.data;

                    renderUI();
                })
                .fail(function() {
                    showError('Lỗi kết nối đến máy chủ.');
                });
        }

        function fetchTenants() {
            return $.ajax({ url: `{{ route('hocmai-tenants.getHocmaiTenants') }}`, type: 'GET', dataType: 'json' });
        }

        function fetchGroups() {
            return $.ajax({ url: `{{ route('hocmai-tenant-groups.getTenantGroups') }}`, type: 'GET', dataType: 'json' });
        }

        // --- 2. RENDERING UI ---
        function renderUI() {
            // Render Select Options
            const options = DATA_TENANTS.map(t => `<option value="${t.id}">${t.name}</option>`).join('');
            $el.select.html(options).prop('disabled', false);

            // Render Groups List (Build string HTML lớn 1 lần thay vì nối chuỗi trong loop)
            const htmlList = Object.entries(DATA_GROUPS).map(([key, data]) => buildGroupHtml(key, data)).join('');
            
            $el.container.html(htmlList); // Ghi đè đè loader cũ
            
            // Update stats
            $el.groupCount.text(Object.keys(DATA_GROUPS).length);

            // Trigger load data cho tenant đầu tiên
            if (DATA_TENANTS.length > 0) {
                loadTenantConfig(DATA_TENANTS[0].id);
            }
        }

        function buildGroupHtml(groupKey, data) {
            const meta = data.meta || {};
            const routes = Object.entries(data.routes || {});
            
            // Tạo chuỗi tìm kiếm (Indexing) để tìm nhanh hơn mà không cần traverse DOM sau này
            // Bao gồm: key, description của group và description của các quyền con
            const searchIndex = [
                groupKey, 
                meta.description, 
                ...routes.map(([k, v]) => `${v.description} ${k}`)
            ].join(' ').toLowerCase();

            // Render danh sách quyền con
            const permissionsHtml = routes.map(([rKey, rInfo]) => `
                <div class="flex items-start text-sm text-gray-600 space-x-2 p-1.5 hover:bg-white rounded transition-colors" title="${rKey}">
                    <svg class="w-3 h-3 text-gray-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                    <div class="flex flex-col">
                        <span class="font-medium text-gray-700 leading-tight">${rInfo.description}</span>
                        <span class="text-[11px] text-gray-400 font-mono mt-0.5 select-all">${rKey}</span>
                    </div>
                </div>
            `).join('');

            return `
                <div class="group group-item m-1 border border-gray-200 rounded-lg bg-white overflow-hidden transition-all duration-200 hover:shadow-sm hover:ring-2 hover:ring-indigo-600" 
                     data-search="${searchIndex}">
                    
                    <div class="accordion-header flex items-center justify-between p-3.5 cursor-pointer bg-white hover:bg-gray-50 select-none"
                         data-target="#body-${groupKey}">
                        
                        <div class="flex items-center space-x-3 overflow-hidden">
                            <div class="checkbox-wrapper flex-shrink-0" onclick="event.stopPropagation()">
                                <input type="checkbox" value="${groupKey}" 
                                       class="group-checkbox h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 cursor-pointer transition duration-150 ease-in-out">
                            </div>
                            
                            <div class="flex flex-col min-w-0">
                                <div class="flex items-center gap-2 ">
                                    <span class="font-semibold text-gray-800 truncate capitalize group-hover:text-indigo-500">${meta.description || groupKey}</span>
                                    <span class="text-[10px] font-bold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 border border-gray-200 group-hover:text-indigo-500">
                                        ${routes.length}
                                    </span>
                                </div>
                                <span class="text-xs text-gray-400 truncate font-mono">${groupKey}</span>
                            </div>
                        </div>

                        <svg class="accordion-icon w-5 h-5 text-gray-400 transition-transform duration-200 transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>

                    <div id="body-${groupKey}" class="accordion-body hidden border-t border-gray-100 bg-gray-50/50 px-4 py-3">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-2 pl-2 md:pl-8">
                            ${permissionsHtml}
                        </div>
                    </div>
                </div>
            `;
        }

        function loadTenantConfig(tenantId) {
            const tenant = DATA_TENANTS.find(t => t.id == tenantId);
            if (!tenant) return;

            // Tạo Set để lookup O(1) thay vì loop array
            const activeGroups = new Set(tenant.groups.map(g => g.group_key));

            // Reset UI checkboxes
            $('.group-checkbox').each(function() {
                $(this).prop('checked', activeGroups.has(this.value));
            });
            
            updateSelectAllState();
        }

        // --- 3. EVENT HANDLERS ---

        // Accordion Toggle (Delegation)
        $el.container.on('click', '.accordion-header', function() {
            const $body = $(this).next('.accordion-body');
            const $icon = $(this).find('.accordion-icon');
            
            const isOpen = $body.is(':visible');

            $body.stop(true,true).slideToggle(200);
            $icon.toggleClass('rotate-180 text-indigo-600', !isOpen);
        });

        // Search Logic (Optimized)
        $el.searchInput.on('keyup', function() {
            clearTimeout(searchTimeout);
            const keyword = $(this).val().toLowerCase().trim();
            const hasKeyword = keyword.length > 0;

            // Toggle Clear Button
            $el.btnClearSearch.toggleClass('hidden', !hasKeyword);

            searchTimeout = setTimeout(() => {
                let visibleCount = 0;

                $('.group-item').each(function() {
                    const searchData = $(this).data('search'); // Lấy string đã index sẵn
                    const isMatch = !hasKeyword || searchData.includes(keyword);

                    $(this).toggleClass('hidden', !isMatch);
                    
                    if (isMatch) {
                        visibleCount++;
                        // Auto expand nếu tìm kiếm cụ thể (độ dài > 2)
                        if (hasKeyword && keyword.length > 2) {
                            $(this).find('.accordion-body').removeClass('hidden');
                            $(this).find('.accordion-icon').addClass('rotate-180 text-indigo-600');
                        }
                    }
                });

                // Update UI States
                $el.groupCount.text(visibleCount);
                $el.groupCount.toggleClass('text-red-600', visibleCount === 0);
                $el.emptyState.toggleClass('hidden', visibleCount > 0);
                
                updateSelectAllState();

            }, 300); // Debounce 300ms
        });

        // Clear Search
        $el.btnClearSearch.on('click', function() {
            $el.searchInput.val('').trigger('keyup').focus();
        });

        // Select All Checkbox
        $el.selectAll.on('change', function() {
            const isChecked = $(this).is(':checked');
            // Chỉ check những thằng đang hiện (trong trường hợp đang search)
            $('.group-item:not(.hidden) .group-checkbox').prop('checked', isChecked);
        });

        // Individual Checkbox Click -> Update Select All
        $el.container.on('change', '.group-checkbox', function() {
            updateSelectAllState();
        });

        // Tenant Change
        $el.select.on('change', function() {
            loadTenantConfig($(this).val());
        });

        // Submit Form
        $el.btnSubmit.on('click', function() {
            const $btn = $(this);
            const originalText = $btn.html();
            const tenantId = $el.select.val();
            
            // Lấy values bằng .map của jQuery
            const checkedGroups = $('.group-checkbox:checked').map((_, el) => el.value).get();

            if (!tenantId) return showError("Vui lòng chọn Tenant!");

            // Loading State
            $btn.prop('disabled', true).html(`<svg class="animate-spin -ml-1 mr-3 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Đang lưu...`);

            $.ajax({
                url: "{{ route('hocmai-tenant-groups.store') }}",
                method: 'POST',
                data: {
                    tenant_id: tenantId,
                    assigned_groups: checkedGroups,
                    total: checkedGroups.length,
                    _token: '{{ csrf_token() }}'
                },
                success: function(res) {
                    if (res.success) {
                        Swal.fire({ icon: "success", title: "Thành công", text: res.message, showConfirmButton: false, timer: 1500 });
                        // Refresh lại data tenant hiện tại để đảm bảo tính đồng bộ
                        fetchTenants().done(function(res){
                             if(res.success) {
                                 DATA_TENANTS = res.data;
                                 // Không cần render lại toàn bộ, chỉ cần update state data
                             }
                        });
                    } else {
                        showError(res.message || "Có lỗi xảy ra");
                    }
                },
                error: function(err) {
                    showError(err.responseJSON?.message || "Lỗi hệ thống");
                },
                complete: function() {
                    $btn.prop('disabled', false).html(originalText);
                }
            });
        });

        // --- 4. UTILITIES ---
        function updateSelectAllState() {
            const $visibleItems = $('.group-item:not(.hidden)');
            const $visibleCheckboxes = $visibleItems.find('.group-checkbox');
            
            if ($visibleCheckboxes.length === 0) {
                $el.selectAll.prop('checked', false).prop('disabled', true);
            } else {
                const checkedCount = $visibleCheckboxes.filter(':checked').length;
                $el.selectAll.prop('checked', $visibleCheckboxes.length === checkedCount).prop('disabled', false);
            }
        }

        function showError(msg) {
            Swal.fire({ icon: "error", title: "Thất bại", text: msg, confirmButtonColor: '#4F46E5' });
        }

        // --- RUN ---
        init();
    });
</script>
@endsection