@extends('layout.app')

@section('title')
    {{ __('Import') }}
@endsection

@push('styles')
<style>
    .import-wizard {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .step-indicator {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2rem;
        position: relative;
    }
    
    .step-indicator::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 2px;
        background: #dee2e6;
        z-index: 1;
    }
    
    .step {
        position: relative;
        z-index: 2;
        background: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        color: #6c757d;
        font-weight: 500;
    }
    
    .step.active {
        background: #009a9c;
        color: white;
    }
    
    .step.completed {
        background: #009a9c;
        color: white;
    }
    
    .mapping-row {
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.3s;
    }
    
    .mapping-row:hover {
        background-color: #f8f9fa;
    }
    
    .field-required::after {
        content: ' *';
        color: #dc3545;
    }
    
    .preview-table {
        max-height: 400px;
        overflow: auto;
    }
    
    .preview-table table {
        font-size: 0.875rem;
    }
    
    .error-badge {
        background-color: #dc3545;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
    }
    
    .success-badge {
        background-color: #009a9c;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
    }
    
    .field-info {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    
    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
</style>
@endpush

@section('active_import', 'active')
@section('data_col', '2-columns')
@section('body_class', '2-columns')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row mb-1">
            <div class="content-header-left col-md-6 col-12 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Import')}}</h3>
                <div class="row breadcrumbs-top d-inline-block"></div>
            </div>
            <div class="content-header-right col-md-6 col-12"></div>
        </div>
        <div class="content-body pb-5">
            <div class="import-wizard" id="importApp">
                <!-- Step Indicator -->
                <div class="step-indicator mb-2">
                    <div class="step" :class="{ 'active': currentStep === 1, 'completed': currentStep > 1 }">
                        <i class="fas fa-table mr-1"></i> Sélection
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 2, 'completed': currentStep > 2 }">
                        <i class="fas fa-file-excel mr-1"></i> Fichier
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 3, 'completed': currentStep > 3 }">
                        <i class="fas fa-link mr-1"></i> Mapping
                    </div>
                    <div class="step" :class="{ 'active': currentStep === 4 }">
                        <i class="fas fa-check-circle mr-1"></i> Import
                    </div>
                </div>

                <!-- Step 1: Select Table -->
                <div class="card" v-if="currentStep === 1">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('Sélectionner la table de destination') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4" v-for="(label, value) in tables" :key="value">
                                <div class="card border cursor-pointer" 
                                     @click="selectTable(value)"
                                     :class="{ 'bg-teal-maq text-white': selectedTable === value }">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2">
                                                <i class="fas fa-database fa-2x" :class="{ 'text-white': selectedTable === value }"></i>
                                            </div>
                                            <div>
                                                <h5 class="mb-0" :class="{ 'text-white': selectedTable === value }">@{{ label }}</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button class="btn btn-teal-maq" @click="nextStep" :disabled="!selectedTable">
                            <i class="fas fa-arrow-right mr-1"></i> {{ __('Suivant') }}
                        </button>
                    </div>
                </div>

                <!-- Step 2: Upload File -->
                <div class="card" v-if="currentStep === 2">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('Télécharger le fichier Excel') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="upload-area text-center p-2 border rounded" 
                             @dragover.prevent
                             @drop.prevent="handleFileDrop"
                             :class="{ 'border-teal-maq': isDragging }"
                             @dragenter="isDragging = true"
                             @dragleave="isDragging = false">
                            
                            <i class="fas fa-cloud-upload-alt fa-4x text-muted mb-1"></i>
                            <h5>{{ __('Glissez-déposez votre fichier ici') }}</h5>
                            <p class="text-muted">{{ __('ou') }}</p>
                            
                            <label class="btn btn-teal-maq">
                                <i class="fas fa-folder-open mr-1"></i> {{ __('Parcourir') }}
                                <input type="file" 
                                       accept=".xlsx,.xls,.csv" 
                                       @change="handleFileSelect" 
                                       style="display: none;">
                            </label>
                            
                            <p class="mt-1">
                                <small class="text-muted">
                                    {{ __('Formats supportés: .xlsx, .xls, .csv (Max: 10MB)') }}
                                </small>
                            </p>
                        </div>
                        
                        <div v-if="selectedFile" class="mt-1">
                            <div class="alert alert-info">
                                <i class="fas fa-file-excel mr-2"></i>
                                <strong>@{{ selectedFile.name }}</strong>
                                <span class="badge badge-light ml-2">@{{ formatFileSize(selectedFile.size) }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <button class="btn btn-secondary" @click="previousStep">
                            <i class="fas fa-arrow-left mr-1"></i> {{ __('Précédent') }}
                        </button>
                        <button class="btn btn-teal-maq" @click="previewFile" :disabled="!selectedFile || loading">
                            <i class="fas fa-eye mr-1" v-if="!loading"></i>
                            <i class="fas fa-spinner fa-spin mr-1" v-if="loading"></i>
                            {{ __('Prévisualiser') }}
                        </button>
                    </div>
                </div>

                <!-- Step 3: Column Mapping -->
                <div class="card" v-if="currentStep === 3">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('Mapper les colonnes') }}</h4>
                        <p class="text-muted mb-0">
                            {{ __('Associez les colonnes de votre fichier Excel aux champs de la base de données') }}
                        </p>
                    </div>
                    <div class="card-body">
                        <!-- Preview Section -->
                        <div class="mb-1">
                            <h4>{{ __('Total lignes à importer:') }} @{{ totalRows }}</h4>
                        </div>
                        <!-- Options -->
                        <div class="mt-1 mb-1">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="hasHeader" v-model="hasHeader">
                                <label class="custom-control-label" for="hasHeader">
                                    {{ __('La première ligne contient les en-têtes') }}
                                </label>
                            </div>
                        </div>
                        <!-- Mapping Section -->
                        <div class="mapping-container">
                            
                            <div v-for="(field, key) in availableFields" :key="key" class="mapping-row">
                                <div class="row align-items-center">
                                    <div class="col-md-4">
                                        <label :class="{ 'field-required': field.required }">
                                            <strong>@{{ field.label }}</strong>
                                        </label>
                                        <div class="field-info">
                                            <i class="fas fa-tag mr-1"></i> @{{ field.type }}
                                            <span v-if="field.relation">
                                                <i class="fas fa-link ml-2 mr-1"></i> Relation
                                            </span>
                                        </div>
                                        <small class="text-muted">@{{ field.description }}</small>
                                    </div>
                                    <div class="col-md-6">
                                        <select class="form-control" 
                                                v-model="mappings[key]"
                                                :class="{ 'border-danger': field.required && !mappings[key] && showValidation }">
                                            <option value="">{{ __('-- Ignorer cette colonne --') }}</option>
                                            <option v-for="header in fileHeaders" :value="header">
                                                @{{ header }}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <span v-if="mappings[key]" class="text-success">
                                            <i class="fas fa-check-circle"></i> Mappé
                                        </span>
                                        <span v-else-if="field.required" class="text-danger">
                                            <i class="fas fa-exclamation-triangle"></i> Requis
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <button class="btn btn-secondary" @click="previousStep">
                            <i class="fas fa-arrow-left mr-1"></i> {{ __('Précédent') }}
                        </button>
                        <button class="btn btn-teal-maq" @click="startImport" :disabled="!isMappingValid">
                            <i class="fas fa-upload mr-1"></i> {{ __('Lancer l\'import') }}
                        </button>
                    </div>
                </div>

                <!-- Step 4: Import Progress & Results -->
                <div class="card" v-if="currentStep === 4">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('Import terminé') }}</h4>
                    </div>
                    <div class="card-body">
                        <div v-if="importing" class="text-center py-5">
                            <div class="spinner-border text-teal-maq mb-3" role="status" style="width: 3rem; height: 3rem;">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <h5>{{ __('Importation des données en cours...') }}</h5>
                            <p class="text-muted">{{ __('Veuillez patienter, cela peut prendre quelques instants.') }}</p>
                        </div>
                        
                        <div v-if="!importing && importResult">
                            <!-- Vérifier si c'est un succès ou une erreur -->
                            <div class="alert" :class="importResult.success ? 'alert-success' : 'alert-danger'">
                                <h5 class="alert-heading">
                                    <i :class="importResult.success ? 'la la-check-circle' : 'la la-times-circle'"></i>
                                    {{ __('Import terminé') }}
                                </h5>
                            </div>
                            
                            <!-- Afficher les stats seulement si c'est un succès et que stats existe -->
                            <div v-if="importResult.success && importResult.stats">
                                <div class="row text-center mb-4">
                                    <div class="col-md-4">
                                        <div class="border rounded p-3">
                                            <h3 class="text-primary">@{{ importResult.stats.total_rows || 0 }}</h3>
                                            <p class="text-muted mb-0">{{ __('Total lignes') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border rounded p-3">
                                            <h3 class="text-success">@{{ importResult.stats.success_count || 0 }}</h3>
                                            <p class="text-muted mb-0">{{ __('Importés avec succès') }}</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="border rounded p-3">
                                            <h3 class="text-danger">@{{ importResult.stats.error_count || 0 }}</h3>
                                            <p class="text-muted mb-0">{{ __('Erreurs') }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                <div v-if="importResult.stats.errors && importResult.stats.errors.length > 0" class="mt-4">
                                    <h6>{{ __('Détail des erreurs:') }}</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>{{ __('Ligne') }}</th>
                                                    <th>{{ __('Erreur') }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(error, index) in importResult.stats.errors" :key="index">
                                                    <td>@{{ error.row }}</td>
                                                    <td class="text-danger">@{{ error.message }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Afficher les erreurs de validation si présentes -->
                            <div v-if="!importResult.success && importResult.errors" class="mt-4">
                                <h6>{{ __('Erreurs de validation:') }}</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>{{ __('Ligne') }}</th>
                                                <th>{{ __('Champ') }}</th>
                                                <th>{{ __('Erreurs') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(error, index) in importResult.errors" :key="index">
                                                <td>@{{ error.row }}</td>
                                                <td>@{{ error.attribute }}</td>
                                                <td class="text-danger">@{{ error.errors.join(', ') }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        <button class="btn btn-secondary" @click="resetImport" v-if="!importing">
                            <i class="fas fa-redo mr-1"></i> {{ __('Nouvel import') }}
                        </button>
                        <a :href="getListUrl()" class="btn btn-teal-maq" v-if="!importing && importResult && importResult.success">
                            <i class="fas fa-list mr-1"></i> {{ __('Voir la liste') }}
                        </a>
                    </div>
                </div>
                
                <!-- Loading Overlay -->
                <div v-if="loading" class="loading-overlay">
                    <div class="text-center">
                        <div class="spinner-border text-teal-maq mb-3" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <h5 class="text-teal-maq">{{ __('Chargement...') }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
    el: '#importApp',
    data: {
        currentStep: 1,
        selectedTable: '',
        tables: {
            'organisations': 'Organisations',
            'fonctions': 'Fonctions',
            'sites': 'Sites',
            'vehicules': 'Véhicules'
        },
        selectedFile: null,
        fileHeaders: [],
        filePreview: [],
        totalRows: 0,
        availableFields: {},
        mappings: {},
        hasHeader: true,
        loading: false,
        isDragging: false,
        showValidation: false,
        importing: false,
        importResult: null
    },
    
    computed: {
        isMappingValid() {
            if (!this.availableFields || Object.keys(this.availableFields).length === 0) {
                return false;
            }
            
            for (let key in this.availableFields) {
                if (this.availableFields[key].required && !this.mappings[key]) {
                    return false;
                }
            }
            
            return true;
        }
    },
    
    methods: {
        selectTable(table) {
            this.selectedTable = table;
        },
        
        nextStep() {
            if (this.currentStep === 1 && this.selectedTable) {
                this.loadTableColumns();
            } else {
                this.currentStep++;
            }
        },
        
        previousStep() {
            this.currentStep--;
        },
        
        async loadTableColumns() {
            this.loading = true;
            try {
                const response = await axios.get('/import/get-columns', {
                    params: { table: this.selectedTable }
                });
                
                if (response.data.success) {
                    this.availableFields = response.data.columns;
                    this.currentStep = 2;
                } else {
                    this.showError('Impossible de charger les colonnes');
                }
            } catch (error) {
                this.showError('Erreur lors du chargement des colonnes');
            } finally {
                this.loading = false;
            }
        },
        
        handleFileSelect(event) {
            this.selectedFile = event.target.files[0];
        },
        
        handleFileDrop(event) {
            this.isDragging = false;
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                this.selectedFile = files[0];
            }
        },
        
        formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        },
        
        async previewFile() {
            if (!this.selectedFile) return;
            
            this.loading = true;
            const formData = new FormData();
            formData.append('file', this.selectedFile);
            formData.append('table', this.selectedTable);
            
            try {
                const response = await axios.post('/import/preview', formData);
                
                if (response.data.success) {
                    this.fileHeaders = response.data.headers;
                    this.filePreview = response.data.preview;
                    this.totalRows = response.data.total_rows;
                    this.currentStep = 3;
                    
                    // Auto-mapping basé sur les noms similaires
                    this.autoMapColumns();
                } else {
                    this.showError(response.data.message);
                }
            } catch (error) {
                this.showError('Erreur lors de la prévisualisation du fichier');
            } finally {
                this.loading = false;
            }
        },
        
        autoMapColumns() {
            for (let key in this.availableFields) {
                const field = this.availableFields[key];
                
                // Chercher une colonne avec un nom similaire
                for (let header of this.fileHeaders) {
                    const normalizedHeader = header.toLowerCase().trim();
                    const normalizedLabel = field.label.toLowerCase().trim();
                    const normalizedKey = key.toLowerCase().trim();
                    
                    if (normalizedHeader.includes(normalizedLabel) || 
                        normalizedHeader.includes(normalizedKey) ||
                        normalizedLabel.includes(normalizedHeader)) {
                        this.$set(this.mappings, key, header);
                        break;
                    }
                }
            }
        },
        
        async startImport() {
            this.showValidation = true;
            
            if (!this.isMappingValid) {
                this.showError('Veuillez mapper tous les champs obligatoires');
                return;
            }
            
            this.currentStep = 4;
            this.importing = true;
            
            const formData = new FormData();
            formData.append('file', this.selectedFile);
            formData.append('table', this.selectedTable);
            formData.append('mappings', JSON.stringify(this.mappings));
            formData.append('has_header', this.hasHeader ? '1' : '0');
    
            console.log('Sending import with has_header:', this.hasHeader); 
            
            try {
                const response = await axios.post('/import/process', formData);
                this.importResult = response.data;
            } catch (error) {
                if (error.response && error.response.data) {
                    this.importResult = error.response.data;
                } else {
                    this.importResult = {
                        success: false,
                        message: 'Erreur inconnue lors de l\'import'
                    };
                }
            } finally {
                this.importing = false;
            }
        },
        
        resetImport() {
            this.currentStep = 1;
            this.selectedTable = '';
            this.selectedFile = null;
            this.fileHeaders = [];
            this.filePreview = [];
            this.totalRows = 0;
            this.availableFields = {};
            this.mappings = {};
            this.hasHeader = true;
            this.showValidation = false;
            this.importResult = null;
        },
        
        getListUrl() {
            const urls = {
                'organisations': '/organisations',
                'fonctions': '/fonctions',
                'sites': '/sites',
                'vehicules': '/vehicules'
            };
            return urls[this.selectedTable] || '/';
        },
        
        showError(message) {
            // Implémenter votre système de notification ici
            alert(message);
        }
    }
});
</script>
@endpush