{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-nav-config.css"}}">

{{template "admin-hero-styles" .}}

<div class="navcfg-page">
    <details class="admin-hero">
        <summary class="admin-hero-bar">
            <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-menu'></i></span>
            <span class="admin-hero-intro">{{T "admin_doc_config_nav_only_hint"}}</span>
            <span class="admin-hero-toggle">
                <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
                {{template "admin-hero-help-meta" .}}
            </span>
        </summary>
        <div class="admin-hero-body">
                <ul class="admin-hero-field-grid">
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_text"}}</strong>{{T "admin_doc_config_nav_text_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_url"}}</strong>{{T "admin_doc_config_nav_url_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_order"}}</strong>{{T "admin_doc_config_nav_order_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_visible"}}</strong>{{T "admin_doc_config_nav_visible_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_user_top"}}</strong>{{T "admin_doc_config_nav_user_top_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_user_panel"}}</strong>{{T "admin_doc_config_nav_user_panel_desc"}}</li>
                    <li class="admin-hero-field-item"><strong>{{T "admin_doc_config_nav_open_in"}}</strong>{{T "admin_doc_config_nav_open_in_desc"}}</li>
                </ul>
                <div class="admin-hero-tip">
                    <i class='bx bx-bulb'></i>
                    <strong>{{T "admin_doc_config_note"}}</strong> {{T "admin_doc_config_note_save"}}
                    <a href="/admin/public-categories">{{T "admin_public_categories_title"}}</a>
                </div>
        </div>
    </details>

    <div class="navcfg-toolbar">
        <div class="navcfg-stats">
            <span class="badge bg-light text-dark border" id="statTotal"><i class='bx bx-link'></i> <span id="statTotalNum">0</span></span>
            <span class="badge bg-success" id="statVisible" style="display:none;"><i class='bx bx-show'></i> <span id="statVisibleNum">0</span></span>
        </div>
        <button class="btn btn-sm btn-outline-primary btn-add-link" id="btnAddNavLink">
            <i class='bx bx-plus'></i> {{T "admin_doc_config_add_link"}}
        </button>
    </div>

    <div class="navcfg-table-card">
        <div class="table-responsive">
            <table class="table align-middle mb-0" id="navLinksTable">
                <thead>
                    <tr>
                        <th>{{T "admin_doc_config_link_text"}}</th>
                        <th>{{T "admin_doc_config_link_url"}}</th>
                        <th class="text-center">{{T "admin_doc_config_order"}}</th>
                        <th class="text-center">{{T "admin_doc_config_visibility"}}</th>
                        <th class="text-center">{{T "admin_doc_config_show_in_user_top"}}</th>
                        <th class="text-center">{{T "admin_doc_config_show_in_user_panel"}}</th>
                        <th class="text-center">{{T "admin_doc_config_open_in"}}</th>
                        <th class="text-center" width="60">{{T "admin_col_actions"}}</th>
                    </tr>
                </thead>
                <tbody id="navLinksList"></tbody>
            </table>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var DocConfigI18n = {
    visible: {{json (T "admin_doc_config_visible")}},
    hidden: {{json (T "admin_doc_config_hidden")}},
    noNavLinks: {{json (T "admin_doc_config_no_nav_links")}},
    noNavLinksHint: {{json (T "admin_doc_config_no_nav_links_hint")}},
    newTab: {{json (T "admin_doc_config_new_tab")}},
    sameWindow: {{json (T "admin_doc_config_same_window")}},
    linkText: {{json (T "admin_doc_config_link_text")}},
    linkUrl: {{json (T "admin_doc_config_link_url")}},
    linkUrlPlaceholder: {{json (T "admin_doc_config_link_url_placeholder")}},
    visibility: {{json (T "admin_doc_config_visibility")}},
    show: {{json (T "admin_doc_config_show")}},
    hide: {{json (T "admin_doc_config_hide")}},
    yes: {{json (T "admin_doc_config_yes")}},
    no: {{json (T "admin_doc_config_no")}},
    showInUserTop: {{json (T "admin_doc_config_show_in_user_top")}},
    showInUserPanel: {{json (T "admin_doc_config_show_in_user_panel")}},
    openIn: {{json (T "admin_doc_config_open_in")}},
    order: {{json (T "admin_doc_config_order")}},
    unnamedLink: {{json (T "admin_doc_config_unnamed_link")}},
    loadFailed: {{json (T "admin_doc_config_load_failed")}},
    newLink: {{json (T "admin_doc_config_new_link")}},
    linkAdded: {{json (T "admin_doc_config_link_added")}},
    deleteLinkPrefix: {{json (T "admin_doc_config_delete_link_prefix")}},
    duplicateLinks: {{json (T "admin_doc_config_duplicate_links")}},
    fixRetry: {{json (T "admin_doc_config_fix_retry")}},
    saved: {{json (T "admin_doc_config_saved")}},
    confirm: {{json (T "admin_doc_config_confirm")}},
    ok: {{json (T "admin_doc_config_ok")}},
    addLinkTitle: {{json (T "admin_doc_config_add_link")}},
    editTitle: {{json (T "admin_btn_edit")}},
    deleteTitle: {{json (T "admin_btn_delete")}},
    deleted: {{json (T "admin_deleted")}},
    cannotUndo: {{json (T "admin_cannot_undo")}},
    confirmDelete: {{json (T "admin_confirm_delete")}}
};
</script>
<script>
let configData = null;

function loadConfig() {
    var loadId = BootstrapModal.load();
    $.get('/admin/nav-config-get', function(res) {
        BootstrapModal.close(loadId);
        if (res.success) {
            configData = res.data.config || { directories: {}, top_nav: { links: [] } };
            if (!configData.top_nav) configData.top_nav = { links: [] };
            if (!configData.top_nav.links) configData.top_nav.links = [];
            renderNavLinks();
            updateStats();
        } else {
            BootstrapModal.msg(DocConfigI18n.loadFailed + ': ' + res.message, {icon: 2});
        }
    }).fail(function() {
        BootstrapModal.close(loadId);
        BootstrapModal.msg(DocConfigI18n.loadFailed, {icon: 2});
    });
}

function updateStats() {
    var links = configData && configData.top_nav && configData.top_nav.links ? configData.top_nav.links : [];
    var visible = links.filter(function(l) { return l.visible !== false; }).length;
    $('#statTotalNum').text(links.length);
    $('#statVisibleNum').text(visible);
    if (links.length > 0) {
        $('#statVisible').show();
    } else {
        $('#statVisible').hide();
    }
}

function getSortedLinks() {
    return (configData.top_nav.links || []).slice().sort(function(a, b) { return (a.order || 999) - (b.order || 999); });
}

function renderNavLinks() {
    var tbody = $('#navLinksList');
    tbody.empty();
    var links = getSortedLinks();
    if (links.length === 0) {
        tbody.append(
            '<tr><td colspan="8"><div class="navcfg-empty">' +
            '<div class="navcfg-empty-inner">' +
            '<span class="navcfg-empty-icon"><i class="bx bx-link-alt"></i></span>' +
            '<div class="navcfg-empty-title">' + DocConfigI18n.noNavLinks + '</div>' +
            '<div class="navcfg-empty-hint">' + DocConfigI18n.noNavLinksHint + '</div>' +
            '</div></div></td></tr>'
        );
        return;
    }
    links.forEach(function(link, index) { tbody.append(getNavLinkRowHtml(index, link)); });
}

function buildNavVisitUrl(url) {
    var raw = String(url || '').trim();
    if (!raw) return '/';
    if (/^https?:\/\//i.test(raw) || raw.indexOf('//') === 0) {
        return raw;
    }
    if (raw.charAt(0) === '/') {
        return raw;
    }
    return '/' + raw;
}

function renderNavUrlLink(link) {
    var display = escapeHtml(link.url || '/');
    var href = escapeAttr(buildNavVisitUrl(link.url));
    var target = link.target === '_blank' ? '_blank' : '_self';
    var rel = target === '_blank' ? ' rel="noopener noreferrer"' : '';
    var icon = target === '_blank' ? '<i class="bx bx-link-external" aria-hidden="true"></i>' : '';
    return '<a href="' + href + '" class="url-link" target="' + target + '"' + rel + ' title="' + escapeAttr(link.url || '/') + '">' +
        '<code>' + display + '</code>' + icon + '</a>';
}

function renderPlacementBadge(enabled) {
    return enabled
        ? '<span class="badge bg-success navcfg-badge-yes">' + DocConfigI18n.yes + '</span>'
        : '<span class="badge bg-secondary navcfg-badge-yes">' + DocConfigI18n.no + '</span>';
}

function getNavLinkRowHtml(index, link) {
    var targetValue = link.target || '_self';
    var visibleBadge = renderPlacementBadge(link.visible !== false);
    var userTopBadge = renderPlacementBadge(link.show_in_user_top === true);
    var userPanelBadge = renderPlacementBadge(link.show_in_user_panel === true);
    var targetLabel = targetValue === '_blank' ? DocConfigI18n.newTab : DocConfigI18n.sameWindow;
    var targetBadge = targetValue === '_blank'
        ? '<span class="badge bg-info text-dark navcfg-badge-yes"><i class="bx bx-link-external"></i> ' + targetLabel + '</span>'
        : '<span class="badge bg-light text-dark border navcfg-badge-yes">' + targetLabel + '</span>';
    var text = escapeHtml(link.text || DocConfigI18n.unnamedLink);
    return '<tr class="nav-link-row" data-index="' + index + '">' +
        '<td><div class="link-cell-inner"><span class="icon-chip"><i class="bx bx-link-alt"></i></span><div class="link-text"><strong>' + text + '</strong></div></div></td>' +
        '<td>' + renderNavUrlLink(link) + '</td>' +
        '<td class="text-center"><span class="count-pill">' + (link.order || 0) + '</span></td>' +
        '<td class="text-center">' + visibleBadge + '</td>' +
        '<td class="text-center">' + userTopBadge + '</td>' +
        '<td class="text-center">' + userPanelBadge + '</td>' +
        '<td class="text-center">' + targetBadge + '</td>' +
        '<td class="text-center">' + getNavActionDropdownHtml(index) + '</td>' +
        '</tr>';
}

function getNavActionDropdownHtml(index) {
    return '<div class="dropdown table-action-dropdown">' +
        '<button class="btn btn-action-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
        '<i class="bx bx-dots-vertical-rounded" style="font-size:1.15rem;"></i></button>' +
        '<ul class="dropdown-menu dropdown-menu-end">' +
        '<li><a class="dropdown-item btn-nav-edit" href="javascript:;" data-index="' + index + '"><i class="bx bx-edit"></i>' + DocConfigI18n.editTitle + '</a></li>' +
        '<li><a class="dropdown-item text-danger btn-nav-delete" href="javascript:;" data-index="' + index + '"><i class="bx bx-trash"></i>' + DocConfigI18n.deleteTitle + '</a></li>' +
        '</ul></div>';
}

function escapeAttr(str) {
    return String(str || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function escapeHtml(str) {
    return escapeAttr(str);
}

function getNavLinkFormFields(link) {
    link = link || {};
    return [
        { name: 'text', label: DocConfigI18n.linkText, value: link.text || '', placeholder: DocConfigI18n.linkText, fieldClass: 'navcfg-field-span-2' },
        { name: 'url', label: DocConfigI18n.linkUrl, value: link.url || '/', placeholder: DocConfigI18n.linkUrlPlaceholder, fieldClass: 'navcfg-field-span-2' },
        { name: 'order', label: DocConfigI18n.order, value: link.order || 0, inputType: 'number', fieldClass: 'navcfg-field-span-2' },
        { name: 'visible', label: DocConfigI18n.visibility, type: 'radio', value: link.visible !== false ? 'true' : 'false',
          options: [{ value: 'true', label: DocConfigI18n.show }, { value: 'false', label: DocConfigI18n.hide }] },
        { name: 'show_in_user_top', label: DocConfigI18n.showInUserTop, type: 'radio', value: link.show_in_user_top === true ? 'true' : 'false',
          options: [{ value: 'true', label: DocConfigI18n.yes }, { value: 'false', label: DocConfigI18n.no }] },
        { name: 'show_in_user_panel', label: DocConfigI18n.showInUserPanel, type: 'radio', value: link.show_in_user_panel === true ? 'true' : 'false',
          options: [{ value: 'true', label: DocConfigI18n.yes }, { value: 'false', label: DocConfigI18n.no }] },
        { name: 'target', label: DocConfigI18n.openIn, type: 'radio', value: link.target || '_self',
          options: [{ value: '_self', label: DocConfigI18n.sameWindow }, { value: '_blank', label: DocConfigI18n.newTab }] }
    ];
}

function buildLinkFromForm(data) {
    return {
        text: String(data.text || '').trim(),
        url: String(data.url || '').trim(),
        order: parseInt(data.order) || 0,
        visible: data.visible === 'true',
        show_in_user_top: data.show_in_user_top === 'true',
        show_in_user_panel: data.show_in_user_panel === 'true',
        target: data.target || '_self'
    };
}

async function addNavLink() {
    var data = await BootstrapModal.openForm({
        title: DocConfigI18n.addLinkTitle,
        okText: AdminI18n.add,
        modalClass: 'navcfg-link-form-modal',
        fields: getNavLinkFormFields({ text: DocConfigI18n.newLink, url: '/', order: 99, visible: true, show_in_user_top: false, show_in_user_panel: false, target: '_self' })
    });
    if (!data) return;
    var link = buildLinkFromForm(data);
    if (!link.text && !link.url) {
        BootstrapModal.msg(DocConfigI18n.linkText + ' / ' + DocConfigI18n.linkUrl, {icon: 2});
        return;
    }
    if (!configData.top_nav) configData.top_nav = { links: [] };
    if (!configData.top_nav.links) configData.top_nav.links = [];
    configData.top_nav.links.push(link);
    saveConfig(true);
}

async function editNavLink(index) {
    var sortedLinks = getSortedLinks();
    var link = sortedLinks[index];
    if (!link) return;
    var data = await BootstrapModal.openForm({
        title: DocConfigI18n.editTitle + ' — ' + (link.text || DocConfigI18n.unnamedLink),
        okText: AdminI18n.save,
        modalClass: 'navcfg-link-form-modal',
        fields: getNavLinkFormFields(link)
    });
    if (!data) return;
    var updated = buildLinkFromForm(data);
    var originalIndex = findOriginalLinkIndex(link);
    if (originalIndex === -1) return;
    configData.top_nav.links[originalIndex] = updated;
    saveConfig(true);
}

async function removeNavLink(index) {
    var sortedLinks = getSortedLinks();
    var link = sortedLinks[index];
    if (!link) return;
    var confirmed = await BootstrapModal.confirm(
        DocConfigI18n.deleteLinkPrefix + ' "<strong>' + escapeHtml(link.text || DocConfigI18n.unnamedLink) + '</strong>"?<br><span class="text-muted small">' + DocConfigI18n.cannotUndo + '</span>',
        { title: DocConfigI18n.confirmDelete }
    );
    if (!confirmed) return;
    var originalIndex = findOriginalLinkIndex(link);
    if (originalIndex !== -1) configData.top_nav.links.splice(originalIndex, 1);
    saveConfig(true);
}

function findOriginalLinkIndex(link) {
    for (var i = 0; i < configData.top_nav.links.length; i++) {
        var l = configData.top_nav.links[i];
        if (l.text === link.text && l.url === link.url && l.order === link.order && l.target === link.target &&
            l.visible === link.visible && l.show_in_user_top === link.show_in_user_top && l.show_in_user_panel === link.show_in_user_panel) {
            return i;
        }
    }
    return -1;
}

function saveConfig(silentReload) {
    if (!configData) configData = { directories: {}, top_nav: { links: [] } };
    if (!configData.top_nav) configData.top_nav = { links: [] };

    var linkTexts = [], duplicateLinks = [];
    var normalized = [];
    (configData.top_nav.links || []).forEach(function(link) {
        var item = {
            text: String(link.text || '').trim(),
            url: String(link.url || '').trim(),
            order: parseInt(link.order) || 0,
            visible: link.visible !== false,
            show_in_user_top: link.show_in_user_top === true,
            show_in_user_panel: link.show_in_user_panel === true,
            target: link.target || '_self'
        };
        if (item.text || item.url) {
            if (item.text && linkTexts.indexOf(item.text) !== -1) {
                if (duplicateLinks.indexOf(item.text) === -1) duplicateLinks.push(item.text);
            } else if (item.text) {
                linkTexts.push(item.text);
            }
            normalized.push(item);
        }
    });
    if (duplicateLinks.length > 0) {
        BootstrapModal.msg(DocConfigI18n.duplicateLinks + ': <strong>' + duplicateLinks.join('</strong>, <strong>') + '</strong>. ' + DocConfigI18n.fixRetry, {icon: 2, time: 5000, html: true});
        return;
    }
    configData.top_nav.links = normalized;

    var loadId = BootstrapModal.load();
    $.ajax({
        url: '/admin/nav-config-save', type: 'POST', contentType: 'application/json',
        data: JSON.stringify({ config: configData }),
        success: function(res) {
            BootstrapModal.close(loadId);
            if (res.success) {
                BootstrapModal.msg(DocConfigI18n.saved, {icon: 1, callback: loadConfig});
            } else {
                BootstrapModal.msg(res.message, {icon: 2});
            }
        },
        error: function() { BootstrapModal.close(loadId); BootstrapModal.msg(AdminI18n.requestFailed, {icon: 2}); }
    });
}

$(document).ready(function() {
    loadConfig();
    $('#btnAddNavLink').on('click', addNavLink);
    $(document).on('click', '.btn-nav-edit', function(e) {
        e.preventDefault();
        editNavLink(parseInt($(this).data('index')));
    });
    $(document).on('click', '.btn-nav-delete', function(e) {
        e.preventDefault();
        removeNavLink(parseInt($(this).data('index')));
    });
});
</script>
{{end}}