import { EditorCore } from './EditorCore';
import { MediaSelectorModal } from '../media/MediaSelectorModal';
import { BlockListEditor, ACTUALITE_BLOCK_LIST_CONFIG, PROJECT_DETAIL_BLOCK_LIST_CONFIG } from './BlockListEditor';
import { RepeatableObjectListEditor } from './RepeatableObjectListEditor';
import { TagPicker } from './TagPicker';
import { PreviewToggle } from './PreviewToggle';
import { initTooltips } from '../../core/Tooltip';

document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('[data-editor-mode="true"]')) {
        const editor = new EditorCore();
        editor.initialize();
        initTooltips();
        new PreviewToggle().initialize();

        // Initialize media selector if modal exists
        let mediaSelectorModal: MediaSelectorModal | null = null;
        if (document.getElementById('media-selector-modal')) {
            mediaSelectorModal = new MediaSelectorModal(() => {
                editor.getChangeTracker().markChanged();
            });
        }

        // Repeatable Block Templates only: dynamic block add/remove/reorder (see
        // spec-driven-development/rules/section-component-architecture.md, "Repeatable
        // Block Templates" exception — currently Actualité and ProjectDetail). Guarded by
        // the presence of each template's own blocks container id, which only that
        // template's Twig renders in edit mode; each gets its own BlockListEditorConfig
        // (block types + hidden-template ids) rather than a duplicated class.
        const actualiteBlocksContainer = document.getElementById('actualite-blocks');
        if (actualiteBlocksContainer) {
            const blockListEditor = new BlockListEditor(
                actualiteBlocksContainer,
                editor,
                mediaSelectorModal,
                ACTUALITE_BLOCK_LIST_CONFIG
            );
            blockListEditor.initialize();
        }

        const projectDetailBlocksContainer = document.getElementById('project-detail-blocks');
        if (projectDetailBlocksContainer) {
            const blockListEditor = new BlockListEditor(
                projectDetailBlocksContainer,
                editor,
                mediaSelectorModal,
                PROJECT_DETAIL_BLOCK_LIST_CONFIG
            );
            blockListEditor.initialize();
        }

        // Page-level tag picker (Actualité + ProjectDetail, see TagPicker.ts).
        const tagPickerContainer = document.getElementById('tag-picker');
        if (tagPickerContainer) {
            const tagPicker = new TagPicker(tagPickerContainer, editor);
            tagPicker.initialize();
        }

        // ProjectDetail-only: "Le projet" info block's repeatable `projectInfoItems`
        // (decision (b) in spec-driven-development/project-detail-redesign.md) — page-level
        // instance, rooted at the info block's right column (contains the list container,
        // "add" button and hidden item <template>, see
        // templates/components/_project-detail-info.html.twig). Per-block-instance
        // `paragraphs-image` blocks get their own instance via
        // BlockListEditor.bindParagraphsImageControls() instead.
        const infoItemsContainer = document.getElementById('project-detail-info-items');
        if (infoItemsContainer && infoItemsContainer.parentElement) {
            const infoItemsEditor = new RepeatableObjectListEditor(
                infoItemsContainer.parentElement,
                'projectInfoItems',
                editor,
                mediaSelectorModal
            );
            infoItemsEditor.initialize();
        }

        // About "C'est quoi galta ?": unlimited photo + text items (`galtaItems`), laid out as a
        // grid in edit mode (see templates/components/_about-galta.html.twig). Each new item gets
        // a fresh stable id (pairs FR/EN items, cf. LocaleImageOverlay).
        const galtaSection = document.getElementById('about-galta');
        if (galtaSection?.querySelector('[data-repeatable-list="true"]')) {
            const galtaEditor = new RepeatableObjectListEditor(galtaSection, 'galtaItems', editor, mediaSelectorModal);
            galtaEditor.bind(item => {
                const id = item.querySelector<HTMLElement>('[data-editable-value="true"]');
                if (id && !id.dataset.value) id.dataset.value = crypto.randomUUID();
            });
            galtaEditor.initialize();
        }
    }
});