export class TopicEditor {
    constructor() {
        this.quill = null;
        this.initializeEventListeners();
    }

    initializeEventListeners() {
        document.addEventListener('openTopicEditorModal', () => {
            this.loadSubjects();
            if (!this.quill) {
                this.initializeQuill();
            }
        });

        // Handle subject selection change
        document.addEventListener('change', (e) => {
            if (e.target.id === 'editSubjectSelect') {
                this.loadTopicsForSubject(e.target.value);
            }
            if (e.target.id === 'editTopicSelect') {
                this.loadTopicContent(e.target.value);
            }
        });
    }

    initializeQuill() {
        const toolbarOptions = [
            ['bold', 'italic', 'underline'],
            ['blockquote', 'code-block'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            ['link', 'image', 'formula'],
            ['clean']
        ];

        this.quill = new Quill('#topicEditorQuill', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });
    }

    async loadSubjects() {
        const select = document.getElementById('editSubjectSelect');
        try {
            const subjects = SubjectData.getAll();
            select.innerHTML = '<option value="">Fach auswählen...</option>';
            Object.values(subjects).forEach(subject => {
                const option = document.createElement('option');
                option.value = subject.id;
                option.textContent = subject.displayName;
                select.appendChild(option);
            });
        } catch (error) {
            console.error('Error loading subjects:', error);
            alert('Fehler beim Laden der Fächer');
        }
    }

    // ... rest of your provided methods ...
}