<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { dataService } from '../services/dataService'
import { aiService } from '../services/aiService'
import Button from 'primevue/button'
import Skeleton from 'primevue/skeleton'
import Tag from 'primevue/tag'
import Dialog from 'primevue/dialog'
import Textarea from 'primevue/textarea'
import SelectButton from 'primevue/selectbutton'
import FileUpload from 'primevue/fileupload'
import Checkbox from 'primevue/checkbox'
import ProgressBar from 'primevue/progressbar'
import Message from 'primevue/message'
import ProgressSpinner from 'primevue/progressspinner'
import InputText from 'primevue/inputtext'
import Tabs from 'primevue/tabs'
import TabList from 'primevue/tablist'
import Tab from 'primevue/tab'
import TabPanels from 'primevue/tabpanels'
import TabPanel from 'primevue/tabpanel'
import Paginator from 'primevue/paginator'

const route = useRoute()
const router = useRouter()
const character = ref(null)
const characterAssets = ref([])
const assetsTotalRecords = ref(0)
const historyGenerations = ref([])
const historyTotal = ref(0)
const historyRows = ref(10)
const historyFirst = ref(0)
const loading = ref(true)
const API_URL = import.meta.env.VITE_API_URL

const selectedAsset = ref(null)
const isModalVisible = ref(false)
const activeTab = ref("0")
const isMultiSelectMode = ref(false)
const bulkSelectedAssetIds = ref([])

const openModal = (asset) => {
    if (isMultiSelectMode.value) {
        toggleBulkSelection(asset.id)
        return
    }
    selectedAsset.value = asset
    isModalVisible.value = true
}

const toggleBulkSelection = (id) => {
    const idx = bulkSelectedAssetIds.value.indexOf(id)
    if (idx > -1) bulkSelectedAssetIds.value.splice(idx, 1)
    else bulkSelectedAssetIds.value.push(id)
}

const handleUseInGeneration = () => {
    if (bulkSelectedAssetIds.value.length === 0) return

    const assetsToUse = characterAssets.value.filter(a => bulkSelectedAssetIds.value.includes(a.id))
    selectedAssets.value = [...assetsToUse]

    activeTab.value = "0"
    isMultiSelectMode.value = false
    bulkSelectedAssetIds.value = []
}

const downloadImage = (url, name) => {
    fetch(url)
        .then(response => response.blob())
        .then(blob => {
            const blobUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = blobUrl;
            link.download = name || 'image.webp';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(blobUrl);
        })
        .catch(e => console.error('Download failed', e));
}

const handleDownloadResults = () => {
    if (!generatedResult.value) return

    if (generatedResult.value.type === 'assets') {
        generatedResult.value.assets.forEach(asset => {
            downloadImage(API_URL + asset.url, asset.name + '.webp')
        })
    } else if (generatedResult.value.type === 'image') {
        downloadImage(generatedResult.value.url, 'generated_image.webp')
    }
}

const loadData = async () => {
    loading.value = true
    const charId = route.params.id
    try {
        const [char, assetsResponse, historyResponse] = await Promise.all([
            dataService.getCharacterById(charId),
            dataService.getAssetsByCharacterId(charId, assetsRows.value, assetsFirst.value),
            aiService.getGenerations(historyRows.value, historyFirst.value, charId)
        ])
        character.value = char

        if (assetsResponse && assetsResponse.assets) {
            characterAssets.value = assetsResponse.assets
            assetsTotalRecords.value = assetsResponse.total_count || 0
        } else {
            characterAssets.value = Array.isArray(assetsResponse) ? assetsResponse : []
            assetsTotalRecords.value = characterAssets.value.length
        }

        if (historyResponse && historyResponse.generations) {
            historyGenerations.value = historyResponse.generations
            historyTotal.value = historyResponse.total_count || 0
        } else {
            historyGenerations.value = Array.isArray(historyResponse) ? historyResponse : []
            historyTotal.value = historyGenerations.value.length
        }
    } catch (e) {
        console.error('Failed to load character details', e)
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    loadData()
})

const goBack = () => {
    router.push('/')
}

const loadAssets = async () => {
    const charId = route.params.id
    try {
        const response = await dataService.getAssetsByCharacterId(charId, assetsRows.value, assetsFirst.value)
        if (response && response.assets) {
            characterAssets.value = response.assets
            assetsTotalRecords.value = response.total_count || 0
        } else {
            characterAssets.value = Array.isArray(response) ? response : []
            assetsTotalRecords.value = characterAssets.value.length
        }
    } catch (e) {
        console.error('Failed to load assets', e)
    }
    return characterAssets.value
}
const loadHistory = async () => {
    const charId = route.params.id
    try {
        const response = await aiService.getGenerations(historyRows.value, historyFirst.value, charId)
        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 onHistoryPage = (event) => {
    historyFirst.value = event.first
    historyRows.value = event.rows
    loadHistory()
}

// Generation State
const prompt = ref('')
const isGenerating = ref(false)
const generationStatus = ref('')
const generationProgress = ref(0)
const sendToTelegram = ref(false)
const useProfileImage = ref(true)
const telegramId = ref(localStorage.getItem('telegram_id') || '')
const isTelegramIdSaved = ref(!!localStorage.getItem('telegram_id'))

const saveTelegramId = () => {
    if (telegramId.value) {
        localStorage.setItem('telegram_id', telegramId.value)
        isTelegramIdSaved.value = true
    }
}
const generationSuccess = ref(false)
const generationError = ref(null)
const generatedResult = ref(null)

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

// File Upload state
const isUploading = ref(false)
const fileInput = ref(null)

const selectedAssets = ref([])
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 removeSelectedAsset = (index) => {
    selectedAssets.value.splice(index, 1)
}

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" }
])

const assetsFirst = ref(0)
const assetsRows = ref(12)
const paginatedCharacterAssets = computed(() => {
    return characterAssets.value
})

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

// Hover Zoom Logic
const hoveredThumbnail = ref(null)
let hoverTimeout = null

const onThumbnailEnter = (event, url) => {
    if (hoverTimeout) clearTimeout(hoverTimeout)
    const rect = event.target.getBoundingClientRect()
    hoveredThumbnail.value = {
        url,
        style: {
            top: rect.top + 'px',
            left: rect.left + 'px',
            width: rect.width + 'px',
            height: rect.height + 'px'
        }
    }
}

const onThumbnailLeave = () => {
    hoverTimeout = setTimeout(() => {
        hoveredThumbnail.value = null
    }, 50)
}

// Global Asset Selection
const allAssets = ref([])
const isAssetSelectionVisible = ref(false)
const modalAssetsFirst = ref(0)
const modalAssetsRows = ref(20)
const modalAssetsTotal = ref(0)

const loadAllAssets = async () => {
    try {
        const response = await dataService.getAssets(modalAssetsRows.value, modalAssetsFirst.value, 'all')
        if (response && response.assets) {
            allAssets.value = response.assets
            modalAssetsTotal.value = response.total_count || 0
        } else {
            allAssets.value = []
            modalAssetsTotal.value = 0
        }
    } catch (e) {
        console.error('Failed to load all assets', e)
    }
}

const openAssetSelectionModal = () => {
    isAssetSelectionVisible.value = true
    loadAllAssets()
}

const onModalAssetsPage = (event) => {
    modalAssetsFirst.value = event.first
    modalAssetsRows.value = event.rows
    loadAllAssets()
}

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

                // Refresh assets list
                const assets = await loadAssets()

                // Display created assets from the list (without selecting them)
                if (response.assets_list && response.assets_list.length > 0) {
                    const resultAssets = assets.filter(a => response.assets_list.includes(a.id))
                    generatedResult.value = {
                        type: 'assets',
                        assets: resultAssets,
                        tech_prompt: response.tech_prompt,
                        execution_time: response.execution_time_seconds,
                        api_execution_time: response.api_execution_time_seconds,
                        token_usage: response.token_usage
                    }
                }

                loadHistory()
            } else if (response.status === 'failed') {
                completed = true
                generationError.value = response.failed_reason || 'Generation failed on server'
                throw new Error(generationError.value)
            } else {
                // Wait before next poll
                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) => {
    // 1. Set prompt
    prompt.value = gen.prompt

    // 2. Set Quality
    const foundQuality = qualityOptions.value.find(opt => opt.key === gen.quality)
    if (foundQuality) quality.value = foundQuality

    // 3. Set Aspect Ratio
    const foundAspect = aspectRatioOptions.value.find(opt => opt.key === gen.aspect_ratio)
    if (foundAspect) aspectRatio.value = foundAspect

    // 4. Set Result if status is 'done'
    if (gen.status === 'done') {
        const assets = characterAssets.value
        if (gen.result_list && gen.result_list.length > 0) {
            generatedResult.value = {
                type: 'assets',
                assets: gen.result_list.map(id => ({
                    id,
                    url: `/assets/${id}`,
                    name: 'Generated Result'
                })),
                tech_prompt: gen.tech_prompt,
                execution_time: gen.execution_time_seconds,
                api_execution_time: gen.api_execution_time_seconds,
                token_usage: gen.token_usage
            }
            generationSuccess.value = true
        }
    } else {
        generatedResult.value = null
        generationSuccess.value = false
    }
}

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
    }
}

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

// --- Reuse Logic ---

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

const reuseAsset = (gen) => {
    const assetIds = gen.assets_list || gen.input_assets || []

    if (assetIds && assetIds.length > 0) {
        selectedAssets.value = assetIds.map(id => {
            // Check if we have it in characterAssets
            const existing = characterAssets.value.find(a => a.id === id)
            if (existing) return existing

            return {
                id,
                url: `/assets/${id}`,
                name: 'Asset ' + id.substring(0, 6)
            }
        })
    } else {
        console.warn("No linked/input assets found in history object:", gen)
    }
}

const useResultAsReference = (gen) => {
    if (gen.result_list && gen.result_list.length > 0) {
        // Appends the generated assets to the selection
        // In this view, we might need to fetch full asset objects if we want to show thumbnails immediately,
        // but constructing objects with IDs and URLs is usually enough for the selection preview.
        const newAssets = gen.result_list.map(id => ({
            id,
            url: `/assets/${id}`
        }))

        // Filter out duplicates
        const existingIds = new Set(selectedAssets.value.map(a => a.id))
        newAssets.forEach(asset => {
            if (!existingIds.has(asset.id)) {
                selectedAssets.value.push(asset)
            }
        })
    }
}

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 {
        await dataService.uploadAsset(file, route.params.id)
        await loadAssets()
    } catch (e) {
        console.error('Failed to upload asset', e)
    } finally {
        isUploading.value = false
        if (event.target) event.target.value = '' // Clear input
    }
}

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

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

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

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

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

        const response = await aiService.runGeneration(payload)
        // response is expected to have an 'id' for the generation task
        if (response && response.id) {
            pollStatus(response.id)
        } else {
            // Fallback if it returns data immediately
            generatedResult.value = response
            generationSuccess.value = true
            isGenerating.value = false
        }
        prompt.value = ''
    } catch (e) {
        console.error('Generation failed', e)
        isGenerating.value = false
    }
}


</script>

<template>
    <div class="flex flex-col h-full p-6 overflow-y-auto w-full text-slate-100">
        <!-- Main Content (Sidebar removed) -->
        <div class="flex-1 flex flex-col gap-4">

            <div v-if="!loading && character" class="flex-1 flex flex-col gap-4">
                <header class="mb-0">
                    <Button label="Back" icon="pi pi-arrow-left" @click="goBack" text
                        class="text-slate-400 hover:text-slate-50 p-1" />
                </header>

                <div class="glass-panel p-2 lg:p-3 rounded-xl border border-white/5">
                    <div class="flex gap-4 items-center">
                        <div class="w-16 h-16 rounded-full overflow-hidden border border-white/10 flex-shrink-0">
                            <img :src="API_URL + character.avatar_image || 'https://via.placeholder.com/200'"
                                :alt="character.name" class="w-full h-full object-cover" />
                        </div>
                        <div class="flex-1 overflow-hidden">
                            <h1 class="text-xl font-bold m-0 mb-1 leading-tight">{{ character.name }}</h1>
                            <div class="flex gap-2 mb-1">
                                <Tag :value="`ID: ${character.id.substring(0, 8)}`" severity="secondary"
                                    class="text-[9px] px-1 py-0" />
                            </div>
                            <p class="text-[11px] leading-tight text-slate-400 max-w-full">
                                {{ character.character_bio }}
                            </p>
                        </div>
                    </div>
                </div>

                <Tabs v-model:value="activeTab" class="glass-panel p-1.5 rounded-xl border border-white/5"
                    style="--p-tabs-tablist-background: transparent !important">
                    <TabList :pt="{
                        root: { class: 'border-none p-0 mb-2 inline-flex' },
                        tab: ({ context }) => ({
                            class: [
                                'flex items-center gap-1.5 px-4 py-2 rounded-lg font-bold transition-all duration-300 border-none outline-none cursor-pointer text-xs',
                                context.active
                                    ? 'bg-violet-600/20 text-violet-400 shadow-[0_0_20px_rgba(124,58,237,0.1)] border border-violet-500/20'
                                    : 'text-slate-500 hover:text-slate-300 !bg-transparent border border-transparent'
                            ]
                        }),
                        activeBar: { class: 'hidden' }
                    }">
                        <Tab value="0">
                            <div class="!flex !flex-row !gap-1">
                                <i class="pi pi-sparkles text-[10px]" />
                                <span>Generation</span>
                            </div>
                        </Tab>
                        <Tab value="1">
                            <div class="!flex !flex-row !gap-1">
                                <i class="pi pi-images text-[10px]" />
                                <span>Assets ({{ assetsTotalRecords }})</span>
                            </div>
                        </Tab>
                        <Tab value="2" class="hidden">
                            <div class="!flex !flex-row !gap-1">
                                <i class="pi pi-history text-[10px]" />
                                <span>History ({{ historyTotal }})</span>
                            </div>
                        </Tab>
                    </TabList>

                    <TabPanels class="bg-transparent p-0">
                        <TabPanel value="0">
                            <div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
                                <div
                                    class="lg:col-span-1 glass-panel p-2 rounded-xl border border-white/5 bg-white/5 flex flex-col gap-3">
                                    <div class="flex justify-between items-center flex-col">
                                        <h2 class="text-sm font-bold m-0">Settings</h2>
                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label
                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Quality</label>
                                        <div
                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
                                            <div v-for="option in qualityOptions" :key="option.key"
                                                @click="quality = option"
                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
                                                :class="quality.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
                                                <span class="text-white w-full text-center">{{ option.value }}</span>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label
                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Aspect</label>
                                        <div
                                            class="!flex !w-full !justify-between  items-center  justify-center !bg-slate-900/50 !p-1  gap-1 !rounded-lg !border !border-white/10">
                                            <div v-for="option in aspectRatioOptions" :key="option.key"
                                                @click="aspectRatio = option"
                                                class="w-full items-center justify-center justify-items-center !text-center hover:bg-white/5 hover:text-white p-1 hover:rounded-lg"
                                                :class="aspectRatio.key === option.key ? 'bg-white/9 text-white rounded-lg' : ''">
                                                <span class="text-white w-full text-center">{{ option.value }}</span>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="flex flex-col gap-1.5">
                                        <label
                                            class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Description</label>

                                        <div class="relative w-full">
                                            <Textarea v-model="prompt" rows="3" autoResize placeholder="Describe..."
                                                class="w-full bg-slate-900 border-white/10 text-white rounded-lg p-2 focus:border-violet-500 transition-all text-xs pr-10" />

                                            <div class="absolute top-1.5 right-1.5 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="'Rollback'" />

                                                <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 disabled:cursor-not-allowed"
                                                    @click="handleImprovePrompt"
                                                    v-tooltip.top="prompt.length <= 10 ? 'Enter at least 10 characters' : 'Improve prompt'" />
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Assets Selection -->
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between items-center">
                                            <label
                                                class="text-slate-400 text-[9px] font-semibold uppercase tracking-wider">Ref
                                                Assets ({{ selectedAssets.length }})</label>
                                            <Button label="Add Asset" icon="pi pi-plus" size="small" text
                                                class="!text-[10px] !py-0.5 !px-1.5 text-violet-400 hover:bg-violet-500/10"
                                                @click="openAssetSelectionModal" />
                                        </div>

                                        <div v-if="selectedAssets.length > 0" class="flex flex-wrap gap-1">
                                            <div v-for="(asset, index) in selectedAssets" :key="asset.id"
                                                class="relative w-10 h-10 rounded 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-[8px]"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div v-else
                                            class="text-center py-2 text-[10px] text-slate-500 border border-dashed border-white/10 rounded-lg">
                                            No assets selected
                                        </div>
                                    </div>

                                    <!-- Removed Ref Assets section if characterAssets is empty, but it's already conditional -->

                                    <div class="flex flex-col gap-1.5 mt-auto pt-1.5 border-t border-white/5">
                                        <div class="flex flex-col gap-2 mb-2">
                                            <div class="flex items-center gap-2">
                                                <Checkbox v-model="sendToTelegram" :binary="true"
                                                    inputId="tg-check-char" />
                                                <label for="tg-check-char"
                                                    class="text-[10px] 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-[10px] !py-1" @blur="saveTelegramId" />
                                            </div>
                                            <div class="flex items-center gap-2 mt-1">
                                                <Checkbox v-model="useProfileImage" :binary="true"
                                                    inputId="profile-img-check" />
                                                <label for="profile-img-check"
                                                    class="text-[10px] text-slate-400 cursor-pointer select-none">Use
                                                    Profile Photo</label>
                                            </div>
                                        </div>
                                    </div>

                                    <Button :label="isGenerating ? 'Wait...' : `Generate`"
                                        :icon="isGenerating ? 'pi pi-spin pi-spinner' : 'pi pi-magic'"
                                        :loading="isGenerating" @click="handleGenerate"
                                        class="w-full py-2 text-[11px] font-bold bg-gradient-to-r from-violet-600 to-cyan-500 border-none rounded shadow transition-all hover:scale-[1.01] active:scale-[0.99]" />

                                    <Message v-if="generationSuccess" severity="success" :closable="true"
                                        @close="generationSuccess = false">
                                        Success!
                                    </Message>
                                </div>

                                <div
                                    class="lg:col-span-3 glass-panel p-3 rounded-xl border border-white/5 bg-white/5 min-h-[300px] flex flex-col items-center justify-center text-center relative overflow-hidden">
                                    <div v-if="isGenerating" class="flex flex-col items-center gap-3 z-10 w-full px-12">
                                        <ProgressSpinner style="width: 40px; height: 40px" strokeWidth="4"
                                            animationDuration=".8s" fill="transparent" />
                                        <div class="text-center">
                                            <h3
                                                class="text-lg font-bold mb-0.5 bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent capitalize">
                                                {{ generationStatus || 'Creating...' }}</h3>
                                            <p class="text-[10px] text-slate-400">Processing using AI</p>
                                        </div>
                                        <ProgressBar :value="generationProgress" style="height: 6px; width: 100%"
                                            :showValue="false" class="rounded-full overflow-hidden !bg-slate-800" :pt="{
                                                value: { class: '!bg-gradient-to-r !from-violet-600 !to-cyan-500 !transition-all !duration-500' }
                                            }" />
                                        <span class="text-[10px] text-slate-500 font-mono">{{ generationProgress
                                            }}%</span>
                                    </div>

                                    <div v-else-if="generationError"
                                        class="w-full h-full flex flex-col items-center justify-center p-4 text-center animate-in fade-in zoom-in duration-300">
                                        <div
                                            class="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center mb-3 border border-red-500/20">
                                            <i class="pi pi-times text-red-400 text-xl"></i>
                                        </div>
                                        <h3 class="text-sm font-bold text-slate-200 mb-1">Generation Failed</h3>
                                        <p
                                            class="text-[10px] text-red-400 bg-red-500/5 px-3 py-1.5 rounded-lg border border-red-500/10 mb-3 max-w-[90%]">
                                            {{ generationError }}
                                        </p>
                                        <Button label="Try Again" icon="pi pi-refresh" size="small" class="!text-[10px]"
                                            @click="handleGenerate" severity="secondary" />
                                    </div>

                                    <div v-else-if="generatedResult"
                                        class="w-full h-full flex flex-col gap-3 animate-in fade-in zoom-in duration-300">
                                        <div class="flex justify-between items-center mb-1">
                                            <h2 class="text-lg font-bold m-0">Result</h2>
                                            <div class="flex gap-1">
                                                <Button icon="pi pi-download" text class="hover:bg-white/10 p-1 text-xs"
                                                    @click="handleDownloadResults" title="Download results" />
                                                <Button icon="pi pi-share-alt" text
                                                    class="hover:bg-white/10 p-1 text-xs" />
                                            </div>
                                        </div>

                                        <div v-if="generatedResult.type === 'assets'"
                                            class="grid grid-cols-1 md:grid-cols-2 gap-2 overflow-y-auto">
                                            <div v-for="asset in generatedResult.assets" :key="asset.id"
                                                @click="openModal(asset)"
                                                class="h-80 rounded-xl overflow-hidden border border-white/10 shadow-xl aspect-[9/16] bg-black/20 cursor-pointer hover:border-violet-500/50 hover:scale-[1.01] transition-all duration-300">
                                                <img :src="API_URL + asset.url + '?thumbnail=true'"
                                                    class="w-full h-full object-cover" />
                                            </div>
                                        </div>
                                        <div v-if="generatedResult.type === 'image'"
                                            @click="openModal({ url: generatedResult.url, name: 'Generated Image', type: 'IMAGE' })"
                                            class="flex-1 rounded-xl overflow-hidden border border-white/10 shadow-xl cursor-pointer hover:border-violet-500/50 transition-all duration-300">
                                            <img :src="generatedResult.url" class="w-full h-full object-cover" />
                                        </div>
                                        <div v-else-if="generatedResult.type === 'text'"
                                            class="flex-1 bg-slate-900/50 p-4 rounded-xl border border-white/10 text-left font-mono text-[11px] leading-tight overflow-y-auto">
                                            {{ generatedResult.content || generatedResult }}
                                        </div>

                                        <!-- Tech Prompt Display -->
                                        <div v-if="generatedResult.tech_prompt" class="w-full mt-2">
                                            <div class="bg-black/20 rounded-lg p-2 border border-white/5 text-left">
                                                <p class="text-[9px] text-slate-500 font-bold uppercase mb-1">Technical
                                                    Prompt</p>
                                                <p class="text-[10px] text-slate-400 font-mono leading-relaxed">{{
                                                    generatedResult.tech_prompt }}</p>
                                            </div>
                                        </div>

                                        <!-- Generation Metrics -->
                                        <div v-if="generatedResult.execution_time || generatedResult.token_usage"
                                            class="w-full mt-1 flex flex-wrap gap-2">
                                            <div v-if="generatedResult.execution_time"
                                                class="bg-black/20 px-2 py-1 rounded text-[9px] 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-[9px] 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-[9px] 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 class="flex flex-col items-center gap-2 text-slate-500 opacity-60">
                                        <i class="pi pi-image text-3xl" />
                                        <p class="text-xs font-medium">Ready</p>
                                    </div>

                                    <!-- Generation History Section -->
                                    <div
                                        class="w-full mt-6 pt-4 border-t border-white/5 flex flex-col max-h-[400px] relative z-10">
                                        <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 v-if="historyTotal > 0" icon="pi pi-refresh" text size="small"
                                                class="!p-1 !w-6 !h-6 text-slate-500" @click="loadHistory" />
                                        </div>

                                        <div v-if="historyGenerations.length === 0"
                                            class="py-10 text-center text-slate-600 italic text-xs">
                                            No previous generations.
                                        </div>

                                        <div v-else
                                            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 flex-shrink-0 mt-0.5 relative z-0"
                                                    @mouseenter="onThumbnailEnter($event, API_URL + '/assets/' + gen.result_list[0] + '?thumbnail=true')"
                                                    @mouseleave="onThumbnailLeave">
                                                    <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 rounded opacity-100" />
                                                    <div v-else
                                                        class="w-full h-full flex items-center justify-center text-slate-700 overflow-hidden rounded">
                                                        <i class="pi pi-image text-lg" />
                                                    </div>
                                                </div>
                                                <div class="flex-1 min-w-0 flex flex-col items-start gap-0.5">
                                                    <p
                                                        class="text-xs text-slate-300 truncate font-medium w-full text-left">
                                                        {{
                                                            gen.prompt }}</p>

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

                                                    <div class="flex items-center gap-2 text-[10px] text-slate-500">
                                                        <span>{{ new Date(gen.created_at).toLocaleDateString() }}</span>
                                                        <span class="capitalize"
                                                            :class="gen.status === 'done' ? 'text-green-500' : (gen.status === 'failed' ? 'text-red-500' : 'text-amber-500')">{{
                                                                gen.status }}</span>
                                                        <i v-if="gen.failed_reason" v-tooltip.right="gen.failed_reason"
                                                            class="pi pi-exclamation-circle text-red-500"
                                                            style="font-size: 12px;" />
                                                    </div>
                                                    <!-- Metrics in history -->
                                                    <div v-if="gen.execution_time_seconds || gen.token_usage"
                                                        class="flex flex-wrap gap-2 text-[9px] text-slate-500 font-mono 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>

                                                    <!-- Action Buttons -->
                                                    <div class="flex gap-2 mt-1 border-t border-white/5 pt-2 w-full">
                                                        <Button icon="pi pi-copy" label="Prompt" size="small" text
                                                            class="!text-[10px] !py-0.5 !px-1.5 text-slate-400 hover:bg-white/5 flex-1"
                                                            @click.stop="reusePrompt(gen)"
                                                            v-tooltip.bottom="'Use this prompt'" />
                                                        <Button icon="pi pi-images" label="Asset" size="small" text
                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
                                                            @click.stop="reuseAsset(gen)"
                                                            v-tooltip.bottom="'Use original assets'"
                                                            :disabled="gen.status !== 'done' || gen.assets_list.length == 0" />
                                                        <Button icon="pi pi-reply" label="Result" size="small" text
                                                            class="!text-[10px] !py-0.5 !px-2 text-slate-400 hover:bg-white/5 flex-1"
                                                            :disabled="gen.status !== 'done' || gen.result_list.length == 0"
                                                            @click.stop="useResultAsReference(gen)"
                                                            v-tooltip.bottom="'Use result as reference'" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Compact Pagination -->
                                        <div v-if="historyTotal > historyRows" class="mt-2 text-xs">
                                            <Paginator :first="historyFirst" :rows="historyRows"
                                                :totalRecords="historyTotal" @page="onHistoryPage" :template="{
                                                    default: 'PrevPageLink PageLinks NextPageLink'
                                                }" class="!bg-transparent !border-none !p-0 !text-[10px]" :pt="{
                                                    root: { class: '!p-0' },
                                                    pcPageButton: { root: ({ context }) => ({ class: ['!min-w-[24px] !h-6 !text-[10px] !rounded-md', context.active ? '!bg-violet-600/20 !text-violet-400' : '!bg-transparent'] }) },
                                                    pcNextPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } },
                                                    pcPreviousPageButton: { root: { class: '!min-w-[24px] !h-6 !text-[10px]' } }
                                                }" />
                                        </div>
                                    </div>
                                </div>

                                <div
                                    class="absolute -bottom-20 -right-20 w-64 h-64 bg-violet-600/10 blur-[100px] rounded-full pointer-events-none">
                                </div>
                                <div
                                    class="absolute -top-20 -left-20 w-64 h-64 bg-cyan-600/10 blur-[100px] rounded-full pointer-events-none">
                                </div>
                            </div>
                        </TabPanel>

                        <TabPanel value="1">
                            <div class="glass-panel p-8 rounded-3xl border border-white/5 bg-white/5">
                                <div class="flex justify-between items-center mb-6">
                                    <h2 class="text-2xl font-bold m-0">Linked Assets ({{ assetsTotalRecords }})</h2>
                                    <div class="flex gap-3">
                                        <Button v-if="isMultiSelectMode"
                                            :label="`Use in Generation (${bulkSelectedAssetIds.length})`"
                                            icon="pi pi-bolt" severity="success"
                                            :disabled="bulkSelectedAssetIds.length === 0" @click="handleUseInGeneration"
                                            class="!py-2 !px-4 !text-sm font-bold rounded-xl transition-all shadow-lg shadow-green-500/20" />

                                        <Button :icon="isMultiSelectMode ? 'pi pi-times' : 'pi pi-list-check'"
                                            :severity="isMultiSelectMode ? 'danger' : 'secondary'"
                                            @click="isMultiSelectMode = !isMultiSelectMode" text
                                            class="!p-2 hover:bg-white/10 rounded-xl transition-all"
                                            :title="isMultiSelectMode ? 'Cancel Selection' : 'Multi-select'" />

                                        <input type="file" ref="fileInput" class="hidden" accept="image/*"
                                            @change="onFileSelected" />
                                        <Button :label="isUploading ? 'Uploading...' : 'Upload Asset'"
                                            :icon="isUploading ? 'pi pi-spin pi-spinner' : 'pi pi-upload'"
                                            :loading="isUploading" @click="triggerFileUpload"
                                            class="!py-2 !px-4 !text-sm font-bold bg-white/5 hover:bg-white/10 border-white/10 text-white rounded-xl transition-all" />
                                    </div>
                                </div>

                                <div v-if="characterAssets.length === 0"
                                    class="text-center py-16 text-slate-400 bg-white/[0.02] rounded-2xl">
                                    No assets linked to this character.
                                </div>

                                <div v-else class="flex-1 flex flex-col">
                                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
                                        <div v-for="asset in paginatedCharacterAssets" :key="asset.id"
                                            @click="openModal(asset)"
                                            class="glass-panel rounded-2xl overflow-hidden border transition-all duration-300 cursor-pointer hover:-translate-y-1 relative"
                                            :class="[
                                                bulkSelectedAssetIds.includes(asset.id)
                                                    ? 'border-violet-500 bg-violet-500/10 shadow-lg shadow-violet-500/10'
                                                    : isMultiSelectMode ? 'border-white/10 opacity-70 scale-[0.98]' : 'border-white/5 hover:border-white/20'
                                            ]">
                                            <div class="h-70 relative overflow-hidden">
                                                <img :src="(API_URL + asset.url + '?thumbnail=true') || 'https://via.placeholder.com/300'"
                                                    :alt="asset.name" class="w-full h-full object-cover" />

                                                <div v-if="isMultiSelectMode"
                                                    class="absolute inset-0 flex items-center justify-center bg-violet-900/20 backdrop-blur-[1px] transition-all"
                                                    :class="bulkSelectedAssetIds.includes(asset.id) ? 'opacity-100' : 'opacity-0 hover:opacity-100'">
                                                    <div class="w-12 h-12 rounded-full flex items-center justify-center border-2 transition-all"
                                                        :class="bulkSelectedAssetIds.includes(asset.id) ? 'bg-violet-600 border-violet-400 scale-110 shadow-lg' : 'bg-black/40 border-white/40 scale-100'">
                                                        <i class="pi pi-check text-white text-xl"></i>
                                                    </div>
                                                </div>

                                                <div
                                                    class="absolute top-2 right-2 bg-black/60 backdrop-blur-sm px-2 py-1 rounded text-xs uppercase text-white">
                                                    {{ asset.type }}
                                                </div>
                                            </div>
                                            <div class="p-4">
                                                <h3
                                                    class="text-sm font-semibold m-0 whitespace-nowrap overflow-hidden text-ellipsis">
                                                    {{ asset.name }}
                                                </h3>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Pagination -->
                                    <div v-if="assetsTotalRecords > assetsRows" class="mt-8">
                                        <Paginator :first="assetsFirst" :rows="assetsRows"
                                            :totalRecords="assetsTotalRecords" @page="onAssetsPage" :template="{
                                                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
                                            }" class="!bg-transparent !border-none !p-0" :pt="{
                                                root: { class: '!bg-transparent' },
                                                pcPageButton: {
                                                    root: ({ context }) => ({
                                                        class: [
                                                            '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
                                                            context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
                                                        ]
                                                    })
                                                },
                                                pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
                                                pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
                                                pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
                                                pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
                                            }" />
                                    </div>
                                </div>
                            </div>
                        </TabPanel>

                    </TabPanels>
                </Tabs>
            </div>

            <div v-else-if="loading" class="flex-1 p-8 overflow-y-auto flex flex-col gap-8">
                <Skeleton width="10rem" height="2rem" />
                <div class="glass-panel p-8 rounded-3xl">
                    <div class="flex gap-8 items-center">
                        <Skeleton shape="circle" size="9.5rem" />
                        <div class="flex-1">
                            <Skeleton width="20rem" height="3rem" class="mb-4" />
                            <Skeleton width="15rem" height="2rem" class="mb-6" />
                            <Skeleton width="100%" height="4rem" />
                        </div>
                    </div>
                </div>
            </div>

            <div v-else class="flex-1 flex items-center justify-center text-slate-400">
                Character not found.
            </div>

            <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
                :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
                <div v-if="selectedAsset" class="flex flex-col items-center">
                    <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
                        :alt="selectedAsset.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">{{ selectedAsset.name }}</h2>
                        <p class="text-slate-400">{{ selectedAsset.type }}</p>
                    </div>
                </div>
            </Dialog>
            <!-- Asset Selection Modal (Global) -->
            <Dialog v-model:visible="isAssetSelectionVisible" 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="selectedAssets.some(a => a.id === 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="selectedAssets.some(a => a.id === 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="modalAssetsFirst" :rows="modalAssetsRows"
                                :totalRecords="modalAssetsTotal" @page="onModalAssetsPage"
                                class="!bg-transparent !border-none !p-0" />
                            <Button label="Done" @click="isAssetSelectionVisible = false" class="!px-6" />
                        </div>
                    </div>
                </div>
            </Dialog>
        </div>
    </div>
</template>
<style scoped>
.p-tablist {
    background: transparent !important;
}

.p-tablist-tab-list {
    border: 0;
}

.p-tabpanels {
    background: transparent !important;
}

.p-togglebutton-content {
    padding: 0 !important;
}
</style>