@extends('layouts.admin')

@section('title', 'Gestion Boîte à Outils - Admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminToolsComponent()" x-cloak>
    <!-- En-tête -->
    <div class="mb-8">
        <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center gap-3">
            <i data-lucide="wrench" class="w-8 h-8 text-purple-600"></i>
            Gestion Boîte à Outils
        </h1>
        <p class="mt-2 text-gray-600">Gérer les catégories, cartes et items - Scope global ou par magasin</p>
    </div>

    <!-- Statistiques -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Catégories</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="categories.length">0</p>
                </div>
                <i data-lucide="folder" class="w-12 h-12 text-purple-600 opacity-20"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Par défaut</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="categories.filter(c => c.is_default_for_stores).length">0</p>
                </div>
                <i data-lucide="check-circle" class="w-12 h-12 text-blue-600 opacity-20"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Cartes totales</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="totalCards">0</p>
                </div>
                <i data-lucide="layers" class="w-12 h-12 text-green-600 opacity-20"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm p-6 border-l-4 border-orange-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Items totaux</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="totalItems">0</p>
                </div>
                <i data-lucide="file-text" class="w-12 h-12 text-orange-600 opacity-20"></i>
            </div>
        </div>
    </div>

    <!-- Liste des catégories -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-200 flex items-center justify-between">
            <h2 class="text-xl font-bold text-gray-900">Catégories de la Boîte à Outils</h2>
            <button @click="openCreate()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                <i data-lucide="plus" class="w-4 h-4 inline-block mr-2"></i>
                Nouvelle catégorie
            </button>
        </div>

        <template x-if="isLoading">
            <div class="p-8 text-center text-gray-500">Chargement des catégories...</div>
        </template>

        <template x-if="error">
            <div class="p-8 bg-red-50 border-l-4 border-red-500">
                <div class="flex items-start gap-3">
                    <i data-lucide="alert-circle" class="w-6 h-6 text-red-600 flex-shrink-0"></i>
                    <div>
                        <p class="font-semibold text-red-900">Erreur de chargement</p>
                        <p class="text-sm text-red-700 mt-1" x-text="error"></p>
                        <button @click="loadCategories()" class="mt-3 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm">
                            Réessayer
                        </button>
                    </div>
                </div>
            </div>
        </template>

        <template x-if="!isLoading && !error && categories.length === 0">
            <div class="p-8 text-center text-gray-500">
                <i data-lucide="folder-open" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
                <p>Aucune catégorie trouvée</p>
            </div>
        </template>

        <div class="divide-y divide-gray-200">
            <template x-for="category in categories" :key="category.id">
                <div class="p-6 hover:bg-gray-50 transition border-b border-gray-100 last:border-b-0" x-data="{ open: false }">
                    {{-- Category Header --}}
                    <div class="flex items-start justify-between cursor-pointer" @click="open = !open">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-2">
                                <i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 transition-transform" :class="open ? 'rotate-90' : ''"></i>
                                <div class="w-8 h-8 flex items-center justify-center text-gray-500">
                                    <i :data-lucide="getIcon(category.emoji)" class="w-6 h-6"></i>
                                </div>
                                <h3 class="text-lg font-bold text-gray-900" x-text="category.title"></h3>
                                <span x-show="category.is_default_for_stores" class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">
                                    Par défaut
                                </span>
                                <span x-show="category.store_id" class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded-full">
                                    Magasin spécifique
                                </span>
                                <span x-show="!category.store_id && !category.is_default_for_stores" class="px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-800 rounded-full">
                                    Global
                                </span>
                            </div>
                            <p class="text-sm text-gray-600 pl-8" x-text="category.summary"></p>
                            <div class="mt-3 flex items-center gap-4 text-sm text-gray-500 pl-8">
                                <span class="flex items-center gap-1">
                                    <i data-lucide="layers" class="w-4 h-4"></i>
                                    <span x-text="category.cards?.length || 0"></span> cartes
                                </span>
                                <span class="flex items-center gap-1">
                                    <i data-lucide="list-ordered" class="w-4 h-4"></i>
                                    Ordre: <span x-text="category.order"></span>
                                </span>
                                <span x-show="!category.is_visible" class="text-red-600 font-semibold">
                                    ⚠️ Masquée
                                </span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2" @click.stop>
                            <button @click="openCardModal(category)" class="px-3 py-1.5 bg-blue-50 text-blue-700 hover:bg-blue-100 rounded-lg text-sm flex items-center gap-2 transition">
                                <i data-lucide="layout" class="w-4 h-4"></i> Carte
                            </button>
                            <button @click="openEdit(category)" class="px-2 py-2 text-gray-500 hover:bg-gray-200 rounded-lg transition">
                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                            </button>
                            <button @click="removeCategory(category)" class="px-2 py-2 text-red-500 hover:bg-red-50 rounded-lg transition">
                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Cards List (Accordion Body) --}}
                    <div x-show="open" x-collapse class="mt-6 ml-8 pl-6 border-l-2 border-gray-200 space-y-4">
                        <template x-if="!category.cards || category.cards.length === 0">
                            <p class="text-gray-400 italic text-sm">Aucune carte dans cette catégorie.</p>
                        </template>

                        <template x-for="card in category.cards" :key="card.id">
                            <div class="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden hover:border-purple-300 transition">
                                {{-- Card Header --}}
                                <div class="px-4 py-3 flex items-center justify-between bg-white border-b border-gray-200">
                                    <div class="flex items-center gap-3">
                                        <h4 class="font-semibold text-gray-800" x-text="card.title"></h4>
                                        <span x-show="card.scope === 'global'" class="bg-blue-100 text-blue-700 text-xs px-2 py-0.5 rounded">Global</span>
                                        <span x-show="card.scope === 'store'" class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded">Magasin</span>
                                        <span x-text="card.items?.length + ' items'" class="text-xs text-gray-500"></span>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <button @click="openItemModal(card)" class="text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded hover:bg-purple-100 transition">
                                            + Item
                                        </button>
                                        <button @click="openCardModal(category, card)" class="p-1 text-gray-500 hover:text-purple-600 transition">
                                            <i data-lucide="edit-2" class="w-4 h-4"></i>
                                        </button>
                                        <button @click="deleteCard(card.id)" class="p-1 text-gray-500 hover:text-red-600 transition">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </div>
                                {{-- Card Details (Body) --}}
                                <div class="p-4 grid grid-cols-1 gap-4">
                                    <div x-show="card.global_body" class="text-sm text-gray-600">
                                        <span class="font-semibold text-gray-900">Contenu Global:</span>
                                        <div class="prose prose-sm mt-1" x-text="card.global_body"></div>
                                    </div>

                                    {{-- Items List --}}
                                    <div x-show="card.items && card.items.length > 0" class="space-y-2 mt-2">
                                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Items</p>
                                        <template x-for="item in card.items" :key="item.id">
                                            <div class="flex items-center justify-between bg-white px-3 py-2 rounded border border-gray-100 text-sm hover:shadow-sm transition">
                                                <div class="flex items-center gap-2 overflow-hidden">
                                                    <span class="text-lg" x-text="item.type === 'link' ? '🔗' : (item.type === 'code' ? '💻' : '📝')"></span>
                                                    <div class="flex flex-col min-w-0">
                                                        <span class="truncate font-medium text-gray-700" x-text="item.label"></span>
                                                        <span class="truncate text-gray-500 text-xs" x-text="item.content"></span>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-1 flex-shrink-0">
                                                    <button @click="openItemModal(card, item)" class="p-1 text-gray-400 hover:text-blue-600 transition">
                                                        <i data-lucide="edit-2" class="w-3 h-3"></i>
                                                    </button>
                                                    <button @click="deleteItem(item.id)" class="p-1 text-gray-400 hover:text-red-600 transition">
                                                        <i data-lucide="trash-2" class="w-3 h-3"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
    </div>

    {{-- Modal catégorie --}}
    <div x-show="showModal" x-cloak class="fixed inset-0 bg-black/40 z-50 flex items-center justify-center px-4" x-transition.opacity>
        <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full p-5 space-y-4 border border-gray-100" @click.away="showModal=false">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900" x-text="form.id ? 'Modifier la catégorie' : 'Nouvelle catégorie'"></h3>
                <button @click="showModal=false" class="text-gray-400 hover:text-gray-600"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>

            <div class="grid grid-cols-1 gap-3">
                <label class="space-y-1 text-sm text-gray-700">
                    <span>Titre</span>
                    <input type="text" x-model="form.title" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-200 focus:border-purple-400">
                </label>
                <label class="space-y-1 text-sm text-gray-700">
                    <span>Emoji</span>
                    <input type="text" x-model="form.emoji" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-200 focus:border-purple-400">
                </label>
                <label class="space-y-1 text-sm text-gray-700">
                    <span>Résumé</span>
                    <textarea x-model="form.summary" rows="2" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-200 focus:border-purple-400"></textarea>
                </label>
                <label class="space-y-1 text-sm text-gray-700">
                    <span>Ordre</span>
                    <input type="number" min="1" x-model.number="form.order" class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-200 focus:border-purple-400">
                </label>
                <div class="flex items-center gap-3 text-sm text-gray-700">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" x-model="form.is_default_for_stores" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                        Par défaut (tous magasins)
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="checkbox" x-model="form.is_visible" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                        Visible
                    </label>
                </div>
            </div>

            <div class="flex items-center justify-end gap-2">
                <button @click="showModal=false" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Annuler</button>
                <button @click="saveCategory()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">Enregistrer</button>
            </div>

            <template x-if="error">
                <p class="text-xs text-red-600" x-text="error"></p>
            </template>
        </div>
    </div>

    <!-- Info Box -->
    <div class="mt-8 bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6">
        <div class="flex items-start gap-3">
            <i data-lucide="info" class="w-6 h-6 text-blue-600 flex-shrink-0"></i>
            <div class="text-sm text-blue-900">
                <p class="font-semibold mb-2">💡 Fonctionnement du scope par magasin</p>
                <ul class="list-disc list-inside space-y-1 text-blue-800">
                    <li><strong>Catégories "Par défaut"</strong> : Créées automatiquement lors de la création d'un nouveau magasin</li>
                    <li><strong>Contenu global</strong> : Visible pour tous les magasins (ex: emails SAV Infinity)</li>
                    <li><strong>Contenu par magasin</strong> : Spécifique à un magasin (ex: code Oney du magasin F132)</li>
                    <li><strong>Exemple</strong> : Infinity = catégorie par défaut avec emails SAV globaux ; Oney = catégorie par défaut avec tableau financements global + codes par magasin</li>
                </ul>
            </div>
        </div>
    </div>

    {{-- Modals (inclus via components - doivent être à l'intérieur du x-data) --}}
    @include('components.tools.card-modal')
    @include('components.tools.item-modal')
</div>

<script>
function adminToolsComponent() {
    return {
        categories: [],
        isLoading: true,
        error: null,
        showModal: false, // Category Modal
        showCardModal: false,
        showItemModal: false,
        saving: false,
        isAdmin: true, // For modals

        // Notifications helper (use global showToast if available)
        notify(message, type = 'error') {
            try {
                if (window.showToast) {
                    // Some components expose showToast(message, options)
                    window.showToast(message, { type });
                } else if (window.addNotification) {
                    window.addNotification({ message, type });
                }
            } catch (e) {
                // silent fallback - intentionally avoid console output in production
            }
        },

        // Forms
        form: { id: null, title: '', emoji: '🧭', summary: '', order: 1, is_default_for_stores: false, is_visible: true },
        cardForm: { id: null, tool_tab_id: null, title: '', global_body: '', store_body: '', order: 0, scope: 'global' },
        itemForm: { id: null, tool_card_id: null, type: 'text', label: '', global_content: '', store_content: '', order: 0, scope: 'global' },

        // State identifiers
        editingCard: null,
        editingItem: null,
        currentTab: null, // For creating new card in specific tab
        currentCard: null, // For creating new item in specific card

        get totalCards() {
            return this.categories.reduce((sum, cat) => sum + (cat.cards?.length || 0), 0);
        },

        get totalItems() {
            return this.categories.reduce((sum, cat) => {
                return sum + (cat.cards?.reduce((cardSum, card) => cardSum + (card.items?.length || 0), 0) || 0);
            }, 0);
        },

        async init() {
            await this.loadCategories();
        },

        async loadCategories() {
            this.isLoading = true;
            this.error = null;

            try {
                const response = await fetch('/admin/api/tools/categories', {
                    method: 'GET',
                    headers: { 'Accept': 'application/json' }
                });

                if (!response.ok) throw new Error('Erreur chargement données');
                this.categories = await response.json();
            } catch (error) {
                this.notify(error?.message || 'Erreur chargement données');
                this.error = error.message;
            } finally {
                this.isLoading = false;
            }
        },

        // ==========================
        // CATEGORY (TAB) CRUD
        // ==========================
        openCreate() {
            this.form = { id: null, title: '', emoji: '🧭', summary: '', order: (this.categories.length + 1), is_default_for_stores: false, is_visible: true };
            this.showModal = true;
        },

        openEdit(category) {
            this.form = { ...category };
            this.showModal = true;
        },

        async saveCategory() {
            this.error = null;
            const isEdit = !!this.form.id;
            const url = isEdit ? `/admin/api/tools/categories/${this.form.id}` : '/admin/api/tools/categories';
            const method = isEdit ? 'PUT' : 'POST';

            try {
                const response = await fetch(url, {
                    method,
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    },
                    body: JSON.stringify(this.form),
                });

                if (!response.ok) throw new Error('Erreur enregistrement');

                this.showModal = false;
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur enregistrement');
                this.error = error.message;
            }
        },

        async removeCategory(category) {
            if (!confirm(`Supprimer la catégorie "${category.title}" ?`)) return;
            try {
                const response = await fetch(`/admin/api/tools/categories/${category.id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    }
                });
                if (!response.ok) throw new Error('Erreur suppression');
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur suppression');
                this.error = error.message;
            }
        },

        // ==========================
        // CARD CRUD
        // ==========================
        openCardModal(tab, card = null) {
            this.currentTab = tab;
            if (card) {
                this.editingCard = card;
                this.cardForm = {
                    id: card.id,
                    tool_tab_id: tab.id,
                    title: card.title,
                    global_body: card.global_body || '',
                    store_body: card.store_body || '', // Admin usually doesn't edit this, but API allows
                    order: card.order,
                    scope: card.scope || 'global'
                };
            } else {
                this.editingCard = null;
                this.cardForm = {
                    id: null,
                    tool_tab_id: tab.id,
                    title: '',
                    global_body: '',
                    store_body: '',
                    order: (tab.cards?.length || 0),
                    scope: 'global' // Admin creates global by default
                };
            }
            this.showCardModal = true;
        },

        async saveCard() {
            this.saving = true;
            this.error = null;
            const isEdit = !!this.cardForm.id;
            const url = isEdit ? `/admin/api/tools/cards/${this.cardForm.id}` : '/admin/api/tools/cards';
            const method = isEdit ? 'PUT' : 'POST';

            try {
                // Ensure scope is set
                if (!this.cardForm.scope) this.cardForm.scope = 'global';

                const response = await fetch(url, {
                    method,
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    },
                    body: JSON.stringify(this.cardForm),
                });

                if (!response.ok) {
                    const txt = await response.text();
                    throw new Error(txt || 'Erreur enregistrement carte');
                }

                this.showCardModal = false;
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur enregistrement carte');
                this.error = error.message;
            } finally {
                this.saving = false;
            }
        },

        async deleteCard(cardId) {
            if (!confirm("Supprimer cette carte ?")) return;
            try {
                const response = await fetch(`/admin/api/tools/cards/${cardId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    }
                });
                if (!response.ok) throw new Error('Erreur suppression carte');
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur suppression carte');
                this.error = error.message;
            }
        },

        // ==========================
        // ITEM CRUD
        // ==========================
        openItemModal(card, item = null) {
            this.currentCard = card;
            if (item) {
                this.editingItem = item;
                this.itemForm = {
                    id: item.id,
                    tool_card_id: card.id,
                    type: item.type,
                    label: item.label,
                    // Map content to global_content for admin editing if scope matches
                    global_content: item.scope === 'global' ? item.content : (item.global_content || ''),
                    store_content: item.scope === 'store' ? item.content : (item.store_content || ''),
                    order: item.order,
                    scope: item.scope
                };
            } else {
                this.editingItem = null;
                this.itemForm = {
                    id: null,
                    tool_card_id: card.id,
                    type: 'link', // default
                    label: '',
                    global_content: '',
                    store_content: '',
                    order: (card.items?.length || 0),
                    scope: 'global' // Admin creates global items by default
                };
            }
            this.showItemModal = true;
        },

        async saveItem() {
            this.saving = true;
            this.error = null;
            const isEdit = !!this.itemForm.id;
            const url = isEdit ? `/admin/api/tools/items/${this.itemForm.id}` : '/admin/api/tools/items';
            const method = isEdit ? 'PUT' : 'POST';

            // Prepare content based on scope (Admin mostly touches Global)
            // But modal uses `global_content` / `store_content` fields
            // API expects `content` field.
            // Logic: If scope is global, take global_content.
            const payload = {
                ...this.itemForm,
                content: this.itemForm.scope === 'global' ? this.itemForm.global_content : this.itemForm.store_content
            };

            try {
                const response = await fetch(url, {
                    method,
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    },
                    body: JSON.stringify(payload),
                });

                if (!response.ok) {
                    const txt = await response.text();
                    throw new Error(txt || 'Erreur enregistrement item');
                }

                this.showItemModal = false;
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur enregistrement item');
                this.error = error.message;
            } finally {
                this.saving = false;
            }
        },

        async deleteItem(itemId) {
            if (!confirm("Supprimer cet item ?")) return;
            try {
                const response = await fetch(`/admin/api/tools/items/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                    }
                });
                if (!response.ok) throw new Error('Erreur suppression item');
                await this.loadCategories();
            } catch (error) {
                this.notify(error?.message || 'Erreur suppression item');
                this.error = error.message;
            }
        },

        getIcon(source) {
            if (!source) return 'folder';
            
            // Mapping manuel des fichiers SVG connus vers Lucide
            const mapping = {
                'Information_DeepBlue.svg': 'wrench', // Infinity
                'Promo-Euro-Etiquette_DeepBlue.svg': 'tag', // OP & ZIMM
                'Rachat_DeepBlue.svg': 'recycle', // Rachat
                'Smartphone-Telephone_DeepBlue.svg': 'smartphone', // ZAGG
                'Maison-Aspirateur_DeepBlue.svg': 'truck', // B'dom
                'CB-Bancaire_DeepBlue.svg': 'credit-card', // Oney
                'PC-Portable_DeepBlue.svg': 'laptop', // Informatique
                'TV_DeepBlue.svg': 'tv', // Canal+
                'Contact-SAV-Appel_DeepBlue.svg': 'book-user', // Annuaire
                'Contrat-Facture_DeepBlue.svg': 'info', // Aides diverses
                
                // Anciens mappings au cas où
                'Installation_DeepBlue.svg': 'wrench',
                'RDV-Agenda_DeepBlue.svg': 'calendar',
                'Plus-Bundle_DeepBlue.svg': 'package-plus',
                'Actu_DeepBlue.svg': 'newspaper',
                'Formation_DeepBlue.svg': 'graduation-cap',
                'Performance_DeepBlue.svg': 'trending-up',
                'Equipe_DeepBlue.svg': 'users',
                'Sécurité_DeepBlue.svg': 'shield-check',
                'Client_DeepBlue.svg': 'smile',
                'Produit_DeepBlue.svg': 'box',
                'Services_DeepBlue.svg': 'headphones',
                'Digital_DeepBlue.svg': 'smartphone',
                'RSE_DeepBlue.svg': 'leaf',
            };
    
            // Si source est une URL ou un chemin, extraire le nom de fichier
            const filename = source.split('/').pop();
            
            if (mapping[filename]) {
                return mapping[filename];
            }
    
            // Fallback générique basé sur des mots clés
            const lower = filename.toLowerCase();
            
            // Mappings spécifiques demandés
            if (lower.includes('infinity')) return 'wrench';
            if (lower.includes('rachat')) return 'recycle';
            if (lower.includes('zag') || lower.includes('ecran')) return 'smartphone';
            if (lower.includes('bdom') || lower.includes('domicile')) return 'truck';
            if (lower.includes('oney') || lower.includes('finance') || lower.includes('credit')) return 'credit-card';
            if (lower.includes('canal') || lower.includes('tv')) return 'tv';
            if (lower.includes('numero') || lower.includes('annuaire')) return 'book-user';
            if (lower.includes('aides') || lower.includes('divers')) return 'info';
    
            if (lower.includes('info')) return 'info';
            if (lower.includes('outil') || lower.includes('tool')) return 'wrench';
            if (lower.includes('agenda') || lower.includes('calendar')) return 'calendar';
            if (lower.includes('promo')) return 'percent';
            if (lower.includes('plus')) return 'plus-circle';
            
            // Icône par défaut
            return 'folder';
        }
    };
}
</script>
@endsection