<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { dataService } from '../services/dataService'
import { aiService } from '../services/aiService'
import Button from 'primevue/button'
import Textarea from 'primevue/textarea'
import InputText from 'primevue/inputtext'
import Dialog from 'primevue/dialog'
import Checkbox from 'primevue/checkbox'
import Dropdown from 'primevue/dropdown'
import MultiSelect from 'primevue/multiselect'
import ProgressSpinner from 'primevue/progressspinner'
import ProgressBar from 'primevue/progressbar'
import Message from 'primevue/message'

import Skeleton from 'primevue/skeleton'
import { useAlbumStore } from '../stores/albums'

const router = useRouter()
const API_URL = import.meta.env.VITE_API_URL
const albumStore = useAlbumStore()

// --- State ---
const prompt = ref('')
const selectedCharacter = ref(null)
const selectedAssets = ref([])
// Album Picker State
const isAlbumPickerVisible = ref(false)
const generationToAdd = ref(null)
const selectedAlbumForAdd = ref(null)
// Asset Picker State
const isAssetPickerVisible = ref(false)
const assetPickerTab = ref('all') // 'all', 'uploaded', 'generated'
const modalAssets = ref([])
const isModalLoading = ref(false)
const tempSelectedAssets = ref([])
const quality = ref({ key: 'TWOK', value: '2K' })
const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
const sendToTelegram = ref(false)
const telegramId = ref('')
const isTelegramIdSaved = ref(false)
const useProfileImage = ref(true)
const isImprovingPrompt = ref(false)
const previousPrompt = ref('')

const characters = ref([])
const allAssets = ref([])
const historyGenerations = ref([])
const historyTotal = ref(0)
const historyRows = ref(50)
const historyFirst = ref(0)

const isSettingsVisible = ref(false)
const isSubmitting = ref(false)
const activeOverlayId = ref(null) // For mobile tap-to-show overlay

// Options
const qualityOptions = ref([
    { key: 'ONEK', value: '1K' },
    { key: 'TWOK', value: '2K' },
    { key: 'FOURK', value: '4K' }
])
const aspectRatioOptions = ref([
    { key: "NINESIXTEEN", value: "9:16" },
    { key: "FOURTHREE", value: "4:3" },
    { key: "THREEFOUR", value: "3:4" },
    { key: "SIXTEENNINE", value: "16:9" }
])

// --- Persistence ---
const STORAGE_KEY = 'flexible_gen_settings'

const saveSettings = () => {
    const settings = {
        prompt: prompt.value,
        selectedCharacterId: selectedCharacter.value?.id,
        selectedAssetIds: selectedAssets.value.map(a => a.id),
        quality: quality.value,
        aspectRatio: aspectRatio.value,
        sendToTelegram: sendToTelegram.value,
        telegramId: telegramId.value,
        useProfileImage: useProfileImage.value
    }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))

    // Also save Telegram ID separately as it's used elsewhere
    if (telegramId.value) {
        localStorage.setItem('telegram_id', telegramId.value)
        isTelegramIdSaved.value = true
    }
}

const restoreSettings = () => {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) {
        try {
            const settings = JSON.parse(stored)
            prompt.value = settings.prompt || ''

            // We need characters and assets loaded to fully restore objects
            // For now, we'll store IDs and restore in loadData
            if (settings.quality) quality.value = settings.quality
            if (settings.aspectRatio) aspectRatio.value = settings.aspectRatio
            sendToTelegram.value = settings.sendToTelegram || false
            telegramId.value = settings.telegramId || localStorage.getItem('telegram_id') || ''
            if (telegramId.value) isTelegramIdSaved.value = true
            if (settings.useProfileImage !== undefined) useProfileImage.value = settings.useProfileImage

            return settings // Return to use in loadData
        } catch (e) {
            console.error('Failed to parse settings', e)
        }
    }
    return null
}

// Watchers for auto-save
watch([prompt, selectedCharacter, selectedAssets, quality, aspectRatio, sendToTelegram, telegramId, useProfileImage], () => {
    saveSettings()
}, { deep: true })


// --- Data Loading ---
const loadData = async () => {
    try {
        const [charsRes, assetsRes, historyRes] = await Promise.all([
            dataService.getCharacters(), // Assuming this exists and returns list
            dataService.getAssets(100, 0, 'all'), // Load a batch of assets
            aiService.getGenerations(historyRows.value, historyFirst.value)
        ])

        // Characters
        characters.value = charsRes || []

        // Assets
        if (assetsRes && assetsRes.assets) {
            allAssets.value = assetsRes.assets
        } else {
            allAssets.value = Array.isArray(assetsRes) ? assetsRes : []
        }

        // History
        if (historyRes && historyRes.generations) {
            historyGenerations.value = historyRes.generations
            historyTotal.value = historyRes.total_count || 0

            // Resume polling for unfinished generations
            // Resume polling for unfinished generations
            const threeMinutesAgo = Date.now() - 3 * 60 * 1000

            historyGenerations.value.forEach(gen => {
                const status = gen.status ? gen.status.toLowerCase() : ''
                const isActive = ['processing', 'starting', 'running'].includes(status)

                let isRecent = true
                if (gen.created_at) {
                    // Force UTC if missing timezone info (simple heuristic)
                    let timeStr = gen.created_at
                    if (timeStr.indexOf('Z') === -1 && timeStr.indexOf('+') === -1) {
                        timeStr += 'Z'
                    }
                    const createdTime = new Date(timeStr).getTime()
                    if (!isNaN(createdTime)) {
                        isRecent = createdTime > threeMinutesAgo
                    }
                }

                if (isActive && isRecent) {
                    pollGeneration(gen.id)
                }
            })
        } else {
            historyGenerations.value = Array.isArray(historyRes) ? historyRes : []
            historyTotal.value = historyGenerations.value.length
        }

        // Restore complex objects from IDs
        const savedSettings = restoreSettings()
        if (savedSettings) {
            if (savedSettings.selectedCharacterId) {
                selectedCharacter.value = characters.value.find(c => c.id === savedSettings.selectedCharacterId) || null
            }
            if (savedSettings.selectedAssetIds && savedSettings.selectedAssetIds.length > 0) {
                // Determine which assets to select. 
                // Note: saved assets might not be in the first 100 loaded. 
                // For a robust implementation, we might need to fetch specific assets if not found.
                // For now, we filter from available.
                selectedAssets.value = allAssets.value.filter(a => savedSettings.selectedAssetIds.includes(a.id))
            }
        }

    } catch (e) {
        console.error('Failed to load data', e)
    }
}

const refreshHistory = async () => {
    try {
        const response = await aiService.getGenerations(historyRows.value, 0)
        if (response && response.generations) {
            // Update existing items and add new ones at the top
            const newGenerations = []
            for (const gen of response.generations) {
                const existingIndex = historyGenerations.value.findIndex(g => g.id === gen.id)
                if (existingIndex !== -1) {
                    // Update existing item in place to preserve state/reactivity
                    // Only update if not currently polling to avoid race conditions, 
                    // or just update fields that might change
                    const existing = historyGenerations.value[existingIndex]
                    if (!['processing', 'starting', 'running'].includes(existing.status)) {
                        Object.assign(existing, gen)
                    }
                } else {
                    newGenerations.push(gen)
                }
            }

            // Add completely new items to the start of the list
            if (newGenerations.length > 0) {
                historyGenerations.value = [...newGenerations, ...historyGenerations.value]
            }

            historyTotal.value = response.total_count || historyTotal.value
        }
    } catch (e) {
        console.error('Failed to refresh history', e)
    }
}


// --- Generation ---
const handleGenerate = async () => {
    if (!prompt.value.trim()) return

    if (sendToTelegram.value && !telegramId.value) {
        alert("Please enter your Telegram ID")
        return
    }

    isSubmitting.value = true

    // Close settings to show gallery/progress (optional preference)
    // isSettingsVisible.value = false 

    try {
        const payload = {
            aspect_ratio: aspectRatio.value.key,
            quality: quality.value.key,
            prompt: prompt.value,
            assets_list: selectedAssets.value.map(a => a.id),
            linked_character_id: selectedCharacter.value?.id || null,
            telegram_id: sendToTelegram.value ? telegramId.value : null,
            use_profile_image: selectedCharacter.value ? useProfileImage.value : false
        }

        const response = await aiService.runGeneration(payload)

        if (response && response.id) {
            // Create optimistic generation items
            // If response is the full generation object, use it. 
            // If it's just { id: '...' }, create a placeholder.
            // aiService.runGeneration returns response.data. 

            const newGen = {
                id: response.id,
                prompt: prompt.value,
                status: 'starting',
                created_at: new Date().toISOString(),
                // Add other fields as necessary for display
            }

            // Add to history immediately
            historyGenerations.value.unshift(newGen)
            historyTotal.value++

            // Start polling
            pollGeneration(response.id)

            // Clear prompt if desired, or keep for reuse
            // prompt.value = '' 
        }
    } catch (e) {
        console.error('Generation failed', e)
        // Ideally show a toast error here
        alert(e.message || 'Generation failed to start')
    } finally {
        isSubmitting.value = false
    }
}

const pollGeneration = async (id) => {
    let completed = false
    let attempts = 0
    // Find the generation object in our list to update it specifically
    const genIndex = historyGenerations.value.findIndex(g => g.id === id)
    if (genIndex === -1) return // Should not happen if we just added it

    const gen = historyGenerations.value[genIndex]

    while (!completed) {
        try {
            const response = await aiService.getGenerationStatus(id)

            // Update the object in the list
            // We use Object.assign to keep the reactive reference valid
            Object.assign(gen, response)

            if (response.status === 'done' || response.status === 'failed') {
                completed = true
            } else {
                // Exponential backoff or fixed interval
                await new Promise(resolve => setTimeout(resolve, 2000))
            }
        } catch (e) {
            console.error(`Polling failed for ${id}`, e)
            attempts++
            if (attempts > 3) {
                completed = true
                gen.status = 'failed'
                gen.failed_reason = 'Polling connection lost'
            }
            await new Promise(resolve => setTimeout(resolve, 5000))
        }
    }
}

// --- Infinite Scroll ---
const isHistoryLoading = ref(false)
const infiniteScrollTrigger = ref(null)
let observer = null

const setupInfiniteScroll = () => {
    observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !isHistoryLoading.value && historyGenerations.value.length < historyTotal.value) {
            loadMoreHistory()
        }
    }, {
        root: null,
        rootMargin: '100px',
        threshold: 0.1
    })

    if (infiniteScrollTrigger.value) {
        observer.observe(infiniteScrollTrigger.value)
    }
}

const loadMoreHistory = async () => {
    if (isHistoryLoading.value) return
    isHistoryLoading.value = true

    try {
        const nextOffset = historyGenerations.value.length
        const response = await aiService.getGenerations(historyRows.value, nextOffset)

        if (response && response.generations) {
            const newGenerations = response.generations.filter(gen =>
                !historyGenerations.value.some(existing => existing.id === gen.id)
            )
            historyGenerations.value.push(...newGenerations)
            historyTotal.value = response.total_count || historyTotal.value
        }
    } catch (e) {
        console.error('Failed to load more history', e)
    } finally {
        isHistoryLoading.value = false
    }
}

// --- Initial Load ---
onMounted(() => {
    loadData().then(() => {
        // slight delay to allow DOM render
        setTimeout(setupInfiniteScroll, 500)
    })
    isSettingsVisible.value = true
})

// --- Sidebar Logic (Duplicated for now) ---
// handleLogout removed - handled in AppSidebar

// Image Preview
const isImagePreviewVisible = ref(false)
const previewImage = ref(null)
const openImagePreview = (url) => {
    previewImage.value = { url }
    isImagePreviewVisible.value = true
}

const reusePrompt = (gen) => {
    if (gen.prompt) {
        prompt.value = gen.prompt
        isSettingsVisible.value = true
    }
}

const reuseAsset = (gen) => {
    const assetIds = gen.assets_list || []
    if (assetIds.length > 0) {
        // We need to find these assets in allAssets to get full objects for MultiSelect
        // If not loaded, we might need value to just be objects with ID and URL (MultiSelect supports object value)
        // Let's try to map what we can
        const assets = assetIds.map(id => {
            const found = allAssets.value.find(a => a.id === id)
            if (found) return found
            return { id, url: `/assets/${id}`, name: 'Asset ' + id.substring(0, 4) }
        })
        selectedAssets.value = assets
        isSettingsVisible.value = true
    }
}

const useResultAsAsset = (gen) => {
    if (gen.result_list && gen.result_list.length > 0) {
        const resultId = gen.result_list[0]
        const asset = {
            id: resultId,
            url: `/assets/${resultId}`,
            name: 'Gen ' + gen.id.substring(0, 4)
        }

        // Replace existing selection or add? User said "automatically replaced the attached asset". so Replace.
        selectedAssets.value = [asset]
        isSettingsVisible.value = true
    }
}

const handleImprovePrompt = async () => {
    if (!prompt.value || prompt.value.length <= 10) return
    isImprovingPrompt.value = true
    try {
        const linkedAssetIds = selectedAssets.value.map(a => a.id)
        const response = await aiService.improvePrompt(prompt.value, linkedAssetIds)
        if (response && response.prompt) {
            previousPrompt.value = prompt.value
            prompt.value = response.prompt
        }
    } catch (e) {
        console.error('Prompt improvement failed', e)
    } finally {
        isImprovingPrompt.value = false
    }
}

const undoImprovePrompt = () => {
    if (previousPrompt.value) {
        const temp = prompt.value
        prompt.value = previousPrompt.value
        previousPrompt.value = temp
    }
}

const clearPrompt = () => {
    prompt.value = ''
    previousPrompt.value = ''
}

const deleteGeneration = async (gen) => {
    if (!gen) return
    try {
        // Optimistic update
        historyGenerations.value = historyGenerations.value.filter(g => g.id !== gen.id)
        historyTotal.value--

        // Use deleteAsset since generations are essentially assets in this view's context, 
        // or we need a way to delete the generation record. 
        // The user said "delete asset", and these are likely linked.
        // If gen has a result list, we delete the first asset.

        await dataService.deleteGeneration(gen.id)

    } catch (e) {
        console.error('Failed to delete generation', e)
        // Reload to restore state if failed
        loadData()
    }
}

const toggleMobileOverlay = (id) => {
    // Only for touch/small screens if needed, or just general tap behavior
    if (activeOverlayId.value === id) {
        activeOverlayId.value = null
    } else {
        activeOverlayId.value = id
    }
}

// --- Asset Picker Logic ---

const loadModalAssets = async () => {
    isModalLoading.value = true
    try {
        const typeParam = assetPickerTab.value === 'all' ? undefined : assetPickerTab.value
        // Use a larger limit for the modal or implement scrolling/pagination if needed. 
        // For now, 100 should be enough for a demo, or we can add pagination later.
        const response = await dataService.getAssets(100, 0, typeParam)

        if (response && response.assets) {
            modalAssets.value = response.assets
        } else {
            modalAssets.value = Array.isArray(response) ? response : []
        }
    } catch (e) {
        console.error('Failed to load modal assets', e)
        modalAssets.value = []
    } finally {
        isModalLoading.value = false
    }
}

const openAssetPicker = () => {
    tempSelectedAssets.value = [...selectedAssets.value]
    isAssetPickerVisible.value = true
    loadModalAssets()
}

const toggleAssetSelection = (asset) => {
    const index = tempSelectedAssets.value.findIndex(a => a.id === asset.id)
    if (index === -1) {
        tempSelectedAssets.value.push(asset)
    } else {
        tempSelectedAssets.value.splice(index, 1)
    }
}

const confirmAssetSelection = () => {
    selectedAssets.value = [...tempSelectedAssets.value]
    isAssetPickerVisible.value = false
}

const removeAsset = (asset) => {
    selectedAssets.value = selectedAssets.value.filter(a => a.id !== asset.id)
}

watch(assetPickerTab, () => {
    if (isAssetPickerVisible.value) {
        loadModalAssets()
    }
})

// --- Asset Upload in Picker ---
const assetPickerFileInput = ref(null)

const triggerAssetPickerUpload = () => {
    assetPickerFileInput.value?.click()
}

const handleAssetPickerUpload = async (event) => {
    const target = event.target
    if (target.files && target.files[0]) {
        const file = target.files[0]
        try {
            isModalLoading.value = true
            await dataService.uploadAsset(file)

            // Switch tab to 'uploaded' and reload
            assetPickerTab.value = 'uploaded'
            loadModalAssets()

        } catch (e) {
            console.error('Failed to upload asset', e)
        } finally {
            isModalLoading.value = false
            target.value = ''
        }
    }
}

// --- Album Picker Logic ---
const openAlbumPicker = (gen) => {
    generationToAdd.value = gen
    isAlbumPickerVisible.value = true
    albumStore.fetchAlbums() // Fetch albums when opening picker
}

const confirmAddToAlbum = async () => {
    if (!generationToAdd.value || !selectedAlbumForAdd.value) return

    try {
        await albumStore.addGenerationToAlbum(selectedAlbumForAdd.value.id, generationToAdd.value.id)
        isAlbumPickerVisible.value = false
        selectedAlbumForAdd.value = null
        generationToAdd.value = null
        // Optional: Show success toast
    } catch (e) {
        console.error('Failed to add to album', e)
    }
}
</script>

<template>
    <div class="flex flex-col h-full font-sans">
        <main class="flex-1 relative flex flex-col h-full overflow-hidden">
            <header
                class="p-4 flex justify-between items-center z-10 border-b border-white/5 bg-slate-900/80 backdrop-blur-sm">
                <div class="flex items-center gap-3">
                    <h1
                        class="text-xl font-bold bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent m-0">
                        Gallery</h1>

                    <span class="text-xs text-slate-500 border-l border-white/10 pl-3">History</span>
                </div>
                <div class="flex items-center gap-2">
                    <Button icon="pi pi-refresh" @click="refreshHistory" rounded text
                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8 md:hidden" />
                    <Button icon="pi pi-cog" @click="isSettingsVisible = true" rounded text
                        class="!text-slate-400 hover:!bg-white/10 !w-8 !h-8" v-if="!isSettingsVisible" />
                </div>
            </header>

            <div class="flex-1 overflow-y-auto p-4"
                :class="{ 'pb-[300px]': isSettingsVisible, 'pb-32': !isSettingsVisible }">
                <div v-if="historyGenerations.length > 0"
                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 gap-2 md:gap-1">
                    <div v-for="gen in historyGenerations" :key="gen.id"
                        class="aspect-[9/16] relative group overflow-hidden bg-slate-800 transition-all duration-300"
                        @click="toggleMobileOverlay(gen.id)">

                        <img v-if="gen.result_list && gen.result_list.length > 0"
                            :src="API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true'"
                            class="w-full h-full object-cover cursor-pointer"
                            @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />

                        <div v-else-if="gen.status === 'failed'"
                            class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
                            <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
                            <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
                            <span v-if="gen.failed_reason"
                                class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
                                v-tooltip.top="gen.failed_reason">{{ gen.failed_reason }}</span>
                        </div>

                        <div v-else-if="['processing', 'starting', 'running'].includes(gen.status)"
                            class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20 group">
                            <!-- Shimmer Background -->
                            <div
                                class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
                            </div>

                            <!-- Moving Highlight -->
                            <div
                                class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
                            </div>

                            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
                            <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ gen.status
                            }}...</span>
                            <span v-if="gen.progress"
                                class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
                                    gen.progress }}%</span>
                        </div>

                        <div v-else class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
                            <i class="pi pi-image text-4xl opacity-20"></i>
                        </div>

                        <div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
                            :class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== gen.id, 'opacity-100': activeOverlayId === gen.id }">

                            <div
                                class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
                                <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
                                    class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
                                    @click.stop="deleteGeneration(gen)" />

                                <div class="flex flex-col items-center gap-0.5 pointer-events-none">
                                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
                                        gen.cost }} $</span>
                                    <span v-if="gen.execution_time_seconds"
                                        class="text-[8px] text-slate-500 font-mono">{{
                                            gen.execution_time_seconds.toFixed(1) }}s</span>
                                </div>

                                <div class="flex gap-1">
                                    <Button v-if="gen.result_list && gen.result_list.length > 0" icon="pi pi-pencil"
                                        v-tooltip.left="'Edit (Use Result)'"
                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                        @click.stop="useResultAsAsset(gen)" />
                                    <Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
                                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
                                        @click.stop="openAlbumPicker(gen)" />
                                </div>
                            </div>

                            <!-- Centered View Button -->
                            <div v-if="gen.result_list && gen.result_list.length > 0"
                                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
                                <Button icon="pi pi-eye" rounded text
                                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
                                    @click.stop="openImagePreview(API_URL + '/assets/' + gen.result_list[0])" />
                            </div>

                            <div
                                class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
                                <div class="flex gap-1 mb-1">
                                    <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
                                        @click.stop="reusePrompt(gen)" />
                                    <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
                                        class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
                                        @click.stop="reuseAsset(gen)" />
                                </div>
                                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ gen.prompt }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-else-if="!isSubmitting && historyGenerations.length === 0"
                    class="flex flex-col items-center justify-center h-full text-slate-600 opacity-50">
                    <i class="pi pi-images text-6xl mb-4"></i>
                    <p class="text-xl">Your creations will appear here</p>
                </div>

                <!-- Infinite Scroll Sentinel & Loading Indicator -->
                <div ref="infiniteScrollTrigger" class="w-full py-4 flex justify-center items-center min-h-[50px]">
                    <i v-if="isHistoryLoading" class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
                    <span v-else-if="historyGenerations.length > 0 && historyGenerations.length >= historyTotal"
                        class="text-slate-600 text-xs">
                        All items loaded
                    </span>
                </div>
            </div>

            <div v-if="isSettingsVisible"
                class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[98%] max-w-6xl glass-panel border border-white/10 bg-slate-900/95 backdrop-blur-xl p-4 z-[60] !rounded-[2.5rem] shadow-2xl flex flex-col gap-3 max-h-[85vh] overflow-y-auto">

                <div class="w-full flex justify-center -mt-2 mb-2 cursor-pointer" @click="isSettingsVisible = false">
                    <div class="w-16 h-1 bg-white/20 rounded-full hover:bg-white/40 transition-colors"></div>
                </div>

                <div class="flex flex-col lg:flex-row gap-8">
                    <div class="flex-1 flex flex-col gap-4">
                        <div class="flex flex-col gap-2">
                            <div class="flex justify-between items-center">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Prompt</label>
                                <div class="flex gap-1">
                                    <Button v-if="previousPrompt" icon="pi pi-undo"
                                        class="!p-1 !w-6 !h-6 !text-[10px] !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-300"
                                        @click="undoImprovePrompt" v-tooltip.top="'Undo'" />
                                    <Button icon="pi pi-sparkles" label="Improve" :loading="isImprovingPrompt"
                                        :disabled="!prompt || prompt.length <= 10"
                                        class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-violet-600/20 hover:!bg-violet-600/30 !border-violet-500/30 !text-violet-400 disabled:opacity-50"
                                        @click="handleImprovePrompt" />
                                    <Button icon="pi pi-times" label="Clear"
                                        class="!py-0.5 !px-2 !text-[10px] !h-6 !bg-slate-800 hover:!bg-slate-700 !border-white/10 !text-slate-400"
                                        @click="clearPrompt" />
                                </div>
                            </div>
                            <Textarea v-model="prompt" rows="3" autoResize
                                placeholder="Describe what you want to create..."
                                class="w-full bg-slate-800 border-white/10 text-white rounded-xl p-3 focus:border-violet-500 focus:ring-1 focus:ring-violet-500/50 transition-all resize-none shadow-inner" />

                        </div>

                        <div class="flex flex-col md:flex-row gap-4">
                            <div class="flex-1 flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Character
                                    (Optional)</label>
                                <Dropdown v-model="selectedCharacter" :options="characters" optionLabel="name"
                                    placeholder="Select Character" filter showClear
                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl" :pt="{
                                        root: { class: '!bg-slate-800' },
                                        input: { class: '!text-white' },
                                        trigger: { class: '!text-slate-400' },
                                        panel: { class: '!bg-slate-800 !border-white/10' },
                                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
                                    }">
                                    <template #value="slotProps">
                                        <div v-if="slotProps.value" class="flex items-center gap-2">
                                            <img v-if="slotProps.value.avatar_image"
                                                :src="API_URL + slotProps.value.avatar_image"
                                                class="w-6 h-6 rounded-full object-cover" />
                                            <span>{{ slotProps.value.name }}</span>
                                        </div>
                                        <span v-else>{{ slotProps.placeholder }}</span>
                                    </template>
                                    <template #option="slotProps">
                                        <div class="flex items-center gap-2">
                                            <img v-if="slotProps.option.avatar_image"
                                                :src="API_URL + slotProps.option.avatar_image"
                                                class="w-8 h-8 rounded-full object-cover" />
                                            <span>{{ slotProps.option.name }}</span>
                                        </div>
                                    </template>
                                </Dropdown>

                                <div v-if="selectedCharacter"
                                    class="flex items-center gap-2 mt-2 px-1 animate-in fade-in slide-in-from-top-1">
                                    <Checkbox v-model="useProfileImage" :binary="true" inputId="use-profile-img" />
                                    <label for="use-profile-img"
                                        class="text-xs text-slate-300 cursor-pointer select-none">Use Character
                                        Photo</label>
                                </div>
                            </div>

                            <div class="flex-1 flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Reference
                                    Assets</label>
                                <div @click="openAssetPicker"
                                    class="w-full bg-slate-800 border border-white/10 rounded-xl p-3 min-h-[46px] cursor-pointer hover:bg-slate-700/50 transition-colors flex flex-wrap gap-2">
                                    <span v-if="selectedAssets.length === 0"
                                        class="text-slate-400 text-sm py-0.5">Select Assets</span>
                                    <div v-for="asset in selectedAssets" :key="asset.id"
                                        class="px-2 py-1 bg-violet-600/30 border border-violet-500/30 text-violet-200 text-xs rounded-md flex items-center gap-2 animate-in fade-in zoom-in duration-200"
                                        @click.stop>
                                        <img v-if="asset.url" :src="API_URL + asset.url + '?thumbnail=true'"
                                            class="w-4 h-4 rounded object-cover" />
                                        <span class="truncate max-w-[100px]">{{ asset.name || 'Asset ' + (asset.id ?
                                            asset.id.substring(0, 4) : '') }}</span>
                                        <i class="pi pi-times cursor-pointer hover:text-white"
                                            @click.stop="removeAsset(asset)"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="w-full lg:w-80 flex flex-col gap-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
                                <Dropdown v-model="quality" :options="qualityOptions" optionLabel="value"
                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
                                    :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
                                    Ratio</label>
                                <Dropdown v-model="aspectRatio" :options="aspectRatioOptions" optionLabel="value"
                                    class="w-full !bg-slate-800 !border-white/10 !text-white !rounded-xl"
                                    :pt="{ input: { class: '!text-white' }, trigger: { class: '!text-slate-400' }, panel: { class: '!bg-slate-800 !border-white/10' }, item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' } }" />
                            </div>
                        </div>

                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
                            <div class="flex items-center gap-2">
                                <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check" />
                                <label for="tg-check" class="text-xs text-slate-300 cursor-pointer">Send to
                                    Telegram</label>
                            </div>
                            <div v-if="sendToTelegram" class="animate-in fade-in slide-in-from-top-1">
                                <InputText v-model="telegramId" placeholder="Telegram ID"
                                    class="w-full !text-xs !bg-slate-900 !border-white/10 !text-white !py-1.5" />
                            </div>
                        </div>

                        <div class="mt-auto">
                            <Button :label="isSubmitting ? 'Starting...' : 'Generate'"
                                :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
                                :loading="isSubmitting" @click="handleGenerate"
                                class="w-full !py-3 !text-base !font-bold !bg-gradient-to-r from-violet-600 to-cyan-500 !border-none !rounded-xl !shadow-lg !shadow-violet-500/20 hover:!scale-[1.02] transition-all" />
                        </div>
                    </div>
                </div>

            </div>


            <transition name="fade">
                <div v-if="!isSettingsVisible" class="absolute bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-10">
                    <Button label="Open Controls" icon="pi pi-chevron-up" @click="isSettingsVisible = true" rounded
                        class="!bg-violet-600 !border-none !shadow-xl !font-bold shadow-violet-500/40 !px-6 !py-3" />
                </div>
            </transition>

        </main>



        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
            :style="{ width: '90vw', maxWidth: '1000px', background: 'transparent', boxShadow: 'none' }"
            :pt="{ root: { class: '!bg-transparent !border-none !shadow-none' }, header: { class: '!hidden' }, content: { class: '!bg-transparent !p-0' } }">
            <div class="relative flex items-center justify-center" @click="isImagePreviewVisible = false">
                <img v-if="previewImage" :src="previewImage.url"
                    class="max-w-full max-h-[85vh] object-contain rounded-xl shadow-2xl" />
                <Button icon="pi pi-times" @click="isImagePreviewVisible = false" rounded text
                    class="!absolute -top-4 -right-4 !text-white !bg-black/50 hover:!bg-black/70 !w-10 !h-10" />
            </div>
        </Dialog>

        <Dialog v-model:visible="isAssetPickerVisible" modal header="Select Assets"
            :style="{ width: '80vw', maxWidth: '900px' }"
            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-0' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
            <div class="flex flex-col h-[70vh]">
                <!-- Tabs -->
                <div class="flex border-b border-white/5 px-4 items-center">
                    <button v-for="tab in ['all', 'uploaded', 'generated']" :key="tab" @click="assetPickerTab = tab"
                        class="px-4 py-3 text-sm font-medium border-b-2 transition-colors capitalize"
                        :class="assetPickerTab === tab ? 'border-violet-500 text-violet-400' : 'border-transparent text-slate-400 hover:text-slate-200'">
                        {{ tab }}
                    </button>
                    <!-- Upload Action -->
                    <div class="ml-auto flex items-center">
                        <input type="file" ref="assetPickerFileInput" @change="handleAssetPickerUpload" class="hidden"
                            accept="image/*" />
                        <Button icon="pi pi-upload" label="Upload" @click="triggerAssetPickerUpload"
                            class="!text-xs !bg-violet-600/20 !text-violet-300 hover:!bg-violet-600/40 !border-none !px-3 !py-1.5 !rounded-lg" />
                    </div>
                </div>

                <!-- Grid -->
                <div class="flex-1 overflow-y-auto p-4 custom-scrollbar">
                    <div v-if="isModalLoading" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <Skeleton v-for="i in 10" :key="i" height="150px" class="!bg-slate-800 rounded-xl" />
                    </div>
                    <div v-else-if="modalAssets.length > 0"
                        class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <div v-for="asset in modalAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
                            class="relative aspect-square rounded-xl overflow-hidden cursor-pointer border-2 transition-all group"
                            :class="tempSelectedAssets.some(a => a.id === asset.id) ? 'border-violet-500 ring-2 ring-violet-500/30' : 'border-transparent hover:border-white/20'">
                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
                            <div class="absolute bottom-0 left-0 right-0 p-2 bg-black/60 backdrop-blur-sm">
                                <p class="text-[10px] text-white truncate">{{ asset.name || 'Asset ' + (asset.id ?
                                    asset.id.substring(0, 4) : '') }}</p>
                            </div>
                            <!-- Checkmark -->
                            <div v-if="tempSelectedAssets.some(a => a.id === asset.id)"
                                class="absolute top-2 right-2 w-6 h-6 bg-violet-500 rounded-full flex items-center justify-center shadow-lg animate-in zoom-in duration-200">
                                <i class="pi pi-check text-white text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div v-else class="flex flex-col items-center justify-center h-full text-slate-500">
                        <i class="pi pi-image text-4xl mb-2 opacity-50"></i>
                        <p>No assets found</p>
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isAssetPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button :label="'Select (' + tempSelectedAssets.length + ')'" @click="confirmAssetSelection"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </template>
        </Dialog>



        <Dialog v-model:visible="isAlbumPickerVisible" modal header="Add to Album" :style="{ width: '400px' }"
            :pt="{ root: { class: '!bg-slate-900 !border !border-white/10' }, header: { class: '!bg-slate-900 !border-b !border-white/5 !text-white' }, content: { class: '!bg-slate-900 !p-4' }, footer: { class: '!bg-slate-900 !border-t !border-white/5 !p-4' }, closeButton: { class: '!text-slate-400 hover:!text-white' } }">
            <div class="flex flex-col gap-4">
                <div v-if="albumStore.loading" class="flex justify-center p-4">
                    <i class="pi pi-spin pi-spinner text-violet-500 text-2xl"></i>
                </div>
                <div v-else-if="albumStore.albums.length === 0" class="text-center text-slate-400">
                    No albums found. Create one first!
                </div>
                <Dropdown v-else v-model="selectedAlbumForAdd" :options="albumStore.albums" optionLabel="name"
                    placeholder="Select an Album" class="w-full !bg-slate-800 !border-white/10 !text-white" :pt="{
                        root: { class: '!bg-slate-800' },
                        input: { class: '!text-white' },
                        trigger: { class: '!text-slate-400' },
                        panel: { class: '!bg-slate-900 !border-white/10' },
                        item: { class: '!text-slate-300 hover:!bg-white/10 hover:!text-white' }
                    }" />
            </div>
            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button label="Cancel" @click="isAlbumPickerVisible = false"
                        class="!text-slate-300 hover:!bg-white/5" text />
                    <Button label="Add" @click="confirmAddToAlbum" :disabled="!selectedAlbumForAdd"
                        class="!bg-violet-600 !border-none hover:!bg-violet-500" />
                </div>
            </template>
        </Dialog>

    </div>
</template>

<style scoped>
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-up-enter-from,
.slide-up-leave-to {
    transform: translateY(100%);
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

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

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

.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}
</style>