<template>
    <div v-if="log">
        <!-- Page Header -->
        <div class="flex flex-col sm:flex-row justify-between items-center mb-5">
            <h5 class="font-semibold text-lg dark:text-white-light">Gold Price Update Log Details</h5>
            <ul class="flex">
                <li>
                    <Link href="/gold-price-logs" class="text-primary hover:underline">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                        class="w-4 h-4">
                        <path opacity="0.5"
                            d="M2 12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039Z"
                            fill="currentColor"></path>
                        <path d="M13 12L9 8H17L13 12Z" fill="currentColor"></path>
                    </svg>
                    </Link>
                </li>
                <li><span class="head-menu">Log Details</span></li>
            </ul>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Info -->
            <div class="lg:col-span-2">
                <!-- Status Card -->
                <div class="panel mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h5 class="font-semibold text-lg dark:text-white-light">Execution Overview</h5>
                        <span :class="getStatusBadgeClass(log.status)">
                            {{ getStatusLabel(log.status) }}
                        </span>
                    </div>

                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div class="text-sm text-gray-500">Execution Type</div>
                                <div class="font-semibold">{{ log.execution_type }}</div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">Collection</div>
                                <div class="font-semibold">{{ log.collection_name }}</div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div class="text-sm text-gray-500">Started At</div>
                                <div class="font-semibold">{{ formatDate(log.started_at) }}</div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">Completed At</div>
                                <div class="font-semibold">{{ formatDate(log.completed_at) }}</div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div class="text-sm text-gray-500">Duration</div>
                                <div class="font-semibold">{{ log.duration_seconds }} seconds</div>
                            </div>
                            <div>
                                <div class="text-sm text-gray-500">Gold Price Per Gram</div>
                                <div class="font-semibold text-xl text-primary">${{ formatPrice(log.gold_price_per_gram)
                                }}</div>
                            </div>
                        </div>

                        <div v-if="log.summary_message" class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
                            <div class="text-sm text-gray-500 mb-1">Summary</div>
                            <div class="font-semibold">{{ log.summary_message }}</div>
                        </div>
                    </div>
                </div>

                <!-- Results -->
                <div class="panel mb-6">
                    <h5 class="font-semibold text-lg dark:text-white-light mb-4">Update Results</h5>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <!-- 10k Results -->
                        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h6 class="font-semibold">10K Updates</h6>
                                <span class="text-2xl">🟡</span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Updated:</span>
                                    <span class="font-semibold text-green-600">{{ log.total_10k_updated }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Errors:</span>
                                    <span class="font-semibold text-red-600">{{ log.total_10k_errors }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Products Processed:</span>
                                    <span class="font-semibold">{{ log.total_products_processed }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 14k Results -->
                        <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h6 class="font-semibold">14K Updates</h6>
                                <span class="text-2xl">🟡</span>
                            </div>
                            <div class="space-y-2">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Updated:</span>
                                    <span class="font-semibold text-green-600">{{ log.total_14k_updated }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Errors:</span>
                                    <span class="font-semibold text-red-600">{{ log.total_14k_errors }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Products Processed:</span>
                                    <span class="font-semibold">{{ log.total_products_processed }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Success Message when no errors -->
                <div v-if="!log.error_logs || log.error_logs.length === 0"
                    class="panel bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
                    <div class="flex items-center gap-3">
                        <div class="flex-shrink-0">
                            <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <h5 class="font-semibold text-lg dark:text-white-light text-green-800 dark:text-green-300">
                                Success!
                            </h5>
                            <p class="text-sm text-green-700 dark:text-green-400 mt-1">
                                All products were updated successfully without any errors.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Errors -->
                <div v-if="log.error_logs && log.error_logs.length > 0" class="panel">
                    <h5 class="font-semibold text-lg dark:text-white-light mb-4 text-red-600">
                        Error Logs ({{ log.error_logs.length }})
                    </h5>

                    <div class="space-y-4">
                        <div v-for="error in log.error_logs" :key="error.id"
                            class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                            <div class="flex items-start justify-between mb-2">
                                <div class="flex items-center gap-2">
                                    <span class="badge badge-outline-danger">{{ error.material_type }}</span>
                                    <span v-if="error.product_title" class="text-sm font-semibold">{{
                                        error.product_title }}</span>
                                    <span v-if="error.variant_title" class="text-sm text-gray-500">- {{
                                        error.variant_title }}</span>
                                </div>
                            </div>
                            <div class="text-sm font-semibold text-red-700 dark:text-red-400 mb-2">
                                {{ error.error_message }}
                            </div>
                            <details class="mt-2">
                                <summary
                                    class="cursor-pointer text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800">
                                    View stack trace
                                </summary>
                                <pre
                                    class="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">{{ error.error_trace }}</pre>
                            </details>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <div class="panel">
                    <h5 class="font-semibold text-lg dark:text-white-light mb-4">Quick Actions</h5>
                    <div class="space-y-2">
                        <Link href="/gold-price-logs" class="btn btn-outline-primary w-full">
                        ← Back to Logs
                        </Link>
                        <Link href="/gold-price-logs/latest" class="btn btn-outline-secondary w-full">
                        View Latest
                        </Link>
                    </div>
                </div>

                <div class="panel mt-6">
                    <h5 class="font-semibold text-lg dark:text-white-light mb-4">Statistics</h5>
                    <div class="space-y-3">
                        <div>
                            <div class="text-sm text-gray-500">Total Products</div>
                            <div class="font-semibold text-lg">{{ log.total_products_processed }}</div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Success Rate</div>
                            <div class="font-semibold text-lg text-green-600">
                                {{ calculateSuccessRate() }}%
                            </div>
                        </div>
                        <div>
                            <div class="text-sm text-gray-500">Total Errors</div>
                            <div class="font-semibold text-lg text-red-600">
                                {{ log.total_10k_errors + log.total_14k_errors }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="panel">
        <div class="text-center py-20">
            <div class="text-6xl mb-4">📊</div>
            <h6 class="font-semibold text-lg mb-2">Log not found</h6>
            <p class="text-gray-500 mb-6">The requested log entry does not exist or has been removed.</p>
            <Link href="/gold-price-logs" class="btn btn-primary">
            ← Back to Logs
            </Link>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';

interface Props {
    log: any;
}

const props = defineProps<Props>();

function getStatusBadgeClass(status: string) {
    const classes = {
        success: 'badge badge-outline-success',
        partial_success: 'badge badge-outline-warning',
        failed: 'badge badge-outline-danger'
    };
    return classes[status as keyof typeof classes] || 'badge badge-outline-secondary';
}

function getStatusLabel(status: string) {
    const labels: Record<string, string> = {
        success: 'Success',
        partial_success: 'Partial Success',
        failed: 'Failed'
    };
    return labels[status] || status;
}

function formatDate(date: string | null) {
    return date ? new Date(date).toLocaleString() : 'N/A';
}

function formatPrice(price: number | null | string) {
    if (price === null || price === undefined || price === '') {
        return '0.00';
    }
    const numPrice = typeof price === 'string' ? parseFloat(price) : price;
    if (isNaN(numPrice)) {
        return '0.00';
    }
    return numPrice.toFixed(2);
}

function calculateSuccessRate() {
    const totalUpdated = props.log.total_10k_updated + props.log.total_14k_updated;
    const totalErrors = props.log.total_10k_errors + props.log.total_14k_errors;
    const total = totalUpdated + totalErrors;

    if (total === 0) return 0;
    return Math.round((totalUpdated / total) * 100);
}
</script>
