<script setup>
import { ref, computed, watch } from 'vue';
import { Head, Link, router } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import MetricCard from '@/Components/MetricCard.vue';

const props = defineProps({
    hardwares: Object,
    metrics: Object,
    filters: Object,
});

// État des filtres
const search = ref(props.filters.search || '');
const status = ref(props.filters.status || '');
const type = ref(props.filters.type || '');

// Recherche réactive avec debouncing
let timeout;
const handleSearch = () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        runFilters();
    }, 300);
};

const runFilters = () => {
    router.get(route('materiels.index'), {
        search: search.value,
        status: status.value,
        type: type.value,
    }, {
        preserveState: true,
        replace: true,
    });
};

const resetFilters = () => {
    search.value = '';
    status.value = '';
    type.value = '';
    runFilters();
};

// Exporter en CSV
const exportCsv = () => {
    window.location.href = route('materiels.index', {
        search: search.value,
        status: status.value,
        type: type.value,
        export: 1,
    });
};

// Alerte de garanties expirées ou arrivant à expiration sous 30 jours
const expiringOrExpiredHardwares = computed(() => {
    return props.hardwares.data.filter(hw => {
        if (!hw.warranty_expiration_date) return false;
        // Si le matériel a une garantie de 0 jours restants ou moins de 30 jours restants
        return hw.warranty_remaining_days <= 30 || !hw.is_under_warranty;
    });
});

// Formatage français pour le type
const getTypeLabel = (type) => {
    switch (type) {
        case 'serveur': return 'Serveur';
        case 'switch': return 'Switch';
        case 'routeur': return 'Routeur';
        case 'onduleur': return 'Onduleur';
        case 'stockage': return 'Stockage (NAS/SAN)';
        case 'pare-feu': return 'Pare-feu';
        case 'poste_travail': return 'Poste de travail';
        case 'autre': return 'Autre';
        default: return type;
    }
};

// Stylisation des badges de statut
const getStatusClasses = (status) => {
    switch (status) {
        case 'en_stock':
            return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900';
        case 'en_service':
            return 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900';
        case 'en_panne':
            return 'bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-900';
        case 'au_rebut':
            return 'bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-900/60 dark:text-slate-400 dark:border-slate-800';
        default:
            return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300';
    }
};

const getStatusLabel = (status) => {
    switch (status) {
        case 'en_stock': return 'En stock';
        case 'en_service': return 'En service';
        case 'en_panne': return 'En panne';
        case 'au_rebut': return 'Au rebut';
        default: return status;
    }
};

// Stylisation de la garantie
const getWarrantyClasses = (hw) => {
    if (!hw.warranty_expiration_date) {
        return 'text-slate-400 dark:text-slate-500';
    }
    if (hw.is_under_warranty) {
        if (hw.warranty_remaining_days <= 90) {
            return 'text-amber-600 dark:text-amber-400 font-semibold';
        }
        return 'text-emerald-600 dark:text-emerald-400';
    }
    return 'text-rose-600 dark:text-rose-450 font-bold';
};
</script>

<template>
    <Head title="Inventaire Matériel Infrastructure" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h2 class="text-xl font-bold leading-tight text-slate-800 dark:text-slate-200">
                    Inventaire Matériel Infrastructure
                </h2>
                
                <div class="flex gap-2">
                    <button
                        @click="exportCsv"
                        class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800 transition-colors shadow-sm"
                    >
                        <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                        </svg>
                        Exporter
                    </button>

                    <Link
                        :href="route('materiels.create')"
                        class="inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-sky-600 rounded-lg hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400 transition-colors shadow-sm"
                    >
                        <svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                        </svg>
                        Ajouter un matériel
                    </Link>
                </div>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
                <!-- Notifications flash -->
                <div v-if="$page.props.flash?.success" class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg dark:bg-emerald-950/40 dark:border-emerald-900 dark:text-emerald-300 flex items-center shadow-sm">
                    <svg class="w-5 h-5 mr-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                    <span>{{ $page.props.flash?.success }}</span>
                </div>

                <!-- KPIs de l'inventaire -->
                <div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
                    <MetricCard title="Total Équipements" :value="metrics.total" color="text-slate-800 dark:text-white" />
                    <MetricCard title="En service" :value="metrics.en_service" color="text-emerald-600 dark:text-emerald-400" />
                    <MetricCard title="En stock (Rechange)" :value="metrics.en_stock" color="text-blue-600 dark:text-blue-400" />
                    <MetricCard title="En panne" :value="metrics.en_panne" color="text-rose-600 dark:text-rose-450" />
                    <MetricCard title="Sous garantie active" :value="metrics.under_warranty" color="text-sky-600 dark:text-sky-400" />
                </div>

                <!-- Alertes Garantie -->
                <div v-if="expiringOrExpiredHardwares.length > 0" class="p-4 bg-amber-50 border border-amber-200 text-amber-900 rounded-lg dark:bg-amber-950/25 dark:border-amber-900/60 dark:text-amber-300 shadow-sm space-y-2">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 mr-2 shrink-0 text-amber-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                        </svg>
                        <span class="font-bold">Alerte cycle de vie : Matériel(s) hors garantie ou expirant bientôt (sous 30j)</span>
                    </div>
                    <ul class="list-disc pl-5 text-xs space-y-1">
                        <li v-for="hw in expiringOrExpiredHardwares.slice(0, 5)" :key="hw.id">
                            <Link :href="route('materiels.show', hw.id)" class="underline hover:text-amber-800 dark:hover:text-amber-100 font-semibold">
                                {{ hw.name }} ({{ hw.brand }} {{ hw.model }})
                            </Link> 
                            - {{ hw.warranty_status_label }}
                        </li>
                        <li v-if="expiringOrExpiredHardwares.length > 5">
                            Et {{ expiringOrExpiredHardwares.length - 5 }} autre(s) équipement(s)...
                        </li>
                    </ul>
                </div>

                <!-- Filtres et recherche -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-4 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <!-- Recherche textuelle -->
                    <div class="flex-1 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                            <svg class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.602 10.602Z" />
                            </svg>
                        </div>
                        <input
                            v-model="search"
                            @input="handleSearch"
                            type="text"
                            placeholder="Rechercher par nom, marque, modèle, n° série, IP, emplacement..."
                            class="block w-full pl-10 pr-3 py-2 text-sm bg-slate-50 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-200"
                        />
                    </div>

                    <!-- Sélections filtres -->
                    <div class="flex flex-wrap items-center gap-2">
                        <!-- Filtrer par type -->
                        <select
                            v-model="type"
                            @change="runFilters"
                            class="bg-slate-50 border border-slate-300 rounded-lg text-sm px-3 py-2 text-slate-700 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-300"
                        >
                            <option value="">Tous les types</option>
                            <option value="serveur">Serveur</option>
                            <option value="switch">Switch</option>
                            <option value="routeur">Routeur</option>
                            <option value="onduleur">Onduleur</option>
                            <option value="stockage">Stockage</option>
                            <option value="pare-feu">Pare-feu</option>
                            <option value="poste_travail">Poste de travail</option>
                            <option value="autre">Autre</option>
                        </select>

                        <!-- Filtrer par statut -->
                        <select
                            v-model="status"
                            @change="runFilters"
                            class="bg-slate-50 border border-slate-300 rounded-lg text-sm px-3 py-2 text-slate-700 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-300"
                        >
                            <option value="">Tous les statuts</option>
                            <option value="en_stock">En stock</option>
                            <option value="en_service">En service</option>
                            <option value="en_panne">En panne</option>
                            <option value="au_rebut">Au rebut</option>
                        </select>

                        <!-- Réinitialiser -->
                        <button
                            v-if="search || status || type"
                            @click="resetFilters"
                            class="text-xs font-semibold text-rose-600 hover:text-rose-500 dark:text-rose-450 dark:hover:text-rose-400 px-2.5 py-2"
                        >
                            Réinitialiser
                        </button>
                    </div>
                </div>

                <!-- Liste du matériel -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead>
                                <tr class="bg-slate-50 border-b border-slate-100 dark:bg-slate-950/40 dark:border-slate-850 text-xxs font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="px-6 py-4">Nom de l'équipement</th>
                                    <th class="px-6 py-4">Marque / Modèle</th>
                                    <th class="px-6 py-4">Numéro de série</th>
                                    <th class="px-6 py-4">Emplacement / IP</th>
                                    <th class="px-6 py-4">Garantie</th>
                                    <th class="px-6 py-4">Statut</th>
                                    <th class="px-6 py-4 text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-850 text-sm">
                                <tr
                                    v-for="hw in hardwares.data"
                                    :key="hw.id"
                                    class="hover:bg-slate-50/50 dark:hover:bg-slate-950/20 transition-colors"
                                >
                                    <td class="px-6 py-4">
                                        <div class="font-bold text-slate-800 dark:text-slate-200">
                                            <Link :href="route('materiels.show', hw.id)" class="hover:text-sky-600 dark:hover:text-sky-400">
                                                {{ hw.name }}
                                            </Link>
                                        </div>
                                        <span class="inline-block mt-0.5 text-xxs font-semibold text-slate-400 uppercase">
                                            {{ getTypeLabel(hw.type) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-slate-800 dark:text-slate-200 font-medium">{{ hw.brand }}</div>
                                        <div class="text-xs text-slate-450">{{ hw.model }}</div>
                                    </td>
                                    <td class="px-6 py-4 font-mono text-xs text-slate-600 dark:text-slate-350 font-semibold">
                                        {{ hw.serial_number }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-slate-800 dark:text-slate-200 font-medium">{{ hw.location }}</div>
                                        <div v-if="hw.ip_address" class="text-xs font-mono text-sky-600 dark:text-sky-400 mt-0.5">{{ hw.ip_address }}</div>
                                        <div v-else class="text-xxs text-slate-400 italic">Pas d'IP de gestion</div>
                                    </td>
                                    <td class="px-6 py-4 text-xs">
                                        <span :class="getWarrantyClasses(hw)">
                                            {{ hw.warranty_status_label }}
                                        </span>
                                        <span class="block text-xxs text-slate-405 mt-0.5" v-if="hw.warranty_expiration_date">
                                            Fin : {{ hw.warranty_expiration_date_formatted }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <span
                                            :class="`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${getStatusClasses(hw.status)}`"
                                        >
                                            {{ getStatusLabel(hw.status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="flex items-center justify-end gap-3">
                                            <Link
                                                :href="route('materiels.show', hw.id)"
                                                class="text-slate-500 hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-400"
                                                title="Voir les détails"
                                            >
                                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                                </svg>
                                            </Link>
                                            <Link
                                                :href="route('materiels.edit', hw.id)"
                                                class="text-slate-500 hover:text-amber-500 dark:text-slate-400 dark:hover:text-amber-400"
                                                title="Modifier la fiche"
                                            >
                                                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 18.75a4.48 4.48 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                                </svg>
                                            </Link>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="hardwares.data.length === 0">
                                    <td colspan="7" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
                                        Aucun équipement de matériel trouvé dans l'inventaire.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Liens de pagination -->
                <div v-if="hardwares.meta && hardwares.meta.last_page > 1" class="flex justify-center mt-6">
                    <nav class="flex items-center space-x-1">
                        <Link
                            v-for="(link, index) in hardwares.meta.links"
                            :key="index"
                            :href="link.url || '#'"
                            class="px-3.5 py-2 rounded-lg text-sm font-semibold transition-colors"
                            :class="[
                                link.active 
                                    ? 'bg-sky-600 text-white dark:bg-sky-500' 
                                    : 'bg-white text-slate-700 hover:bg-slate-50 border border-slate-350 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800',
                                !link.url && 'opacity-50 cursor-not-allowed pointer-events-none'
                            ]"
                            v-html="link.label"
                        />
                    </nav>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
