<script setup>
import { computed, inject } from 'vue';
import FullWidthBlock from './blocks/FullWidthBlock.vue';
import FullWidthImageBlock from './blocks/FullWidthImageBlock.vue';
import FullWidthTextBlock from './blocks/FullWidthTextBlock.vue';
import TwoColumnsBlock from './blocks/TwoColumnsBlock.vue';
import TwoColumnImagesBlock from './blocks/TwoColumnImagesBlock.vue';
import VideoBlock from './blocks/VideoBlock.vue';

const props = defineProps({
    block: {
        type: Object,
        required: true,
    },
    editable: {
        type: Boolean,
        default: false,
    },
    selected: {
        type: Boolean,
        default: false,
    },
    activeLang: {
        type: String,
        default: '',
    },
});

const emit = defineEmits(['select']);

const componentMap = {
    // New types
    FullWidth: FullWidthBlock,
    TwoColumns: TwoColumnsBlock,
    // Legacy (kept for safety)
    FullWidthText: FullWidthTextBlock,
    TwoColumnImages: TwoColumnImagesBlock,
    FullWidthImage: FullWidthImageBlock,
    Video: VideoBlock,
};

const resolvedComponent = computed(() => componentMap[props.block.type] || FullWidthBlock);

const blockDrag = inject('editorBlockDrag', null);
const toggleVisibility = inject('editorToggleBlockVisibility', null);
const swapColumns = inject('editorSwapBlockColumns', null);

const isTwoColumn = computed(() => props.block.type === 'TwoColumns' || props.block.type === 'TwoColumnImages');
const isDragging = computed(() => blockDrag?.dragSrcId.value === props.block.id);
const isDragOver = computed(() => blockDrag?.dragOverId.value === props.block.id);
</script>

<template>
    <div
        class="project-block"
        :data-block-id="block.id"
        :class="{
            'project-block--selected': selected,
            'project-block--dragging': isDragging,
            'project-block--over': isDragOver,
            'project-block--editable': editable,
            'project-block--hidden': editable && block.hidden,
        }"
        @click="emit('select', block.id)"
        @dragover="editable && blockDrag ? blockDrag.onDragOver($event, block.id) : null"
        @dragleave="editable && blockDrag ? blockDrag.onDragLeave() : null"
        @drop="editable && blockDrag ? blockDrag.onDrop($event, block.id) : null"
        @dragend="editable && blockDrag ? blockDrag.onDragEnd() : null"
    >
        <div v-if="editable" class="project-block__bar">
            <div class="project-block__bar-left">
                <span class="project-block__badge" :class="{ 'project-block__badge--hidden': block.hidden }">{{ block.name ? `${block.name} — ${block.type}` : block.type }}</span>
                <span v-if="block.hidden" class="project-block__hidden-label">Hidden — not visible on frontend</span>
            </div>
            <div class="project-block__bar-actions">
                <button
                    v-if="swapColumns && isTwoColumn"
                    type="button"
                    class="project-block__vis-btn"
                    title="Swap columns"
                    @click.stop="swapColumns(block.id)"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16V4m0 0L3 8m4-4l4 4"/><path d="M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
                </button>
                <button
                    v-if="toggleVisibility"
                    type="button"
                    class="project-block__vis-btn"
                    :class="{ 'project-block__vis-btn--hidden': block.hidden }"
                    :title="block.hidden ? 'Hidden — click to show' : 'Visible — click to hide'"
                    @click.stop="toggleVisibility(block.id)"
                >
                    <!-- Eye open -->
                    <svg v-if="!block.hidden" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                    <!-- Eye off -->
                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                </button>
                <span
                    v-if="blockDrag"
                    class="project-block__handle"
                    title="Drag to reorder"
                    draggable="true"
                    @dragstart.stop="blockDrag.onDragStart($event, block.id)"
                >⠿</span>
            </div>
        </div>
        <component :is="resolvedComponent" :block="block" :active-lang="activeLang" />
    </div>
</template>

<style scoped>
.project-block {
    display: grid;
    gap: 0.85rem;
    position: relative;
    scroll-margin-top: 8rem;
}

.project-block--editable {
    cursor: pointer;
}

.project-block--editable:not(.project-block--selected):hover {
    outline: 2px solid rgba(15, 23, 42, 0.12);
    outline-offset: 0.75rem;
}

.project-block--dragging {
    opacity: 0.4;
}

.project-block--hidden {
    border-left: 3px solid #ef4444;
    padding-left: 0.75rem;
}

.project-block--over {
    outline: 2px dashed rgba(14, 116, 144, 0.6);
    outline-offset: 0.5rem;
}

.project-block--selected {
    outline: 2px solid rgba(14, 116, 144, 0.35);
    outline-offset: 0.75rem;
}

/* Top bar: badge + drag handle */
.project-block__bar {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.project-block__bar-left {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.project-block__hidden-label {
    color: #ef4444;
    font-size: 0.7rem;
    font-weight: 500;
}

.project-block__badge {
    background: rgba(14, 116, 144, 0.1);
    border-radius: 999px;
    color: #0f766e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
}

.project-block__handle {
    color: #94a3b8;
    cursor: grab;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    user-select: none;
}

.project-block__handle:hover {
    color: #0f766e;
}

.project-block__bar-actions {
    align-items: center;
    display: flex;
    gap: 0.25rem;
}

.project-block__badge--hidden {
    background: #fee2e2;
    color: #b91c1c;
}

.project-block__vis-btn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 0.3rem;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    line-height: 1;
    padding: 0.2rem;
    transition: color 0.15s;
}

.project-block__vis-btn:hover {
    color: #0f766e;
}

.project-block__vis-btn--hidden {
    color: #ef4444;
}

.project-block__vis-btn--hidden:hover {
    color: #b91c1c;
}
</style>