<script setup>
import {onBeforeUnmount, onMounted, ref, watch} from 'vue'

const props = defineProps({
    product: {
        type: Object,
        required: true
    },
    categories: {
        type: Array,
        default: () => []
    }
})

// --- Jodit Integration ---
const editorContainer = ref(null)
let editorInstance = null
const isExpanded = ref(false)

const toggleExpand = () => {
    isExpanded.value = !isExpanded.value
}

onMounted(() => {
    if (window.Jodit && editorContainer.value) {
        editorInstance = window.Jodit.make(editorContainer.value, {
            height: 400,
            buttons: 'bold,italic,underline,strikethrough,superscript,subscript,eraser,|,ul,ol,outdent,indent,|,paragraph,font,fontsize,lineHeight,brush,|,table,link,image,hr,symbols,|,align,|,find,|,source,preview,fullsize,|,undo,redo',
            placeholder: 'Tell customers what makes this product unique...',
        })

        if (props.product.description) {
            editorInstance.value = props.product.description
        }

        editorInstance.events.on('change', () => {
            props.product.description = editorInstance.value
        })
    }
})

// When product data loads later (edit mode hydration), update the editor
watch(() => props.product.description, (newVal) => {
    if (editorInstance && newVal !== editorInstance.value) {
        editorInstance.value = newVal || ''
    }
})

onBeforeUnmount(() => {
    if (editorInstance) {
        editorInstance.destruct()
        editorInstance = null
    }
})
</script>

<template>
    <div class="card rounded-xl border-0 p-4" :class="{ 'editor-expanded': isExpanded }">
        <div class="mb-4">
            <h2 class="h6 fw-semibold mb-1">Product Details</h2>
            <p class="small text-secondary mb-0">Basic information for your product listing.</p>
        </div>
        
        <div class="d-flex flex-column gap-4">
            <!-- Product Name -->
            <div>
                <label class="form-label fw-medium w-100 mb-1">Product Title</label>
                <input type="text" class="form-control" v-model="product.name" placeholder="e.g. Minimalist UI Kit">
            </div>

            <!-- Description (CKEditor) -->
            <div>
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <label class="form-label fw-medium mb-0">Description</label>
                    <button class="btn btn-sm btn-link text-secondary p-0 text-decoration-none d-flex align-items-center gap-1"
                            @click="toggleExpand"
                            type="button">
                        <span class="material-icons" style="font-size: 16px;">
                            {{ isExpanded ? 'close_fullscreen' : 'open_in_full' }}
                        </span>
                        <span class="small">{{ isExpanded ? 'Collapse' : 'Expand' }}</span>
                    </button>
                </div>
                <div ref="editorContainer"></div>
            </div>

            <!-- Categories -->
            <div>
                <label class="form-label fw-medium mb-1">Category</label>
                <select class="form-select" v-model="product.category_id">
                    <option value="" disabled>Select a category</option>
                    <option v-for="cat in categories" :key="cat.id" :value="cat.id">
                        {{ cat.name }}
                    </option>
                </select>
                <div v-if="categories.length === 0" class="form-text text-danger">
                    No categories found. Please create one first.
                </div>
            </div>
        </div>
    </div>
</template>
