{{template "layout.html" .}}

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

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

<div class="attachcfg-page">
    <details class="admin-hero">
        <summary class="admin-hero-bar">
            <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-paperclip'></i></span>
            <span class="admin-hero-intro">{{T "admin_attach_intro"}}</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_attach_usage_driver"}}</strong>{{T "admin_attach_usage_driver_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attach_usage_local"}}</strong>{{T "admin_attach_usage_local_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attach_usage_imgtoc"}}</strong>{{T "admin_attach_usage_imgtoc_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_attach_usage_insert"}}</strong>{{T "admin_attach_usage_insert_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"}}
            </div>
        </div>
    </details>

    <form id="attachConfigForm">
        <div class="attachcfg-grid">
            <div class="attachcfg-section">
                <div class="section-head">
                    <span class="icon-chip"><i class='bx bx-toggle-left'></i></span>
                    <div>
                        <h2 class="section-title">{{T "admin_attach_driver_title"}}</h2>
                        <p class="section-desc">{{T "admin_attach_driver_desc"}}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="attachcfg-driver-grid">
                        <label class="attachcfg-driver-opt" id="driverOptLocal">
                            <input type="radio" name="doc_attach_driver" value="local" class="form-check-input">
                            <span>
                                <strong>{{T "admin_attach_driver_local"}}</strong>
                                <span class="d-block small text-muted">{{T "admin_attach_driver_local_hint"}}</span>
                            </span>
                        </label>
                        <label class="attachcfg-driver-opt" id="driverOptImgToC">
                            <input type="radio" name="doc_attach_driver" value="imgtoc" class="form-check-input">
                            <span>
                                <strong>{{T "admin_attach_driver_imgtoc"}}</strong>
                                <span class="d-block small text-muted">{{T "admin_attach_driver_imgtoc_hint"}}</span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="attachcfg-section" id="panelLocal">
                <div class="section-head">
                    <span class="icon-chip"><i class='bx bx-hdd'></i></span>
                    <div>
                        <h2 class="section-title">{{T "admin_attach_local_title"}}</h2>
                        <p class="section-desc">{{T "admin_attach_local_path_hint"}}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="cfg_local_attach_max_file_bytes">{{T "admin_attach_local_max_mb"}}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="cfg_local_attach_max_file_bytes" min="1" step="1" placeholder="32">
                                <span class="input-group-text">MB</span>
                            </div>
                            <div class="form-text">{{T "admin_attach_local_max_mb_hint"}}</div>
                        </div>
                        <div class="col-12">
                            <div class="form-text">{{T "admin_attach_local_storage_note"}} <code id="localRootPreview">filestore/attachments/</code></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="attachcfg-section" id="panelImgToC" style="display:none;">
                <div class="section-head">
                    <span class="icon-chip"><i class='bx bx-image-alt'></i></span>
                    <div>
                        <h2 class="section-title">ImgToC</h2>
                        <p class="section-desc">{{T "admin_imgtoc_api_base_hint"}}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="attachcfg-links">
                        <a href="https://imgtoc.com" target="_blank" rel="noopener noreferrer"><i class='bx bx-link-external'></i> imgtoc.com</a>
                        <span class="mx-1">·</span>
                        <a href="https://imgtoc.com/api-docs.html" target="_blank" rel="noopener noreferrer"><i class='bx bx-book-open'></i> {{T "admin_imgtoc_api_center_link"}}</a>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="cfg_imgtoc_api_base">{{T "admin_imgtoc_api_base"}} <span class="text-danger">*</span></label>
                            <input type="url" class="form-control" id="cfg_imgtoc_api_base" placeholder="https://imgtoc.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="cfg_imgtoc_api_key">{{T "admin_imgtoc_api_key"}} <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="cfg_imgtoc_api_key" placeholder="***" autocomplete="new-password">
                            <div class="form-text">{{T "admin_imgtoc_api_key_hint"}}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="cfg_imgtoc_folder_id">{{T "admin_imgtoc_folder_id"}}</label>
                            <input type="number" class="form-control" id="cfg_imgtoc_folder_id" min="0" step="1" placeholder="0">
                            <div class="form-text">{{T "admin_imgtoc_folder_id_hint"}}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="cfg_imgtoc_max_file_bytes">{{T "admin_imgtoc_max_mb"}}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="cfg_imgtoc_max_file_bytes" min="1" step="1" placeholder="32">
                                <span class="input-group-text">MB</span>
                            </div>
                            <div class="form-text">{{T "admin_imgtoc_max_mb_hint"}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="attachcfg-section">
                <div class="section-head">
                    <span class="icon-chip"><i class='bx bx-file'></i></span>
                    <div>
                        <h2 class="section-title">{{T "admin_upload_file_types_title"}}</h2>
                        <p class="section-desc">{{T "admin_upload_file_types_desc"}}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="attachcfg-ext-list">
                        <div class="attachcfg-ext-block">
                            <label class="attachcfg-ext-block__label" for="cfg_doc_image_allowed_extensions">{{T "admin_upload_image_ext"}}</label>
                            <textarea class="form-control attachcfg-ext-block__textarea" id="cfg_doc_image_allowed_extensions" rows="3" placeholder="jpg,jpeg,png,gif,webp,bmp,svg"></textarea>
                            <div class="form-text">{{T "admin_upload_image_ext_hint"}}</div>
                        </div>
                        <div class="attachcfg-ext-block">
                            <label class="attachcfg-ext-block__label" for="cfg_doc_video_allowed_extensions">{{T "admin_upload_video_ext"}}</label>
                            <textarea class="form-control attachcfg-ext-block__textarea" id="cfg_doc_video_allowed_extensions" rows="3" placeholder="mp4,webm,mov,mkv,avi,m4v,ogv"></textarea>
                            <div class="form-text">{{T "admin_upload_video_ext_hint"}}</div>
                        </div>
                        <div class="attachcfg-ext-block">
                            <label class="attachcfg-ext-block__label" for="cfg_doc_attach_allowed_extensions">{{T "admin_upload_attach_ext"}}</label>
                            <textarea class="form-control attachcfg-ext-block__textarea" id="cfg_doc_attach_allowed_extensions" rows="3" placeholder="pdf,zip,doc,docx,txt,md"></textarea>
                            <div class="form-text">{{T "admin_upload_attach_ext_hint"}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="attachcfg-save-bar">
            <p class="attachcfg-save-hint mb-0"><i class='bx bx-info-circle'></i> {{T "admin_doc_config_note_save"}}</p>
            <div class="attachcfg-save-actions">
                <button type="button" class="btn btn-outline-secondary" id="btnAttachTest">{{T "admin_imgtoc_test"}}</button>
                <button type="submit" class="btn btn-primary" id="btnAttachSave">
                    <i class='bx bx-save'></i> {{T "admin_btn_save"}}
                </button>
            </div>
        </div>
    </form>
</div>
{{end}}

{{define "scripts"}}
<script>
var AttachConfigI18n = {
    saved: {{json (T "admin_imgtoc_saved")}},
    loadFailed: {{json (T "admin_doc_config_load_failed")}}
};

function syncDriverPanels() {
    var driver = $('input[name=doc_attach_driver]:checked').val() || 'local';
    $('.attachcfg-driver-opt').removeClass('is-active');
    if (driver === 'imgtoc') {
        $('#driverOptImgToC').addClass('is-active');
        $('#panelImgToC').show();
        $('#panelLocal').hide();
    } else {
        $('#driverOptLocal').addClass('is-active');
        $('#panelImgToC').hide();
        $('#panelLocal').show();
    }
}

function loadAttachConfig() {
    var loadId = BootstrapModal.load();
    $.get('/admin/upload-config-get', function(res) {
        BootstrapModal.close(loadId);
        if (!res.success || !res.data) {
            BootstrapModal.msg(AttachConfigI18n.loadFailed, {icon: 2});
            return;
        }
        var d = res.data;
        var driver = d.doc_attach_driver || d.driver || 'local';
        $('input[name=doc_attach_driver][value="' + driver + '"]').prop('checked', true);
        $('#cfg_local_attach_max_file_bytes').val(d.local_attach_max_file_bytes || '32');
        $('#cfg_imgtoc_api_base').val(d.imgtoc_api_base || '');
        $('#cfg_imgtoc_folder_id').val(d.imgtoc_folder_id || '0');
        $('#cfg_imgtoc_max_file_bytes').val(d.imgtoc_max_file_bytes || '32');
        $('#cfg_doc_image_allowed_extensions').val(d.doc_image_allowed_extensions || 'jpg,jpeg,png,gif,webp,bmp,svg');
        $('#cfg_doc_video_allowed_extensions').val(d.doc_video_allowed_extensions || 'mp4,webm,mov,mkv,avi,m4v,ogv,wmv,flv,mpeg,mpg,3gp,3g2,ts,m2ts,f4v');
        $('#cfg_doc_attach_allowed_extensions').val(d.doc_attach_allowed_extensions || 'jpg,jpeg,png,gif,webp,bmp,svg,pdf,zip,rar,7z,txt,md,markdown,doc,docx,xls,xlsx,ppt,pptx');
        if (d.local_attach_root) $('#localRootPreview').text(d.local_attach_root + '/');
        if (d.imgtoc_api_key_set) $('#cfg_imgtoc_api_key').attr('placeholder', '***');
        syncDriverPanels();
    }).fail(function() {
        BootstrapModal.close(loadId);
        BootstrapModal.msg(AttachConfigI18n.loadFailed, {icon: 2});
    });
}

function normalizeExtCSV(val) {
    return String(val || '').replace(/，/g, ',').split(',')
        .map(function (s) { return s.trim().replace(/^\./, '').toLowerCase(); })
        .filter(Boolean).join(',');
}

function saveAttachConfig(e) {
    e.preventDefault();
    var payload = {
        doc_attach_driver: $('input[name=doc_attach_driver]:checked').val() || 'local',
        local_attach_max_file_bytes: $('#cfg_local_attach_max_file_bytes').val().trim(),
        imgtoc_api_base: $('#cfg_imgtoc_api_base').val().trim(),
        imgtoc_api_key: $('#cfg_imgtoc_api_key').val(),
        imgtoc_folder_id: $('#cfg_imgtoc_folder_id').val().trim(),
        imgtoc_max_file_bytes: $('#cfg_imgtoc_max_file_bytes').val().trim(),
        doc_image_allowed_extensions: normalizeExtCSV($('#cfg_doc_image_allowed_extensions').val()),
        doc_video_allowed_extensions: normalizeExtCSV($('#cfg_doc_video_allowed_extensions').val()),
        doc_attach_allowed_extensions: normalizeExtCSV($('#cfg_doc_attach_allowed_extensions').val())
    };
    var loadId = BootstrapModal.load();
    $.ajax({
        url: '/admin/upload-config-save',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(payload),
        success: function(res) {
            BootstrapModal.close(loadId);
            BootstrapModal.msg(res.message || AttachConfigI18n.saved, {icon: res.success ? 1 : 2});
            if (res.success) {
                $('#cfg_imgtoc_api_key').val('');
                loadAttachConfig();
            }
        },
        error: function() {
            BootstrapModal.close(loadId);
            BootstrapModal.msg(AdminI18n.requestFailed, {icon: 2});
        }
    });
}

$(document).ready(function() {
    loadAttachConfig();
    $('input[name=doc_attach_driver]').on('change', syncDriverPanels);
    $('#attachConfigForm').on('submit', saveAttachConfig);
    $('#btnAttachTest').on('click', function() {
        var loadId = BootstrapModal.load();
        $.get('/admin/upload-config-test', function(res) {
            BootstrapModal.close(loadId);
            BootstrapModal.msg(res.message || '', {icon: res.success ? 1 : 2});
        }).fail(function() {
            BootstrapModal.close(loadId);
            BootstrapModal.msg(AdminI18n.requestFailed, {icon: 2});
        });
    });
});
</script>
{{end}}