<script setup>
import { ref, onMounted, computed, watch } 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 ProgressSpinner from 'primevue/progressspinner'
import ProgressBar from 'primevue/progressbar'
import Message from 'primevue/message'
import Tag from 'primevue/tag'
import Checkbox from 'primevue/checkbox'
import Dialog from 'primevue/dialog'
import Paginator from 'primevue/paginator'
import InputText from 'primevue/inputtext'

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

// Generation State
const prompt = ref('')
const isGenerating = ref(false)
const generationStatus = ref('')
const generationProgress = ref(0)
const generationSuccess = ref(false)
const generatedResult = ref(null)

// History State
const historyGenerations = ref([])
const historyTotal = ref(0)
const historyRows = ref(10)
const historyFirst = ref(0)

// Prompt Assistant state
const isImprovingPrompt = ref(false)
const previousPrompt = ref('')

// Asset Selection State
const selectedAssets = ref([])
const isAssetModalVisible = ref(false)
const allAssets = ref([])
const assetsTotalRecords = ref(0)
const assetsRows = ref(12)
const assetsFirst = ref(0)
const activeAssetFilter = ref('all')
const sendToTelegram = ref(false)
const telegramId = ref(localStorage.getItem('telegram_id') || '')
const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))
const isUploading = ref(false)
const fileInput = ref(null)

const saveTelegramId = () => {
    if (telegramId.value) {
        localStorage.setItem('telegram_id', telegramId.value)
        isTelegramIdSaved.value = true
    }
}

const quality = ref({ key: 'TWOK', value: '2K' })
const qualityOptions = ref([
    { key: 'ONEK', value: '1K' },
    { key: 'TWOK', value: '2K' },
    { key: 'FOURK', value: '4K' }
])

const aspectRatio = ref({ key: "NINESIXTEEN", value: "9:16" })
const aspectRatioOptions = ref([
    { key: "NINESIXTEEN", value: "9:16" },
    { key: "FOURTHREE", value: "4:3" },
    { key: "THREEFOUR", value: "3:4" },
    { key: "SIXTEENNINE", value: "16:9" }
])

// --- Data Loading ---

const loadHistory = async () => {
    try {
        const response = await aiService.getGenerations(historyRows.value, historyFirst.value)
        if (response && response.generations) {
            historyGenerations.value = response.generations
            historyTotal.value = response.total_count || 0
        } else {
            historyGenerations.value = Array.isArray(response) ? response : []
            historyTotal.value = historyGenerations.value.length
        }
    } catch (e) {
        console.error('Failed to load history', e)
    }
}

const loadAssets = async () => {
    try {
        const response = await dataService.getAssets(assetsRows.value, assetsFirst.value, activeAssetFilter.value)
        console.log("Loaded assets:", response)
        if (response && response.assets) {
            allAssets.value = response.assets
            assetsTotalRecords.value = response.total_count || 0
        } else {
            allAssets.value = Array.isArray(response) ? response : []
            assetsTotalRecords.value = allAssets.value.length
        }
    } catch (e) {
        console.error('Failed to load assets', e)
    }
}

const onHistoryPage = (event) => {
    historyFirst.value = event.first
    historyRows.value = event.rows
    loadHistory()
}

const onAssetsPage = (event) => {
    assetsFirst.value = event.first
    assetsRows.value = event.rows
    loadAssets()
}

// --- Asset Selection Logic ---

const openAssetModal = () => {
    assetsFirst.value = 0
    loadAssets()
    isAssetModalVisible.value = true
}

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

const isAssetSelected = (assetId) => {
    return selectedAssets.value.some(a => a.id === assetId)
}

const removeSelectedAsset = (index) => {
    selectedAssets.value.splice(index, 1)
}

const triggerFileUpload = () => {
    if (fileInput.value) fileInput.value.click()
}

const onFileSelected = async (event) => {
    const file = event.target.files[0]
    if (!file) return

    isUploading.value = true
    try {
        // Upload without linked character (global asset)
        await dataService.uploadAsset(file, null)

        // Reload assets to show the new one. 
        // ideally uploadAsset returns the new asset, but if not we reload.
        // If it does return, we could push it to selectedAssets immediately.
        // Let's assume we reload for now to be safe.
        assetsFirst.value = 0
        await loadAssets()

        // Optional: Select the most recent asset if we want to be helpful
        if (allAssets.value.length > 0) {
            // Assuming the newest is first, we could:
            // toggleAssetSelection(allAssets.value[0])
        }
    } catch (e) {
        console.error('Failed to upload asset', e)
    } finally {
        isUploading.value = false
        if (event.target) event.target.value = '' // Clear input
    }
}

// --- Generation Logic ---

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

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

    // Save ID if provided
    if (telegramId.value && telegramId.value !== localStorage.getItem('telegram_id')) {
        localStorage.setItem('telegram_id', telegramId.value)
        isTelegramIdSaved.value = true
    }

    isGenerating.value = true
    generationSuccess.value = false
    generationStatus.value = 'starting'
    generationProgress.value = 0
    generatedResult.value = null

    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: null, // Explicitly null for global generation
            telegram_id: sendToTelegram.value ? telegramId.value : null
        }

        const response = await aiService.runGeneration(payload)

        if (response && response.id) {
            pollStatus(response.id)
        } else {
            // Fallback immediate response
            generatedResult.value = response
            generationSuccess.value = true
            isGenerating.value = false
            loadHistory()
        }
    } catch (e) {
        console.error('Generation failed', e)
        isGenerating.value = false
    }
}

const pollStatus = async (id) => {
    let completed = false
    while (!completed && isGenerating.value) {
        try {
            const response = await aiService.getGenerationStatus(id)
            generationStatus.value = response.status
            generationProgress.value = response.progress || 0

            if (response.status === 'done') {
                completed = true
                generationSuccess.value = true

                // For global generation, we might need to fetch the assets by ID if returned
                if (response.assets_list && response.assets_list.length > 0) {
                    // Since we don't have a direct "getAssetsByIds" batch endpoint easily available in dataService yet,
                    // we might just fetch the first one or construct objects if URL is provided.
                    // Assuming response includes asset details or just IDs.
                    // Let's optimize: refresh history first
                }

                // Just refreshing history is safest to get full object for now
                await loadHistory()

                // Try to find the new generation in history to show result
                const newGen = historyGenerations.value.find(g => g.id === id) || historyGenerations.value[0]
                if (newGen) {
                    restoreGeneration(newGen)
                    // ensure tech_prompt is passed if available in response but not yet in history (race condition)
                    if (response.tech_prompt && generatedResult.value) {
                        generatedResult.value.tech_prompt = response.tech_prompt
                        generatedResult.value.execution_time = response.execution_time_seconds
                        generatedResult.value.api_execution_time = response.api_execution_time_seconds
                        generatedResult.value.token_usage = response.token_usage
                    }
                }

            } else if (response.status === 'failed') {
                completed = true
                throw new Error('Generation failed on server')
            } else {
                await new Promise(resolve => setTimeout(resolve, 2000))
            }
        } catch (e) {
            console.error('Polling failed', e)
            completed = true
            isGenerating.value = false
        }
    }
    isGenerating.value = false
}

const restoreGeneration = async (gen) => {
    prompt.value = gen.prompt

    const foundQuality = qualityOptions.value.find(opt => opt.key === gen.quality)
    if (foundQuality) quality.value = foundQuality

    const foundAspect = aspectRatioOptions.value.find(opt => opt.key === gen.aspect_ratio)
    if (foundAspect) aspectRatio.value = foundAspect

    if (gen.status === 'done' && gen.assets_list && gen.assets_list.length > 0) {
        // We need to fetch details or just display the image
        // history list usually has the main image preview
        generatedResult.value = {
            type: 'assets',
            // Mocking asset object structure from history usage in DetailView
            assets: gen.assets_list.map(id => ({
                id,
                url: `/assets/${id}`,  // This might need adjustment based on how API serves files
                // Ideally history API should return full asset objects or URLs.
                // If not, we rely on the implementation in CharacterDetailView:
                // :src="API_URL + '/assets/' + gen.assets_list[0]"
                // So let's construct it similarly
            })),
            tech_prompt: gen.tech_prompt,
            execution_time: gen.execution_time_seconds,
            api_execution_time: gen.api_execution_time_seconds,
            token_usage: gen.token_usage
        }
    }
}

// --- Prompt Assistant ---

const handleImprovePrompt = async () => {
    if (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
    }
}

// Image Preview Logic
const isImagePreviewVisible = ref(false)
const previewImage = ref(null)

const openImagePreview = (url, name = 'Image Preview', createdAt = null) => {
    previewImage.value = { url, name, createdAt }
    isImagePreviewVisible.value = true
}

const formatDate = (dateString) => {
    if (!dateString) return ''
    return new Date(dateString).toLocaleString()
}

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

// --- Utils ---

const copyToClipboard = () => {
    // Implement if needed for prompt copying
}

const handleLogout = () => {
    localStorage.removeItem('auth_code')
    router.push('/login')
}

// --- Lifecycle ---
onMounted(() => {
    loadHistory()
})
</script>

<template>
    <div class="flex h-screen bg-slate-900 overflow-hidden text-slate-100">
        <!-- Sidebar -->
        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10 border border-white/5">
            <div class="mb-12">
                <div
                    class="w-10 h-10 bg-gradient-to-br from-violet-600 to-cyan-500 rounded-xl flex items-center justify-center font-bold text-white text-xl shadow-lg shadow-violet-500/20">
                    AI
                </div>
            </div>

            <div class="flex-1 flex flex-col gap-6 w-full items-center">
                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
                    @click="router.push('/')" v-tooltip.right="'Home'">
                    <span class="text-2xl">🏠</span>
                </div>
                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
                    @click="router.push('/assets')" v-tooltip.right="'Assets'">
                    <span class="text-2xl">📂</span>
                </div>
                <!-- Image Generation (Active) -->
                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50 shadow-inner"
                    v-tooltip.right="'Image Generation'">
                    <span class="text-2xl">🎨</span>
                </div>
                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
                    @click="router.push('/characters')" v-tooltip.right="'Characters'">
                    <span class="text-2xl">👥</span>
                </div>
                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
                    @click="router.push('/image-to-prompt')" v-tooltip.right="'Image to Prompt'">
                    <span class="text-2xl">✨</span>
                </div>
            </div>

            <div class="mt-auto flex flex-col items-center gap-4">
                <div @click="handleLogout"
                    class="w-10 h-10 rounded-xl bg-red-500/10 text-red-400 flex items-center justify-center cursor-pointer hover:bg-red-500/20 transition-all font-bold"
                    v-tooltip.right="'Logout'">
                    <i class="pi pi-power-off"></i>
                </div>
            </div>
        </nav>

        <!-- Main Content -->
        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
            <header class="mb-8">
                <h1 class="text-4xl font-bold m-0">Image Generation</h1>
                <p class="mt-2 mb-0 text-slate-400">Create stunning visuals using your assets</p>
            </header>

            <div class="flex flex-col lg:flex-row gap-8 h-full pb-8">
                <!-- Left Panel: Settings -->
                <div class="flex-1 max-w-xl flex flex-col gap-6">
                    <!-- Settings Card -->
                    <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/5 flex flex-col gap-6">

                        <!-- Quality & Aspect Ratio -->
                        <div class="grid grid-cols-2 gap-6">
                            <div class="flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Quality</label>
                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
                                    <div v-for="option in qualityOptions" :key="option.key" @click="quality = option"
                                        class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
                                        :class="quality.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
                                        {{ option.value }}
                                    </div>
                                </div>
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-xs font-bold text-slate-400 uppercase tracking-wider">Aspect
                                    Ratio</label>
                                <div class="flex bg-slate-900/50 p-1 rounded-lg border border-white/10">
                                    <div v-for="option in aspectRatioOptions" :key="option.key"
                                        @click="aspectRatio = option"
                                        class="flex-1 text-center py-1.5 cursor-pointer rounded-md text-xs font-medium transition-all"
                                        :class="aspectRatio.key === option.key ? 'bg-white/10 text-white shadow-sm' : 'text-slate-500 hover:text-slate-300'">
                                        {{ option.value }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Prompt Input -->
                        <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">Description</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" title="Undo" />
                                    <Button icon="pi pi-sparkles" :loading="isImprovingPrompt"
                                        :disabled="prompt.length <= 10"
                                        class="!p-1 !w-6 !h-6 !text-[10px] bg-violet-600/20 hover:bg-violet-600/30 border-violet-500/30 text-violet-400 disabled:opacity-50"
                                        @click="handleImprovePrompt" title="Improve Prompt" />
                                </div>
                            </div>
                            <Textarea v-model="prompt" rows="5" autoResize
                                placeholder="Describe the image you want to generate..."
                                class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-3 focus:border-violet-500 transition-all text-sm resize-none" />
                        </div>

                        <!-- Assets Selection -->
                        <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">Reference
                                    Assets ({{ selectedAssets.length }})</label>
                                <input type="file" ref="fileInput" class="hidden" accept="image/*"
                                    @change="onFileSelected" />
                                <div class="flex gap-2">
                                    <Button :label="isUploading ? 'Uploading...' : 'Upload'"
                                        :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
                                        :loading="isUploading" size="small" text
                                        class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
                                        @click="triggerFileUpload" />
                                    <Button label="Add Asset" icon="pi pi-plus" size="small" text
                                        class="!text-xs !py-1 !px-2 text-violet-400 hover:bg-violet-500/10"
                                        @click="openAssetModal" />
                                </div>
                            </div>

                            <div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-2">
                                <div v-for="(asset, index) in selectedAssets" :key="asset.id"
                                    class="relative w-16 h-16 rounded-lg overflow-hidden border border-violet-500/50 group">
                                    <img :src="API_URL + asset.url + '?thumbnail=true'"
                                        class="w-full h-full object-cover" />
                                    <div @click="removeSelectedAsset(index)"
                                        class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
                                        <i class="pi pi-times text-white text-xs"></i>
                                    </div>
                                </div>
                            </div>
                            <div v-else
                                class="text-center py-4 text-xs text-slate-500 border border-dashed border-white/10 rounded-lg">
                                No assets selected
                            </div>
                        </div>

                        <!-- Generate Button -->
                        <div class="mt-auto">
                            <div class="flex flex-col gap-2 mb-3">
                                <div class="flex items-center gap-2">
                                    <Checkbox v-model="sendToTelegram" :binary="true" inputId="tg-check-gen" />
                                    <label for="tg-check-gen"
                                        class="text-xs text-slate-400 cursor-pointer select-none">Send result to
                                        Telegram</label>
                                </div>
                                <div v-if="sendToTelegram && !isTelegramIdSaved"
                                    class="animate-in fade-in slide-in-from-top-1 duration-200">
                                    <InputText v-model="telegramId" placeholder="Enter Telegram ID"
                                        class="w-full !text-xs !py-1.5" @blur="saveTelegramId" />
                                    <small class="text-[10px] text-slate-500 block mt-0.5">ID will be saved for future
                                        use</small>
                                </div>
                            </div>
                            <Button :label="isGenerating ? 'Generating...' : 'Generate Image'"
                                :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'" :loading="isGenerating"
                                @click="handleGenerate"
                                class="w-full py-3 text-sm 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.01] transition-all" />
                        </div>
                    </div>
                </div>

                <!-- Right Panel: Result & History -->
                <div
                    class="flex-1 glass-panel p-6 rounded-2xl border border-white/5 bg-gradient-to-br from-white/5 to-transparent flex flex-col relative overflow-hidden">

                    <!-- Result View -->
                    <div class="flex-1 flex flex-col relative z-10 min-h-[300px]">
                        <div v-if="isGenerating"
                            class="absolute inset-0 flex flex-col items-center justify-center z-20 bg-black/20 backdrop-blur-sm rounded-xl">
                            <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="4"
                                animationDuration=".8s" />
                            <p
                                class="mt-4 text-sm font-bold bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">
                                {{ generationStatus || 'Initializing...' }}</p>
                            <ProgressBar :value="generationProgress" class="w-48 h-1.5 mt-2 !bg-slate-700"
                                :pt="{ value: { class: '!bg-violet-500' } }" />
                            <span class="text-[10px] text-slate-500 font-mono mt-1">{{ generationProgress }}%</span>
                        </div>

                        <div v-if="generatedResult && !isGenerating" class="flex-1 min-h-0 flex flex-col">
                            <div class="flex justify-between items-center mb-4">
                                <h2 class="text-lg font-bold">Result</h2>
                            </div>

                            <div
                                class="flex-1 bg-black/20 rounded-xl overflow-hidden border border-white/10 relative group min-h-0">
                                <!-- Handling "assets" type result (most common here) -->
                                <template
                                    v-if="generatedResult.type === 'assets' && generatedResult.assets && generatedResult.assets.length > 0">
                                    <!-- Displaying the first asset as main preview -->
                                    <img :src="API_URL + '/assets/' + generatedResult.assets[0].id"
                                        @click="openImagePreview(API_URL + '/assets/' + generatedResult.assets[0].id, 'Generated Result', new Date().toISOString())"
                                        class="w-full h-full object-contain cursor-pointer hover:scale-[1.01] transition-transform duration-300" />
                                </template>
                                <template v-else>
                                    <div class="w-full h-full flex items-center justify-center text-slate-500">
                                        Image generated (check History)
                                    </div>
                                </template>
                            </div>

                            <!-- Tech Prompt Display -->
                            <div v-if="generatedResult.tech_prompt" class="w-full mt-4 flex-shrink-0">
                                <div class="bg-black/20 rounded-lg p-3 border border-white/5 text-left">
                                    <p class="text-[10px] text-slate-500 font-bold uppercase mb-1">Technical Prompt</p>
                                    <p
                                        class="text-xs text-slate-400 font-mono leading-relaxed max-h-24 overflow-y-auto custom-scrollbar">
                                        {{
                                            generatedResult.tech_prompt }}</p>
                                </div>
                            </div>

                            <!-- Generation Metrics -->
                            <div v-if="generatedResult.execution_time || generatedResult.token_usage"
                                class="w-full mt-2 flex flex-wrap gap-2 flex-shrink-0">
                                <div v-if="generatedResult.execution_time"
                                    class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
                                    title="Total Execution Time">
                                    <i class="pi pi-clock mr-1"></i>{{ generatedResult.execution_time.toFixed(2) }}s
                                </div>
                                <div v-if="generatedResult.api_execution_time"
                                    class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
                                    title="API Execution Time">
                                    <i class="pi pi-server mr-1"></i>{{ generatedResult.api_execution_time.toFixed(2)
                                    }}s
                                </div>
                                <div v-if="generatedResult.token_usage"
                                    class="bg-black/20 px-2 py-1 rounded text-[10px] text-slate-500 font-mono border border-white/5"
                                    title="Token Usage">
                                    <i class="pi pi-bolt mr-1"></i>{{ generatedResult.token_usage }} toks
                                </div>
                            </div>
                        </div>

                        <div v-else-if="!isGenerating && !generatedResult"
                            class="flex-1 flex flex-col items-center justify-center text-slate-500 gap-4 opacity-50">
                            <i class="pi pi-image text-4xl"></i>
                            <p class="text-sm">Ready to generate</p>
                        </div>
                    </div>

                    <!-- History List -->
                    <div class="mt-6 border-t border-white/5 pt-4 flex flex-col max-h-[250px]">
                        <div class="flex justify-between items-center mb-2 px-1">
                            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">History ({{
                                historyTotal }})</h3>
                            <Button icon="pi pi-refresh" text size="small" class="!p-1 !w-6 !h-6 text-slate-500"
                                @click="loadHistory" />
                        </div>

                        <div class="flex-1 overflow-y-auto pr-2 custom-scrollbar flex flex-col gap-2">
                            <div v-for="gen in historyGenerations" :key="gen.id" @click="restoreGeneration(gen)"
                                class="glass-panel p-2 rounded-lg border border-white/5 flex gap-3 items-start hover:bg-white/10 cursor-pointer transition-colors group">
                                <div
                                    class="w-12 h-12 rounded bg-black/40 border border-white/10 overflow-hidden flex-shrink-0 mt-0.5">
                                    <img v-if="gen.assets_list && gen.assets_list.length > 0"
                                        :src="API_URL + '/assets/' + gen.assets_list[0] + '?thumbnail=true'"
                                        class="w-full h-full object-cover" />
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs text-slate-300 truncate font-medium">{{ gen.prompt }}</p>

                                    <!-- Tech Prompt Preview -->
                                    <p v-if="gen.tech_prompt"
                                        class="text-[9px] text-slate-500 truncate mt-0.5 font-mono opacity-80">
                                        {{ gen.tech_prompt }}
                                    </p>

                                    <div class="flex gap-2 text-[10px] text-slate-500 mt-1">
                                        <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
                                        <span class="capitalize"
                                            :class="gen.status === 'done' ? 'text-green-500' : 'text-amber-500'">{{
                                                gen.status }}</span>
                                    </div>
                                    <div v-if="gen.execution_time_seconds || gen.token_usage"
                                        class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono mt-1 opacity-70">
                                        <span v-if="gen.execution_time_seconds" title="Total Time"><i
                                                class="pi pi-clock mr-0.5"></i>{{
                                                    gen.execution_time_seconds.toFixed(1) }}s</span>
                                        <span v-if="gen.api_execution_time_seconds" title="API Time"><i
                                                class="pi pi-server mr-0.5"></i>{{
                                                    gen.api_execution_time_seconds.toFixed(1) }}s</span>
                                        <span v-if="gen.token_usage" title="Tokens"><i class="pi pi-bolt mr-0.5"></i>{{
                                            gen.token_usage
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div v-if="historyTotal > historyRows" class="mt-2">
                            <Paginator :first="historyFirst" :rows="historyRows" :totalRecords="historyTotal"
                                @page="onHistoryPage" :template="{ default: 'PrevPageLink PageLinks NextPageLink' }"
                                class="!bg-transparent !border-none !p-0 !text-xs" />
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Asset Selection Modal -->
        <Dialog v-model:visible="isAssetModalVisible" modal header="Select Reference Assets"
            :style="{ width: '80vw', maxWidth: '1000px' }" class="glass-panel rounded-2xl">
            <div class="flex flex-col h-[70vh]">
                <div v-if="allAssets.length > 0" class="flex-1 overflow-y-auto p-1 text-slate-100">
                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <div v-for="asset in allAssets" :key="asset.id" @click="toggleAssetSelection(asset)"
                            class="aspect-square rounded-xl overflow-hidden cursor-pointer relative border transition-all"
                            :class="isAssetSelected(asset.id) ? 'border-violet-500 ring-2 ring-violet-500/20' : 'border-white/10 hover:border-white/30'">
                            <img :src="API_URL + asset.url + '?thumbnail=true'" class="w-full h-full object-cover" />
                            <div v-if="isAssetSelected(asset.id)"
                                class="absolute inset-0 bg-violet-600/30 flex items-center justify-center">
                                <div class="bg-violet-600 rounded-full p-1 shadow-lg">
                                    <i class="pi pi-check text-white text-xs font-bold"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else class="flex-1 flex items-center justify-center text-slate-500">
                    No assets found
                </div>

                <div class="mt-4 pt-4 border-t border-white/10 flex justify-between items-center text-slate-100">
                    <span class="text-sm text-slate-400">{{ selectedAssets.length }} selected</span>
                    <div class="flex gap-4 items-center">
                        <Paginator :first="assetsFirst" :rows="assetsRows" :totalRecords="assetsTotalRecords"
                            @page="onAssetsPage" class="!bg-transparent !border-none !p-0" />
                        <Button label="Done" @click="isAssetModalVisible = false" class="!px-6" />
                    </div>
                </div>
            </div>
        </Dialog>

        <!-- Image Preview Modal -->
        <Dialog v-model:visible="isImagePreviewVisible" modal dismissableMask
            :header="previewImage?.name || 'Image Preview'" :style="{ width: '90vw', maxWidth: '800px' }"
            class="glass-panel rounded-2xl">
            <div v-if="previewImage" class="flex flex-col items-center">
                <img :src="previewImage.url" :alt="previewImage.name"
                    class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
                <div class="mt-6 text-center">
                    <h2 class="text-2xl font-bold mb-2">{{ previewImage.name }}</h2>
                    <p v-if="previewImage.createdAt" class="text-slate-400">{{ formatDate(previewImage.createdAt) }}</p>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

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