<template>
    <NuxtUiCard class="flex flex-col">
        <template #header>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ product.product_name }}</h3>
        </template>

        <template v-if="product.status === 'predicted'">
            <div class="text-center mb-4">
                <p class="text-5xl font-extrabold text-primary-600 dark:text-primary-400">
                    {{ product?.actual_prediction || 0 }}
                    <!-- <span class="text-xl font-normal text-gray-500 dark:text-gray-400">{{ product.unit }}</span> -->
                </p>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Prediksi</p>
            </div>

            <div class="mb-4 space-y-2">
                <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Rentang Prediksi:</p>
                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 relative">
                    <!-- <div class="h-2.5 rounded-full bg-blue-200 dark:bg-blue-800 absolute"
                        :style="{ left: `${getPercentage(product.actual_prediction, product.lower_bound, product.upper_bound)}%`, width: `${getPercentage(product.actual_prediction, product.lower_bound, product.upper_bound)}%` }">
                    </div> -->
                    <div class="absolute -top-1 w-4 h-4 rounded-full bg-primary-500 dark:bg-primary-300 border-2 border-white dark:border-gray-900 shadow-md"
                        :style="{ left: `${getPercentage(product?.actual_prediction || 0, product?.lower_bound || 0, product.upper_bound || 100)}%` }">
                    </div>
                </div>
                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
                    <span>Min: {{ product.lower_bound || 0 }}</span>
                    <span>Max: {{ product.upper_bound || 0 }}</span>
                </div>
            </div>
        </template>
        <template v-else-if="product.status === 'unpredicted'">
            <div class="product-unpredicted-state">
                <NuxtUiAlert color="yellow" title="Prediction Pending"
                    description="This product has not yet been predicted. A prediction is required to proceed."
                    class="mb-4" />
            </div>
        </template>

        <template v-else-if="product.status === 'loading'">
            <div class="product-loading-state flex flex-col items-center justify-center p-6 bg-blue-50 rounded-lg">
                <NuxtUiIcon name="i-heroicons-arrow-path" class="animate-spin text-blue-500 text-5xl mb-4" />
                <NuxtUiAlert color="blue" title="Loading Prediction..."
                    description="Please wait while we process the prediction for this product. This may take a moment."
                    class="mb-4" />
                <NuxtUiProgress animation="carousel" class="w-full max-w-sm" />
            </div>
        </template>

        <template #footer>
            <div class="flex items-center justify-end text-sm text-gray-600 dark:text-gray-400">
                <NuxtUiButton color="primary" variant="soft" size="sm" icon="i-heroicons-arrow-right" trailing
                    v-if="product.status === 'predicted'">
                    Lihat Detail
                </NuxtUiButton>
                <NuxtUiButton icon="i-heroicons-rocket-launch" color="primary" variant="solid"
                    @click="product.status = 'fetch-prediction'" v-else
                    :loading="product.status === 'loading' || product.status === 'fetch-prediction'">
                    Generate Prediction
                </NuxtUiButton>
            </div>
        </template>
    </NuxtUiCard>
</template>
<script lang="ts" setup>
import { useStoreFileRecord } from '~/stores/file/record';
import type { TPredictionProductList } from '~/types/prediction/product-list';
import { getPercentage } from '~/utils/math/percentage';
const product = defineModel<TPredictionProductList[number]>('product', {
    required: true
})
const storeFileRecord = useStoreFileRecord()
watch(() => product.value.status, newVal => {
    if (newVal === 'fetch-prediction') {
        product.value.status = 'loading'
        console.log('fetching product with product code = ', product.value.product_code)
    }

}, { immediate: true })
</script>
