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

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

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

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

onMounted(() => {
    if (window.ClassicEditor && editorContainer.value) {
        window.ClassicEditor
            .create(editorContainer.value, {
                toolbar: [
                    'heading', '|',
                    'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|',
                    'blockQuote', 'insertTable', '|',
                    'undo', 'redo'
                ],
                placeholder: 'Tell customers what makes this product unique...'
            })
            .then(editor => {
                editorInstance = editor

                // Sync initial value
                if (props.product.description) {
                    editor.setData(props.product.description)
                }

                // Sync editor changes back to reactive product
                editor.model.document.on('change:data', () => {
                    props.product.description = editor.getData()
                })
            })
            .catch(error => {
                console.error('CKEditor init error:', error)
            })
    }
})

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

onBeforeUnmount(() => {
    if (editorInstance) {
        editorInstance.destroy()
        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>
