/**
 * Form Renderer Utility Module
 * Responsible for generating HTML forms based on schema definitions.
 */

import { getNestedValue } from './utils.js';
import { CLOSE_ICON_SVG } from './icons.js';
import { generateCategoryDropdownHTML } from './categories.js';

/**
 * Generates the HTML for a given section.
 * @param {object} config - The configuration object for the section.
 * @param {object} data - The current data for the section.
 * @returns {string} The HTML string for the section.
 */
export function generateSectionHTML(config, data) {
    let html = `
        <div class="section-header">
            <h2 class="section-title">${config.title}</h2>
            <p class="section-description">${config.description || ''}</p>
        </div>
        <div class="section-content">
    `;

    if (config.type === 'dynamic-key-value-list') {
        html += generateDynamicKeyValueListHTML(config, data);
    } else if (config.type === 'fixed-object-config') {
        // For fixed-object-config, render fields of the first (and usually only) field directly
        // The schema for fixed-object-config should have a single field which is an object
        const mainField = config.fields[0];
        html += generateFieldsHTML(Object.values(mainField.properties), data[mainField.name] || {}, mainField.name);
    } else if (config.type === 'share-limits-config') {
        html += generateShareLimitsHTML(config, data);
    } else if (config.type === 'complex-object') {
        html += generateComplexObjectHTML(config, data);
    } else if (config.type === 'multi-root-object') {
        // For multi-root-object, render fields directly without nesting under section name
        html += generateFieldsHTML(config.fields, data);
    } else {
        html += generateFieldsHTML(config.fields, data);
    }

    html += `
        </div>
        <div class="section-actions">
            <button type="button" class="btn btn-secondary" id="reset-section-btn">
                Reset Section
            </button>
        </div>
    `;

    return html;
}

/**
 * Generates HTML for a list of fields.
 * @param {Array<object>} fields - An array of field definitions.
 * @param {object} data - The current data for the section.
 * @param {string} [prefix=''] - Prefix for field names (for nested fields).
 * @returns {string} The HTML string for the fields.
 */
function generateFieldsHTML(fields, data, prefix = '') {
    return fields.map(field => {
        if (field.type === 'section_header') {
            return generateFieldHTML(field, null, null); // No value or fieldName needed for section_header
        }
        let fieldName, value;
        if (field.name) {
            fieldName = prefix ? `${prefix}.${field.name}` : field.name;
            value = getNestedValue(data, fieldName) ?? field.default ?? '';
        } else {
            fieldName = null;
            value = null;
        }

        return generateFieldHTML(field, value, fieldName);
    }).join('');
}

/**
 * Generates HTML for a single field.
 * @param {object} field - The field definition.
 * @param {*} value - The current value of the field.
 * @param {string} fieldName - The full name of the field (e.g., 'parent.child').
 * @returns {string} The HTML string for the field.
 */
export function generateFieldHTML(field, value, fieldName) {
    const fieldId = fieldName ? `field-${fieldName.replace(/\./g, '-')}` : '';
    const isRequired = field.required ? 'required' : '';
    const requiredMark = field.required ? '<span class="required-mark">*</span>' : '';

    let inputHTML = '';

    switch (field.type) {
        case 'boolean':
            inputHTML = `
                <label class="checkbox-label">
                    <input type="checkbox" id="${fieldId}" name="${fieldName}"
                           ${value === true ? 'checked' : ''} class="form-checkbox">
                    <span class="checkmark"></span>
                    ${field.label}
                </label>
            `;
            break;

        case 'section_header':
            inputHTML = `
                <h3 class="section-subheader">${field.label}</h3>
            `;
            break;

        case 'button':
            inputHTML = `
                <button type="button" class="btn btn-secondary apply-to-all-btn"
                        data-action="${field.action}">
                    ${field.label}
                </button>
            `;
            break;

        case 'number':
            inputHTML = `
                <label for="${fieldId}" class="form-label ${isRequired}">
                    ${field.label} ${requiredMark}
                </label>
                <input type="number" id="${fieldId}" name="${fieldName}"
                       class="form-input" value="${value}"
                       ${field.min !== undefined ? `min="${field.min}"` : ''}
                       ${field.max !== undefined ? `max="${field.max}"` : ''}
                       ${field.step !== undefined ? `step="${field.step}"` : ''}
                       ${field.placeholder ? `placeholder="${field.placeholder}"` : ''}
                       ${isRequired}>
            `;
            break;

        case 'password':
            // Import the eye icons at the top of the file
            const EYE_ICON_SVG = `<svg class="icon" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>`;

            inputHTML = `
                <label for="${fieldId}" class="form-label ${isRequired}">
                    ${field.label} ${requiredMark}
                </label>
                <div class="password-input-group">
                    <input type="password" id="${fieldId}" name="${fieldName}"
                           class="form-input" value="${value}"
                           ${field.placeholder ? `placeholder="${field.placeholder}"` : ''}
                           ${isRequired}>
                    <button type="button" class="btn btn-icon password-toggle"
                            data-target="${fieldId}">
                        ${EYE_ICON_SVG}
                    </button>
                </div>
            `;
            break;

        case 'select':
            const options = field.options || [];
            inputHTML = `
                <label for="${fieldId}" class="form-label ${isRequired}">
                    ${field.label} ${requiredMark}
                </label>
                <select id="${fieldId}" name="${fieldName}" class="form-select" ${isRequired}>
                    ${field.placeholder ? `<option value="">${field.placeholder}</option>` : ''}
                    ${options.map(option => {
                        const optionValue = typeof option === 'object' ? option.value : option;
                        const optionLabel = typeof option === 'object' ? option.label : option;
                        const selected = value === optionValue ? 'selected' : '';
                        return `<option value="${optionValue}" ${selected}>${optionLabel}</option>`;
                    }).join('')}
                </select>
            `;
            break;

        case 'dynamic_select_text':
            const selectOptions = field.options || ['apprise', 'notifiarr', 'webhook'];
            let selectedOption = '';
            let customValue = '';

            // Determine which option is selected based on the current value
            if (value === 'apprise' || value === 'notifiarr') {
                selectedOption = value;
            } else if (value && value !== '' && !['apprise', 'notifiarr'].includes(value)) {
                // If value is not empty and not one of the predefined options, it's a custom URL
                selectedOption = 'webhook';
                customValue = value;
            }

            inputHTML = `
                <label for="${fieldId}" class="form-label ${isRequired}">
                    ${field.label} ${requiredMark}
                </label>
                <div class="dynamic-select-text-group" data-field="${fieldName}">
                    <select id="${fieldId}" name="${fieldName}_type" class="form-select dynamic-select" ${isRequired}>
                        <option value="">Select type...</option>
                        ${selectOptions.map(option => {
                            const selected = selectedOption === option ? 'selected' : '';
                            const label = option === 'webhook' ? 'Custom URL' : option;
                            return `<option value="${option}" ${selected}>${label}</option>`;
                        }).join('')}
                    </select>
                    <input type="text" name="${fieldName}"
                           class="form-input dynamic-text-input"
                           value="${customValue}"
                           placeholder="Enter webhook URL"
                           id="${fieldId}_custom_url"
                           style="display: ${selectedOption === 'webhook' ? 'block' : 'none'}; margin-top: 8px;">
                   <input type="hidden" name="${fieldName}" value="${value}" class="dynamic-hidden-input">
                </div>
            `;


            break;

        case 'textarea':
            inputHTML = `
                <label for="${fieldId}" class="form-label ${isRequired}">
                    ${field.label} ${requiredMark}
                </label>
                <textarea id="${fieldId}" name="${fieldName}" class="form-textarea"
                          ${field.placeholder ? `placeholder="${field.placeholder}"` : ''}
                          ${field.rows ? `rows="${field.rows}"` : 'rows="4"'}
                          ${isRequired}>${value}</textarea>
            `;
            break;

        case 'array':
            inputHTML = generateArrayFieldHTML(field, value, fieldName);
            break;

        default: // text
            // Check if this field should use category dropdown
            if (field.useCategoryDropdown) {
                inputHTML = `
                    <label for="${fieldId}" class="form-label ${isRequired}">
                        ${field.label} ${requiredMark}
                    </label>
                    <select id="${fieldId}" name="${fieldName}" class="form-select category-dropdown" ${isRequired}>
                        <option value="${value}" selected>${value || 'Select Category'}</option>
                    </select>
                `;
            } else {
                inputHTML = `
                    <label for="${fieldId}" class="form-label ${isRequired}">
                        ${field.label} ${requiredMark}
                    </label>
                    <input type="text" id="${fieldId}" name="${fieldName}"
                           class="form-input" value="${value}"
                           ${field.placeholder ? `placeholder="${field.placeholder}"` : ''}
                           ${isRequired}>
                `;
            }
            break;
    }

    return `
        <div class="form-group" data-field="${fieldName}">
            ${inputHTML}
            ${field.description ? `<div class="form-help">${field.description}</div>` : ''}
            <div class="field-validation"></div>
        </div>
    `;
}

/**
 * Generates HTML for an array field.
 * @param {object} field - The field definition for the array.
 * @param {Array<string>} value - The current array values.
 * @param {string} fieldName - The full name of the array field.
 * @returns {string} The HTML string for the array field.
 */
function generateArrayFieldHTML(field, value, fieldName) {
    const fieldId = `field-${fieldName.replace(/\./g, '-')}`;
    const arrayValue = Array.isArray(value) ? value : [];
    const requiredMark = field.required ? '<span class="required-mark">*</span>' : '';

    let html = `
        <label class="form-label ${field.required ? 'required' : ''}">
            ${field.label} ${requiredMark}
        </label>
        <div class="array-field" data-field="${fieldName}">
            <div class="array-items">
    `;

    arrayValue.forEach((item, index) => {
        // Check if array items should use category dropdown
        const useDropdown = field.items && field.items.useCategoryDropdown;

        let inputHTML;
        if (useDropdown) {
            inputHTML = `
                <select class="form-select category-dropdown array-item-input"
                        id="${fieldId}-item-${index}"
                        data-field="${fieldName}" data-index="${index}"
                        name="${fieldName}[${index}]">
                    <option value="${item}" selected>${item || 'Select Category'}</option>
                </select>
            `;
        } else {
            inputHTML = `
                <input type="text" class="form-input array-item-input"
                       id="${fieldId}-item-${index}"
                       value="${item}" data-field="${fieldName}" data-index="${index}"
                       name="${fieldName}[${index}]">
            `;
        }

        html += `
            <div class="array-item" data-index="${index}">
                <label for="${fieldId}-item-${index}" class="form-label sr-only">Item ${index + 1}</label>
                <div class="array-item-input-group">
                    ${inputHTML}
                     <button type="button" class="btn btn-icon btn-close-icon remove-array-item">
                         ${CLOSE_ICON_SVG}
                    </button>
                </div>
            </div>
        `;
    });

    html += `
            </div>
            <button type="button" class="btn btn-secondary add-array-item"
                    data-field="${fieldName}">
                Add Item
            </button>
        </div>
    `;

    return html;
}

/**
 * Generates HTML for a key-value list (e.g., Categories, Category Changes).
 * @param {object} config - The section configuration.
 * @param {object} data - The current data for the section.
 * @returns {string} The HTML string for the key-value list.
 */
function generateDynamicKeyValueListHTML(config, data) {
    const categories = data || {};
    const isCatChange = config.title.includes('Category Change');

    let html = `
        <div class="key-value-list">
            <div class="key-value-header">
                <h3>${isCatChange ? 'Category Changes' : 'Categories'}</h3>
                <button type="button" class="btn btn-primary add-category-btn">
                    Add ${isCatChange ? 'Category Change' : 'Category'}
                </button>
            </div>
            <div class="key-value-items">
    `;

    Object.entries(categories).forEach(([key, value]) => {
        // Check if this config should use category dropdowns
        const useDropdownForKey = config.useCategoryDropdown && isCatChange;
        const useDropdownForValue = isCatChange && config.fields && config.fields[0] &&
                                   config.fields[0].properties && config.fields[0].properties.new_category &&
                                   config.fields[0].properties.new_category.useCategoryDropdown;

        let keyInputHTML, valueInputHTML;

        // Generate key input (old category)
        if (useDropdownForKey) {
            keyInputHTML = `
                <select class="form-select category-dropdown category-key" name="category-key-${key}">
                    <option value="${key}" selected>${key}</option>
                </select>
            `;
        } else {
            keyInputHTML = `
                <input type="text" class="form-input category-key" value="${key}"
                       name="category-key-${key}">
            `;
        }

        // Generate value input (new category or save path)
        if (useDropdownForValue) {
            valueInputHTML = `
                <select class="form-select category-dropdown category-value" name="category-value-${key}">
                    <option value="${value || ''}" selected>${value || 'Select Category'}</option>
                </select>
            `;
        } else {
            valueInputHTML = `
                <input type="text" class="form-input category-value"
                       value="${value || ''}"
                       placeholder="${isCatChange ? 'New Category Name' : '/path/to/category'}"
                       name="category-value-${key}">
            `;
        }

        html += `
            <div class="key-value-item category-row" data-key="${key}">
                <div class="category-inputs">
                    <div class="form-group category-name-group">
                        <label class="form-label">${isCatChange ? 'Old Category' : 'Category Name'}</label>
                        ${keyInputHTML}
                    </div>
                    <div class="form-group category-path-group">
                        <label class="form-label">${isCatChange ? 'New Category' : 'Save Path'}</label>
                        ${valueInputHTML}
                    </div>
                </div>
                <button type="button" class="btn btn-icon btn-close-icon remove-category-btn">
                    ${CLOSE_ICON_SVG}
                </button>
            </div>
        `;
    });

    html += `
            </div>
        </div>
    `;

    return html;
}

/**
 * Generates HTML for complex objects (currently a placeholder).
 * @param {object} config - The section configuration.
 * @param {object} data - The current data for the section.
 * @returns {string} The HTML string for the complex object.
 */
function generateComplexObjectHTML(config, data) {
    const complexObjectData = data || {};
    let html = `
        <div class="complex-object">
            <div class="complex-object-header">
                <h3>${config.title}</h3>
                <button type="button" class="btn btn-primary add-complex-object-item-btn">
                    Add New Entry
                </button>
            </div>
            <div class="complex-object-items">
    `;

    Object.entries(complexObjectData).forEach(([key, value]) => {
        html += generateComplexObjectEntryHTML(key, value, config);
    });

    html += `
            </div>
        </div>
    `;
    return html;
}

/**
 * Generates HTML for a single complex object entry (e.g., a tracker entry).
 * @param {string} entryKey - The key of the complex object entry (e.g., tracker URL).
 * @param {object} entryValue - The value object of the complex object entry (e.g., {tag, cat, notifiarr}).
 * @param {object} config - The schema configuration for the complex object.
 * @returns {string} The HTML string for the complex object entry.
 */
function generateComplexObjectEntryHTML(entryKey, entryValue, config) {

    const isOther = entryKey === 'other';

    // Handle flat string values (like categories: "category_name": "/path/to/save")
    if (config.flatStringValues && typeof entryValue === 'string') {
        const keyLabel = config.keyLabel || 'Key';
        const valueSchema = config.patternProperties?.[".*"] || config.additionalProperties;
        const valueLabel = valueSchema?.label || 'Value';
        const valueDescription = valueSchema?.description || '';

        let html = `
            <div class="complex-object-item complex-object-entry-card" data-key="${entryKey}">
                <div class="complex-object-item-content">
                    <div class="category-inputs">
                        <div class="category-labels-row">
                            <div class="category-name-group">
                                <label class="form-label">${keyLabel}</label>
                            </div>
                            <div class="category-path-group">
                                <label class="form-label">${valueLabel}</label>
                            </div>
                        </div>
                        <div class="category-inputs-row">
                            <div class="form-group category-name-group">
                                <input type="text" class="form-input complex-object-key" value="${entryKey}" data-original-key="${entryKey}" ${isOther ? 'readonly' : ''}>
                            </div>
                            <div class="form-group category-path-group">
                                <input type="text" class="form-input" name="${entryKey}::value" value="${entryValue}">
                                ${valueDescription ? `<div class="form-help">${valueDescription}</div>` : ''}
                                <div class="field-validation"></div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-icon btn-close-icon remove-complex-object-item" data-key="${entryKey}">
                        ${CLOSE_ICON_SVG}
                    </button>
                </div>
            </div>
        `;
        return html;
    }

    // Original logic for object-based entries
    let schemaProperties;
    if (config.patternProperties) {
        if (isOther && config.patternProperties.other) {
            schemaProperties = config.patternProperties.other.properties;
        } else if (config.patternProperties["^(?!other$).*$"]) {
            schemaProperties = config.patternProperties["^(?!other$).*$"].properties;
        } else if (config.patternProperties[".*"]) {
            // For nohardlinks schema which uses ".*" pattern
            schemaProperties = config.patternProperties[".*"].properties;
        } else {
            console.error("Could not find matching pattern properties for complex object entry:", config);
            return '';
        }
    } else if (config.fields && config.fields.length > 0 && config.fields[0].properties) {
        // Fallback for old field-based schemas
        schemaProperties = config.fields[0].properties;
    } else {
        console.error("Could not determine schema properties for complex object entry:", config);
        return ''; // Or handle error appropriately
    }

    // Use custom key label if provided, otherwise default to "Tracker URL"
    const keyLabel = config.keyLabel || 'Tracker URL';

    let keyInputHTML;

    // Check if this schema should use category dropdown for key editing
    if (config.useCategoryDropdown && !isOther) {
        // Generate dropdown for category selection
        keyInputHTML = `
            <select class="form-input complex-object-key-dropdown" data-original-key="${entryKey}">
                <option value="${entryKey}" selected>${entryKey}</option>
            </select>
        `;
    } else {
        // Use regular text input
        keyInputHTML = `
            <input type="text" class="form-input complex-object-key" value="${entryKey}" data-original-key="${entryKey}" ${isOther ? 'readonly' : ''}>
        `;
    }

    let html = `
        <div class="complex-object-item complex-object-entry-card" data-key="${entryKey}">
            <button type="button" class="btn btn-icon btn-close-icon remove-complex-object-item complex-object-close-btn" data-key="${entryKey}">
                ${CLOSE_ICON_SVG}
            </button>
            <div class="complex-object-item-content">
                <div class="form-group complex-object-key-group">
                    <label class="form-label">${keyLabel}</label>
                    ${keyInputHTML}
                </div>
    `;

    // Render fields based on schemaProperties
    Object.entries(schemaProperties).forEach(([propName, propSchema]) => {
        // Use a custom separator for complex object fields to avoid issues with dots in keys
        const fieldName = `${entryKey}::${propName}`;
        const value = entryValue[propName] ?? propSchema.default ?? '';

        if (propSchema.type === 'array') {
            html += generateArrayFieldHTML(propSchema, value, fieldName);
        } else {
            html += generateFieldHTML(propSchema, value, fieldName);
        }
    });

    html += `
            </div>
        </div>
    `;
    return html;
}

/**
 * Generates HTML for Share Limits configuration with drag-and-drop interface.
 * @param {object} config - The section configuration.
 * @param {object} data - The current data for the section.
 * @returns {string} The HTML string for the share limits configuration.
 */
export function generateShareLimitsHTML(config, data) {
    const shareLimitsData = data || {};

    // Convert data to array format sorted by priority for display
    const groupsArray = Object.entries(shareLimitsData)
        .map(([key, value]) => ({
            key,
            priority: value.priority || 999,
            ...value
        }))
        .sort((a, b) => a.priority - b.priority);

    let html = `
        <div class="share-limits-config">
            <div class="share-limits-header">
                <h3>Share Limit Groups</h3>
                <p class="share-limits-description">
                    Drag and drop to reorder priority. Click on a group to configure its settings.
                </p>
                <button type="button" class="btn btn-primary add-share-limit-group-btn">
                    Add New Group
                </button>
            </div>
            <div class="share-limits-list" id="share-limits-sortable">
    `;

    groupsArray.forEach((group, index) => {
        const summaryText = generateGroupSummary(group);
        html += `
            <div class="share-limit-group-item" data-key="${group.key}" data-priority="${group.priority}">
                <div class="share-limit-group-handle">
                    <svg class="drag-handle-icon" viewBox="0 0 24 24" width="16" height="16">
                        <path d="M9 3h2v2H9V3zm0 4h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V3zm0 4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/>
                    </svg>
                </div>
                <div class="share-limit-group-content" data-key="${group.key}">
                    <div class="share-limit-group-main">
                        <div class="share-limit-group-info">
                            <div class="share-limit-group-name">${group.key}</div>
                            <div class="share-limit-group-priority">Priority: ${group.priority}</div>
                        </div>
                        <div class="share-limit-group-summary">${summaryText}</div>
                    </div>
                    <button type="button" class="btn btn-icon btn-close-icon remove-share-limit-group" data-key="${group.key}">
                        ${CLOSE_ICON_SVG}
                    </button>
                </div>
            </div>
        `;
    });

    html += `
            </div>
        </div>
    `;

    return html;
}

/**
 * Generates a summary text for a share limit group.
 * @param {object} group - The share limit group data.
 * @returns {string} Summary text describing the group's configuration.
 */
function generateGroupSummary(group) {
    // Define default values from schema to avoid showing defaults
    // IMPORTANT: These must match the exact types that come from the data
    const defaults = {
        max_ratio: -1,                    // number
        max_seeding_time: -1,             // number (but could be string like "1d")
        max_last_active: -1,              // number (but could be string like "2h1m")
        min_seeding_time: 0,              // number (but could be string like "30m")
        min_last_active: 0,               // number (but could be string like "1h")
        limit_upload_speed: -1,           // number
        enable_group_upload_speed: false, // boolean
        cleanup: false,                   // boolean
        resume_torrent_after_change: true,// boolean
        add_group_to_tag: true,           // boolean
        min_num_seeds: 0,                 // number
        custom_tag: '',                   // string
        include_all_tags: [],             // array
        include_any_tags: [],             // array
        exclude_all_tags: [],             // array
        exclude_any_tags: [],             // array
        categories: []                    // array
    };

    const summaryParts = [];

    // Helper function to check if value is not default
    const isNotDefault = (value, defaultValue) => {
        // Handle arrays
        if (Array.isArray(value) && Array.isArray(defaultValue)) {
            return value.length > 0;
        }

        // Handle null/undefined values
        if (value === undefined || value === null) {
            return false;
        }

        // Handle mixed type comparisons (number vs string)
        // This handles cases where default is number but value could be string like "1d", "2h1m"
        if (typeof value !== typeof defaultValue) {
            // If value is a string and default is a number, check if string represents the default number
            if (typeof value === 'string' && typeof defaultValue === 'number') {
                // If the string is a pure number, convert and compare
                const numValue = parseFloat(value);
                if (!isNaN(numValue) && numValue.toString() === value) {
                    return numValue !== defaultValue;
                }
                // If it's a duration string like "1d", "2h1m", it's definitely not default
                return true;
            }
            // If value is number and default is string, convert default and compare
            if (typeof value === 'number' && typeof defaultValue === 'string') {
                const numDefault = parseFloat(defaultValue);
                if (!isNaN(numDefault)) {
                    return value !== numDefault;
                }
            }
            // Different types that can't be meaningfully compared - assume not default
            return true;
        }

        // Same type comparisons
        return value !== defaultValue;
    };

    // 1) Share limits (share ratio, max/min seeding time, last active, min num seeds, limit upload speed)
    // Priority order: max_ratio, max_seeding_time, min_seeding_time, max_last_active, min_last_active, min_num_seeds, limit_upload_speed

    if (isNotDefault(group.max_ratio, defaults.max_ratio)) {
        summaryParts.push(`Max Ratio: ${group.max_ratio}`);
    }

    if (isNotDefault(group.max_seeding_time, defaults.max_seeding_time)) {
        summaryParts.push(`Max Seed Time: ${group.max_seeding_time}`);
    }

    if (isNotDefault(group.min_seeding_time, defaults.min_seeding_time)) {
        summaryParts.push(`Min Seed Time: ${group.min_seeding_time}`);
    }

    if (isNotDefault(group.max_last_active, defaults.max_last_active)) {
        summaryParts.push(`Max Last Active: ${group.max_last_active}`);
    }

    if (isNotDefault(group.min_last_active, defaults.min_last_active)) {
        summaryParts.push(`Min Last Active: ${group.min_last_active}`);
    }

    if (isNotDefault(group.min_num_seeds, defaults.min_num_seeds)) {
        summaryParts.push(`Min Seeds: ${group.min_num_seeds}`);
    }

    if (isNotDefault(group.limit_upload_speed, defaults.limit_upload_speed)) {
        summaryParts.push(`Upload Limit: ${group.limit_upload_speed} KiB/s`);
    }

    // 2) Tag/Category filters
    const tagFilters = [];

    if (isNotDefault(group.include_all_tags, defaults.include_all_tags)) {
        tagFilters.push(`Include All: ${group.include_all_tags.slice(0, 2).join(', ')}${group.include_all_tags.length > 2 ? '...' : ''}`);
    }

    if (isNotDefault(group.include_any_tags, defaults.include_any_tags)) {
        tagFilters.push(`Include Any: ${group.include_any_tags.slice(0, 2).join(', ')}${group.include_any_tags.length > 2 ? '...' : ''}`);
    }

    if (isNotDefault(group.exclude_all_tags, defaults.exclude_all_tags)) {
        tagFilters.push(`Exclude All: ${group.exclude_all_tags.slice(0, 2).join(', ')}${group.exclude_all_tags.length > 2 ? '...' : ''}`);
    }

    if (isNotDefault(group.exclude_any_tags, defaults.exclude_any_tags)) {
        tagFilters.push(`Exclude Any: ${group.exclude_any_tags.slice(0, 2).join(', ')}${group.exclude_any_tags.length > 2 ? '...' : ''}`);
    }

    if (tagFilters.length > 0) {
        summaryParts.push(`Tags: ${tagFilters.join(', ')}`);
    }

    if (isNotDefault(group.categories, defaults.categories)) {
        summaryParts.push(`Categories: ${group.categories.slice(0, 2).join(', ')}${group.categories.length > 2 ? '...' : ''}`);
    }

    // 3) Any other options (Cleanup enabled, Group Upload Speed, Custom Tag)
    if (isNotDefault(group.cleanup, defaults.cleanup)) {
        summaryParts.push('Cleanup: Enabled');
    }

    if (isNotDefault(group.enable_group_upload_speed, defaults.enable_group_upload_speed)) {
        summaryParts.push('Group Upload Speed: Enabled');
    }

    if (isNotDefault(group.custom_tag, defaults.custom_tag)) {
        summaryParts.push(`Custom Tag: ${group.custom_tag}`);
    }

    const result = summaryParts.length > 0 ? summaryParts.join(' • ') : 'No specific configuration';
    return result;
}