@extends('layouts.admin')

@section('title', 'Collecteurs de données')
@section('header', 'Collecteurs de données')

@section('content')
<div x-data="collectorManager()">
    <!-- Description -->
    <div class="mb-6 rounded-lg bg-blue-50 p-4 border-l-4 border-blue-400">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400 text-xl"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    Lancez manuellement les collecteurs de données pour récupérer les informations depuis les différentes sources (emails, API, FTP).
                </p>
            </div>
        </div>
    </div>

    <!-- Sélection du collecteur -->
    <div class="mb-8 rounded-lg bg-white shadow">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">Sélectionnez un collecteur</h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <!-- Banking Emails -->
                <button @click="selectCollector('banking-emails')"
                        :class="selectedCollector === 'banking-emails' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-yellow-100">
                                <i class="fas fa-envelope text-yellow-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">Emails bancaires</h4>
                            <p class="mt-1 text-xs text-gray-500">Collecter les emails depuis compta@estair.travel</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'banking-emails'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>

                <!-- BMP Files (FTP) -->
                <button @click="selectCollector('bmp-files')"
                        :class="selectedCollector === 'bmp-files' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100">
                                <i class="fas fa-folder text-blue-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">Fichiers BMP (FTP)</h4>
                            <p class="mt-1 text-xs text-gray-500">Télécharger les fichiers depuis le serveur FTP</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'bmp-files'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>

                <!-- BMP from SPC -->
                <button @click="selectCollector('bmp-from-spc')"
                        :class="selectedCollector === 'bmp-from-spc' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-100">
                                <i class="fas fa-chart-bar text-purple-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">BMP via SPC API</h4>
                            <p class="mt-1 text-xs text-gray-500">Collecter via l'API SPC v2</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'bmp-from-spc'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>

                <!-- BSP from SPC -->
                <button @click="selectCollector('bsp-from-spc')"
                        :class="selectedCollector === 'bsp-from-spc' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-green-100">
                                <i class="fas fa-plane text-green-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">BSP IATA via SPC</h4>
                            <p class="mt-1 text-xs text-gray-500">Collecte bi-mensuelle (3 et 18 du mois)</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'bsp-from-spc'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>

                <!-- RHC from SPC -->
                <button @click="selectCollector('rhc-from-spc')"
                        :class="selectedCollector === 'rhc-from-spc' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100">
                                <i class="fas fa-hotel text-red-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">RHC IATA via SPC</h4>
                            <p class="mt-1 text-xs text-gray-500">Collecte horaire des réservations hôtel</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'rhc-from-spc'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>

                <!-- Wave Transactions -->
                <button @click="selectCollector('wave-transactions')"
                        :class="selectedCollector === 'wave-transactions' ? 'ring-2 ring-indigo-500 bg-indigo-50' : 'hover:bg-gray-50'"
                        class="relative rounded-lg border border-gray-300 p-4 text-left transition-all">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-100">
                                <i class="fas fa-credit-card text-indigo-600 text-xl"></i>
                            </div>
                        </div>
                        <div class="ml-4 flex-1">
                            <h4 class="text-sm font-medium text-gray-900">Transactions Wave</h4>
                            <p class="mt-1 text-xs text-gray-500">Collecter les transactions via l'API Wave</p>
                        </div>
                    </div>
                    <div x-show="selectedCollector === 'wave-transactions'" class="absolute top-2 right-2">
                        <i class="fas fa-check-circle text-indigo-600"></i>
                    </div>
                </button>
            </div>
        </div>
    </div>

    <!-- Formulaire de configuration -->
    <div x-show="selectedCollector" x-cloak class="mb-8">
        <div class="rounded-lg bg-white shadow">
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="text-lg font-medium text-gray-900">Configuration</h3>
            </div>
            <div class="p-6">
                <!-- Description du collecteur -->
                <div class="mb-6 rounded-md bg-gray-50 p-4">
                    <h4 class="text-sm font-medium text-gray-900 mb-2">
                        <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                        Description
                    </h4>
                    <p class="text-sm text-gray-600" x-text="getCollectorDescription()"></p>
                </div>

                <!-- Paramètres banking-emails -->
                <div x-show="selectedCollector === 'banking-emails'" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --since : Date de début
                        </label>
                        <div class="space-y-2">
                            <div class="flex items-center space-x-4">
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sinceType" value="preset" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Période prédéfinie</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sinceType" value="custom" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Date personnalisée</span>
                                </label>
                            </div>

                            <!-- Périodes prédéfinies -->
                            <div x-show="params.sinceType === 'preset'" class="flex items-center space-x-4 ml-6">
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sincePreset" value="now" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Depuis maintenant</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sincePreset" value="-1 hour" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Dernière heure</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sincePreset" value="-1 day" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Dernier jour</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="radio" x-model="params.sincePreset" value="-7 days" class="form-radio text-indigo-600">
                                    <span class="ml-2 text-sm text-gray-700">Dernière semaine</span>
                                </label>
                            </div>

                            <!-- Date personnalisée -->
                            <div x-show="params.sinceType === 'custom'" class="ml-6">
                                <input type="datetime-local" x-model="params.sinceCustom"
                                       class="block w-full max-w-md rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <p class="mt-1 text-xs text-gray-500">Format: Y-m-d H:i:s</p>
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --limit : Nombre maximum d'emails
                        </label>
                        <input type="number" x-model="params.limit" min="1" max="500"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Par défaut: 50 (max: 500)</p>
                    </div>

                    <div>
                        <label class="inline-flex items-center">
                            <input type="checkbox" x-model="params.markRead" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <span class="ml-2 text-sm font-medium text-gray-700">--mark-read : Marquer les emails comme lus après traitement</span>
                        </label>
                    </div>

                    <div>
                        <label class="inline-flex items-center">
                            <input type="checkbox" x-model="params.force" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <span class="ml-2 text-sm font-medium text-gray-700">--force : Forcer l'exécution même si --since remonte à plus de 30 jours</span>
                        </label>
                    </div>
                </div>

                <!-- Paramètres bmp-files -->
                <div x-show="selectedCollector === 'bmp-files'" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Mode de collecte</label>
                        <div class="flex items-center space-x-4">
                            <label class="inline-flex items-center">
                                <input type="radio" x-model="params.bmpMode" value="single" class="form-radio text-indigo-600">
                                <span class="ml-2 text-sm text-gray-700">Date unique</span>
                            </label>
                            <label class="inline-flex items-center">
                                <input type="radio" x-model="params.bmpMode" value="range" class="form-radio text-indigo-600">
                                <span class="ml-2 text-sm text-gray-700">Intervalle de dates</span>
                            </label>
                        </div>
                    </div>

                    <!-- Mode date unique -->
                    <div x-show="params.bmpMode === 'single'">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --date : Date de collecte (optionnel)
                        </label>
                        <input type="date" x-model="params.bmpFilesDate"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Format: YYYY-MM-DD. Si vide, utilise la date d'aujourd'hui.</p>
                    </div>

                    <!-- Mode intervalle -->
                    <div x-show="params.bmpMode === 'range'" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                --from : Date de début
                            </label>
                            <input type="date" x-model="params.bmpFilesFrom"
                                   class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                --to : Date de fin
                            </label>
                            <input type="date" x-model="params.bmpFilesTo"
                                   class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <p class="text-xs text-gray-500">Les deux dates sont requises. Maximum 90 jours.</p>

                        <div>
                            <label class="inline-flex items-center">
                                <input type="checkbox" x-model="params.bmpFilesAsync" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <span class="ml-2 text-sm font-medium text-gray-700">--async : Lancer en arrière-plan via des jobs</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Paramètres bmp-from-spc -->
                <div x-show="selectedCollector === 'bmp-from-spc'" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --date_from : Date de début de collecte (optionnel)
                        </label>
                        <input type="date" x-model="params.bmpDateFrom"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Format: YYYY-MM-DD. Si vide, utilise la date d'aujourd'hui.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --date_to : Date de fin de collecte (optionnel)
                        </label>
                        <input type="date" x-model="params.bmpDateTo"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Format: YYYY-MM-DD. Si vide, utilise date_from.</p>
                    </div>

                    <div>
                        <label class="inline-flex items-center">
                            <input type="checkbox" x-model="params.bmpSpcForce" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <span class="ml-2 text-sm font-medium text-gray-700">--force : Forcer la collecte même si la période dépasse 30 jours</span>
                        </label>
                    </div>
                </div>

                <!-- Paramètres bsp-from-spc -->
                <div x-show="selectedCollector === 'bsp-from-spc'" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            period_code : Code période BSP (optionnel)
                        </label>
                        <input type="text" x-model="params.periodCode" placeholder="ex: 250902"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">
                            Format: AAMMPP (AA=année, MM=mois, PP=période 01 ou 02). Si vide, utilise la période actuelle automatiquement.
                        </p>
                    </div>
                </div>

                <!-- Paramètres rhc-from-spc (aucun paramètre requis) -->
                <div x-show="selectedCollector === 'rhc-from-spc'">
                    <p class="text-sm text-gray-500 italic">Aucun paramètre requis pour ce collecteur.</p>
                </div>

                <!-- Paramètres wave-transactions -->
                <div x-show="selectedCollector === 'wave-transactions'" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --since : Date de début (optionnel)
                        </label>
                        <input type="datetime-local" x-model="params.waveSince"
                               class="block w-full max-w-md rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Format ISO8601 (ex: 2025-10-08T10:00:00Z). Si vide, collecte depuis la dernière exécution.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --to : Date de fin (optionnel)
                        </label>
                        <input type="datetime-local" x-model="params.waveTo"
                               class="block w-full max-w-md rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Format ISO8601 (ex: 2025-11-05T23:59:59Z). Si vide, collecte jusqu'à maintenant.</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            --limit : Nombre maximum de transactions (optionnel)
                        </label>
                        <input type="number" x-model="params.waveLimit" min="1" max="1000"
                               class="block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <p class="mt-1 text-xs text-gray-500">Nombre max de transactions à traiter. Si vide, pas de limite.</p>
                    </div>

                    <div>
                        <label class="inline-flex items-center">
                            <input type="checkbox" x-model="params.waveForce" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <span class="ml-2 text-sm font-medium text-gray-700">--force : Forcer l'exécution même si la période dépasse 30 jours</span>
                        </label>
                    </div>
                </div>

                <!-- Bouton de lancement -->
                <div class="mt-6 flex items-center justify-between border-t pt-6">
                    <button @click="runCollector()"
                            :disabled="loading"
                            :class="loading ? 'bg-gray-400 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700'"
                            class="inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                        <i :class="loading ? 'fa-spinner fa-spin' : 'fa-play'" class="fas mr-2"></i>
                        <span x-text="loading ? 'Exécution en cours...' : 'Lancer la collecte'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Historique des exécutions -->
    <div class="rounded-lg bg-white shadow">
        <div class="border-b border-gray-200 px-6 py-4 flex items-center justify-between">
            <h3 class="text-lg font-medium text-gray-900">Historique des exécutions</h3>
            <button @click="loadHistory()" class="text-sm text-indigo-600 hover:text-indigo-900">
                <i class="fas fa-sync-alt mr-1"></i>
                Rafraîchir
            </button>
        </div>
        <div class="p-6">
            <div x-show="historyLoading" class="text-center py-8">
                <i class="fas fa-spinner fa-spin text-gray-400 text-2xl"></i>
                <p class="mt-2 text-sm text-gray-500">Chargement...</p>
            </div>

            <div x-show="!historyLoading && history.length === 0" class="text-center py-8">
                <i class="fas fa-inbox text-gray-400 text-3xl"></i>
                <p class="mt-2 text-sm text-gray-500">Aucune exécution récente</p>
            </div>

            <div x-show="!historyLoading && history.length > 0" class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Date</th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Collecteur</th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Statut</th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Résultat</th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Durée</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        <template x-for="item in history" :key="item.id">
                            <tr>
                                <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900" x-text="formatDate(item.created_at)"></td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-900" x-text="item.collector_name"></td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm">
                                    <span :class="{
                                        'bg-green-100 text-green-800': item.status === 'success',
                                        'bg-red-100 text-red-800': item.status === 'failed',
                                        'bg-yellow-100 text-yellow-800': item.status === 'running'
                                    }" class="inline-flex rounded-full px-2 py-1 text-xs font-semibold">
                                        <i :class="{
                                            'fa-check': item.status === 'success',
                                            'fa-times': item.status === 'failed',
                                            'fa-spinner fa-spin': item.status === 'running'
                                        }" class="fas mr-1"></i>
                                        <span x-text="item.status"></span>
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500" x-text="item.result || '-'"></td>
                                <td class="whitespace-nowrap px-6 py-4 text-sm text-gray-500" x-text="item.duration || '-'"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
function collectorManager() {
    return {
        selectedCollector: null,
        loading: false,
        historyLoading: false,
        history: [],
        params: {
            sinceType: 'preset',
            sincePreset: 'now',
            sinceCustom: '',
            limit: 50,
            markRead: false,
            force: false,
            bmpMode: 'single',
            bmpFilesDate: '',
            bmpFilesFrom: '',
            bmpFilesTo: '',
            bmpFilesAsync: false,
            bmpDateFrom: '',
            bmpDateTo: '',
            bmpSpcForce: false,
            periodCode: '',
            waveSince: '',
            waveTo: '',
            waveLimit: '',
            waveForce: false
        },

        init() {
            this.loadHistory();
        },

        selectCollector(collector) {
            this.selectedCollector = collector;
            // Reset params
            this.params = {
                sinceType: 'preset',
                sincePreset: 'now',
                sinceCustom: '',
                limit: 50,
                markRead: false,
                force: false,
                bmpDateFrom: '',
                bmpDateTo: '',
                periodCode: '',
                waveSince: '',
                waveTo: '',
                waveLimit: '',
                waveForce: false
            };
        },

        getCollectorDescription() {
            const descriptions = {
                'banking-emails': 'Collecte les emails bancaires depuis la boîte mail compta@estair.travel et crée des messages dans Messager pour traitement.',
                'bmp-files': 'Télécharge les fichiers BMP quotidiens depuis le serveur FTP configuré.',
                'bmp-from-spc': 'Déclenche la collecte des données BMP via l\'API SPC v2.',
                'bsp-from-spc': 'Déclenche la collecte BSP IATA via l\'API SPC v2 (normalement bi-mensuelle le 3 et 18 du mois).',
                'rhc-from-spc': 'Déclenche la collecte RHC IATA via l\'API SPC v2 (collecte horaire des réservations hôtel).',
                'wave-transactions': 'Collecte les transactions Wave via l\'API Wave.'
            };
            return descriptions[this.selectedCollector] || '';
        },

        async runCollector() {
            if (this.loading || !this.selectedCollector) return;

            this.loading = true;

            try {
                const response = await fetch('{{ route("dashboard.collectors.run") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        collector: this.selectedCollector,
                        params: this.params
                    })
                });

                const data = await response.json();

                if (data.success) {
                    // Show success notification
                    this.showNotification('success', data.message || 'Collecte lancée avec succès');
                    // Reload history
                    setTimeout(() => this.loadHistory(), 1000);
                } else {
                    this.showNotification('error', data.message || 'Erreur lors du lancement de la collecte');
                }
            } catch (error) {
                console.error('Error:', error);
                this.showNotification('error', 'Erreur de communication avec le serveur');
            } finally {
                this.loading = false;
            }
        },

        async loadHistory() {
            this.historyLoading = true;

            try {
                const response = await fetch('{{ route("dashboard.collectors.history") }}');
                const data = await response.json();
                this.history = data.history || [];
            } catch (error) {
                console.error('Error loading history:', error);
            } finally {
                this.historyLoading = false;
            }
        },

        formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('fr-FR', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            });
        },

        showNotification(type, message) {
            // Simple alert for now - can be replaced with a toast notification system
            if (type === 'success') {
                alert('✅ ' + message);
            } else {
                alert('❌ ' + message);
            }
        }
    }
}
</script>

<style>
    [x-cloak] { display: none !important; }
</style>
@endsection