<style>
    .elfinder {
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 25px -20px rgba(15, 23, 42, 0.3);
        font-family: inherit;
        background: #f8fafc;
    }
    .elfinder-toolbar {
        background: #f1f5f9;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 12px;
    }
    .elfinder-toolbar .elfinder-button {
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: all 0.15s ease;
    }
    .elfinder-toolbar .elfinder-button:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }
    .elfinder-navbar {
        background: #f8fafc;
        border-right: 1px solid #e2e8f0;
    }
    .elfinder-navbar .ui-state-active {
        background: #4f46e5;
        border-color: #4f46e5;
        color: #ffffff;
    }
    .elfinder-navbar .ui-state-hover {
        background: #e2e8f0;
        border-color: #e2e8f0;
    }
    .elfinder-cwd {
        background: #ffffff;
    }
    .elfinder-cwd-file {
        border-radius: 12px;
    }
    .elfinder-cwd-file:hover {
        background: #eef2ff;
    }
    .elfinder-cwd-file.ui-state-hover,
    .elfinder-cwd-file.ui-state-active {
        background: #e0e7ff;
        border-color: #c7d2fe;
    }
    .elfinder-cwd-view-icons .elfinder-cwd-filename {
        border-radius: 8px;
        padding: 2px 6px;
    }
    .elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover {
        background: #6366f1;
        color: #ffffff;
    }
    .elfinder .elfinder-statusbar {
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
    }
</style>
<div class="space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="text-sm text-muted-foreground"><?= lang('filemanager') ?> • <?= lang('drag') ?> & <?= lang('drop') ?> <?= lang('files') ?></div>
        <div class="flex items-center gap-2 text-xs text-muted-foreground">
            <span class="inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1">
                <i data-lucide="cloud" class="h-3.5 w-3.5"></i>
                <?= lang('uploads') ?>
            </span>
            <span class="inline-flex items-center gap-2 rounded-full border border-border bg-muted/40 px-3 py-1">
                <i data-lucide="lock" class="h-3.5 w-3.5"></i>
                <?= lang('secure') ?>
            </span>
        </div>
    </div>
    <div class="rounded-2xl border border-border bg-white shadow-sm">
        <div id="elfinder" class="min-h-[560px]" data-connector="<?= $connector ?? '' ?>"></div>
        <div id="elfinder_fallback" class="hidden p-6 text-sm text-muted-foreground">
            <?= lang('loading') ?>...
        </div>
    </div>
</div>

<link rel="stylesheet" href="<?= base_url('assets/plugins/elfinder/jquery-ui.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/plugins/elfinder/elfinder.min.css') ?>">
<link rel="stylesheet" href="<?= base_url('assets/plugins/elfinder/theme.css') ?>">
<script src="<?= base_url('assets/plugins/elfinder/jquery-ui.min.js') ?>"></script>
<script src="<?= base_url('assets/plugins/elfinder/elfinder.min.js') ?>"></script>
<script>
    $(document).ready(function () {
        var $el = $("#elfinder");
        var $fallback = $("#elfinder_fallback");
        var connector = $el.data("connector");
        if (!connector) {
            $fallback.removeClass("hidden").text("Connector missing.");
            return;
        }

        var uiScript = "<?= base_url('assets/plugins/elfinder/jquery-ui.min.js') ?>";
        var elfinderScript = "<?= base_url('assets/plugins/elfinder/elfinder.min.js') ?>";
        var uiScriptCdn = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js";
        var elfinderScriptCdn = "https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.62/js/elfinder.min.js";

        function loadScript(src, cb) {
            if (document.querySelector('script[src="' + src + '"]')) {
                cb && cb();
                return;
            }
            var s = document.createElement("script");
            s.src = src;
            s.async = true;
            s.onload = function () { cb && cb(); };
            s.onerror = function () { cb && cb(); };
            document.body.appendChild(s);
        }

        var tries = 0;
        var maxTries = 20;
        function initElfinder() {
            tries += 1;
            if ($.fn && $.fn.elfinder) {
                $fallback.addClass("hidden");
                $el.elfinder({
                    url: connector,
                    resizable: false,
                    height: 560,
                    uiOptions: {
                        toolbar: [
                            ["back", "forward"],
                            ["reload"],
                            ["home", "up"],
                            ["mkdir", "mkfile", "upload"],
                            ["open", "download"],
                            ["copy", "cut", "paste"],
                            ["rm"],
                            ["rename", "edit", "resize"],
                            ["info", "quicklook"],
                            ["search"],
                            ["view"]
                        ]
                    }
                });
                return;
            }
            if (tries < maxTries) {
                $fallback.removeClass("hidden").text("Loading file manager...");
                setTimeout(initElfinder, 200);
            } else {
                var msg = "File manager assets did not load.";
                if (!$.ui) {
                    msg += " jQuery UI missing.";
                }
                if (!$.fn || !$.fn.elfinder) {
                    msg += " elFinder script missing.";
                }
                $fallback.removeClass("hidden").text(msg);
            }
        }

        if (!$.ui) {
            loadScript(uiScript, function () {
                if (!$.ui) {
                    loadScript(uiScriptCdn, function () {
                        if (!$.fn || !$.fn.elfinder) {
                            loadScript(elfinderScript, function () {
                                if (!$.fn || !$.fn.elfinder) {
                                    loadScript(elfinderScriptCdn, initElfinder);
                                } else {
                                    initElfinder();
                                }
                            });
                        } else {
                            initElfinder();
                        }
                    });
                } else if (!$.fn || !$.fn.elfinder) {
                    loadScript(elfinderScript, function () {
                        if (!$.fn || !$.fn.elfinder) {
                            loadScript(elfinderScriptCdn, initElfinder);
                        } else {
                            initElfinder();
                        }
                    });
                } else {
                    initElfinder();
                }
            });
        } else if (!$.fn || !$.fn.elfinder) {
            loadScript(elfinderScript, function () {
                if (!$.fn || !$.fn.elfinder) {
                    loadScript(elfinderScriptCdn, initElfinder);
                } else {
                    initElfinder();
                }
            });
        } else {
            initElfinder();
        }
    });
</script>
