<template>
    <StatusCard title="Jobs" :icon="CpuChipIcon">
        <!-- Onglets -->
        <div class="flex gap-1 mb-3 border-b border-gray-200 dark:border-gray-700">
            <button
                v-for="tab in tabs"
                :key="tab.key"
                @click="activeTab = tab.key"
                class="px-3 py-1.5 text-xs font-medium transition-colors"
                :class="activeTab === tab.key
                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
                    : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'">
                {{ tab.label }}
            </button>
        </div>

        <!-- Contenu -->
        <template v-if="activeTab === 'global'">
            <div class="grid grid-cols-2 gap-2">
                <Metric label="Total" :value="status.totalJobs" />
                <Metric label="En cours" :value="status.inProgressJobs" color="blue" />
                <Metric label="Terminés" :value="status.completedJobs" color="green" />
                <Metric label="En attente" :value="status.pendingJobs" color="yellow" />
                <Metric label="Échoués" :value="status.failedJobs" color="red" />
            </div>
        </template>

        <template v-else-if="activeTab === '24h'">
            <div class="grid grid-cols-2 gap-2">
                <Metric label="Total" :value="status.totalJobsLast24h" />
                <Metric label="Terminés" :value="status.completedJobsLast24h" color="green" />
                <Metric label="Échoués" :value="status.failedJobsLast24h" color="red" />
                <div class="col-span-2">
                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast24h)">
                        {{ status.successRateLast24h }}%
                    </span>
                </div>
            </div>
        </template>

        <template v-else>
            <div class="grid grid-cols-2 gap-2">
                <Metric label="Total" :value="status.totalJobsLast7d" />
                <Metric label="Terminés" :value="status.completedJobsLast7d" color="green" />
                <Metric label="Échoués" :value="status.failedJobsLast7d" color="red" />
                <div class="col-span-2">
                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast7d)">
                        {{ status.successRateLast7d }}%
                    </span>
                </div>
            </div>
        </template>
    </StatusCard>
</template>

<script setup>
import { ref } from 'vue';
import { CpuChipIcon } from '@heroicons/vue/24/outline';
import StatusCard from './StatusCard.vue';

defineProps({
    status: {
        type: Object,
        required: true,
    },
});

const activeTab = ref('global');

const tabs = [
    { key: 'global', label: 'Global' },
    { key: '24h', label: '24h' },
    { key: '7j', label: '7 jours' },
];

function rateColor(rate) {
    if (rate >= 80) return 'text-green-600 dark:text-green-400';
    if (rate >= 50) return 'text-yellow-600 dark:text-yellow-400';
    return 'text-red-600 dark:text-red-400';
}

const Metric = {
    props: {
        label: String,
        value: Number,
        color: { type: String, default: 'gray' },
    },
    template: `
        <div>
            <p class="text-xs text-gray-500">{{ label }}</p>
            <p class="text-lg font-semibold"
               :class="{
                 'text-gray-900 dark:text-white': color === 'gray',
                 'text-green-600 dark:text-green-400': color === 'green',
                 'text-red-600 dark:text-red-400': color === 'red',
                 'text-yellow-600 dark:text-yellow-400': color === 'yellow',
                 'text-blue-600 dark:text-blue-400': color === 'blue',
               }">{{ value }}</p>
        </div>
    `,
};
</script>
