<script setup>
import { inject } from 'vue';
import { useImageUpload } from '../../composables/useImageUpload';

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

const resolveAlt = (alt, fallback) => {
    if (!alt) return fallback;
    if (typeof alt === 'string') return alt || fallback;
    return alt[props.activeLang] || alt[Object.keys(alt)[0]] || fallback;
};

const uploadUrl = inject('editorUploadUrl', null);
const updateBlockImage = inject('editorUpdateBlockImage', null);

const { isDragOver, isUploading, fileInputRef, onDragOver, onDragLeave, onDrop, openPicker, onFileSelected } = useImageUpload(
    () => uploadUrl?.value ?? null,
    (url) => updateBlockImage?.(props.block.id, 'image', null, url),
);
</script>

<template>
    <section
        class="block-image-full"
        :class="{ 'block-image-full--over': isDragOver, 'block-image-full--uploading': isUploading, 'block-image-full--editable': !!uploadUrl?.value }"
        @dragover="uploadUrl?.value ? onDragOver($event) : null"
        @dragleave="onDragLeave"
        @drop="uploadUrl?.value ? onDrop($event) : null"
        @click="uploadUrl?.value ? openPicker() : null"
    >
        <img v-if="block.image?.url" :src="block.image.url" :alt="resolveAlt(block.image.alt, 'Project image')" loading="lazy">
        <div v-else class="block-image-full__placeholder">
            {{ isUploading ? 'Uploading…' : (uploadUrl?.value ? 'Drop image here or click to upload.' : 'Add a full-width image URL.') }}
        </div>
        <div v-if="isDragOver" class="block-image-full__drop-overlay">Drop to upload</div>
        <div v-if="isUploading && block.image?.url" class="block-image-full__uploading-overlay">Uploading…</div>
    </section>

    <input ref="fileInputRef" type="file" accept="image/*" style="display:none" @change="onFileSelected">
</template>

<style scoped>
.block-image-full {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
    border-radius: 1.65rem;
    overflow: hidden;
    position: relative;
    transition: outline-color 0.15s;
}

.block-image-full--editable {
    cursor: pointer;
}

.block-image-full--over {
    outline: 2px dashed rgba(14, 116, 144, 0.7);
    outline-offset: -2px;
}

img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.block-image-full--uploading img {
    opacity: 0.5;
}

.block-image-full__placeholder {
    align-items: center;
    color: var(--project-muted, #6b7280);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.block-image-full__drop-overlay,
.block-image-full__uploading-overlay {
    align-items: center;
    background: rgba(14, 116, 144, 0.55);
    bottom: 0;
    color: #fff;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.block-image-full__uploading-overlay {
    background: rgba(15, 23, 42, 0.4);
}
</style>