// 表单组件 - 负责添加/编辑提示词的表单

import { globalTagColorManager } from './TagColorManager.js';

export class PromptForm {
    constructor(options = {}) {
        this.onSubmit = options.onSubmit || null;
        this.onCancel = options.onCancel || null;
        this.getPrompts = options.getPrompts || null; // 新增：获取提示词数据的回调
        this.isEditing = false;
        this.editingPrompt = null;
        
        this.container = null;
        this.form = null;
        this.titleElement = null;
        this.createForm();
    }    createForm() {        this.container = document.createElement('div');
        this.container.className = 'prompt-form-section';
        // 初始状态：隐藏表单内容
        this.container.style.visibility = 'hidden';
        this.container.innerHTML = `
            <h4 class="form-title">添加提示词</h4>
            <form class="prompt-form">
                <div class="form-group">
                    <label for="prompt-name">提示词名称:</label>
                    <input type="text" id="prompt-name" name="name" placeholder="输入提示词名称" required>
                    <small class="form-hint">建议使用简洁明了的名称，便于快速识别</small>
                </div>
                <div class="form-group">
                    <label for="prompt-content">提示词内容:</label>
                    <textarea id="prompt-content" name="content" placeholder="输入提示词内容" rows="6" required></textarea>
                    <small class="form-hint">输入详细的提示词内容，支持多行文本</small>
                </div>                <div class="form-group">
                    <label for="prompt-tags">标签 (用逗号分隔):</label>
                    <div class="tags-input-wrapper">
                        <input type="text" id="prompt-tags" name="tags" placeholder="例如: 人物, 风景, 高质量, 写实" maxlength="200">
                        <button type="button" class="tags-selector-btn" title="从已有标签中选择">🏷️</button>
                    </div>                    <small class="form-hint">标签用于快速分类和搜索提示词，每个标签用逗号分隔</small>
                    
                    <div class="available-tags" style="display: none;">
                        <!-- 可选标签将在这里显示 -->
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="save-btn">
                        <span class="btn-icon">💾</span>
                        <span class="btn-text">保存</span>
                    </button>
                    <button type="button" class="cancel-btn">
                        <span class="btn-icon">✖</span>
                        <span class="btn-text">取消</span>
                    </button>
                </div>
            </form>
        `;

        this.form = this.container.querySelector('.prompt-form');
        this.titleElement = this.container.querySelector('.form-title');        this.bindEvents();
        this.addStyles();
    }

    bindEvents() {
        // 表单提交
        this.form.addEventListener('submit', (e) => {
            e.preventDefault();
            this.handleSubmit();
        });

        // 取消按钮
        const cancelBtn = this.container.querySelector('.cancel-btn');
        cancelBtn.addEventListener('click', () => {
            this.handleCancel();
        });

        // 输入验证
        this.bindValidationEvents();

        // 标签输入处理
        this.bindTagsInput();

        // ESC键取消
        this.container.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                this.handleCancel();
            }
        });
    }

    bindValidationEvents() {
        const nameInput = this.form.querySelector('input[name="name"]');
        const contentInput = this.form.querySelector('textarea[name="content"]');

        // 实时验证
        nameInput.addEventListener('input', () => this.validateInput(nameInput));
        contentInput.addEventListener('input', () => this.validateInput(contentInput));
        
        // 失焦验证
        nameInput.addEventListener('blur', () => this.validateInput(nameInput));
        contentInput.addEventListener('blur', () => this.validateInput(contentInput));
    }    bindTagsInput() {
        const tagsInput = this.form.querySelector('input[name="tags"]');
        const tagsSelectorBtn = this.form.querySelector('.tags-selector-btn');
        const availableTagsContainer = this.form.querySelector('.available-tags');
        
        tagsInput.addEventListener('input', (e) => {
            const value = e.target.value;
            const tags = this.parseTags(value);
            
            e.target.classList.remove('error');
            this.hideInputError(e.target);
            
            // 实时更新标签预览
            this.updateTagsPreview();
        });

        // 标签选择按钮
        tagsSelectorBtn.addEventListener('click', () => {
            this.toggleAvailableTags();
        });    }

    // 辅助方法：将十六进制颜色转换为RGB
    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    validateInput(input) {
        const value = input.value.trim();
        
        if (input.hasAttribute('required') && !value) {
            input.classList.add('error');
            this.showInputError(input, '此字段为必填项');
            return false;
        } else {
            input.classList.remove('error');
            this.hideInputError(input);
            return true;
        }
    }

    showInputError(input, message) {
        let errorElement = input.parentNode.querySelector('.error-message');
        if (!errorElement) {
            errorElement = document.createElement('small');
            errorElement.className = 'error-message';
            input.parentNode.appendChild(errorElement);
        }
        errorElement.textContent = message;
    }

    hideInputError(input) {
        const errorElement = input.parentNode.querySelector('.error-message');
        if (errorElement) {
            errorElement.remove();
        }
    }    updateTagsPreview() {
        const tagsInput = this.form.querySelector('input[name="tags"]');
        const tags = this.parseTags(tagsInput.value);
        
        // 找到标签输入框所在的form-group容器
        const tagsFormGroup = tagsInput.closest('.form-group');
        
        let previewElement = tagsFormGroup.querySelector('.tags-preview');
        if (!previewElement) {
            previewElement = document.createElement('div');
            previewElement.className = 'tags-preview';
            // 将预览元素添加到form-group的末尾
            tagsFormGroup.appendChild(previewElement);
        }if (tags.length > 0) {
            previewElement.innerHTML = `
                <div class="tags-preview-label">标签预览:</div>
                <div class="tags-preview-list">
                    ${tags.map(tag => {
                        const color = globalTagColorManager.getTagColor(tag);
                        const colorRGB = globalTagColorManager.getTagColorRGB(tag);
                        return `<span class="tag-preview" style="--tag-color: ${color}; --tag-color-rgb: ${colorRGB};">${this.escapeHtml(tag)}</span>`;
                    }).join('')}
                </div>
            `;
            previewElement.style.display = 'block';
        } else {
            previewElement.style.display = 'none';
        }
    }

    handleSubmit() {
        const formData = this.getFormData();
        
        // 验证表单
        if (!this.validateForm(formData)) {
            return;
        }

        if (this.onSubmit) {
            this.onSubmit(formData, this.isEditing, this.editingPrompt);
        }
    }

    handleCancel() {
        if (this.onCancel) {
            this.onCancel();
        }
        this.hide();
    }

    validateForm(formData) {
        let isValid = true;

        // 验证名称
        if (!formData.name.trim()) {
            const nameInput = this.form.querySelector('input[name="name"]');
            this.showInputError(nameInput, '请输入提示词名称');
            nameInput.classList.add('error');
            isValid = false;
        }

        // 验证内容
        if (!formData.content.trim()) {
            const contentInput = this.form.querySelector('textarea[name="content"]');
            this.showInputError(contentInput, '请输入提示词内容');
            contentInput.classList.add('error');
            isValid = false;
        }        // 验证标签数量 - 已移除限制，允许任意数量的标签

        return isValid;
    }

    getFormData() {
        const formData = new FormData(this.form);
        const tagsValue = formData.get('tags') || '';
        
        return {
            name: formData.get('name').trim(),
            content: formData.get('content').trim(),
            tags: this.parseTags(tagsValue)
        };
    }    parseTags(tagsString) {
        if (!tagsString) return [];
        
        return tagsString
            .split(',')
            .map(tag => tag.trim())
            .filter(tag => tag.length > 0 && tag.length <= 20); // 只限制单个标签长度，不限制标签数量
    }    show(mode = 'add', prompt = null) {
        this.isEditing = mode === 'edit';
        this.editingPrompt = prompt;
        
        if (this.isEditing && prompt) {
            this.titleElement.textContent = '编辑提示词';
            this.populateForm(prompt);
        } else {
            this.titleElement.textContent = '添加提示词';
            this.clearForm();
        }
        
        // 确保"从已有标签中选择"界面是隐藏的
        const availableTagsContainer = this.form.querySelector('.available-tags');
        if (availableTagsContainer) {
            availableTagsContainer.style.display = 'none';
        }
        
        // 显示表单容器
        this.container.style.visibility = 'visible';
        
        // 查找布局容器
        const layoutContainer = this.container.closest('.prompt-manager-layout');
        if (layoutContainer) {
            // 添加展开类以触发布局动画
            layoutContainer.classList.add('form-expanded');
        }
        
        // 等待下一帧确保DOM更新
        requestAnimationFrame(() => {
            // 聚焦到第一个输入框
            setTimeout(() => {
                const firstInput = this.form.querySelector('input[name="name"]');
                if (firstInput) {
                    firstInput.focus();
                }
            }, 100);
        });
    }    hide() {
        // 隐藏表单容器
        this.container.style.visibility = 'hidden';
        this.clearForm();
        this.isEditing = false;
        this.editingPrompt = null;
        
        // 确保"从已有标签中选择"界面被隐藏
        const availableTagsContainer = this.form.querySelector('.available-tags');
        if (availableTagsContainer) {
            availableTagsContainer.style.display = 'none';
        }
        
        // 查找布局容器，检查是否还有其他内容需要显示
        const layoutContainer = this.container.closest('.prompt-manager-layout');
        if (layoutContainer) {
            // 检查是否还有其他组件在显示（比如 TagManager）
            const tagManager = layoutContainer.querySelector('.tag-manager-section');
            const isTagManagerVisible = tagManager && tagManager.classList.contains('active');
            
            // 只有当没有其他内容显示时才移除展开类
            if (!isTagManagerVisible) {
                layoutContainer.classList.remove('form-expanded');
            }
        }
    }

    isVisible() {
        return this.container.style.visibility !== 'hidden';
    }    populateForm(prompt) {
        this.form.querySelector('input[name="name"]').value = prompt.name || '';
        this.form.querySelector('textarea[name="content"]').value = prompt.content || '';
        this.form.querySelector('input[name="tags"]').value = (prompt.tags || []).join(', ');
        
        // 确保"从已有标签中选择"界面是隐藏的
        const availableTagsContainer = this.form.querySelector('.available-tags');
        if (availableTagsContainer) {
            availableTagsContainer.style.display = 'none';
        }
        
        this.updateTagsPreview();
    }clearForm() {
        this.form.reset();
        
        // 清除错误状态
        this.form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
        this.form.querySelectorAll('.error-message').forEach(el => el.remove());
        
        // 隐藏标签预览
        const previewElement = this.container.querySelector('.tags-preview');
        if (previewElement) {
            previewElement.style.display = 'none';
        }
        
        // 隐藏"从已有标签中选择"界面
        const availableTagsContainer = this.form.querySelector('.available-tags');
        if (availableTagsContainer) {
            availableTagsContainer.style.display = 'none';
        }
    }

    getElement() {
        return this.container;
    }

    setOnSubmit(callback) {
        this.onSubmit = callback;
    }

    setOnCancel(callback) {
        this.onCancel = callback;
    }

    // 添加一个公开方法供外部调用清理
    setGetPrompts(getPromptsCallback) {
        this.getPrompts = getPromptsCallback;
    }

    // 手动清理未使用的标签
    cleanupUnusedTags() {
        if (this.getPrompts && typeof this.getPrompts === 'function') {
            const prompts = this.getPrompts();
            globalTagColorManager.cleanupUnusedTags(prompts);
        }
    }

    // 工具函数
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }    addStyles() {
        const style = document.createElement('style');
        style.textContent = `            .prompt-form-section {
                width: 100%;
                padding: 24px;
                background: transparent;
                border-left: none;
                display: flex;
                flex-direction: column;
                height: 100%;
                position: relative;
                overflow-y: auto;
                opacity: 0;
                visibility: visible;
                transition: opacity 0.3s ease-out 0.1s;
            }

            /* 当父容器展开时，表单内容同步显示 */
            .prompt-manager-layout.form-expanded .prompt-form-section {
                opacity: 1;
            }

            .prompt-form-section::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 1px;
                height: 100%;
                background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            }

            .form-title {
                margin: 0 0 24px 0;
                color: #ffffff;
                font-size: 18px;
                font-weight: 600;
                letter-spacing: 0.5px;
                padding-bottom: 12px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                position: relative;
            }

            .form-title::after {
                content: '';
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 60px;
                height: 2px;
                background: linear-gradient(90deg, #0078d4, transparent);
                border-radius: 1px;
            }

            .prompt-form {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .form-group {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .form-group label {
                color: #e0e0e0;
                font-weight: 500;
                font-size: 14px;
                letter-spacing: 0.25px;
                margin-bottom: 4px;
            }            .form-group input,
            .form-group textarea {
                background: linear-gradient(145deg, #1a1a1a, #232323);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                color: #ffffff;
                padding: 14px 16px;
                font-size: 14px;
                font-family: inherit;
                transition: all 0.3s ease-out;
                resize: vertical;
                position: relative;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
            }

            .form-group input:focus,
            .form-group textarea:focus {
                outline: none;
                border-color: rgba(0, 120, 212, 0.6);
                box-shadow: 
                    0 0 0 3px rgba(0, 120, 212, 0.15),
                    inset 0 1px 3px rgba(0, 0, 0, 0.2);
                background: linear-gradient(145deg, #1e1e1e, #272727);
                transform: translateY(-1px);
            }

            .form-group input::placeholder,
            .form-group textarea::placeholder {
                color: #666;
                font-weight: 300;
            }

            .form-hint {
                color: #888;
                font-size: 12px;
                font-weight: 400;
                line-height: 1.4;
                margin-top: 4px;
                opacity: 0.8;
            }

            .tags-input-wrapper {
                display: flex;
                gap: 8px;
                align-items: stretch;
            }

            .tags-input-wrapper input {
                flex: 1;
            }            .tags-selector-btn {
                background: linear-gradient(145deg, #404044, #35353a);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: #e0e0e0;
                padding: 0 16px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.3s ease-out;
                white-space: nowrap;
                display: flex;
                align-items: center;
                position: relative;
                overflow: hidden;
            }            .tags-selector-btn::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.3s ease-out;
                z-index: -1;
            }

            .tags-selector-btn:hover {
                background: linear-gradient(145deg, #4a4a4e, #3f3f44);
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }

            .tags-selector-btn:hover::before {
                width: 200%;
                height: 200%;
            }            .tags-selector-btn:active {
                transform: translateY(0);
            }            /* 标签预览区域样式 */
            .tags-preview {
                display: none;
                margin-top: 16px;
                padding: 12px;
                background: linear-gradient(145deg, #1a1a1a, #252525);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
            }

            .tags-preview-label {
                color: #e0e0e0;
                font-size: 12px;
                margin-bottom: 8px;
                font-weight: 500;
            }

            .tags-preview-list {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }

            .tag-preview {
                display: inline-block;
                background: var(--tag-color, #2a82e4);
                color: white;
                padding: 4px 10px;
                border-radius: 16px;
                font-size: 11px;
                font-weight: 500;
                line-height: 1.2;
                white-space: nowrap;
                max-width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                border: 1px solid rgba(255, 255, 255, 0.1);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease-out;
                position: relative;
                text-shadow: 
                    -1px -1px 0 #000,
                    1px -1px 0 #000,
                    -1px 1px 0 #000,
                    1px 1px 0 #000,
                    0 -1px 0 #000,
                    0 1px 0 #000,
                    -1px 0 0 #000,
                    1px 0 0 #000;
            }

            .tags-preview-section {
                margin-top: 12px;
                padding: 12px;
                background: linear-gradient(145deg, #1a1a1a, #252525);
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.05);
                min-height: 60px;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .tags-preview-label {
                color: #ccc;
                font-size: 12px;
                font-weight: 500;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .tags-preview-label::before {
                content: '👁️';
                font-size: 11px;
            }

            .tags-preview-container {
                flex: 1;
                min-height: 36px;
                display: flex;
                align-items: center;
            }

            .tags-preview-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                width: 100%;
                min-height: 36px;
                align-items: center;
            }

            .tags-preview-list:empty::after {
                content: '暂无标签预览';
                color: #666;
                font-size: 12px;
                font-style: italic;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 36px;
                border: 1px dashed rgba(255, 255, 255, 0.1);
                border-radius: 6px;
                background: rgba(0, 0, 0, 0.2);
            }

            .preview-tag {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: var(--tag-color, #2a82e4);
                color: white;
                padding: 6px 12px;
                border-radius: 14px;
                font-size: 11px;
                font-weight: 500;
                line-height: 1.2;
                white-space: nowrap;
                min-width: 60px;
                max-width: 90px;
                height: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                letter-spacing: 0.25px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                text-align: center;
                transition: all 0.2s ease;
                animation: tagFadeIn 0.3s ease-out;
            }

            .preview-tag:hover {
                transform: scale(1.05);
                filter: brightness(1.1);
            }

            @keyframes tagFadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.8) translateY(-10px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }

            /* 可选标签区域样式 */
            .available-tags {
                margin-top: 12px;
                padding: 16px;
                background: linear-gradient(145deg, #1a1a1a, #252525);
                border-radius: 8px;
                border: 1px solid rgba(255, 255, 255, 0.1);
                max-height: 200px;
                overflow-y: auto;
            }            .available-tags.show {
                display: block !important;
                animation: slideDown 0.3s ease-out;
            }

            @keyframes slideDown {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }            .available-tags h5 {
                margin: 0 0 12px 0;
                color: #e0e0e0;
                font-size: 13px;
                font-weight: 600;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .available-tags h5::before {
                content: '🏷️';
                font-size: 12px;
            }

            .available-tags-header {
                margin: 0 0 12px 0;
            }

            .available-tags-header span {
                color: #ccc;
                font-size: 12px;
                font-weight: 500;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .available-tags-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }            .available-tag {
                display: inline-flex;
                align-items: center;
                background: var(--tag-color, #2a82e4);
                color: white;
                padding: 6px 12px;
                border-radius: 14px;
                font-size: 11px;
                font-weight: 500;
                line-height: 1.2;
                white-space: nowrap;
                min-width: 60px;
                max-width: 90px;
                height: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                position: relative;
                letter-spacing: 0.25px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                text-align: center;
                transition: all 0.2s ease;
                cursor: pointer;
                user-select: none;
                transform: scale(1);
                justify-content: center;
                text-shadow: 
                    -1px -1px 0 #000,
                    1px -1px 0 #000,
                    -1px 1px 0 #000,
                    1px 1px 0 #000,
                    0 -1px 0 #000,
                    0 1px 0 #000,
                    -1px 0 0 #000,
                    1px 0 0 #000;
            }.available-tag:hover {
                transform: scale(1.05);
                filter: brightness(1.1);
            }

            .available-tag.selected {
                background: #666;
                color: #999;
                filter: grayscale(1);
            }

            .available-tag.selected:hover {
                transform: scale(1.05);
                filter: grayscale(1) brightness(1.1);
            }            /* 表单操作按钮样式 */
            .form-actions {
                display: flex;
                gap: 12px;
                margin-top: 24px;
                padding-top: 20px;
                border-top: 1px solid rgba(255, 255, 255, 0.1);
            }            .form-actions button {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.3s ease-out;
                position: relative;
                overflow: hidden;
                letter-spacing: 0.25px;
                padding: 12px 20px;
                white-space: nowrap;
                text-align: center;
            }.form-actions button::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.3s ease-out;
                z-index: -1;
            }

            .form-actions button:hover::before {
                width: 200%;
                height: 200%;
            }

            .btn-icon {
                font-size: 16px;
                line-height: 1;
            }

            .btn-text {
                white-space: nowrap;
            }

            .save-btn {
                background: linear-gradient(135deg, #28a745, #20873a);
                color: white;
                box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .save-btn:hover {
                background: linear-gradient(135deg, #20873a, #1e7e34);
                transform: translateY(-1px);
                box-shadow: 0 4px 16px rgba(40, 167, 69, 0.4);
            }

            .save-btn:active {
                transform: translateY(0);
            }

            .cancel-btn {
                background: linear-gradient(145deg, #404044, #35353a);
                color: #e0e0e0;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.1);
            }

            .cancel-btn:hover {
                background: linear-gradient(145deg, #4a4a4e, #3f3f44);
                color: #ffffff;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            }

            .cancel-btn:active {
                transform: translateY(0);
            }

            /* 输入验证样式 */
            .form-group.error input,
            .form-group.error textarea {
                border-color: #dc3545;
                box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
            }

            .form-group.error .form-hint {
                color: #dc3545;
                font-weight: 500;
            }

            .form-group.success input,
            .form-group.success textarea {
                border-color: #28a745;
                box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
            }

            /* 滚动条样式 */
            .available-tags::-webkit-scrollbar,
            .prompt-form-section::-webkit-scrollbar {
                width: 6px;
            }

            .available-tags::-webkit-scrollbar-track,
            .prompt-form-section::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 3px;
            }

            .available-tags::-webkit-scrollbar-thumb,
            .prompt-form-section::-webkit-scrollbar-thumb {
                background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
                border-radius: 3px;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }            .available-tags::-webkit-scrollbar-thumb:hover,
            .prompt-form-section::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
            }

            /* 响应式设计 */
            @media (max-width: 768px) {
                .prompt-form-section {
                    padding: 16px;
                }

                .form-actions {
                    flex-direction: column;
                }

                .save-btn, .cancel-btn {
                    width: 100%;
                }
            }
        `;
        
        if (!document.head.querySelector('style[data-component="prompt-form"]')) {
            style.setAttribute('data-component', 'prompt-form');
            document.head.appendChild(style);
        }
    }

    destroy() {
        if (this.container && this.container.parentNode) {
            this.container.parentNode.removeChild(this.container);
        }
        
        // 移除样式
        const style = document.head.querySelector('style[data-component="prompt-form"]');
        if (style) {
            style.remove();
        }
    }

    toggleAvailableTags() {
        const availableTagsContainer = this.form.querySelector('.available-tags');
        const isVisible = availableTagsContainer.style.display !== 'none';
        
        if (isVisible) {
            availableTagsContainer.style.display = 'none';
        } else {
            this.renderAvailableTags();
            availableTagsContainer.style.display = 'block';
        }
    }    renderAvailableTags() {
        const availableTagsContainer = this.form.querySelector('.available-tags');
        
        // 获取所有可用标签（包括手动创建的和提示词中的）
        const allTags = globalTagColorManager.getAllTags();
        
        const currentTags = this.getCurrentSelectedTags();
        
        if (allTags.length === 0) {
            availableTagsContainer.innerHTML = `
                <div class="no-available-tags">
                    <span>暂无可选标签</span>
                    <small>先在标签管理中添加标签</small>
                </div>
            `;
            return;
        }availableTagsContainer.innerHTML = `
            <div class="available-tags-header">
                <span>🏷️ 可选标签:</span>
            </div>
            <div class="available-tags-list">                ${allTags.map(tag => {
                    const color = globalTagColorManager.getTagColor(tag);
                    const colorRGB = globalTagColorManager.getTagColorRGB(tag);
                    const isSelected = currentTags.includes(tag);
                    return `
                        <span class="available-tag ${isSelected ? 'selected' : ''}" 
                              data-tag="${this.escapeHtml(tag)}" 
                              style="--tag-color: ${color}; --tag-color-rgb: ${colorRGB};"
                              title="${isSelected ? '点击移除' : '点击添加'}">
                            ${this.escapeHtml(tag)}
                        </span>
                    `;
                }).join('')}
            </div>
        `;

        this.bindAvailableTagsEvents();
    }    bindAvailableTagsEvents() {
        const availableTagsContainer = this.form.querySelector('.available-tags');
        
        // 标签点击事件
        availableTagsContainer.querySelectorAll('.available-tag').forEach(tagElement => {
            tagElement.addEventListener('click', () => {
                const tagName = tagElement.dataset.tag;
                this.toggleTagSelection(tagName);
            });
        });
    }    toggleTagSelection(tagName) {
        const tagsInput = this.form.querySelector('input[name="tags"]');
        const currentTags = this.getCurrentSelectedTags();
        
        if (currentTags.includes(tagName)) {
            // 移除标签
            const newTags = currentTags.filter(tag => tag !== tagName);
            tagsInput.value = newTags.join(', ');
        } else {
            // 添加标签
            const newTags = [...currentTags, tagName];
            tagsInput.value = newTags.join(', ');
        }
        
        // 触发input事件来更新预览
        tagsInput.dispatchEvent(new Event('input'));
        
        // 重新渲染可选标签以更新选中状态
        this.renderAvailableTags();
    }

    getCurrentSelectedTags() {
        const tagsInput = this.form.querySelector('input[name="tags"]');
        return this.parseTags(tagsInput.value);
    }

    // 新增：刷新所有标签的颜色
    refreshTagColors() {
        // 刷新标签预览的颜色
        const previewTags = this.container.querySelectorAll('.tag-preview');
        previewTags.forEach(tagElement => {
            const tagName = tagElement.textContent;
            if (tagName) {
                const color = globalTagColorManager.getTagColor(tagName);
                const colorRGB = globalTagColorManager.getTagColorRGB(tagName);
                tagElement.style.setProperty('--tag-color', color);
                tagElement.style.setProperty('--tag-color-rgb', colorRGB);
            }
        });

        // 刷新可选标签的颜色
        const availableTags = this.container.querySelectorAll('.available-tag');
        availableTags.forEach(tagElement => {
            const tagName = tagElement.dataset.tag;
            if (tagName) {
                const color = globalTagColorManager.getTagColor(tagName);                const colorRGB = globalTagColorManager.getTagColorRGB(tagName);
                tagElement.style.setProperty('--tag-color', color);
                tagElement.style.setProperty('--tag-color-rgb', colorRGB);
            }
        });
    }
}