@extends('layouts.dashboard')

@section('content')
<div
    x-data="motosManager({
        initialMotos: @js($motos),
        routes: {
            base: '{{ route('dashboard.motos.index', [], false) }}',
            store: '{{ route('dashboard.motos.store', [], false) }}',
            reorder: '{{ route('dashboard.motos.reorder', [], false) }}',
            toggle_suffix: '/toggle-active',
            parts_base: '{{ route('dashboard.motos.parts.index', ['moto' => ':motoId'], false) }}'
        },
        csrf: '{{ csrf_token() }}'
    })"
    x-init="init()"
>
    <!-- Show form when creating/editing -->
    <div x-show="showForm" x-transition x-cloak>
        @include('dashboard.forms.motos-form')
    </div>

    <!-- Show Parts Manager -->
    <div x-show="showPartsManager" x-transition x-cloak>
        @include('dashboard.forms.motos-parts-form')
    </div>

    <!-- Show list when not in form mode -->
    <div x-show="!showForm && !showPartsManager" x-transition>
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl">
                <i class="bi bi-bicycle mr-2"></i>
                Motos
            </h1>
            <button type="button" 
                    class="px-4 cursor-pointer py-2 rounded-md bg-gray-900 text-white hover:bg-black transition-colors"
                    x-on:click="openCreate()">
                <i class="bi bi-plus-circle mr-2"></i>
                Ajouter une moto
            </button>
        </div>

        <!-- Categories -->
        <template x-for="(categoryMotos, category) in motos" :key="category">
            <div class="bg-white rounded-lg p-6 border border-gray-200 mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold" x-text="category"></h2>
                    <span class="text-sm text-gray-500" x-text="categoryMotos.length + ' moto(s)'"></span>
                </div>

                <template x-if="categoryMotos.length === 0">
                    <p class="text-gray-500 text-center py-8">Aucune moto dans cette catégorie</p>
                </template>

                <template x-if="categoryMotos.length > 0">
                    <ul class="space-y-3">
                        <template x-for="(moto, index) in categoryMotos" :key="moto.id">
                            <li class="flex items-center gap-4 p-4 border border-gray-200 rounded-lg ">
                                <!-- Order controls -->
                                <div class="flex flex-col gap-1">
                                    <button
                                        type="button"
                                        class="text-gray-500 hover:text-black p-1 cursor-pointer text-lg rounded disabled:opacity-40"
                                        :disabled="index === 0"
                                        x-on:click="moveUp(category, index)"
                                        aria-label="Monter"
                                        title="Monter">
                                        <i class="bi bi-chevron-up"></i>
                                    </button>
                                    <button
                                        type="button"
                                        class="text-gray-500 hover:text-black p-1 cursor-pointer text-lg rounded disabled:opacity-40"
                                        :disabled="index === categoryMotos.length - 1"
                                        x-on:click="moveDown(category, index)"
                                        aria-label="Descendre"
                                        title="Descendre">
                                        <i class="bi bi-chevron-down"></i>
                                    </button>
                                </div>

                                <!-- Thumbnail -->
                                <div class="w-25 h-16 bg-gray-100 rounded overflow-hidden flex items-center justify-center flex-shrink-0">
                                    <template x-if="moto.thumbnail">
                                        <img :src="moto.thumbnail" alt="Aperçu" class="object-cover w-full h-full">
                                    </template>
                                    <template x-if="!moto.thumbnail && moto.primary_variant?.image">
                                        <img :src="moto.primary_variant.image" alt="Aperçu" class="object-cover w-full h-full">
                                    </template>
                                    <template x-if="!moto.thumbnail && !moto.primary_variant?.image">
                                        <i class="bi bi-bicycle text-2xl text-gray-400"></i>
                                    </template>
                                </div>

                                <!-- Content -->
                                <div class="flex-1">
                                    <h3 class="font-semibold" x-text="moto.title"></h3>
                                    <p class="text-sm text-gray-600" x-text="moto.subtitle || 'Aucun tag configuré'"></p>
                                    <div class="flex items-center gap-2 mt-1">
                                        <span class="text-xs bg-brand text-white px-2 py-1 rounded" x-text="(moto.variants?.length || 0) + ' variante(s)'"></span>
                                    </div>
                                </div>

                                <!-- Active toggle -->
                                <div class="flex items-center">
                                    <button type="button"
                                            title="Activer/Désactiver"
                                            role="switch"
                                            :aria-checked="moto.active ? 'true' : 'false'"
                                            class="relative cursor-pointer me-4 inline-flex h-6 w-14 items-center rounded-sm transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2"
                                            :class="moto.active ? 'bg-brand focus:ring-brand' : 'bg-gray-300 focus:ring-gray-200'"
                                            x-bind:disabled="moto._switching"
                                            x-on:click="toggleActive(moto)">
                                        <span class="absolute left-1.5 top-1 inline-block h-4 w-4 rounded-sm bg-white shadow-md transform transition-transform duration-300 ease-in-out"
                                            :class="moto.active ? 'translate-x-7' : 'translate-x-0'"></span>
                                    </button>
                                </div>

                                <!-- Actions -->
                                <div class="flex items-center gap-2">
                                    <button type="button" 
                                            class="px-2 py-1 cursor-pointer rounded border hover:bg-black hover:text-white transition-ease duration-300  text-sm"
                                            x-on:click="openPartsManager(moto)" 
                                            aria-label="Pièces de rechange"
                                            title="Gérer les pièces de rechange">
                                        <i class="bi bi-tools"></i>
                                    </button>
                                    <button type="button" 
                                            class="px-2 py-1 cursor-pointer rounded border hover:bg-black hover:text-white transition-ease duration-300  text-sm"
                                            x-on:click="openEdit(moto)" 
                                            aria-label="Modifier"
                                            title="Modifier la moto">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button type="button" 
                                            class="px-2 py-1 cursor-pointer rounded border border-red-300 text-red-600 hover:bg-red-600 hover:text-white transition-ease duration-300 text-sm"
                                            x-on:click="confirmRemove(moto)" 
                                            aria-label="Supprimer"
                                            title="Supprimer la moto">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </div>
                            </li>
                        </template>
                    </ul>
                </template>
            </div>
        </template>
    </div>
    
    <!-- Delete confirmation modal -->
    <div x-show="motoDeleteModal.open" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
        x-cloak>
        <div x-show="motoDeleteModal.open"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 transform scale-95"
            x-transition:enter-end="opacity-100 transform scale-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100 transform scale-100"
            x-transition:leave-end="opacity-0 transform scale-95"
            @click.away="motoDeleteModal.open = false"
            class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
            
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Confirmer la suppression</h3>
                <button @click="motoDeleteModal.open = false" 
                        class="text-gray-400 hover:text-gray-600 cursor-pointer">
                    <i class="bi bi-x text-xl"></i>
                </button>
            </div>

            <div class="mb-6">
                <p class="text-gray-700">
                    Êtes-vous sûr de vouloir supprimer cette moto ? 
                    <strong x-text="motoDeleteModal.moto?.title"></strong>
                </p>
                <p class="text-sm text-gray-500 mt-2">
                    Cette action est irréversible et supprimera également toutes les données associées 
                    (variantes, attributs, images, etc.).
                </p>
            </div>

            <div class="flex justify-end gap-3">
                <button @click="motoDeleteModal.open = false"
                        :disabled="motoDeleteModal.loading"
                        class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors disabled:opacity-50">
                    Annuler
                </button>
                <button @click="deleteMoto()"
                        :disabled="motoDeleteModal.loading"
                        class="px-4 py-2 bg-red-600 cursor-pointer text-white hover:bg-red-700 rounded-md transition-colors disabled:opacity-50">
                    <template x-if="motoDeleteModal.loading">
                        <span>
                            <i class="bi bi-arrow-clockwise animate-spin mr-2"></i>
                            Suppression...
                        </span>
                    </template>
                    <template x-if="!motoDeleteModal.loading">
                        <span>
                            <i class="bi bi-trash mr-2"></i>
                            Supprimer
                        </span>
                    </template>
                </button>
            </div>
        </div>
    </div>

    <!-- Error Modal -->
    <div x-show="errorModal.open" class="fixed inset-0 z-50 flex items-center justify-center px-4"
            x-trap.noscroll="errorModal.open"
            @keydown.escape.window="errorModal.open = false"
            x-cloak>
        <div class="absolute inset-0 bg-black/40" x-on:click="errorModal.open = false"></div>
        <div class="relative bg-red-50 border border-red-200 text-red-800 rounded-lg p-6 w-full max-w-lg shadow-lg">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-semibold">Erreur</h2>
                <button class="text-red-700 hover:text-red-900 cursor-pointer" x-on:click="errorModal.open = false">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="space-y-1 max-h-72 overflow-auto">
                <template x-for="(msg, i) in errorModal.messages" :key="i">
                    <div x-text="msg"></div>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    // Main component for managing the list of motos and the form
    Alpine.data('motosManager', function(config) {
        return {
            motos: config.initialMotos || {},
            routes: config.routes,
            csrf: config.csrf,
            showForm: false,
            formMode: 'create', // 'create' or 'edit'
            currentMoto: null,
            motoDeleteModal: {
                open: false,
                moto: null,
                loading: false
            },
            errorModal: { open: false, messages: [] },
            showPartsManager: false,

            init() {
                const self = this;
                // Expose data to children via Alpine store
                Alpine.store('motosApp', {
                    routes: this.routes,
                    csrf: this.csrf,
                    motos: this.motos,
                    formMode: this.formMode,
                    currentMoto: this.currentMoto,
                    showPartsManager: this.showPartsManager, // Ajouter cette propriété au store
                    hideForm: this.hideForm.bind(this),
                    hidePartsManager: this.hidePartsManager.bind(this),
                    setFormContext(mode, moto) {
                        this.formMode = mode;
                        this.currentMoto = moto;
                    },
                    showErrors: (payload) => {
                        self.errorModal.messages = self.flattenErrors(payload);
                        self.errorModal.open = true;
                    }
                });

                // Initialize any switches for motos
                Object.values(this.motos).flat().forEach(moto => {
                    moto._switching = false;
                });
            },

            openCreate() {
                this.showPartsManager = false;
                this.formMode = 'create';
                this.currentMoto = null;
                Alpine.store('motosApp').setFormContext('create', null);
                this.showForm = true;
            },

            openEdit(moto) {
                this.showPartsManager = false;
                this.formMode = 'edit';
                this.currentMoto = moto;
                Alpine.store('motosApp').setFormContext('edit', moto);
                this.showForm = true;
            },

            hideForm() {
                this.showForm = false;
                this.currentMoto = null;
            },
            
            openPartsManager(moto) {
                this.showForm = false;
                this.currentMoto = moto;
                this.showPartsManager = true;
                // Mettre à jour le store également
                Alpine.store('motosApp').currentMoto = moto;
                Alpine.store('motosApp').formMode = 'parts';
                Alpine.store('motosApp').showPartsManager = true;
            },

            hidePartsManager() {
                this.showPartsManager = false;
                this.currentMoto = null;
                // Mettre à jour le store également
                Alpine.store('motosApp').showPartsManager = false;
            },

            moveUp(category, index) {
                this.moveBy(category, index, -1);
            },

            moveDown(category, index) {
                this.moveBy(category, index, 1);
            },

            moveBy(category, index, offset) {
                const newIndex = index + offset;
                const categoryMotos = this.motos[category];
                
                if (index < 0 || index >= categoryMotos.length) return;
                if (newIndex < 0 || newIndex >= categoryMotos.length) return;
                
                const moved = categoryMotos.splice(index, 1)[0];
                categoryMotos.splice(newIndex, 0, moved);
                
                this.$nextTick(() => this.syncOrder());
            },

            async syncOrder() {
                const allMotos = Object.values(this.motos).flat();
                const ids = allMotos.map(moto => moto.id);
                
                try {
                    await fetch(this.routes.reorder, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                            'Accept': 'application/json',
                        },
                        body: JSON.stringify({ ids }),
                    });
                } catch (error) {
                    console.error('Error syncing order:', error);
                }
            },

            async toggleActive(moto) {
                if (moto._switching) return;
                moto._switching = true;

                const previous = !!moto.active;
                moto.active = !previous;

                try {
                    const res = await fetch(`${this.routes.base}/${moto.id}/toggle-active`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Accept': 'application/json',
                        },
                    });

                    if (res.ok) {
                        const data = await res.json();
                        moto.active = !!data.active;
                    } else {
                        moto.active = previous;
                    }
                } catch (e) {
                    moto.active = previous;
                } finally {
                    setTimeout(() => {
                        moto._switching = false;
                    }, 250);
                }
            },

            confirmRemove(moto) {
                this.motoDeleteModal = {
                    open: true,
                    moto: moto,
                    loading: false,
                };
            },

            async deleteMoto() {
                if (this.motoDeleteModal.loading) return;
                
                this.motoDeleteModal.loading = true;
                const moto = this.motoDeleteModal.moto;

                try {
                    const res = await fetch(`${this.routes.base}/${moto.id}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': this.csrf,
                            'Accept': 'application/json',
                        },
                    });

                    if (res.ok) {
                        // Remove from the appropriate category
                        Object.keys(this.motos).forEach(category => {
                            const index = this.motos[category].findIndex(m => m.id === moto.id);
                            if (index !== -1) {
                                this.motos[category].splice(index, 1);
                            }
                        });
                        
                        this.motoDeleteModal.open = false;
                    } else {
                        alert('Erreur lors de la suppression');
                    }
                } catch (error) {
                    alert('Erreur lors de la suppression');
                } finally {
                    this.motoDeleteModal.loading = false;
                }
            },

            flattenErrors(payload) {
                try {
                    if (!payload) return ['Une erreur est survenue.'];
                    if (payload.errors) {
                        const out = [];
                        Object.values(payload.errors).forEach(arr => {
                            arr.forEach(msg => out.push(msg));
                        });
                        return out.length ? out : ['Une erreur est survenue.'];
                    }
                    if (payload.message) return [payload.message];
                    return ['Une erreur est survenue.'];
                } catch (e) {
                    return ['Une erreur est survenue.'];
                }
            },
        };
    });
});
</script>
@endsection