<template>
    <Teleport to="body">
        <Transition name="drawer">
            <div
                v-if="visible"
                class="fixed inset-0 z-[999999] overflow-hidden"
                @click="handleClose"
            >
                <!-- Backdrop -->
                <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>

                <!-- Drawer -->
                <div
                    class="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl flex flex-col"
                    @click.stop
                >
                    <!-- Header -->
                    <div
                        class="flex items-center justify-between px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-primary-50 via-purple-50 to-white">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-100 to-purple-100 flex items-center justify-center">
                                <AppIcon name="gift-line" size="md" class="text-primary-600"/>
                            </div>
                            <div>
                                <h2 class="text-lg font-semibold text-gray-900 m-0">What's New & Coming</h2>
                                <p class="text-xs text-gray-600 m-0">Latest release & exciting roadmap ahead</p>
                            </div>
                        </div>
                        <button
                            type="button"
                            class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                            @click="handleClose"
                            aria-label="Close"
                        >
                            <AppIcon name="close-line" size="md" class="text-gray-500"/>
                        </button>
                    </div>

                    <!-- Content -->
                    <div class="flex-1 overflow-y-auto px-6 py-4">
                        <div class="space-y-6">
                            <div
                                v-for="(item, index) in changelogs"
                                :key="index"
                                class="relative"
                            >
                                <!-- Timeline dot -->
                                <div
                                    v-if="index < changelogs.length - 1"
                                    class="absolute left-[15px] top-10 bottom-0 w-px bg-gray-200"
                                ></div>

                                <div class="flex gap-4">
                                    <!-- Icon -->
                                    <div class="flex-shrink-0">
                                        <div
                                            class="w-8 h-8 rounded-full flex items-center justify-center"
                                            :class="getTypeClass(item.type)"
                                        >
                                            <AppIcon :name="getTypeIcon(item.type)" size="sm" class="text-white"/>
                                        </div>
                                    </div>

                                    <!-- Content -->
                                    <div class="flex-1 pb-6">
                                        <div
                                            class="rounded-lg p-4 border transition-colors"
                                            :class="item.type === 'upcoming'
                        ? 'bg-purple-50/50 border-purple-100 hover:border-purple-200'
                        : 'bg-gray-50 border-gray-100 hover:border-gray-200'"
                                        >
                                            <!-- Version & Date -->
                                            <div class="flex items-center justify-between mb-2">
                        <span
                            class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold"
                            :class="item.type === 'upcoming'
                            ? 'bg-purple-100 text-purple-700'
                            : 'bg-primary-100 text-primary-700'"
                        >
                          v{{ item.version }}
                        </span>
<!--                                                <span-->
<!--                                                    class="text-xs"-->
<!--                                                    :class="item.type === 'upcoming' ? 'text-purple-500 font-medium' : 'text-gray-500'"-->
<!--                                                >-->
<!--                          {{ item.date }}-->
<!--                        </span>-->
                                            </div>

                                            <!-- Title -->
                                            <h3
                                                class="text-sm font-semibold mb-2 m-0"
                                                :class="item.type === 'upcoming' ? 'text-purple-900' : 'text-gray-900'"
                                            >
                                                {{ item.title }}
                                            </h3>

                                            <!-- Description -->
                                            <p
                                                class="text-sm mb-3 m-0 leading-relaxed"
                                                :class="item.type === 'upcoming' ? 'text-purple-700' : 'text-gray-600'"
                                            >
                                                {{ item.description }}
                                            </p>

                                            <!-- Changes List -->
                                            <ul v-if="item.changes && item.changes.length" class="space-y-1.5">
                                                <li
                                                    v-for="(change, changeIndex) in item.changes"
                                                    :key="changeIndex"
                                                    class="flex items-start gap-2 text-sm"
                                                    :class="item.type === 'upcoming' ? 'text-purple-600' : 'text-gray-700'"
                                                >
                                                    <AppIcon
                                                        :name="getChangeIcon(change.type)"
                                                        size="sm"
                                                        :class="getChangeIconColor(change.type)"
                                                        class="flex-shrink-0 mt-0.5"
                                                    />
                                                    <span>{{ change.text }}</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Empty State -->
                        <div v-if="!changelogs.length" class="text-center py-12">
                            <div
                                class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                                <AppIcon name="file-list-line" size="lg" class="text-gray-400"/>
                            </div>
                            <p class="text-gray-500 text-sm">No changelog available yet</p>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="px-6 py-4 border-t border-gray-200 bg-gradient-to-r from-gray-50 to-purple-50">
                        <div class="flex items-center justify-between text-xs">
                            <div class="flex items-center gap-2">
                <span class="text-gray-600">
                  {{
                        changelogs.filter(c => c.type !== 'upcoming').length
                    }} release{{ changelogs.filter(c => c.type !== 'upcoming').length !== 1 ? 's' : '' }}
                </span>
                                <span class="text-gray-400">•</span>
                                <span class="text-purple-600 font-medium">
                  {{ changelogs.filter(c => c.type === 'upcoming').length }} upcoming
                </span>
                            </div>
                            <a
                                href="#"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 no-underline"
                            >
                                View roadmap
                                <AppIcon name="external-link-line" size="xs"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script setup>
import { ref, watch } from 'vue'
import AppIcon from './Icon.vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:modelValue'])

const visible = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
})

const handleClose = () => {
    visible.value = false
    emit('update:modelValue', false)
}

// Changelog data - current release + upcoming features
const changelogs = ref([
        {
            version: '1.0.0',
            date: 'December 1, 2025',
            type: 'release',
            title: '🎉 Initial Launch',
            description: 'Initial public release of Zeno Chatbot with core AI-powered chatbot functionality for WordPress.',
            changes: [
                { type: 'new', text: 'Initial chatbot launch' }
            ]
        },
        {
            version: '1.1.0',
            date: 'December 25, 2025',
            type: 'release',
            title: 'Saved Replies & Language Support',
            description: 'Enhancements focused on efficiency, smarter replies, and broader language coverage.',
            changes: [
                { type: 'new', text: 'Saved Replies feature' },
                { type: 'new', text: 'Semantic matching algorithm for Saved Replies' },
                { type: 'new', text: 'Advanced analytics dashboard for Saved Replies' },
                { type: 'new', text: 'Language support' },
                { type: 'fix', text: 'Fixed Gemini API empty response issue' }
            ]
        },
        {
            version: '1.2.0',
            date: 'Planned',
            type: 'upcoming',
            title: 'Advanced Knowledge Base Integration',
            description: 'Train your chatbot using custom documents with smarter indexing and relevance scoring.',
            changes: [
                { type: 'upcoming', text: 'Upload and train chatbot with custom documents (PDF, DOCX, TXT)' },
                { type: 'upcoming', text: 'Content priority and relevance scoring' },
                { type: 'upcoming', text: 'Real-time content indexing and updates' }
            ]
        },
        {
            version: '1.3.0',
            date: 'Planned',
            type: 'upcoming',
            title: 'Enhanced Analytics & Insights',
            description: 'Advanced conversation intelligence with analytics, sentiment, and reporting.',
            changes: [
                { type: 'upcoming', text: 'Vector-based semantic search' },
                { type: 'upcoming', text: 'Sentiment and intent analysis' },
                { type: 'upcoming', text: 'Conversion tracking and popular topic dashboard' },
                { type: 'upcoming', text: 'Real-time analytics and report export (CSV, PDF)' }
            ]
        },
        {
            version: '1.4.0',
            date: 'Planned',
            type: 'upcoming',
            title: 'Multilingual Support & Localization',
            description: 'Full multilingual experience with automatic language detection and localization.',
            changes: [
                { type: 'upcoming', text: 'Auto-detect and respond in the visitor’s language' },
                { type: 'upcoming', text: 'Support for 50+ languages including RTL (Right-to-Left)' },
                { type: 'upcoming', text: 'Custom translations for widget UI' },
                { type: 'upcoming', text: 'Language-specific AI model selection' }
            ]
        }
    ]
)

// Helper functions for styling
const getTypeClass = (type) => {
    const classes = {
        feature: 'bg-blue-500',
        improvement: 'bg-green-500',
        fix: 'bg-orange-500',
        upcoming: 'bg-purple-400'
    }
    return classes[type] || 'bg-gray-500'
}

const getTypeIcon = (type) => {
    const icons = {
        feature: 'star-fill',
        improvement: 'arrow-up-circle-fill',
        fix: 'tools-fill',
        upcoming: 'time-line'
    }
    return icons[type] || 'checkbox-circle-fill'
}

const getChangeIcon = (type) => {
    const icons = {
        new: 'add-circle-line',
        improved: 'arrow-up-line',
        fixed: 'checkbox-circle-line',
        upcoming: 'time-line'
    }
    return icons[type] || 'checkbox-circle-line'
}

const getChangeIconColor = (type) => {
    const colors = {
        new: 'text-blue-600',
        improved: 'text-green-600',
        fixed: 'text-orange-600',
        upcoming: 'text-purple-500'
    }
    return colors[type] || 'text-gray-600'
}
</script>

<style scoped>
/* Drawer transition */
.drawer-enter-active,
.drawer-leave-active {
    transition: opacity 0.3s ease;
}

.drawer-enter-active > div:last-child,
.drawer-leave-active > div:last-child {
    transition: transform 0.3s ease;
}

.drawer-enter-from,
.drawer-leave-to {
    opacity: 0;
}

.drawer-enter-from > div:last-child,
.drawer-leave-to > div:last-child {
    transform: translateX(100%);
}

/* Custom scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
</style>

