{% extends '_layouts/cp' %}
{% set title = 'Homepage Grid'|t('homepage-grid') %}

{% block actionButton %}
<button id="save-btn" class="btn submit add icon" type="button">
    <span>Save</span>
</button>
{% endblock %}

{% block content %}
<style>
#homepage-grid-app .flex { display:flex; }
#homepage-grid-app .flex-wrap { flex-wrap:wrap; }
#homepage-grid-app .items-center { align-items:center; }
#homepage-grid-app .justify-between { justify-content:space-between; }
#homepage-grid-app .gap-2 { gap:0.5rem; }
#homepage-grid-app .gap-4 { gap:1rem; }
#homepage-grid-app .mt-1 { margin-top:0.25rem; }
#homepage-grid-app .mt-2 { margin-top:0.5rem; }
#homepage-grid-app .mt-8 { margin-top:2rem; }
#homepage-grid-app .mb-3 { margin-bottom:0.75rem; }
#homepage-grid-app .mb-4 { margin-bottom:1rem; }
#homepage-grid-app .mb-6 { margin-bottom:1.5rem; }
#homepage-grid-app .mb-8 { margin-bottom:2rem; }
#homepage-grid-app .p-4 { padding:1rem; }
#homepage-grid-app .pt-6 { padding-top:1.5rem; }
#homepage-grid-app .border { border:1px solid #d1d5db; }
#homepage-grid-app .border-t { border-top:1px solid #d1d5db; }
#homepage-grid-app .rounded { border-radius:0.25rem; }
#homepage-grid-app .shadow-sm { box-shadow:0 1px 2px 0 rgba(0,0,0,0.05); }
#homepage-grid-app .bg-white { background:#fff; }
#homepage-grid-app .text-sm { font-size:0.875rem; }
#homepage-grid-app .text-xs { font-size:0.75rem; }
#homepage-grid-app .font-medium { font-weight:500; }
#homepage-grid-app .text-gray-500 { color:#6b7280; }
#homepage-grid-app .text-gray-600 { color:#718096; }
#homepage-grid-app .space-y-4 > * + * { margin-top:1rem; }
#homepage-grid-app .cursor-move { cursor:move; }
#homepage-grid-app .select-none { user-select:none; }
#homepage-grid-app .opacity-50 { opacity:0.5; }
#homepage-grid-app .preview-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; padding:1rem; background:#f3f4f6; border-radius:0.375rem; }
#homepage-grid-app .preview-block { padding:1rem; background:#fff; border:1px solid #d1d5db; border-radius:0.25rem; box-shadow:0 1px 2px 0 rgba(0,0,0,0.05); overflow:hidden; }
</style>
<div id="homepage-grid-app">
    <div v-if="loading" class="spinner"></div>

    <div v-else>
        <!-- Configuration des 3 tailles de colonnes -->
        <div class="field mb-6">
            <div class="heading">
                <label>Column Sizes (md:col-span-X)</label>
                <div class="instructions">Configure the 3 available column widths for desktop (grid-cols-12)</div>
            </div>
            <div class="flex flex-wrap gap-4 mt-2">
                <div class="w-1/4 min-w-[150px]">
                    <label class="text-sm text-gray-600">Small (col-span-[[settings.colSpan1]])</label>
                    <input type="number" v-model.number="settings.colSpan1" min="1" max="12"
                           class="text fullwidth" @change="updateTailwindClasses">
                </div>
                <div class="w-1/4 min-w-[150px]">
                    <label class="text-sm text-gray-600">Medium (col-span-[[settings.colSpan2]])</label>
                    <input type="number" v-model.number="settings.colSpan2" min="1" max="12"
                           class="text fullwidth" @change="updateTailwindClasses">
                </div>
                <div class="w-1/4 min-w-[150px]">
                    <label class="text-sm text-gray-600">Large (col-span-[[settings.colSpan3]])</label>
                    <input type="number" v-model.number="settings.colSpan3" min="1" max="12"
                           class="text fullwidth" @change="updateTailwindClasses">
                </div>
                <div class="w-1/4 min-w-[150px]">
                    <button class="btn small" @click="saveSettings">Save Sizes</button>
                </div>
            </div>
        </div>

        <!-- Hauteurs fixes -->
        <div class="field mb-6">
            <div class="heading">
                <label>Fixed Heights (rem)</label>
                <div class="instructions">Small height × 2 = Large height (for side-by-side blocks)</div>
            </div>
            <div class="flex flex-wrap gap-4 mt-2">
                <div class="w-1/4 min-w-[150px]">
                    <label class="text-sm text-gray-600">Small Height (rem)</label>
                    <input type="number" v-model.number="settings.heightSmall" min="6" max="48"
                           class="text fullwidth">
                </div>
                <div class="w-1/4 min-w-[150px]">
                    <label class="text-sm text-gray-600">Large Height (rem)</label>
                    <input type="number" v-model.number="settings.heightLarge" min="12" max="96"
                           class="text fullwidth">
                </div>
            </div>
        </div>

        <!-- Blocs -->
        <div class="field mb-4">
            <div class="heading">
                <label>Homepage Blocks</label>
                <div class="instructions">Drag to reorder. Choose size: Small (col-span-[[settings.colSpan1]]), Medium (col-span-[[settings.colSpan2]]), Large (col-span-[[settings.colSpan3]])</div>
            </div>
        </div>

        <!-- Liste des blocs avec drag & drop -->
        <div ref="blocksList" class="space-y-4 mb-6">
            <div v-for="(block, index) in blocks" :key="block.id"
                 class="box border rounded p-4 bg-white shadow-sm" :class="{'opacity-50': block.deleted}">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center gap-2">
                        <span class="drag-handle cursor-move text-gray-400 hover:text-gray-600 select-none" style="display:inline-block;">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                                <path d="M4 2a1 1 0 100-2 1 1 0 000 2zm0 6a1 1 0 100-2 1 1 0 000 2zm0 6a1 1 0 100-2 1 1 0 000 2zm8-12a1 1 0 100-2 1 1 0 000 2zm0 6a1 1 0 100-2 1 1 0 000 2zm0 6a1 1 0 100-2 1 1 0 000 2z"/>
                            </svg>
                        </span>
                        <span class="font-medium" v-text="block.type === 'edito' ? 'Édito: ' + (block.label || 'Untitled') : (block.sectionName || sections.find(s => s.id == block.sectionId)?.name || 'New Block')"></span>
                        <span class="badge" :class="getSizeBadgeClass(block.size)" v-text="getSizeLabel(block.size)"></span>
                    </div>
                    <button v-if="!block.deleted" class="btn small deleted" @click="removeBlock(index)">Delete</button>
                </div>

                <!-- Type de bloc -->
                <div class="flex gap-4 mb-3">
                    <label class="text-sm">
                        <input type="radio" v-model="block.type" value="category" @change="onTypeChange(block)">
                        Category Block
                    </label>
                    <label class="text-sm">
                        <input type="radio" v-model="block.type" value="edito" @change="onTypeChange(block)">
                        Édito Block
                    </label>
                </div>

                <!-- Intitulé -->
                <div class="mb-3">
                    <label class="text-sm text-gray-600">Label on Homepage</label>
                    <input type="text" v-model="block.label" class="text fullwidth" placeholder="Block title...">
                </div>

                <!-- Pour les blocs catégorie -->
                <div v-if="block.type === 'category'" class="mb-3">
                    <label class="text-sm text-gray-600">Section</label>
                    <select v-model="block.sectionId" class="select fullwidth" @change="updateSectionName(block)">
                        <option value="">-- Select a section --</option>
                        <option v-for="sec in sections" :key="sec.id" :value="sec.id" v-text="sec.name + ' (' + sec.type + ')'"></option>
                    </select>
                </div>

                <!-- Nombre d'articles (pour catégories) -->
                <div v-if="block.type === 'category'" class="mb-3">
                    <label class="text-sm text-gray-600">Number of articles to display</label>
                    <input type="number" v-model.number="block.articleLimit" min="1" max="12" class="text fullwidth">
                </div>

                <!-- Contenu édito (pour blocs édito) -->
                <div v-if="block.type === 'edito'" class="mb-3">
                    <label class="text-sm text-gray-600">Content (simple text block)</label>
                    <textarea v-model="block.content" class="text fullwidth" rows="3" placeholder="Enter text content..."></textarea>
                </div>

                <!-- Taille du bloc -->
                <div class="mb-3">
                    <label class="text-sm text-gray-600">Block Size</label>
                    <div class="flex gap-2 mt-1">
                        <button v-for="size in [1, 2, 3]" :key="size"
                                class="btn small" :class="{'active': block.size === size}"
                                @click="block.size = size">
                            [[ getSizeLabel(size) ]]
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bouton ajouter bloc -->
        <div class="flex gap-2 mb-8">
            <button class="btn add icon" @click="addCategoryBlock">Add Category Block</button>
            <button class="btn add icon" @click="addEditoBlock">Add Édito Block</button>
        </div>

        <!-- Preview grille -->
        <div class="mt-8 pt-6 border-t">
            <h3 class="mb-4">Grid Preview (Desktop)</h3>
            <div class="preview-grid">
                <div v-for="block in blocks.filter(b => !b.deleted)" :key="'preview-' + block.id"
                     class="preview-block"
                     :style="{
                         gridColumn: 'span ' + getColSpanNumber(block.size),
                         height: (block.size === 1 ? settings.heightSmall : settings.heightLarge) + 'rem'
                     }">
                    <div style="font-weight:500;font-size:0.875rem;margin-bottom:0.25rem;" v-text="block.label || 'Untitled'"></div>
                    <div style="font-size:0.75rem;color:#6b7280;" v-text="block.type === 'edito' ? 'Édito' : block.sectionName || 'Section'"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Vue 3 + SortableJS pour drag & drop #}
<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
const initialSettings = {{ craft.app.plugins.getPlugin('homepage-grid').getSettings().toArray()|json_encode|raw }};
const { createApp, ref, computed, onMounted, nextTick } = Vue;

createApp({
    setup() {
        const loading = ref(true);
        const saving = ref(false);
        const blocks = ref([]);
        const sections = ref([]);
        const blocksList = ref(null);
        let sortable = null;
        let nextId = 100;

        const settings = ref({
            colSpan1: 2,
            colSpan2: 4,
            colSpan3: 6,
            heightSmall: 12,
            heightLarge: 24,
            ...initialSettings
        });

        const activeBlocks = computed(() => blocks.value.filter(b => !b.deleted));
        const actionUrl = (action) => {
            if (typeof Craft !== 'undefined' && Craft.getActionUrl) {
                return Craft.getActionUrl(action);
            }

            return '/index.php?action=' + action;
        };

        const loadData = async () => {
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
                const jsonHeaders = {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-Token': csrfToken
                };

                const [blocksRes, sectionsRes] = await Promise.all([
                    fetch(actionUrl('homepage-grid/homepage/get-blocks'), {
                        method: 'POST',
                        headers: jsonHeaders,
                        body: JSON.stringify({})
                    }).then(r => r.json()),
                    fetch(actionUrl('homepage-grid/homepage/get-sections'), {
                        method: 'POST',
                        headers: jsonHeaders,
                        body: JSON.stringify({})
                    }).then(r => r.json())
                ]);

                if (blocksRes.success) {
                    blocks.value = (blocksRes.blocks || []).map(b => ({...b, deleted: false}));
                }
                if (sectionsRes.success) {
                    sections.value = sectionsRes.sections || [];
                }
            } catch (e) {
                console.error('Load error:', e);
            } finally {
                loading.value = false;
                nextTick(() => initSortable());
            }
        };

        const saveBlocks = async () => {
            saving.value = true;
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

                const payload = blocks.value
                    .filter(b => !b.deleted)
                    .map((b, i) => ({...b, order: i}));

                const res = await fetch(actionUrl('homepage-grid/homepage/save-blocks'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-Token': csrfToken
                    },
                    body: JSON.stringify({ blocks: payload })
                }).then(r => r.json());

                if (res.success) {
                    if (typeof Craft !== 'undefined' && Craft.cp) {
                        Craft.cp.displayNotice('Blocks saved.');
                    } else {
                        alert('Blocks saved.');
                    }
                } else if (typeof Craft !== 'undefined' && Craft.cp) {
                    Craft.cp.displayError(res.error || 'Save failed.');
                }
            } catch (e) {
                if (typeof Craft !== 'undefined' && Craft.cp) {
                    Craft.cp.displayError('Save failed.');
                } else {
                    alert('Save failed.');
                }
            } finally {
                saving.value = false;
            }
        };

        const saveSettings = async () => {
            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

                const res = await fetch(actionUrl('homepage-grid/homepage/save-settings'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-Token': csrfToken
                    },
                    body: JSON.stringify({
                        colSpan1: settings.value.colSpan1,
                        colSpan2: settings.value.colSpan2,
                        colSpan3: settings.value.colSpan3,
                        heightSmall: settings.value.heightSmall,
                        heightLarge: settings.value.heightLarge
                    })
                }).then(r => r.json());

                if (res.success && typeof Craft !== 'undefined' && Craft.cp) {
                    Craft.cp.displayNotice('Settings saved.');
                } else if (!res.success && typeof Craft !== 'undefined' && Craft.cp) {
                    Craft.cp.displayError('Settings save failed.');
                }
            } catch (e) {
                console.error('Settings save error:', e);
            }
        };

        const addCategoryBlock = () => {
            blocks.value.push({
                id: nextId++,
                type: 'category',
                label: '',
                sectionId: '',
                sectionName: '',
                articleLimit: 3,
                size: 2,
                order: blocks.value.length,
                deleted: false
            });
        };

        const addEditoBlock = () => {
            blocks.value.push({
                id: nextId++,
                type: 'edito',
                label: 'Édito',
                content: '',
                size: 2,
                order: blocks.value.length,
                deleted: false
            });
        };

        const removeBlock = (index) => {
            blocks.value.splice(index, 1);
        };

        const getSizeLabel = (size) => {
            const labels = {
                1: 'Small (col-span-' + settings.value.colSpan1 + ')',
                2: 'Medium (col-span-' + settings.value.colSpan2 + ')',
                3: 'Large (col-span-' + settings.value.colSpan3 + ')'
            };
            return labels[size] || 'Medium';
        };

        const getSizeBadgeClass = (size) => {
            return {
                1: 'bg-orange-100 text-orange-800',
                2: 'bg-blue-100 text-blue-800',
                3: 'bg-purple-100 text-purple-800'
            }[size] || '';
        };

        const getColSpanNumber = (size) => {
            return {1: settings.value.colSpan1, 2: settings.value.colSpan2, 3: settings.value.colSpan3}[size] || settings.value.colSpan2;
        };

        const getColSpanClass = (size) => {
            const classes = {
                1: 'md:col-span-' + settings.value.colSpan1,
                2: 'md:col-span-' + settings.value.colSpan2,
                3: 'md:col-span-' + settings.value.colSpan3
            };
            return classes[size] || 'md:col-span-4';
        };

        const updateSectionName = (block) => {
            const sec = sections.value.find(s => s.id == block.sectionId);
            block.sectionName = sec ? sec.name : '';
        };

        const onTypeChange = (block) => {
            if (block.type === 'edito') {
                block.sectionId = '';
                block.sectionName = '';
                block.articleLimit = 0;
            }
        };

        const initSortable = () => {
            nextTick(() => {
                if (!blocksList.value) return;

                const listEl = blocksList.value;
                if (sortable) sortable.destroy();

                sortable = Sortable.create(listEl, {
                    handle: '.drag-handle',
                    animation: 150,
                    onEnd: (evt) => {
                        const { oldIndex, newIndex } = evt;
                        const item = blocks.value.splice(oldIndex, 1)[0];
                        blocks.value.splice(newIndex, 0, item);
                    }
                });
            });
        };

        onMounted(() => {
            loadData();

            const saveButton = document.getElementById('save-btn');
            if (saveButton) {
                saveButton.addEventListener('click', saveBlocks);
            }
        });

        return {
            loading,
            saving,
            blocks,
            sections,
            settings,
            blocksList,
            activeBlocks,
            saveBlocks,
            saveSettings,
            addCategoryBlock,
            addEditoBlock,
            removeBlock,
            getSizeLabel,
            getSizeBadgeClass,
            getColSpanNumber,
            getColSpanClass,
            updateSectionName,
            onTypeChange,
            initSortable
        };
    },
    delimiters: ['[[', ']]']
}).mount('#homepage-grid-app');
</script>
{% endblock %}