@extends('layouts.adminlte')

@section('title', 'Role Akses')
@section('page_title', 'Role Akses')

@push('styles')
    <style>
        .menu-row {
            background: #fff;
            color: #212529;
            border-radius: 8px;
            border: 1px solid #d9deeb;
            margin-bottom: 8px;
            padding: 10px 12px;
        }
        .menu-row .menu-title {
            font-weight: 600;
        }
    </style>
@endpush

@section('content')
    <div class="card shadow-sm">
        <div class="card-body p-3 p-lg-4">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <h5 class="m-0">Role Menu Access</h5>
                <div class="d-flex gap-2">
                    <button id="saveAccessBtn" type="button" class="btn btn-sm btn-primary" disabled>
                        <i class="fas fa-save me-1"></i>Simpan Akses
                    </button>
                    <a href="{{ route('guides.index', ['section' => 'role-akses']) }}" target="_blank" class="btn btn-sm btn-outline-dark">
                        <i class="fas fa-book me-1"></i>User Guide
                    </a>
                    <button type="button" id="btnAddRole" class="btn btn-sm btn-info">
                        <i class="fas fa-plus me-1"></i>Tambah Profil
                    </button>
                </div>
            </div>

            <div class="row g-2 mb-3">
                <div class="col-lg-6">
                    <label class="form-label">Profil Menu</label>
                    <select id="profileSelect" class="form-select">
                        <option value="">Pilih profil menu...</option>
                        @foreach ($departments as $department)
                            <option value="{{ $department }}">{{ $department }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-6">
                    <label class="form-label">Cari Menu</label>
                    <input id="searchMenu" type="text" class="form-control" placeholder="Ketik nama menu..." />
                </div>
            </div>

            <div class="menu-row d-flex justify-content-between align-items-center">
                <div class="menu-title"><i class="fas fa-list me-2 text-secondary"></i>Menu</div>
                <div id="headerActions" class="d-flex flex-wrap gap-3"></div>
            </div>

            <div id="matrixContainer"></div>

            <div class="d-flex justify-content-between align-items-center mt-3">
                <small class="text-muted" id="matrixInfo">Pilih profil menu untuk memuat data akses.</small>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const profileSelect = document.getElementById('profileSelect');
            const searchMenu = document.getElementById('searchMenu');
            const matrixContainer = document.getElementById('matrixContainer');
            const matrixInfo = document.getElementById('matrixInfo');
            const saveBtn = document.getElementById('saveAccessBtn');
            const btnAddRole = document.getElementById('btnAddRole');
            const headerActions = document.getElementById('headerActions');
            const actionLabels = @json($actionLabels);
            const actionKeys = Object.keys(actionLabels);
            const roles = @json($roles->map(fn ($role) => ['id' => $role->id, 'name' => $role->name])->values());
            const rolesByName = new Map(roles.map((role) => [role.name.toLowerCase(), role.id]));
            const state = { roleId: null, rows: [], profile: '' };
            const escapeHtml = (text) => {
                const div = document.createElement('div');
                div.textContent = text ?? '';
                return div.innerHTML;
            };
            const renderMenuIcon = (iconValue) => {
                const value = (iconValue || '').toString().trim();
                if (!value) return '<i class="fas fa-circle text-secondary me-2"></i>';
                if (/^(mi|material):/i.test(value)) {
                    const name = value.replace(/^(mi|material):/i, '').trim() || 'menu';
                    return `<span class="material-icons text-secondary me-2">${escapeHtml(name)}</span>`;
                }
                if (/^ion:/i.test(value)) {
                    const name = value.replace(/^ion:/i, '').trim() || 'ellipse-outline';
                    return `<ion-icon class="text-secondary me-2" name="${escapeHtml(name)}"></ion-icon>`;
                }
                return `<i class="${escapeHtml(value)} text-secondary me-2"></i>`;
            };

            function renderHeaderActions() {
                headerActions.innerHTML = actionKeys.map((action) => {
                    const actionId = `headerAction-${action}`;
                    const label = `All ${actionLabels[action]}`;
                    return `
                        <div class="form-check form-switch m-0">
                            <input class="form-check-input header-toggle" type="checkbox" data-action="${action}" id="${actionId}">
                            <label class="form-check-label small" for="${actionId}">${label}</label>
                        </div>
                    `;
                }).join('');
            }

            function getFilteredRows() {
                const keyword = (searchMenu.value || '').trim().toLowerCase();
                const profileName = (state.profile || '').trim().toLowerCase();
                const filtered = state.rows.filter((row) => {
                    const nameMatch = row.name.toLowerCase().includes(keyword);
                    if (!profileName) {
                        return nameMatch;
                    }
                    const dept = (row.department || '').toString().trim().toLowerCase();
                    if (dept === profileName) {
                        return nameMatch;
                    }
                    return false;
                });
                const seen = new Set();
                return filtered.filter((row) => {
                    const dept = (row.department || '').toString().trim().toLowerCase();
                    const url = (row.url || '').toString().trim().toLowerCase();
                    const name = (row.name || '').toString().trim().toLowerCase();
                    const depth = Number(row.depth || 0);
                    const key = url ? `${dept}|url|${url}` : `${dept}|name|${name}|depth|${depth}`;
                    if (seen.has(key)) return false;
                    seen.add(key);
                    return true;
                });
            }

            function updateHeaderToggles(rows) {
                actionKeys.forEach((action) => {
                    const headerToggle = headerActions.querySelector(`[data-action="${action}"]`);
                    if (!headerToggle) return;
                    const applicable = rows.filter((row) => row.permissions[action]);
                    if (!applicable.length) {
                        headerToggle.checked = false;
                        headerToggle.indeterminate = false;
                        headerToggle.disabled = true;
                        return;
                    }
                    headerToggle.disabled = false;
                    const checkedCount = applicable.filter((row) => row.permissions[action].checked).length;
                    headerToggle.checked = checkedCount === applicable.length;
                    headerToggle.indeterminate = checkedCount > 0 && checkedCount < applicable.length;
                });
            }

            function renderRows() {
                const rows = getFilteredRows();
                if (!rows.length) {
                    matrixContainer.innerHTML = '<div class="menu-row text-muted">Data menu tidak ditemukan.</div>';
                    updateHeaderToggles([]);
                    return;
                }

                matrixContainer.innerHTML = rows.map((row) => {
                    const toggles = actionKeys.map((action) => {
                        const item = row.permissions[action];
                        if (!item) {
                            return `<span class="text-muted small">-</span>`;
                        }
                        const checked = item.checked ? 'checked' : '';
                        return `
                            <div class="form-check form-switch m-0">
                                <input
                                    class="form-check-input permission-toggle"
                                    type="checkbox"
                                    data-menu-id="${row.id}"
                                    data-action="${action}"
                                    data-permission-id="${item.id || 0}"
                                    data-permission-slug="${item.slug || ''}"
                                    ${checked}
                                />
                                <label class="form-check-label small">${actionLabels[action]}</label>
                            </div>
                        `;
                    }).join('');

                    return `
                        <div class="menu-row d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div class="menu-title" style="padding-left:${row.depth * 26}px">
                                ${renderMenuIcon(row.icon)}${row.name}
                            </div>
                            <div class="d-flex flex-wrap gap-3">${toggles}</div>
                        </div>
                    `;
                }).join('');
                updateHeaderToggles(rows);
            }

            async function loadMatrix(roleId) {
                state.roleId = roleId || null;
                state.rows = [];
                state.profile = (profileSelect?.value || '').trim();
                saveBtn.disabled = !roleId;
                matrixInfo.textContent = roleId ? 'Memuat data akses...' : 'Pilih profil menu untuk memuat data akses.';
                matrixContainer.innerHTML = '';
                if (!roleId) return;

                try {
                    const response = await fetch(`{{ url('/role_akses') }}/${roleId}/matrix`, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                    if (!response.ok) throw new Error('Gagal memuat matrix akses');
                    const data = await response.json();
                    state.rows = data.rows || [];
                    matrixInfo.textContent = `${state.rows.length} menu termuat untuk role ${data.role.name}.`;
                    renderRows();
                } catch (error) {
                    matrixInfo.textContent = error.message;
                    matrixContainer.innerHTML = '<div class="menu-row text-danger">Gagal memuat data akses.</div>';
                }
            }

            matrixContainer.addEventListener('change', function (event) {
                const target = event.target;
                if (!target.classList.contains('permission-toggle')) return;
                const menuId = Number(target.dataset.menuId);
                const action = target.dataset.action;
                const row = state.rows.find((item) => item.id === menuId);
                if (!row || !row.permissions[action]) return;
                row.permissions[action].checked = target.checked;
                row.permissions[action].id = Number(target.dataset.permissionId || row.permissions[action].id || 0);
                row.permissions[action].slug = target.dataset.permissionSlug || row.permissions[action].slug || '';
                updateHeaderToggles(state.rows);
            });

            headerActions.addEventListener('change', function (event) {
                const target = event.target;
                if (!target.classList.contains('header-toggle')) return;
                const action = target.dataset.action;
                const rows = state.rows;
                rows.forEach((row) => {
                    const item = row.permissions[action];
                    if (!item) return;
                    item.checked = target.checked;
                    const input = matrixContainer.querySelector(
                        `.permission-toggle[data-menu-id="${row.id}"][data-action="${action}"]`
                    );
                    if (input) {
                        input.checked = target.checked;
                    }
                });
                updateHeaderToggles(state.rows);
            });

            saveBtn.addEventListener('click', async function () {
                if (!state.roleId) return;
                const grants = [];
                state.rows.forEach((row) => {
                    actionKeys.forEach((action) => {
                        const item = row.permissions[action];
                        if (!item) return;
                        grants.push({
                            id: item.id || null,
                            slug: item.slug || `${row.slug}.${action}`,
                            checked: !!item.checked
                        });
                    });
                });

                saveBtn.disabled = true;
                const oldText = saveBtn.innerHTML;
                saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...';

                try {
                    const response = await fetch(`{{ url('/role_akses') }}/${state.roleId}/sync`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ grants })
                    });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.message || 'Gagal menyimpan');
                    toastr.success(data.message || 'Akses role berhasil diperbarui');
                } catch (error) {
                    toastr.error(error.message);
                } finally {
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = oldText;
                }
            });

            btnAddRole.addEventListener('click', async function () {
                const { value: name } = await Swal.fire({
                    title: 'Tambah Profil Menu',
                    input: 'text',
                    inputLabel: 'Nama profil menu baru',
                    inputPlaceholder: 'Contoh: Finance Supervisor',
                    showCancelButton: true,
                    confirmButtonText: 'Simpan',
                    cancelButtonText: 'Batal',
                    inputValidator: (value) => !value ? 'Nama role wajib diisi' : null
                });

                if (!name) return;

                try {
                    const response = await fetch(`{{ route('role_akses.store') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ name })
                    });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.message || 'Gagal tambah role');

                    roles.push({ id: data.role.id, name: data.role.name });
                    rolesByName.set(data.role.name.toLowerCase(), data.role.id);
                    profileSelect.value = data.role.name;
                    state.profile = data.role.name;
                    await loadMatrix(data.role.id);
                    toastr.success(data.message || 'Role berhasil dibuat');
                } catch (error) {
                    toastr.error(error.message);
                }
            });

            profileSelect.addEventListener('change', async function () {
                const profileName = (this.value || '').trim();
                state.profile = profileName;
                if (!profileName) {
                    loadMatrix('');
                    renderRows();
                    return;
                }

                const existingRoleId = rolesByName.get(profileName.toLowerCase());
                if (existingRoleId) {
                    await loadMatrix(existingRoleId);
                    renderRows();
                    return;
                }

                try {
                    const response = await fetch(`{{ route('role_akses.store') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({ name: profileName })
                    });
                    const data = await response.json();
                    if (!response.ok) throw new Error(data.message || 'Gagal membuat role dari profil');
                    const roleId = data.role.id;
                    roles.push({ id: roleId, name: data.role.name });
                    rolesByName.set(data.role.name.toLowerCase(), roleId);
                    state.profile = data.role.name;
                    await loadMatrix(roleId);
                    renderRows();
                    toastr.success('Profil menu berhasil dibuatkan privilege');
                } catch (error) {
                    toastr.error(error.message);
                }
            });
            searchMenu.addEventListener('input', renderRows);
            renderHeaderActions();
        })();
    </script>
@endpush