<template>
    <div class="bm-app">
        <BlockManagerTabs :active="activeTab" @switch="switchTab" />

        <BlockList
            v-if="activeTab === 'blocks' && view === 'list'"
            @open="openBlock"
        />
        <BlockManagerMain
            v-else-if="activeTab === 'blocks'"
            :block-id="currentBlockId"
            @back="backToList"
        />
        <DesignerRoot
            v-else
            :draft-id="currentDraftId"
            @open-draft="openDraft"
            @exit-draft="exitDraft"
        />
    </div>
</template>

<script>
import BlockManagerTabs from './BlockManagerTabs.vue';
import BlockList from './composer/BlockList.vue';
import BlockManagerMain from './composer/BlockManagerMain.vue';
import DesignerRoot from './designer/DesignerRoot.vue';

const BLOCKS_URL = '/admin/block-manager';
const BLOCKS_NEW_URL = '/admin/block-manager/new';
const ELEMENTS_URL = '/admin/block-manager/elements';

export default {
    name: 'BlockManagerApp',
    components: { BlockManagerTabs, BlockList, BlockManagerMain, DesignerRoot },
    props: {
        initialTab: { type: String, default: 'blocks' },
        blockId:    { type: Number, default: null },
        draftId:    { type: Number, default: null },
    },
    data() {
        const initialActiveTab = this.initialTab === 'elements' ? 'elements' : 'blocks';
        // On the blocks tab, open the composer iff the URL deep-linked into a
        // specific block id or the /new sentinel; otherwise show the list.
        const path = typeof window !== 'undefined' ? window.location.pathname : '';
        const isComposerUrl = this.blockId !== null || /\/admin\/block-manager\/new\/?$/.test(path);
        return {
            activeTab: initialActiveTab,
            view: isComposerUrl ? 'composer' : 'list',
            currentBlockId: this.blockId,
            currentDraftId: this.draftId,
        };
    },
    mounted() {
        window.addEventListener('popstate', this.syncFromUrl);
    },
    beforeDestroy() {
        window.removeEventListener('popstate', this.syncFromUrl);
    },
    methods: {
        switchTab(tab) {
            // Clicking the active Elements tab while editing returns to the picker
            // — a UX backstop when users haven't spotted the "← All elements" button.
            if (tab === this.activeTab) {
                if (tab === 'elements' && this.currentDraftId !== null) {
                    this.exitDraft();
                } else if (tab === 'blocks' && this.view === 'composer') {
                    this.backToList();
                }
                return;
            }
            this.activeTab = tab;
            if (tab === 'elements') {
                window.history.pushState({}, '', ELEMENTS_URL);
            } else {
                // Returning to the blocks tab always lands on the list.
                this.view = 'list';
                this.currentBlockId = null;
                window.history.pushState({}, '', BLOCKS_URL);
            }
        },
        openBlock(id) {
            this.currentBlockId = id;
            this.view = 'composer';
            const url = id === null ? BLOCKS_NEW_URL : `${BLOCKS_URL}/${id}`;
            window.history.pushState({}, '', url);
        },
        backToList() {
            this.view = 'list';
            this.currentBlockId = null;
            window.history.pushState({}, '', BLOCKS_URL);
        },
        openDraft(id) {
            this.currentDraftId = id;
            this.activeTab = 'elements';
            window.history.pushState({}, '', `${ELEMENTS_URL}/${id}`);
        },
        exitDraft() {
            this.currentDraftId = null;
            window.history.pushState({}, '', ELEMENTS_URL);
        },
        syncFromUrl() {
            const path = window.location.pathname;
            if (path.includes('/elements')) {
                this.activeTab = 'elements';
                const m = path.match(/\/elements\/(\d+)/);
                this.currentDraftId = m ? Number(m[1]) : null;
                return;
            }
            this.activeTab = 'blocks';
            const idMatch = path.match(/\/admin\/block-manager\/(\d+)/);
            if (idMatch) {
                this.currentBlockId = Number(idMatch[1]);
                this.view = 'composer';
            } else if (/\/admin\/block-manager\/new\/?$/.test(path)) {
                this.currentBlockId = null;
                this.view = 'composer';
            } else {
                this.currentBlockId = null;
                this.view = 'list';
            }
        },
    },
};
</script>
