<template>
    <div class="min-h-screen bg-slate-50 dark:bg-slate-900">
        <Head title="Home" />

        <!-- Header Section -->
        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 mb-8">
            <div class="px-6 py-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">{{ $t('Home Page Management') }}</h1>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $t('Customize your landing page sections and content') }}</p>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button
                            type="button"
                            @click="previewPage"
                            class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                        >
                            <Eye class="w-4 h-4 mr-2" />
                            {{ $t('Preview') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <form @submit.prevent="update">
                <div class="p-8">
                    <!-- Modern Tab Navigation -->
            <div class="border-b border-slate-200 dark:border-slate-700 mb-8">
                        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                            <button
                                v-for="(tab, ti) in tabs"
                                :key="ti"
                                type="button"
                                @click="activeTab(ti)"
                                :class="[
                                    tab.active
                                        ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                                        : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300 dark:hover:border-slate-600',
                                    'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200'
                                ]"
                            >
                                <div class="flex items-center space-x-2">
                                    <component :is="tab.icon" class="w-4 h-4" />
                                    <span>{{ tab.name }}</span>
                                </div>
                            </button>
                        </nav>
                        </div>
                    <!-- Tab Content -->
                        <div class="tab-content">
                        <!-- Settings Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[0].active}">
                            <div class="space-y-8">
                                <!-- Section Header -->
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Page Settings') }}</h3>
                                    <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Configure page behavior and ticket submission options') }}</p>
                                </div>

                                <!-- Ticket Section Settings -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <h4 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">{{ $t('Ticket Section') }}</h4>

                                    <div class="space-y-4">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <text-input v-model="form.html.sections[2].badge_text" :label="$t('Badge Text')" class="w-full" />
                                            <text-input v-model="form.html.sections[2].title" :label="$t('Section Title')" class="w-full" />
                                        </div>
                                        <textarea-input v-model="form.html.sections[2].subtitle" :rows="2" :label="$t('Section Subtitle')" class="w-full" />
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <text-input v-model="form.html.sections[2].submit_header" :label="$t('Form Header Title')" class="w-full" />
                                            <text-input v-model="form.html.sections[2].cta_submit_label" :label="$t('Submit Button Label')" class="w-full" />
                                        </div>
                                        <textarea-input v-model="form.html.sections[2].submit_subtitle" :rows="2" :label="$t('Form Header Subtitle')" class="w-full" />
                                        <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                            <div class="flex items-center justify-between mb-4">
                                                <h5 class="font-medium text-slate-900 dark:text-white">{{ $t('Form Header Badges') }}</h5>
                                                <button type="button" @click="addFormBadge()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                                    <Plus class="w-4 h-4 mr-2" />{{ $t('Add Badge') }}
                                                </button>
                                            </div>
                                            <div class="space-y-3">
                                                <div v-for="(badge, bi) in (form.html.sections[2].form_badges || [])" :key="bi" class="flex items-center gap-3">
                                                    <text-input v-model="form.html.sections[2].form_badges[bi]" class="flex-1" :label="bi === 0 ? $t('Badge Text') : null" />
                                                    <button type="button" @click="removeFormBadge(bi)" class="w-9 h-9 rounded-md bg-red-500 hover:bg-red-600 text-white flex items-center justify-center"><X class="w-4 h-4" /></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/50 rounded-lg">
                                            <div>
                                                <h5 class="font-medium text-slate-900 dark:text-white">{{ $t('Enable Ticket Section') }}</h5>
                                                <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Show ticket submission form on the homepage') }}</p>
                                            </div>
                                            <label class="flex items-center cursor-pointer">
                                                <input
                                                    type="checkbox"
                                                    v-model="form.html.sections[2].enable_ticket_section"
                                                    class="sr-only"
                                                />
                                        <div class="relative">
                                                    <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[2].enable_ticket_section ? 'bg-blue-500' : ''"></div>
                                                    <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[2].enable_ticket_section ? 'transform translate-x-6' : ''"></div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                </div>
                            </div>
                        </div>
                        <!-- Hero Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[1].active}">
                            <div class="space-y-8">
                                <!-- Section Header -->
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Hero Section') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Main banner section with title, description, and call-to-action buttons') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                v-model="form.html.sections[0].enabled"
                                                class="sr-only"
                                            />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[0].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[0].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>

                                <!-- Title and Details -->
                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                    <div>
                                        <text-input
                                            v-model="form.html.sections[0].title"
                                            class="w-full"
                                            :label="$t('Hero Title')"
                                            :placeholder="$t('Enter your main headline...')"
                                        />
                                    </div>
                                    <div>
                                        <text-input
                                            v-model="form.html.sections[0].badge_text"
                                            class="w-full"
                                            :label="$t('Hero Badge Text')"
                                            :placeholder="$t('e.g., Trusted by 10,000+ companies')"
                                        />
                                    </div>
                                    <div>
                                        <textarea-input
                                            v-model="form.html.sections[0].details"
                                            class="w-full"
                                            :label="$t('Hero Description')"
                                            :placeholder="$t('Describe your helpdesk solution...')"
                                            :rows="4"
                                        />
                                    </div>
                                </div>

                                <!-- Trust Indicators -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-4">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Trust Indicators') }}</h4>
                                        <button type="button" @click="addTrustIndicator()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Item') }}
                                        </button>
                                    </div>
                                    <div class="space-y-3">
                                        <div v-for="(ti, idx) in (form.html.sections[0].trust_indicators || [])" :key="idx" class="flex items-center gap-3">
                                            <text-input v-model="form.html.sections[0].trust_indicators[idx]" class="flex-1" :label="idx===0?$t('Items'):null" />
                                            <button type="button" @click="removeTrustIndicator(idx)" class="w-9 h-9 rounded-md bg-red-500 hover:bg-red-600 text-white flex items-center justify-center"><X class="w-4 h-4" /></button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Action Buttons -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-4">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Call-to-Action Buttons') }}</h4>
                                        <button
                                            type="button"
                                            @click="newButton(0)"
                                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200"
                                        >
                                            <Plus class="w-4 h-4 mr-2" />
                                            {{ $t('Add Button') }}
                                        </button>
                                    </div>

                                    <div class="space-y-4">
                                        <div
                                            v-for="(button, si) in form.html.sections[0].buttons"
                                            :key="si"
                                            class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-4 relative"
                                        >
                                            <button
                                                type="button"
                                                @click="removeButton(0, si)"
                                                class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center transition-colors duration-200"
                                            >
                                                <X class="w-4 h-4" />
                                            </button>

                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                                <text-input
                                                    v-model="button.text"
                                                    class="w-full"
                                                    :label="$t('Button Text')"
                                                    :placeholder="$t('e.g., Get Started')"
                                                />
                                                <text-input
                                                    v-model="button.link"
                                                    class="w-full"
                                                    :label="$t('Button Link')"
                                                    :placeholder="$t('e.g., /login')"
                                                />
                                                <div class="flex items-center pt-6">
                                                    <label class="flex items-center cursor-pointer">
                                                        <input
                                                            type="checkbox"
                                                            v-model="button.new_tab"
                                                            class="sr-only"
                                                        />
                                                <div class="relative">
                                                            <div class="w-10 h-5 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="button.new_tab ? 'bg-blue-500' : ''"></div>
                                                            <div class="absolute w-4 h-4 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="button.new_tab ? 'transform translate-x-5' : ''"></div>
                                                        </div>
                                                        <span class="ml-3 text-sm text-slate-700 dark:text-slate-300">{{ $t('Open in new tab') }}</span>
                                                    </label>
                                                </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Knowledge Base Button -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-4">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Knowledge Base Button') }}</h4>
                                        <label class="flex items-center cursor-pointer">
                                            <input type="checkbox" v-model="form.html.sections[0].kb_button.enabled" class="sr-only" />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[0].kb_button.enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[0].kb_button.enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <text-input v-model="form.html.sections[0].kb_button.text" :label="$t('Button Text')" class="w-full" />
                                        <text-input v-model="form.html.sections[0].kb_button.link" :label="$t('Button Link')" :placeholder="$t('e.g., /kb or route name kb')" class="w-full" />
                                    </div>
                                </div>

                                <!-- Hero Overlay Cards -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-4">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Hero Overlay Cards') }}</h4>
                                        <button type="button" @click="addHeroOverlay()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Card') }}
                                        </button>
                                    </div>
                                    <div class="space-y-4">
                                        <div v-for="(overlay, oi) in (form.html.sections[0].hero_overlays || [])" :key="oi" class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-4 relative">
                                            <button type="button" @click="removeHeroOverlay(oi)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center"><X class="w-4 h-4" /></button>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                                <text-input v-model="overlay.label" :label="$t('Label')" class="w-full" />
                                                <text-input v-model="overlay.title" :label="$t('Title')" class="w-full" />
                                                <text-input v-model="overlay.status" :label="$t('Status Text')" class="w-full" />
                                                <div class="flex items-center pt-6">
                                                    <label class="flex items-center gap-2 cursor-pointer text-sm text-slate-700 dark:text-slate-300">
                                                        <input type="checkbox" v-model="overlay.show_check" class="rounded border-slate-300" />
                                                        {{ $t('Show check icon instead of status') }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Hero Image -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-start justify-between gap-4 mb-4">
                                        <div>
                                            <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Hero Image') }}</h4>
                                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">
                                                {{ $t('Recommended: 1200×900, JPG/PNG/WEBP, max 10 MB') }}
                                            </p>
                                        </div>
                                        <div class="text-xs text-slate-500 dark:text-slate-400">
                                            {{ heroImageMeta.size ? getFileSize(heroImageMeta.size) : '' }}
                                        </div>
                                    </div>

                                    <input ref="section0image" type="file" accept="image/jpeg,image/png,image/webp,image/gif" class="hidden" @change="fileInputChange($event, 0)" />

                                    <div class="space-y-4">
                                        <div class="flex items-center gap-3">
                                            <button
                                                type="button"
                                                :disabled="heroImageUploading"
                                                @click="fileBrowse(0)"
                                                class="inline-flex items-center px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-slate-50 dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 transition-colors duration-200 disabled:opacity-60 disabled:cursor-not-allowed"
                                            >
                                                <ImageIcon class="w-4 h-4 mr-2" />
                                                {{ heroImageUploading ? $t('Uploading...') : ((heroImagePreviewUrl || form.html.sections[0].image) ? $t('Change Image') : $t('Add Image')) }}
                                            </button>
                                            <button
                                                v-if="heroImagePreviewUrl || form.html.sections[0].image"
                                                type="button"
                                                :disabled="heroImageUploading"
                                                @click="fileRemove(0)"
                                                class="inline-flex items-center px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors duration-200 disabled:opacity-60"
                                            >
                                                <X class="w-4 h-4 mr-1.5" />
                                                {{ $t('Remove') }}
                                            </button>
                                        </div>

                                        <div v-if="heroImageError" class="text-sm text-red-600 dark:text-red-400">
                                            {{ heroImageError }}
                                        </div>

                                        <div class="relative rounded-lg border border-dashed border-slate-300 dark:border-slate-600 p-3 bg-slate-50/50 dark:bg-slate-700/20">
                                            <img
                                                v-if="heroImagePreviewUrl || form.html.sections[0].image"
                                                :src="getImageSrc(form.html.sections[0].image)"
                                                alt="Hero Image Preview"
                                                class="w-full h-auto max-h-72 object-contain rounded-lg border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800"
                                            />
                                            <div v-else class="h-44 rounded-lg border border-slate-200 dark:border-slate-600 flex items-center justify-center text-slate-400 dark:text-slate-500 bg-white dark:bg-slate-800">
                                                <div class="text-center">
                                                    <ImageIcon class="w-8 h-8 mx-auto mb-2" />
                                                    <p class="text-sm">{{ $t('No hero image selected') }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Features Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[2].active}">
                            <div class="space-y-8">
                                <!-- Section Header -->
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Features Section') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Showcase your helpdesk features and benefits') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                v-model="form.html.sections[1].enabled"
                                                class="sr-only"
                                            />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[1].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[1].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>

                                <!-- Section Content -->
                                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                    <div>
                                        <text-input
                                            v-model="form.html.sections[1].tagline"
                                            class="w-full"
                                            :label="$t('Section Tagline')"
                                            :placeholder="$t('e.g., Process')"
                                        />
                                    </div>
                                    <div>
                                        <text-input
                                            v-model="form.html.sections[1].title"
                                            class="w-full"
                                            :label="$t('Section Title')"
                                            :placeholder="$t('e.g., How HelpDesk Works')"
                                        />
                                    </div>
                                    <div>
                                        <textarea-input
                                            v-model="form.html.sections[1].details"
                                            class="w-full"
                                            :label="$t('Section Description')"
                                            :placeholder="$t('Brief description of your process...')"
                                            :rows="3"
                                        />
                                    </div>
                                </div>

                                <!-- Features List -->
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-6">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Feature List') }}</h4>
                                        <button
                                            type="button"
                                            @click="newFeature(1)"
                                            class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200"
                                        >
                                            <Plus class="w-4 h-4 mr-2" />
                                            {{ $t('Add Feature') }}
                                        </button>
                                    </div>

                                    <div class="space-y-6">
                                        <div
                                            v-for="(feature, si) in form.html.sections[1].features"
                                            :key="si"
                                            class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-6 relative"
                                        >
                                            <button
                                                type="button"
                                                @click="removeFeature(1, si)"
                                                class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center transition-colors duration-200"
                                            >
                                                <X class="w-4 h-4" />
                                            </button>

                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                                <div>
                                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $t('Icon') }}</label>
                                                    <select
                                                        v-model="feature.icon"
                                                        class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                                    >
                                                        <option value="">{{ $t('Select Icon') }}</option>
                                                        <option v-for="(icon, li) in icons" :key="li" :value="icon">{{ icon }}</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <text-input
                                                        v-model="feature.title"
                                                        class="w-full"
                                                        :label="$t('Feature Title')"
                                                        :placeholder="$t('e.g., Submit A Ticket')"
                                                    />
                                                </div>
                                                <div>
                                                    <textarea-input
                                                        v-model="feature.details"
                                                        class="w-full"
                                                        :label="$t('Feature Description')"
                                                        :placeholder="$t('Describe this feature...')"
                                                        :rows="3"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Statistics Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[3].active}">
                            <div class="space-y-8">
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Stats Section') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Showcase key metrics of your helpdesk') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                v-model="form.html.sections[3].enabled"
                                                class="sr-only"
                                            />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[3].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[3].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                    <text-input v-model="form.html.sections[3].tagline" :label="$t('Section Tagline')" class="w-full" />
                                    <text-input v-model="form.html.sections[3].title" :label="$t('Section Title')" class="w-full" />
                                    <textarea-input v-model="form.html.sections[3].details" :rows="3" :label="$t('Section Description')" class="w-full" />
                                </div>

                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-6">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Stats List') }}</h4>
                                        <button type="button" @click="newStat(3)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Stat') }}
                                        </button>
                                    </div>
                                    <div class="space-y-6">
                                        <div v-for="(stat, si) in form.html.sections[3].stats" :key="si" class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-6 relative">
                                            <button type="button" @click="removeStat(3, si)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center"><X class="w-4 h-4" /></button>
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                                <text-input v-model="stat.label" :label="$t('Label')" class="w-full" />
                                                <text-input v-model="stat.value" :label="$t('Value')" class="w-full" />
                                                <select v-model="stat.icon" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                    <option value="">{{ $t('Select Icon') }}</option>
                                                    <option v-for="(icon, li) in icons" :key="li" :value="icon">{{ icon }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonials Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[4].active}">
                            <div class="space-y-8">
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Testimonials Section') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Showcase customer feedback and ratings') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                v-model="form.html.sections[4].enabled"
                                                class="sr-only"
                                            />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[4].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[4].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                    <text-input v-model="form.html.sections[4].tagline" :label="$t('Section Tagline')" class="w-full" />
                                    <text-input v-model="form.html.sections[4].title" :label="$t('Section Title')" class="w-full" />
                                    <textarea-input v-model="form.html.sections[4].details" :rows="3" :label="$t('Section Description')" class="w-full" />
                                </div>

                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-6">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Testimonials') }}</h4>
                                        <button type="button" @click="newTestimonial(4)" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Testimonial') }}
                                        </button>
                                    </div>
                                    <div class="space-y-6">
                                        <div v-for="(tm, ti) in form.html.sections[4].testimonials" :key="ti" class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-6 relative">
                                            <button type="button" @click="removeTestimonial(4, ti)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center"><X class="w-4 h-4" /></button>
                                            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                                                <text-input v-model="tm.name" :label="$t('Name')" class="w-full" />
                                                <text-input v-model="tm.company" :label="$t('Company')" class="w-full" />
                                                <textarea-input v-model="tm.content" :rows="2" :label="$t('Content')" class="w-full" />
                                                <text-input v-model="tm.rating" :label="$t('Rating (1-5)')" class="w-full" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Trust Strip Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[5].active}">
                            <div class="space-y-8">
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Trust Strip') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Highlight key metrics below the hero section') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input type="checkbox" v-model="form.html.sections[5].enabled" class="sr-only" />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[5].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[5].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-6">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Trust Items') }}</h4>
                                        <button type="button" @click="addTrustStripItem()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Item') }}
                                        </button>
                                    </div>
                                    <div class="space-y-6">
                                        <div v-for="(item, ti) in form.html.sections[5].items" :key="ti" class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-6 relative">
                                            <button type="button" @click="removeTrustStripItem(ti)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center"><X class="w-4 h-4" /></button>
                                            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                                                <div>
                                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $t('Icon') }}</label>
                                                    <select v-model="item.icon" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                        <option value="">{{ $t('Select Icon') }}</option>
                                                        <option v-for="(icon, li) in icons" :key="li" :value="icon">{{ icon }}</option>
                                                    </select>
                                                </div>
                                                <text-input v-model="item.label" :label="$t('Label')" class="w-full" />
                                                <text-input v-model="item.value" :label="$t('Value')" class="w-full" />
                                                <div>
                                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $t('Color Theme') }}</label>
                                                    <select v-model="item.theme" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                        <option value="primary">Primary</option>
                                                        <option value="emerald">Emerald</option>
                                                        <option value="blue">Blue</option>
                                                        <option value="purple">Purple</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Support Channels Section -->
                        <div class="tab-pane" :class="{'hidden': !tabs[6].active}">
                            <div class="space-y-8">
                                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-6">
                                    <div class="flex items-center justify-between">
                                        <div>
                                            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">{{ $t('Support Channels') }}</h3>
                                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('Cards linking to ticket, contact, and FAQ pages') }}</p>
                                        </div>
                                        <label class="flex items-center cursor-pointer">
                                            <input type="checkbox" v-model="form.html.sections[6].enabled" class="sr-only" />
                                            <div class="relative">
                                                <div class="w-12 h-6 bg-slate-300 dark:bg-slate-600 rounded-full shadow-inner transition-colors duration-200" :class="form.html.sections[6].enabled ? 'bg-blue-500' : ''"></div>
                                                <div class="absolute w-5 h-5 bg-white rounded-full shadow top-0.5 left-0.5 transition-transform duration-200" :class="form.html.sections[6].enabled ? 'transform translate-x-6' : ''"></div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                    <text-input v-model="form.html.sections[6].title" :label="$t('Section Title')" class="w-full" />
                                    <textarea-input v-model="form.html.sections[6].subtitle" :rows="2" :label="$t('Section Subtitle')" class="w-full" />
                                </div>
                                <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6">
                                    <div class="flex items-center justify-between mb-6">
                                        <h4 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $t('Channels') }}</h4>
                                        <button type="button" @click="addSupportChannel()" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors duration-200">
                                            <Plus class="w-4 h-4 mr-2" />{{ $t('Add Channel') }}
                                        </button>
                                    </div>
                                    <div class="space-y-6">
                                        <div v-for="(channel, ci) in form.html.sections[6].channels" :key="ci" class="bg-slate-50 dark:bg-slate-700/50 border border-slate-200 dark:border-slate-600 rounded-lg p-6 relative">
                                            <button type="button" @click="removeSupportChannel(ci)" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center"><X class="w-4 h-4" /></button>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                <div>
                                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $t('Icon') }}</label>
                                                    <select v-model="channel.icon" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                        <option value="">{{ $t('Select Icon') }}</option>
                                                        <option v-for="(icon, li) in icons" :key="li" :value="icon">{{ icon }}</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">{{ $t('Color Theme') }}</label>
                                                    <select v-model="channel.theme" class="w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                                        <option value="primary">Primary</option>
                                                        <option value="blue">Blue</option>
                                                        <option value="purple">Purple</option>
                                                    </select>
                                                </div>
                                                <text-input v-model="channel.title" :label="$t('Title')" class="w-full" />
                                                <text-input v-model="channel.link_text" :label="$t('Link Text')" class="w-full" />
                                                <text-input v-model="channel.route" :label="$t('Route Name')" :placeholder="$t('e.g., ticket_open, contact, faq')" class="w-full" />
                                                <text-input v-model="channel.link" :label="$t('Custom Link (optional)')" :placeholder="$t('Overrides route when set, e.g. /contact')" class="w-full" />
                                                <div class="md:col-span-2">
                                                    <textarea-input v-model="channel.description" :rows="2" :label="$t('Description')" class="w-full" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                <!-- Form Footer -->
                <div class="px-8 py-6 bg-slate-50 dark:bg-slate-700/50 border-t border-slate-200 dark:border-slate-700 flex items-center justify-between">
                    <div class="text-sm text-slate-600 dark:text-slate-400">
                        {{ $t('Changes are saved automatically when you submit the form') }}
                    </div>
                    <div class="flex items-center space-x-3">
                        <button
                            type="button"
                            @click="resetForm"
                            class="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                        >
                            {{ $t('Reset') }}
                        </button>
                        <loading-button
                            :loading="form.processing"
                            class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                            type="submit"
                        >
                            {{ $t('Save Changes') }}
                        </loading-button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import { Link, Head } from '@inertiajs/vue3'
import Icon from '@/Shared/Icon.vue'
import Layout from '@/Shared/Layout.vue'
import Pagination from '@/Shared/Pagination.vue'
import TextInput from '@/Shared/TextInput.vue'
import SelectInput from '@/Shared/SelectInput.vue'
import LoadingButton from '@/Shared/LoadingButton.vue'
import TextareaInput from '@/Shared/TextareaInput.vue'
import {
    Eye,
    Plus,
    X,
    ImageIcon,
    MessageCircle,
    BarChart3,
    HelpCircle,
    Phone,
    Mail,
    Share2,
    Home,
    Settings,
    Star,
    LayoutGrid,
    Headphones
} from 'lucide-vue-next'
import axios from 'axios'
import { parsePageHtml } from '@/utils/parsePageHtml'

export default {
    metaInfo: { title: 'Home' },
    components: {
        Icon,
        Link,
        Head,
        Pagination,
        TextInput,
        SelectInput,
        LoadingButton,
        TextareaInput,
        Eye,
        Plus,
        X,
        ImageIcon,
        MessageCircle,
        BarChart3,
        HelpCircle,
        Phone,
        Mail,
        Share2,
        Home,
        Settings,
        Star,
        LayoutGrid,
        Headphones
    },
    layout: Layout,
    props: {
        page: Object,
    },
    remember: 'form',
    data() {
        return {
            icons: ['apple', 'book', 'cheveron-down', 'cheveron-right', 'location', 'office', 'shopping-cart', 'store-front', 'trash', 'service', 'category', 'status', 'ticket', 'contact', 'faq', 'chat', 'knowledge', 'home', 'clock', 'settings', 'dashboard', 'edit', 'up', 'down', 'tick', 'cross', 'close', 'file', 'users', 'all_users', 'types', 'notes', 'plus', 'dash', 'check', 'post', 'no_image', 'to_up', 'angle-up', 'gear', 'phone', 'email', 'user', 'security', 'airplay', 'compass', 'aperture', 'camera', 'palette', 'login', 'page', 'send', 'send_plan', 'user_role', 'global_setting', 'image', 'shield', 'zap', 'mail', 'help-circle', 'message-square', 'bar-chart', 'star', 'headphones', 'globe', 'lock', 'smartphone', 'search', 'bell', 'calendar'],
            tabs:[
                {'name': 'Settings', 'active': true, 'icon': 'Settings'},
                {'name': 'Hero Section', 'active': false, 'icon': 'Home'},
                {'name': 'Features', 'active': false, 'icon': 'Star'},
                {'name': 'Stats', 'active': false, 'icon': 'BarChart3'},
                {'name': 'Testimonials', 'active': false, 'icon': 'MessageCircle'},
                {'name': 'Trust Strip', 'active': false, 'icon': 'LayoutGrid'},
                {'name': 'Support Channels', 'active': false, 'icon': 'Headphones'},
            ],
            form: this.$inertia.form({
                title: 'Home',
                slug: 'home',
                is_active: this.page.is_active,
                html: parsePageHtml(this.page.html),
                // html: {'sections' : [
                //         {'title': 'Make your working process easier with <span>HelpDesk</span>', 'details': 'It\'s much easier now to create, assign, manage and resolve tickets with HelpDesk. You just need to host this web application on any hosting server of your choice and use it.', buttons: [
                //                 { 'text': 'Login HelpDesk', 'link': '/login', 'new_tab': 'on' },
                //                 { 'text': 'Submit ticket', 'link': '/ticket/open', 'new_tab': 'on' },
                //             ],
                //             'image' : null
                //         },
                //         {'title': 'How It Work ?', 'details': 'You can create a ticket with logged-in on the Dashboard as an existing user or create a ticket as a new user from this front page.',
                //             'title_2': 'You can do following with this HelpDesk', 'details_2': 'Manage tickets\n' +
                //                 'Chat with customers\n' +
                //                 'Manage your marketing contacts and organizations\n' +
                //                 'Manage your blog posts', buttons: [
                //                 { 'text': 'Login HelpDesk', 'link': '/login', 'new_tab': 'on' },
                //             ],
                //             'image' : null },
                //         {'enable_ticket_section': true},
                //         {'title': 'Have Question ? Get in touch!', 'details': 'Start working with HelpDesk that can provide everything you need to generate awareness, drive traffic, connect.', buttons: [
                //                 { 'text': 'Contact us', 'link': '/contact', 'new_tab': 'on' },
                //             ]},
                //     ]}
            }),
            heroImageUploading: false,
            heroImageError: '',
            heroImageMeta: { size: 0, type: '' },
            heroImageFile: null,
            heroImagePreviewUrl: '',
        }
    },
    methods: {
        async update() {
            this.heroImageError = ''

            if (this.heroImageFile) {
                this.form.processing = true
                this.heroImageUploading = true
                try {
                    const data = new FormData()
                    data.append('image', this.heroImageFile)
                    const response = await axios.post(this.route('upload.image'), data, {
                        headers: { 'Content-Type': 'multipart/form-data' }
                    })

                    if (response.data && response.data.image) {
                        this.form.html.sections[0].image = response.data.image
                        this.heroImageMeta.size = response.data.size || this.heroImageFile.size
                        this.heroImageMeta.type = response.data.mime || this.heroImageFile.type
                        this.heroImageFile = null
                        if (this.$refs.section0image) {
                            this.$refs.section0image.value = ''
                        }
                    } else {
                        this.heroImageError = this.$t('Image upload failed. Please try again.')
                        return
                    }
                } catch (error) {
                    this.heroImageError = this.getUploadErrorMessage(error)
                    return
                } finally {
                    this.form.processing = false
                    this.heroImageUploading = false
                }
            }

            this.form.put(this.route('front_pages.update', 'home'))
        },
    activeTab(index){
            for (const tab_item of this.tabs) {
                tab_item.active = false
            }
            this.tabs[index].active = true;
        },
        previewPage() {
            // Open the homepage in a new tab for preview
            window.open('/', '_blank');
        },
    resetForm() {
            // Reset form to original values
            this.form.html = parsePageHtml(this.page.html);
            this.initializeHomeSections();
            this.heroImageError = ''
            this.heroImageMeta = { size: 0, type: '' }
            this.heroImageFile = null
            if (this.heroImagePreviewUrl) {
                URL.revokeObjectURL(this.heroImagePreviewUrl)
            }
            this.heroImagePreviewUrl = ''
            if (this.$refs.section0image) {
                this.$refs.section0image.value = ''
            }
        },
    addSection(sectionType) {
            // Add new section based on type
            const newSection = this.getSectionTemplate(sectionType);
            this.form.html.sections.push(newSection);

            // Add new tab for the section
            this.tabs.push({
                name: this.getSectionName(sectionType),
                active: false,
                icon: this.getSectionIcon(sectionType)
            });
        },
        getSectionTemplate(type) {
            const templates = {
                testimonials: {
                    title: 'What Our Customers Say',
                    tagline: 'Testimonials',
                    details: 'Read what our satisfied customers have to say about our helpdesk solution.',
                    testimonials: [
                        {
                            name: 'John Doe',
                            company: 'ABC Company',
                            content: 'This helpdesk solution has transformed our customer support.',
                            rating: 5
                        }
                    ]
                },
                statistics: {
                    title: 'Our Impact',
                    tagline: 'Statistics',
                    details: 'Key metrics that showcase our success and reliability.',
                    stats: [
                        { label: 'Tickets Resolved', value: '10,000+', icon: 'tick' },
                        { label: 'Happy Customers', value: '500+', icon: 'users' },
                        { label: 'Response Time', value: '< 2 hours', icon: 'clock' }
                    ]
                },
                faq: {
                    title: 'Frequently Asked Questions',
                    tagline: 'FAQ',
                    details: 'Find answers to common questions about our helpdesk solution.',
                    faqs: [
                        {
                            question: 'How do I submit a ticket?',
                            answer: 'You can submit a ticket by clicking the "Submit Ticket" button on our homepage.'
                        }
                    ]
                },
                contact: {
                    title: 'Get In Touch',
                    tagline: 'Contact',
                    details: 'Reach out to us for any questions or support.',
                    email: 'support@example.com',
                    phone: '+1 (555) 123-4567',
                    address: '123 Support Street, Help City, HC 12345'
                },
                newsletter: {
                    title: 'Stay Updated',
                    tagline: 'Newsletter',
                    details: 'Subscribe to our newsletter for the latest updates and tips.',
                    placeholder: 'Enter your email address'
                },
                social: {
                    title: 'Follow Us',
                    tagline: 'Social Media',
                    details: 'Connect with us on social media for updates and support.',
                    links: [
                        { platform: 'Facebook', url: 'https://facebook.com', icon: 'facebook' },
                        { platform: 'Twitter', url: 'https://twitter.com', icon: 'twitter' }
                    ]
                }
            };
            return templates[type] || {};
        },
        getSectionName(type) {
            const names = {
                testimonials: 'Testimonials',
                statistics: 'Statistics',
                faq: 'FAQ',
                contact: 'Contact',
                newsletter: 'Newsletter',
                social: 'Social Media'
            };
            return names[type] || 'New Section';
        },
        getSectionIcon(type) {
            const icons = {
                testimonials: 'MessageCircle',
                statistics: 'BarChart3',
                faq: 'HelpCircle',
                contact: 'Phone',
                newsletter: 'Mail',
                social: 'Share2'
            };
            return icons[type] || 'Settings';
        },
        newButton(index){
            if(this.form.html.sections[index] && this.form.html.sections[index].buttons){
                this.form.html.sections[index].buttons.push({ text: '', link: '', new_tab: false })
            }
        },
        addFormBadge() {
            if (!Array.isArray(this.form.html.sections[2].form_badges)) {
                this.form.html.sections[2].form_badges = []
            }
            this.form.html.sections[2].form_badges.push('')
        },
        removeFormBadge(index) {
            if (Array.isArray(this.form.html.sections[2].form_badges)) {
                this.form.html.sections[2].form_badges.splice(index, 1)
            }
        },
        addHeroOverlay() {
            if (!Array.isArray(this.form.html.sections[0].hero_overlays)) {
                this.form.html.sections[0].hero_overlays = []
            }
            this.form.html.sections[0].hero_overlays.push({
                enabled: true,
                label: '',
                title: '',
                status: '',
                show_check: false,
            })
        },
        removeHeroOverlay(index) {
            if (Array.isArray(this.form.html.sections[0].hero_overlays)) {
                this.form.html.sections[0].hero_overlays.splice(index, 1)
            }
        },
        addTrustStripItem() {
            if (!this.form.html.sections[5].items) {
                this.form.html.sections[5].items = []
            }
            this.form.html.sections[5].items.push({ icon: 'clock', label: '', value: '', theme: 'primary' })
        },
        removeTrustStripItem(index) {
            if (this.form.html.sections[5].items) {
                this.form.html.sections[5].items.splice(index, 1)
            }
        },
        addSupportChannel() {
            if (!this.form.html.sections[6].channels) {
                this.form.html.sections[6].channels = []
            }
            this.form.html.sections[6].channels.push({
                icon: 'ticket',
                title: '',
                description: '',
                link_text: '',
                route: '',
                link: '',
                theme: 'primary',
            })
        },
        removeSupportChannel(index) {
            if (this.form.html.sections[6].channels) {
                this.form.html.sections[6].channels.splice(index, 1)
            }
        },
        newFeature(index){
            if(this.form.html.sections[index] && this.form.html.sections[index].features){
                this.form.html.sections[index].features.push({'icon': '', 'title': '', 'details': ''})
            }
        },
        newStat(index){
            if(this.form.html.sections[index] && this.form.html.sections[index].stats){
                this.form.html.sections[index].stats.push({ label: '', value: '', icon: '' })
            }
        },
        removeStat(si, index){
            if(this.form.html.sections[si] && this.form.html.sections[si].stats){
                this.form.html.sections[si].stats.splice(index, 1)
            }
        },
        newTestimonial(index){
            if(this.form.html.sections[index] && this.form.html.sections[index].testimonials){
                this.form.html.sections[index].testimonials.push({ name: '', company: '', content: '', rating: 5 })
            }
        },
        removeTestimonial(si, index){
            if(this.form.html.sections[si] && this.form.html.sections[si].testimonials){
                this.form.html.sections[si].testimonials.splice(index, 1)
            }
        },
        removeButton(si, index){
            if(this.form.html.sections[si] && this.form.html.sections[si].buttons){
                this.form.html.sections[si].buttons.splice(index, 1)
            }
        },
        removeFeature(si, index){
            if(this.form.html.sections[si] && this.form.html.sections[si].features){
                this.form.html.sections[si].features.splice(index, 1)
            }
        },
        addTrustIndicator(){
            if(!Array.isArray(this.form.html.sections[0].trust_indicators)){
                this.form.html.sections[0].trust_indicators = []
            }
            this.form.html.sections[0].trust_indicators.push('')
        },
        removeTrustIndicator(index){
            if(Array.isArray(this.form.html.sections[0].trust_indicators)){
                this.form.html.sections[0].trust_indicators.splice(index, 1)
            }
        },
        fileInputChange(e, index) {
            const selectedFiles = e.target.files;
            if (!selectedFiles || !selectedFiles.length) return;

            const file = selectedFiles[0];
            const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
            const maxFileSize = 10 * 1024 * 1024;
            this.heroImageError = '';

            if (!allowedTypes.includes(file.type)) {
                this.heroImageError = this.$t('Only JPG, PNG, WEBP, or GIF images are allowed.');
                return;
            }

            if (file.size > maxFileSize) {
                this.heroImageError = this.$t('Image size must be less than 10 MB.');
                return;
            }

            this.heroImageMeta = { size: file.size, type: file.type };
            this.heroImageFile = file;
            if (this.heroImagePreviewUrl) {
                URL.revokeObjectURL(this.heroImagePreviewUrl)
            }
            this.heroImagePreviewUrl = URL.createObjectURL(file)
            // Keep existing image untouched until Save is clicked.
            if (index !== 0) {
                this.form.html.sections[index].image = this.form.html.sections[index].image ?? null
            }
        },
        fileRemove(index) {
            this.form.html.sections[index].image = null
            this.heroImageError = ''
            this.heroImageMeta = { size: 0, type: '' }
            this.heroImageFile = null
            if (this.heroImagePreviewUrl) {
                URL.revokeObjectURL(this.heroImagePreviewUrl)
            }
            this.heroImagePreviewUrl = ''
            if (this.$refs.section0image) {
                this.$refs.section0image.value = ''
            }
        },
        getFileSize(size) {
            const i = Math.floor(Math.log(size) / Math.log(1024))
            return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
        },
        fileBrowse(index) {
            this.$refs['section'+index+'image'].click()
        },
        getImageSrc(path) {
            if (this.heroImagePreviewUrl) return this.heroImagePreviewUrl
            if (!path) return ''
            if (path.startsWith('http://') || path.startsWith('https://') || path.startsWith('/')) {
                return path
            }
            return `/images/${path}`
        },
        getUploadErrorMessage(error) {
            const message = error?.response?.data?.message
            const imageErrors = error?.response?.data?.errors?.image
            if (Array.isArray(imageErrors) && imageErrors.length > 0) {
                return imageErrors[0]
            }
            if (typeof message === 'string' && message.trim() !== '') {
                return message
            }
            if (error?.response?.status === 419) {
                return this.$t('Session expired. Please refresh the page and try again.')
            }
            return this.$t('Image upload failed. Please try again.')
        },
        initializeHomeSections() {
        this.form.html = parsePageHtml(this.form.html)

        for (let i = 0; i <= 6; i++) {
            if (!this.form.html.sections[i] || typeof this.form.html.sections[i] !== 'object') {
                this.form.html.sections[i] = {}
            }
        }

        this.form.html.sections.map((section, index)=>{
            if(section.buttons && section.buttons.length){
                for (let i = 0; i < section.buttons.length; i++){
                    section.buttons[i].new_tab = !!section.buttons[i].new_tab
                }
            }
            section.enable_ticket_section = !!section.enable_ticket_section
            section.login_require_create_ticket = !!section.login_require_create_ticket
            // Initialize enabled property for sections that need it
            if (index === 0 || index === 1 || index === 3 || index === 4 || index === 5 || index === 6) {
                section.enabled = section.enabled !== undefined ? !!section.enabled : true
            }
            return section
        })

        const s0 = this.form.html.sections[0]
        s0.kb_button = {
            enabled: s0.kb_button?.enabled !== false,
            text: s0.kb_button?.text || 'Browse Knowledge Base',
            link: s0.kb_button?.link || '/kb',
        }
        if (!Array.isArray(s0.hero_overlays)) {
            s0.hero_overlays = [
                { enabled: true, label: 'Live Queue', title: '12 tickets active', status: 'Healthy', show_check: false },
                { enabled: true, label: 'SLA Compliance', title: '99.2% this week', status: '', show_check: true },
            ]
        }
        this.form.html.sections[0] = s0

        const s2 = this.form.html.sections[2] || {}
        if (!Array.isArray(s2.form_badges)) {
            s2.form_badges = ['Secure Submission', 'Ticket Tracking', 'Email Updates']
        }
        this.form.html.sections[2] = s2

        // Ensure new sections exist to avoid undefined access in template
        if (!Array.isArray(this.form.html.sections)) {
            this.form.html.sections = []
        }

        // Index 3: Statistics section
        if (!this.form.html.sections[3]) {
            this.form.html.sections[3] = {
                title: 'Our Impact',
                tagline: 'Statistics',
                details: '',
                stats: []
            }
        } else {
            // Ensure required keys exist
            const s3 = this.form.html.sections[3]
            s3.title = s3.title ?? 'Our Impact'
            s3.tagline = s3.tagline ?? 'Statistics'
            s3.details = s3.details ?? ''
            s3.stats = Array.isArray(s3.stats) ? s3.stats : []
        }

        // Index 4: Testimonials section
        if (!this.form.html.sections[4]) {
            this.form.html.sections[4] = {
                title: 'What Our Customers Say',
                tagline: 'Testimonials',
                details: '',
                testimonials: []
            }
        } else {
            const s4 = this.form.html.sections[4]
            s4.title = s4.title ?? 'What Our Customers Say'
            s4.tagline = s4.tagline ?? 'Testimonials'
            s4.details = s4.details ?? ''
            s4.testimonials = Array.isArray(s4.testimonials) ? s4.testimonials : []
        }

        // Index 5: Trust strip
        if (!this.form.html.sections[5]) {
            this.form.html.sections[5] = {
                enabled: true,
                items: [
                    { icon: 'clock', label: 'Average First Response', value: '< 2 Hours', theme: 'primary' },
                    { icon: 'shield', label: 'Reliability', value: 'Secure & Auditable', theme: 'emerald' },
                    { icon: 'zap', label: 'Automation Ready', value: 'Smart Ticket Routing', theme: 'blue' },
                    { icon: 'users', label: 'Built For Teams', value: 'Agent + Customer Portal', theme: 'purple' },
                ],
            }
        } else {
            const s5 = this.form.html.sections[5]
            s5.enabled = s5.enabled !== undefined ? !!s5.enabled : true
            s5.items = Array.isArray(s5.items) ? s5.items : []
        }

        // Index 6: Support channels
        if (!this.form.html.sections[6]) {
            this.form.html.sections[6] = {
                enabled: true,
                title: 'Choose Your Support Channel',
                subtitle: 'Give your customers multiple ways to reach your team and resolve issues quickly.',
                channels: [
                    { icon: 'ticket', title: 'Open A Ticket', description: 'Structured issue reporting with status tracking, attachments, and notifications.', link_text: 'Start secure submission', route: 'ticket_open', link: '', theme: 'primary' },
                    { icon: 'mail', title: 'Contact Team', description: 'For sales, onboarding, or support questions that need guided consultation.', link_text: 'Connect with experts', route: 'contact', link: '', theme: 'blue' },
                    { icon: 'help-circle', title: 'Self-Service FAQ', description: 'Enable users to solve common issues instantly with curated help content.', link_text: 'Resolve faster with docs', route: 'faq', link: '', theme: 'purple' },
                ],
            }
        } else {
            const s6 = this.form.html.sections[6]
            s6.enabled = s6.enabled !== undefined ? !!s6.enabled : true
            s6.title = s6.title ?? 'Choose Your Support Channel'
            s6.subtitle = s6.subtitle ?? ''
            s6.channels = Array.isArray(s6.channels) ? s6.channels : []
        }
        },
    },
    created() {
        this.initializeHomeSections()
    },
}
</script>
