@extends('layouts.adminlte')

@section('title', 'Module Manager')
@section('page_title', 'Module Manager')

@push('styles')
    <style>
        .module-list { max-height: 70vh; overflow: auto; }
        .module-item { cursor: pointer; text-align: left; }
        .module-item.active { background: #e9f2ff; border-color: #9ec5fe; }
        .module-item .folder-ico { color: #d39e00; margin-right: .35rem; }
        .tree-wrap { max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem; }
        .tree-node { font-family: Consolas, Monaco, monospace; font-size: .9rem; white-space: nowrap; }
        .tree-node .icon { width: 1rem; display: inline-block; text-align: center; margin-right: .35rem; }
        .mono-path { font-family: Consolas, Monaco, monospace; font-size: .85rem; }
        .path-breadcrumb { font-family: Consolas, Monaco, monospace; font-size: .8rem; color: #6c757d; }
        .explorer-head { background: #f8f9fa; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .4rem .55rem; margin-bottom: .45rem; font-size: .82rem; color: #6c757d; }
        .icon-pick-list {
            max-height: 170px;
            overflow: auto;
            border: 1px solid var(--bs-border-color);
            border-radius: .375rem;
            background: #fff;
        }
        .icon-pick-item {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .35rem .5rem;
            cursor: pointer;
            border-bottom: 1px solid #f1f3f5;
        }
        .icon-pick-item:last-child { border-bottom: 0; }
        .icon-pick-item:hover { background: #f8f9fa; }
        .icon-pick-item.active { background: #e9f2ff; }
        .icon-pick-glyph {
            width: 1.25rem;
            min-width: 1.25rem;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            line-height: 1;
        }
        #moduleSearch {
            background-color: var(--bs-tertiary-bg);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color);
        }
        #moduleSearch::placeholder {
            color: var(--bs-secondary-color);
            opacity: .85;
        }
        #moduleSearch:focus {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
        }
    </style>
@endpush

@section('content')
    @php
        $activeModule = (string) ($selectedModuleName ?? '');
        $activeTree = $selectedTree ?? null;
        $activePath = (string) ($activeTree['path'] ?? '');
        $breadcrumbParts = array_values(array_filter(explode('/', str_replace('\\', '/', $activePath))));

        $renderTreeNodes = function ($nodes, $moduleName, $depth = 0) use (&$renderTreeNodes) {
            $prettyName = function (string $name): string {
                $map = [
                    'database' => 'Database',
                    'exports' => 'Exports',
                    'http' => 'Http',
                    'imports' => 'Imports',
                    'models' => 'Models',
                    'resources' => 'Resources',
                    'routes' => 'Routes',
                    'controllers' => 'Controllers',
                    'views' => 'Views',
                    'migrations' => 'Migrations',
                ];
                $key = strtolower($name);
                return $map[$key] ?? $name;
            };
            $html = '';
            foreach ((array) $nodes as $node) {
                $nodeType = (string) ($node['type'] ?? 'file');
                $nodeName = (string) ($node['name'] ?? '');
                $displayName = $nodeType === 'dir' ? $prettyName($nodeName) : $nodeName;
                $nodePath = (string) ($node['path'] ?? $nodeName);
                $indent = $depth * 18;
                $icon = $nodeType === 'dir' ? 'fa-folder' : 'fa-file-lines';
                $typeLabel = $nodeType === 'dir' ? 'Folder' : 'File';
                $safeName = e($displayName);
                if ($nodeType === 'dir') {
                    $nameHtml = '<span>' . $safeName . '</span>';
                } else {
                    $nameHtml = '<a href="' . e(route('module_manager.editor', ['module' => $moduleName, 'file' => $nodePath])) . '" target="_blank" class="text-decoration-none">' . $safeName . '</a>';
                }

                $html .= '<div class="tree-node" style="padding-left:' . $indent . 'px">'
                    . '<span class="icon"><i class="fas ' . $icon . ' text-secondary"></i></span>'
                    . '<span class="me-2">' . $nameHtml . '</span>'
                    . '<span class="text-muted me-2">| ' . e($typeLabel) . '</span>'
                    . '<span class="text-muted">| ' . e($nodePath) . '</span>'
                    . '</div>';

                if ($nodeType === 'dir' && !empty($node['children']) && is_array($node['children'])) {
                    $html .= $renderTreeNodes($node['children'], $moduleName, $depth + 1);
                }
            }
            return $html;
        };
    @endphp

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Management Modules (Explorer)</h3>
            <div class="d-flex gap-2">
                <button id="btnUploadModule" class="btn btn-warning btn-sm">
                    <i class="fas fa-upload me-1"></i>Upload Module
                </button>
                <button id="btnDownloadModule" class="btn btn-success btn-sm" @if (empty($activeModule)) disabled @endif>
                    <i class="fas fa-download me-1"></i>Download Module
                </button>
                <button id="btnRemoveModule" class="btn btn-danger btn-sm" @if (empty($activeModule)) disabled @endif>
                    <i class="fas fa-trash me-1"></i>Remove Module
                </button>
                <button id="btnCopyModule" class="btn btn-primary btn-sm">
                    <i class="fas fa-copy me-1"></i>Copy Module
                </button>
                <a href="{{ route('guides.index', ['section' => 'dashboard-profile']) }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>User Guide
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-lg-4">
                    <div class="input-group input-group-sm mb-2">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input id="moduleSearch" class="form-control" placeholder="Search module..." />
                    </div>
                    <div id="moduleList" class="list-group module-list">
                        @forelse(($initialModules ?? []) as $m)
                            <a href="{{ route('module_manager.index', ['module' => $m['name']]) }}"
                               class="list-group-item list-group-item-action module-item {{ $activeModule === ($m['name'] ?? '') ? 'active' : '' }}"
                               data-module="{{ $m['name'] }}">
                                <div class="fw-semibold"><i class="fas fa-folder folder-ico"></i>{{ $m['name'] }}</div>
                                <div class="small text-muted">{{ $m['path'] }}</div>
                                <div class="small text-muted">
                                    files: {{ $m['files_count'] }} | route: {{ $m['has_routes'] ? 'yes' : 'no' }} | views: {{ $m['has_views'] ? 'yes' : 'no' }}
                                </div>
                            </a>
                        @empty
                            <div class="text-muted small p-2">Belum ada module ditemukan.</div>
                        @endforelse
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="d-flex gap-2 mb-2">
                        <input id="modulePath" class="form-control form-control-sm" value="{{ $activePath }}" readonly />
                        <button id="copyPathBtn" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-copy me-1"></i>Copy Path
                        </button>
                        <button id="openPathBtn" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-folder-open me-1"></i>Open Folder
                        </button>
                    </div>
                    <div id="modulePathBreadcrumb" class="path-breadcrumb mb-2">
                        @if (!empty($breadcrumbParts))
                            @foreach ($breadcrumbParts as $idx => $part)
                                {!! $idx > 0 ? ' <span class="text-muted">/</span> ' : '' !!}{{ $part }}
                            @endforeach
                        @else
                            -
                        @endif
                    </div>
                    <div class="explorer-head">
                        <span class="me-3"><i class="fas fa-font me-1"></i>Name</span>
                        <span class="me-3"><i class="fas fa-tag me-1"></i>Type</span>
                        <span><i class="fas fa-route me-1"></i>Relative Path</span>
                    </div>
                    <div id="moduleTree" class="tree-wrap text-muted">
                        @if (!empty($activeModule) && !empty($activeTree['tree']) && is_array($activeTree['tree']))
                            {!! $renderTreeNodes($activeTree['tree'], $activeModule, 0) !!}
                        @elseif(!empty($activeModule))
                            Folder kosong.
                        @else
                            Pilih module untuk melihat struktur file.
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="copyModuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Copy Module ke Module Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="copyModuleForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Source Module</label>
                                <select id="copySourceModule" class="form-select" required></select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Target Module (baru)</label>
                                <input id="copyTargetModule" class="form-control" placeholder="Contoh: FinanceReport" required />
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="copyCreateMenu">
                                    <label class="form-check-label" for="copyCreateMenu">Sekaligus buat Menu</label>
                                </div>
                            </div>
                            <div class="col-md-6 menu-extra d-none">
                                <label class="form-label">Profil Menu</label>
                                <select id="copyMenuProfile" class="form-select">
                                    <option value="">Public</option>
                                    @foreach ($profiles as $profile)
                                        <option value="{{ $profile }}">{{ $profile }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 menu-extra d-none">
                                <label class="form-label">Icon Menu</label>
                                <input id="copyMenuIconSearch" class="form-control form-control-sm mb-2" placeholder="Search icon..." />
                                <select id="copyMenuIcon" class="form-select mb-2">
                                    @foreach ($iconOptions as $icon)
                                        <option value="{{ $icon }}" {{ $icon === 'fas fa-puzzle-piece' ? 'selected' : '' }}>{{ $icon }}</option>
                                    @endforeach
                                </select>
                                <div id="copyMenuIconPickList" class="icon-pick-list mb-1"></div>
                                <small class="text-muted d-inline-flex align-items-center gap-2">
                                    <span id="copyMenuIconPreview" class="icon-pick-glyph"><i class="fas fa-puzzle-piece"></i></span>
                                    <span id="copyMenuIconPreviewText">fas fa-puzzle-piece</span>
                                </small>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Reference Path</label>
                                <input id="copyTargetPath" class="form-control mono-path" readonly />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Copy Sekarang</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="uploadModuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Upload Module (ZIP)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="uploadModuleForm">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">File ZIP Module</label>
                                <input id="uploadModuleFile" type="file" class="form-control" accept=".zip" required />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nama Module (opsional)</label>
                                <input id="uploadModuleName" class="form-control" placeholder="Kosongkan untuk pakai nama dari ZIP" />
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="uploadCreateMenu" checked>
                                    <label class="form-check-label" for="uploadCreateMenu">Create menu otomatis dari route suggestion</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="uploadMergeMigrations">
                                    <label class="form-check-label" for="uploadMergeMigrations">Merge migrations ke database (jalankan migrate module ini)</label>
                                </div>
                            </div>
                            <div class="col-md-6 upload-menu-extra">
                                <label class="form-label">Profil Menu</label>
                                <select id="uploadMenuProfile" class="form-select">
                                    <option value="">Public</option>
                                    @foreach ($profiles as $profile)
                                        <option value="{{ $profile }}">{{ $profile }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 upload-menu-extra">
                                <label class="form-label">Icon Menu</label>
                                <select id="uploadMenuIcon" class="form-select">
                                    @foreach ($iconOptions as $icon)
                                        <option value="{{ $icon }}" {{ $icon === 'fas fa-puzzle-piece' ? 'selected' : '' }}>{{ $icon }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <small class="text-muted">Saat upload, sistem baca <code>routes/web.php</code> module untuk suggest nama & URL menu.</small>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-warning">Upload</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @php
        $moduleManagerPayload = [
            'modules' => ($initialModules ?? collect())->values(),
            'trees' => ($initialTrees ?? []),
            'selected' => ($selected ?? ''),
        ];
    @endphp
    <script id="moduleManagerData" type="application/json">
        {!! json_encode($moduleManagerPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
    </script>
    <script>
        (function () {
            const moduleList = document.getElementById('moduleList');
            const moduleSearch = document.getElementById('moduleSearch');
            const moduleTree = document.getElementById('moduleTree');
            const modulePath = document.getElementById('modulePath');
            const modulePathBreadcrumb = document.getElementById('modulePathBreadcrumb');
            const copyPathBtn = document.getElementById('copyPathBtn');
            const openPathBtn = document.getElementById('openPathBtn');
            const btnCopyModule = document.getElementById('btnCopyModule');
            const btnUploadModule = document.getElementById('btnUploadModule');
            const btnDownloadModule = document.getElementById('btnDownloadModule');
            const btnRemoveModule = document.getElementById('btnRemoveModule');
            const copyModalEl = document.getElementById('copyModuleModal');
            const uploadModalEl = document.getElementById('uploadModuleModal');
            const copyModal = (function () {
                if (!copyModalEl) {
                    return { show() {}, hide() {} };
                }
                if (window.bootstrap && typeof window.bootstrap.Modal === 'function') {
                    const instance = new window.bootstrap.Modal(copyModalEl);
                    return {
                        show() { instance.show(); },
                        hide() { instance.hide(); },
                    };
                }
                if (window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.modal === 'function') {
                    const $modal = window.jQuery(copyModalEl);
                    return {
                        show() { $modal.modal('show'); },
                        hide() { $modal.modal('hide'); },
                    };
                }
                return {
                    show() {
                        copyModalEl.classList.add('show');
                        copyModalEl.style.display = 'block';
                        copyModalEl.removeAttribute('aria-hidden');
                        document.body.classList.add('modal-open');
                    },
                    hide() {
                        copyModalEl.classList.remove('show');
                        copyModalEl.style.display = 'none';
                        copyModalEl.setAttribute('aria-hidden', 'true');
                        document.body.classList.remove('modal-open');
                    },
                };
            })();
            const uploadModal = (function () {
                if (!uploadModalEl) {
                    return { show() {}, hide() {} };
                }
                if (window.bootstrap && typeof window.bootstrap.Modal === 'function') {
                    const instance = new window.bootstrap.Modal(uploadModalEl);
                    return {
                        show() { instance.show(); },
                        hide() { instance.hide(); },
                    };
                }
                if (window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.modal === 'function') {
                    const $modal = window.jQuery(uploadModalEl);
                    return {
                        show() { $modal.modal('show'); },
                        hide() { $modal.modal('hide'); },
                    };
                }
                return {
                    show() {
                        uploadModalEl.classList.add('show');
                        uploadModalEl.style.display = 'block';
                        uploadModalEl.removeAttribute('aria-hidden');
                        document.body.classList.add('modal-open');
                    },
                    hide() {
                        uploadModalEl.classList.remove('show');
                        uploadModalEl.style.display = 'none';
                        uploadModalEl.setAttribute('aria-hidden', 'true');
                        document.body.classList.remove('modal-open');
                    },
                };
            })();
            const copyForm = document.getElementById('copyModuleForm');
            const copySourceModule = document.getElementById('copySourceModule');
            const copyTargetModule = document.getElementById('copyTargetModule');
            const copyCreateMenu = document.getElementById('copyCreateMenu');
            const copyMenuProfile = document.getElementById('copyMenuProfile');
            const copyMenuIcon = document.getElementById('copyMenuIcon');
            const copyMenuIconSearch = document.getElementById('copyMenuIconSearch');
            const copyMenuIconPickList = document.getElementById('copyMenuIconPickList');
            const copyMenuIconPreview = document.getElementById('copyMenuIconPreview');
            const copyMenuIconPreviewText = document.getElementById('copyMenuIconPreviewText');
            const copyTargetPath = document.getElementById('copyTargetPath');
            const uploadForm = document.getElementById('uploadModuleForm');
            const uploadModuleFile = document.getElementById('uploadModuleFile');
            const uploadModuleName = document.getElementById('uploadModuleName');
            const uploadCreateMenu = document.getElementById('uploadCreateMenu');
            const uploadMergeMigrations = document.getElementById('uploadMergeMigrations');
            const uploadMenuProfile = document.getElementById('uploadMenuProfile');
            const uploadMenuIcon = document.getElementById('uploadMenuIcon');
            const selectedFromQuery = @json($selected ?? '');
            const moduleIndexUrl = @json(route('module_manager.index', [], false));
            const moduleDownloadBaseUrl = @json('/module-manager');
            const moduleDeleteBaseUrl = @json('/module-manager');
            const preloadedTrees = @json($initialTrees ?? []);
            let modules = @json(($initialModules ?? collect())->values());
            let selectedModule = '';
            const iconOptionsAll = Array.from(copyMenuIcon?.options || []).map((opt) => ({
                value: opt.value || '',
                label: opt.text || '',
            }));
            const notify = {
                success(message) {
                    if (window.toastr && typeof window.toastr.success === 'function') {
                        window.toastr.success(message);
                        return;
                    }
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire('Success', message, 'success');
                        return;
                    }
                    window.alert(message);
                },
                error(message) {
                    if (window.toastr && typeof window.toastr.error === 'function') {
                        window.toastr.error(message);
                        return;
                    }
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire('Error', message, 'error');
                        return;
                    }
                    window.alert(message);
                },
                info(message) {
                    if (window.toastr && typeof window.toastr.info === 'function') {
                        window.toastr.info(message);
                        return;
                    }
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire('Info', message, 'info');
                        return;
                    }
                    window.alert(message);
                },
            };

            const esc = (text) => {
                const div = document.createElement('div');
                div.textContent = text ?? '';
                return div.innerHTML;
            };

            function renderTree(nodes, depth = 0) {
                if (!Array.isArray(nodes) || !nodes.length) return '';
                const prettyName = (name) => {
                    const map = {
                        database: 'Database',
                        exports: 'Exports',
                        http: 'Http',
                        imports: 'Imports',
                        models: 'Models',
                        resources: 'Resources',
                        routes: 'Routes',
                        controllers: 'Controllers',
                        views: 'Views',
                        migrations: 'Migrations',
                    };
                    const key = String(name || '').toLowerCase();
                    return map[key] || (name || '');
                };
                return nodes.map((node) => {
                    const indent = depth * 18;
                    const icon = node.type === 'dir' ? 'fa-folder' : 'fa-file-lines';
                    const type = node.type === 'dir' ? 'Folder' : 'File';
                    const relPath = (node.path || node.name || '').toString();
                    const isFile = node.type !== 'dir';
                    const displayName = node.type === 'dir' ? prettyName(node.name) : node.name;
                    const openUrl = isFile
                        ? `{{ route('module_manager.editor') }}?module=${encodeURIComponent(selectedModule)}&file=${encodeURIComponent(relPath)}`
                        : '';
                    const nameHtml = isFile
                        ? `<a href="${openUrl}" target="_blank" class="text-decoration-none">${esc(displayName)}</a>`
                        : `<span>${esc(displayName)}</span>`;
                    const children = node.type === 'dir' ? renderTree(node.children || [], depth + 1) : '';
                    return `
                        <div class="tree-node" style="padding-left:${indent}px">
                            <span class="icon"><i class="fas ${icon} text-secondary"></i></span>
                            <span class="me-2">${nameHtml}</span>
                            <span class="text-muted me-2">| ${type}</span>
                            <span class="text-muted">| ${esc(node.path || node.name)}</span>
                        </div>
                        ${children}
                    `;
                }).join('');
            }

            function renderIconHtml(iconValue) {
                const value = (iconValue || '').toString().trim();
                if (!value) return '<i class="fas fa-circle"></i>';
                if (/^(mi|material):/i.test(value)) {
                    const name = value.replace(/^(mi|material):/i, '').trim() || 'menu';
                    return `<span class="material-icons">${esc(name)}</span>`;
                }
                if (/^ion:/i.test(value)) {
                    const name = value.replace(/^ion:/i, '').trim() || 'ellipse-outline';
                    return `<ion-icon name="${esc(name)}"></ion-icon>`;
                }
                return `<i class="${esc(value)}"></i>`;
            }

            function updateCopyIconPreview() {
                const value = (copyMenuIcon?.value || '').toString();
                if (copyMenuIconPreview) {
                    copyMenuIconPreview.innerHTML = renderIconHtml(value || 'fas fa-circle');
                }
                if (copyMenuIconPreviewText) {
                    copyMenuIconPreviewText.textContent = value || 'No icon';
                }
            }

            function renderCopyIconPickList(rows) {
                if (!copyMenuIconPickList) return;
                const current = (copyMenuIcon?.value || '').toString();
                copyMenuIconPickList.innerHTML = rows
                    .slice(0, 60)
                    .map((opt) => `
                        <div class="icon-pick-item ${opt.value === current ? 'active' : ''}" data-icon-value="${esc(opt.value)}">
                            <span class="icon-pick-glyph">${renderIconHtml(opt.value)}</span>
                            <span class="small">${esc(opt.label)}</span>
                        </div>
                    `)
                    .join('') || '<div class="text-muted small p-2">No icons</div>';
            }

            function filterCopyIconOptions() {
                if (!copyMenuIcon) return;
                const query = (copyMenuIconSearch?.value || '').toString().trim().toLowerCase();
                const current = (copyMenuIcon.value || '').toString();
                const rows = iconOptionsAll.filter((opt) => {
                    if (query === '') return true;
                    return opt.value.toLowerCase().includes(query) || opt.label.toLowerCase().includes(query);
                });
                copyMenuIcon.innerHTML = rows
                    .map((opt) => `<option value="${esc(opt.value)}">${esc(opt.label)}</option>`)
                    .join('');
                if (current && Array.from(copyMenuIcon.options).some((opt) => opt.value === current)) {
                    copyMenuIcon.value = current;
                }
                renderCopyIconPickList(rows);
                updateCopyIconPreview();
            }

            async function loadTree(name) {
                if (!name) return;
                selectedModule = name;
                moduleTree.innerHTML = '<span class="text-muted">Loading tree...</span>';
                if (preloadedTrees && preloadedTrees[name]) {
                    const pre = preloadedTrees[name] || {};
                    modulePath.value = pre.path || '';
                    if (modulePathBreadcrumb) {
                        const parts = (pre.path || '').replace(/\\/g, '/').split('/').filter(Boolean);
                        modulePathBreadcrumb.innerHTML = parts.map((p) => esc(p)).join(' <span class="text-muted">/</span> ') || '-';
                    }
                    moduleTree.innerHTML = renderTree(pre.tree || []) || '<span class="text-muted">Folder kosong.</span>';
                    return;
                }
                try {
                    const resp = await fetch(`/module-manager/${encodeURIComponent(name)}/tree`, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        }
                    });
                    const contentType = (resp.headers.get('content-type') || '').toLowerCase();
                    const data = contentType.includes('application/json') ? await resp.json() : null;
                    if (!resp.ok) throw new Error(data?.message || `Gagal load tree (${resp.status})`);
                    modulePath.value = data.path || '';
                    if (modulePathBreadcrumb) {
                        const parts = (data.path || '').replace(/\\/g, '/').split('/').filter(Boolean);
                        modulePathBreadcrumb.innerHTML = parts.map((p) => esc(p)).join(' <span class="text-muted">/</span> ') || '-';
                    }
                    moduleTree.innerHTML = renderTree(data.tree || []) || '<span class="text-muted">Folder kosong.</span>';
                } catch (e) {
                    moduleTree.innerHTML = `<span class="text-danger">${esc(e.message || 'Error')}</span>`;
                }
            }

            function renderModuleList() {
                const q = (moduleSearch.value || '').toLowerCase().trim();
                const rows = modules.filter((m) => m.name.toLowerCase().includes(q));
                const selectedRow = modules.find((m) => m.name === selectedModule);
                if (btnDownloadModule) btnDownloadModule.disabled = !selectedModule;
                if (btnRemoveModule) btnRemoveModule.disabled = !selectedModule || !!selectedRow?.is_protected;
                moduleList.innerHTML = rows.map((m) => `
                    <button type="button" class="list-group-item list-group-item-action module-item ${m.name === selectedModule ? 'active' : ''}" data-module="${esc(m.name)}">
                        <div class="fw-semibold"><i class="fas fa-folder folder-ico"></i>${esc(m.name)} ${m.is_protected ? '<span class="badge text-bg-warning ms-1">DEFAULT</span>' : ''}</div>
                        <div class="small text-muted">${esc(m.path)}</div>
                        <div class="small text-muted">
                            files: ${m.files_count} | route: ${m.has_routes ? 'yes' : 'no'} | views: ${m.has_views ? 'yes' : 'no'}
                        </div>
                    </button>
                `).join('');
            }

            function normalizeModuleName(value) {
                return (value || '')
                    .toString()
                    .replace(/[^A-Za-z0-9 _-]/g, ' ')
                    .trim()
                    .split(/[\s_-]+/)
                    .filter(Boolean)
                    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
                    .join('');
            }

            function renderCopySourceOptions() {
                let sourceRows = Array.isArray(modules) ? modules : [];
                if (!sourceRows.length) {
                    const domRows = Array.from(document.querySelectorAll('#moduleList .module-item[data-module]'))
                        .map((el) => ({ name: el.getAttribute('data-module') || '' }))
                        .filter((x) => (x.name || '').trim() !== '');
                    sourceRows = domRows;
                }
                copySourceModule.innerHTML = sourceRows.map((m) => `<option value="${esc(m.name)}">${esc(m.name)}</option>`).join('');
                if (selectedModule && copySourceModule.querySelector(`option[value="${selectedModule}"]`)) {
                    copySourceModule.value = selectedModule;
                }
            }

            function updateCopyPath() {
                const target = normalizeModuleName(copyTargetModule.value || '');
                const base = @json(str_replace('\\', '/', app_path('Modules')));
                copyTargetPath.value = target ? `${base}/${target}` : '';
                const showMenu = !!copyCreateMenu.checked;
                document.querySelectorAll('.menu-extra').forEach((el) => el.classList.toggle('d-none', !showMenu));
            }

            async function loadModules() {
                const resp = await fetch(`{{ route('module_manager.data') }}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    }
                });
                const contentType = (resp.headers.get('content-type') || '').toLowerCase();
                const data = contentType.includes('application/json') ? await resp.json() : null;
                if (!resp.ok) {
                    throw new Error(data?.message || `Gagal load module (${resp.status})`);
                }
                modules = Array.isArray(data?.data) ? data.data : [];
                if (!selectedModule && selectedFromQuery) {
                    selectedModule = selectedFromQuery;
                }
                if (!selectedModule && modules.length) {
                    selectedModule = modules[0].name;
                }
                renderModuleList();
                if (!modules.length) {
                    moduleList.innerHTML = '<div class="text-muted small p-2">Belum ada module ditemukan.</div>';
                    moduleTree.innerHTML = '<span class="text-muted">Belum ada module ditemukan.</span>';
                    return;
                }
                if (selectedModule) {
                    await loadTree(selectedModule);
                    renderModuleList();
                }
            }

            moduleList.addEventListener('click', async (e) => {
                const btn = e.target.closest('.module-item');
                if (!btn) return;
                e.preventDefault();
                const name = btn.getAttribute('data-module') || '';
                if (!name) return;
                selectedModule = name;
                renderModuleList();
                await loadTree(name);
                try {
                    const url = `${moduleIndexUrl}?module=${encodeURIComponent(name)}`;
                    window.history.replaceState({}, '', url);
                } catch (_) {}
            });

            moduleSearch.addEventListener('input', renderModuleList);
            if (btnCopyModule) {
                btnCopyModule.addEventListener('click', function () {
                    renderCopySourceOptions();
                    copyTargetModule.value = '';
                    copyCreateMenu.checked = false;
                    copyMenuProfile.value = '';
                    copyMenuIcon.value = 'fas fa-puzzle-piece';
                    if (copyMenuIconSearch) copyMenuIconSearch.value = '';
                    filterCopyIconOptions();
                    updateCopyPath();
                    copyModal.show();
                });
            }
            if (btnUploadModule) {
                btnUploadModule.addEventListener('click', function () {
                    if (uploadModuleFile) uploadModuleFile.value = '';
                    if (uploadModuleName) uploadModuleName.value = '';
                    if (uploadCreateMenu) uploadCreateMenu.checked = true;
                    if (uploadMergeMigrations) uploadMergeMigrations.checked = false;
                    document.querySelectorAll('.upload-menu-extra').forEach((el) => el.classList.remove('d-none'));
                    uploadModal.show();
                });
            }
            copyTargetModule?.addEventListener('input', updateCopyPath);
            copyCreateMenu?.addEventListener('change', updateCopyPath);
            uploadCreateMenu?.addEventListener('change', function () {
                const showMenu = !!uploadCreateMenu.checked;
                document.querySelectorAll('.upload-menu-extra').forEach((el) => el.classList.toggle('d-none', !showMenu));
            });
            copyMenuIconSearch?.addEventListener('input', filterCopyIconOptions);
            copyMenuIcon?.addEventListener('change', () => {
                updateCopyIconPreview();
                renderCopyIconPickList(iconOptionsAll);
            });
            copyMenuIconPickList?.addEventListener('click', (e) => {
                const item = e.target.closest('.icon-pick-item');
                if (!item || !copyMenuIcon) return;
                const value = item.getAttribute('data-icon-value') || '';
                if (!value) return;
                if (!Array.from(copyMenuIcon.options).some((opt) => opt.value === value)) {
                    copyMenuIcon.insertAdjacentHTML('beforeend', `<option value="${esc(value)}">${esc(value)}</option>`);
                }
                copyMenuIcon.value = value;
                updateCopyIconPreview();
                filterCopyIconOptions();
            });

            copyForm?.addEventListener('submit', async function (e) {
                e.preventDefault();
                const sourceModule = (copySourceModule.value || '').trim();
                const targetModule = normalizeModuleName(copyTargetModule.value || '');
                if (!sourceModule || !targetModule) {
                    notify.error('Source dan target module wajib diisi');
                    return;
                }
                const submitBtn = copyForm.querySelector('button[type="submit"]');
                try {
                    if (submitBtn) submitBtn.disabled = true;
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire({
                            title: 'Copying module...',
                            text: 'Mohon tunggu proses selesai.',
                            allowOutsideClick: false,
                            didOpen: () => window.Swal.showLoading(),
                        });
                    }
                    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                    const resp = await fetch(`{{ route('module_manager.copy') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({
                            source_module: sourceModule,
                            target_module: targetModule,
                            create_menu: copyCreateMenu.checked ? 1 : 0,
                            menu_profile: copyMenuProfile.value || '',
                            menu_icon: copyMenuIcon.value || '',
                        }),
                    });
                    const contentType = (resp.headers.get('content-type') || '').toLowerCase();
                    const data = contentType.includes('application/json') ? await resp.json() : {};
                    if (!resp.ok) throw new Error(data?.message || 'Copy module gagal');
                    copyModal.hide();
                    await loadModules();
                    const managerUrl = data?.module?.manager_url || '/module-manager';
                    const menuInfo = data?.menu
                        ? `<div class="small text-muted mt-2">Menu dibuat: ${esc(data.menu.name)} (${esc(data.menu.url || '-')})</div>`
                        : '';
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        await window.Swal.fire({
                            title: 'Success',
                            icon: 'success',
                            html: `<div class="text-start"><div>${esc(data.message || 'Copy module berhasil')}</div><div class="small text-muted mt-2">Path: ${esc(data?.module?.path || '-')}</div>${menuInfo}</div>`,
                            showCancelButton: true,
                            confirmButtonText: 'Open Explorer',
                            cancelButtonText: 'Close',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = managerUrl;
                            }
                        });
                    } else {
                        notify.success(data.message || 'Copy module berhasil');
                        window.location.href = managerUrl;
                    }
                } catch (error) {
                    notify.error(error?.message || 'Copy module gagal');
                } finally {
                    if (submitBtn) submitBtn.disabled = false;
                }
            });

            copyPathBtn.addEventListener('click', async () => {
                const value = (modulePath.value || '').trim();
                if (!value) return;
                try {
                    await navigator.clipboard.writeText(value);
                    notify.success('Path copied');
                } catch (e) {
                    notify.error('Gagal copy path');
                }
            });
            openPathBtn?.addEventListener('click', () => {
                const value = (modulePath.value || '').trim();
                if (!value) return;
                const fileUrl = `file:///${value.replace(/\\/g, '/').replace(/^\/+/, '')}`;
                try {
                    window.open(fileUrl, '_blank');
                } catch (e) {
                    notify.info('Browser mungkin memblokir akses file://, gunakan Copy Path.');
                }
            });

            btnDownloadModule?.addEventListener('click', () => {
                if (!selectedModule) {
                    notify.info('Pilih module dulu.');
                    return;
                }
                const url = `${moduleDownloadBaseUrl}/${encodeURIComponent(selectedModule)}/download`;
                window.open(url, '_blank');
            });

            btnRemoveModule?.addEventListener('click', async () => {
                if (!selectedModule) {
                    notify.info('Pilih module dulu.');
                    return;
                }
                const selectedRow = modules.find((m) => m.name === selectedModule);
                if (selectedRow?.is_protected) {
                    notify.info('Module default dilindungi dan tidak bisa dihapus.');
                    return;
                }

                const yes = await (async () => {
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        const result = await window.Swal.fire({
                            title: 'Hapus module?',
                            html: `Module <b>${esc(selectedModule)}</b> akan dihapus permanen.`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, hapus',
                            cancelButtonText: 'Batal',
                        });
                        return !!result.isConfirmed;
                    }
                    return window.confirm(`Hapus module ${selectedModule}?`);
                })();

                if (!yes) return;

                try {
                    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                    const resp = await fetch(`${moduleDeleteBaseUrl}/${encodeURIComponent(selectedModule)}`, {
                        method: 'DELETE',
                        headers: {
                            ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });
                    const contentType = (resp.headers.get('content-type') || '').toLowerCase();
                    const data = contentType.includes('application/json') ? await resp.json() : {};
                    if (!resp.ok) throw new Error(data?.message || 'Gagal hapus module');

                    notify.success(data.message || 'Module dihapus');
                    selectedModule = '';
                    modulePath.value = '';
                    if (modulePathBreadcrumb) modulePathBreadcrumb.textContent = '-';
                    moduleTree.innerHTML = '<span class="text-muted">Pilih module untuk melihat struktur file.</span>';
                    await loadModules();
                } catch (error) {
                    notify.error(error?.message || 'Gagal hapus module');
                }
            });

            uploadForm?.addEventListener('submit', async function (e) {
                e.preventDefault();
                const file = uploadModuleFile?.files?.[0];
                if (!file) {
                    notify.error('File ZIP wajib dipilih');
                    return;
                }

                const submitBtn = uploadForm.querySelector('button[type="submit"]');
                try {
                    if (submitBtn) submitBtn.disabled = true;
                    const formData = new FormData();
                    formData.append('file', file);
                    formData.append('module_name', (uploadModuleName?.value || '').toString().trim());
                    formData.append('create_menu', uploadCreateMenu?.checked ? '1' : '0');
                    formData.append('merge_migrations', uploadMergeMigrations?.checked ? '1' : '0');
                    formData.append('menu_profile', (uploadMenuProfile?.value || '').toString());
                    formData.append('menu_icon', (uploadMenuIcon?.value || '').toString());

                    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                    const resp = await fetch(`{{ route('module_manager.upload') }}`, {
                        method: 'POST',
                        headers: {
                            ...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
                            'Accept': 'application/json',
                        },
                        body: formData,
                    });
                    const data = await resp.json();
                    if (!resp.ok) throw new Error(data?.message || 'Upload module gagal');

                    uploadModal.hide();
                    await loadModules();
                    selectedModule = data?.module?.name || selectedModule;
                    if (selectedModule) {
                        await loadTree(selectedModule);
                        renderModuleList();
                    }

                    const suggest = data?.suggested_menu || null;
                    const menuCreated = data?.menu || null;
                    const migrations = data?.migrations || null;
                    const suggestText = suggest
                        ? `<div class="small text-muted mt-2">Suggest menu: ${esc(suggest.name || '-')} (${esc(suggest.url || '-')})</div>`
                        : '';
                    const menuText = menuCreated
                        ? `<div class="small text-muted mt-1">Menu dibuat: ${esc(menuCreated.name || '-')} (${esc(menuCreated.url || '-')})</div>`
                        : '';
                    const migrationText = migrations
                        ? `<div class="small text-muted mt-1">Migrations: ${esc(String(migrations.detected_count ?? 0))} file${migrations.executed ? ' (merged)' : ' (not merged)'}</div>`
                        : '';
                    notify.success(data?.message || 'Module berhasil diupload');
                    if (window.Swal && typeof window.Swal.fire === 'function') {
                        window.Swal.fire({
                            title: 'Upload Success',
                            icon: 'success',
                            html: `<div class="text-start">${suggestText}${menuText}${migrationText}</div>`,
                        });
                    }
                } catch (error) {
                    notify.error(error?.message || 'Upload module gagal');
                } finally {
                    if (submitBtn) submitBtn.disabled = false;
                }
            });

            loadModules().catch((e) => {
                const msg = esc(e.message || 'Error');
                if (!Array.isArray(modules) || !modules.length) {
                    moduleList.innerHTML = `<div class="text-danger small p-2">${msg}</div>`;
                }
                moduleTree.innerHTML = `<span class="text-danger">${msg}</span>`;
            });
            filterCopyIconOptions();
        })();
    </script>
@endpush