@extends('layouts.admin')

@section('title', 'Modifier : ' . $project->title)

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Modifier le chantier</h2>
            <p class="text-sm text-gray-500 mt-1">
                Créé le {{ $project->created_at->format('d/m/Y') }}
                @if($project->is_published)
                    — <span class="text-green-600">Publié</span>
                @else
                    — <span class="text-gray-500">Brouillon</span>
                @endif
            </p>
        </div>
        <a href="{{ route('admin.projects.index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 transition">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Retour à la liste
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- ============================================================
             FORMULAIRE PRINCIPAL (2/3)
             ============================================================ --}}
        <div class="lg:col-span-2">
            <form action="{{ route('admin.projects.update', $project) }}" method="POST"
                  class="bg-white rounded-xl shadow-sm border p-6 space-y-6">
                @csrf
                @method('PUT')

                {{-- Titre --}}
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Titre *</label>
                    <input type="text" name="title" id="title" value="{{ old('title', $project->title) }}" required
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                    @error('title')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Slug --}}
                <div>
                    <label for="slug" class="block text-sm font-medium text-gray-700 mb-1">
                        Slug <span class="text-gray-400 font-normal">(modifié auto si le titre change)</span>
                    </label>
                    <input type="text" name="slug" id="slug" value="{{ old('slug', $project->slug) }}"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none font-mono text-sm">
                    @error('slug')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Catégorie --}}
                <div>
                    <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">Catégorie *</label>
                    <select name="category_id" id="category_id" required
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                        <option value="">— Sélectionner —</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $project->category_id) == $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('category_id')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Description --}}
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description *</label>
                    <textarea name="description" id="description" rows="8" required
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-y">{{ old('description', $project->description) }}</textarea>
                    @error('description')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                </div>

                {{-- Lieu + Date --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Lieu</label>
                        <input type="text" name="location" id="location" value="{{ old('location', $project->location) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
                               placeholder="Ex : Bruxelles">
                    </div>
                    <div>
                        <label for="project_date" class="block text-sm font-medium text-gray-700 mb-1">Date du chantier</label>
                        <input type="date" name="project_date" id="project_date"
                               value="{{ old('project_date', $project->project_date?->format('Y-m-d')) }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
                    </div>
                </div>

                {{-- Options publication --}}
                <div class="border-t pt-6">
                    <h3 class="text-sm font-bold text-gray-700 mb-4 uppercase tracking-wider">Publication</h3>
                    <div class="flex flex-wrap gap-6">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="hidden" name="is_published" value="0">
                            <input type="checkbox" name="is_published" value="1"
                                   {{ old('is_published', $project->is_published) ? 'checked' : '' }}
                                   class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm font-medium text-gray-700">Publié</span>
                        </label>
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <input type="hidden" name="is_featured" value="0">
                            <input type="checkbox" name="is_featured" value="1"
                                   {{ old('is_featured', $project->is_featured) ? 'checked' : '' }}
                                   class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="text-sm font-medium text-gray-700">Mis en avant</span>
                        </label>
                        <div>
                            <label for="order" class="text-sm font-medium text-gray-700 mr-2">Ordre</label>
                            <input type="number" name="order" id="order" value="{{ old('order', $project->order) }}" min="0"
                                   class="w-20 px-3 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none text-sm">
                        </div>
                    </div>
                </div>

                {{-- SEO --}}
                <div class="border-t pt-6">
                    <h3 class="text-sm font-bold text-gray-700 mb-4 uppercase tracking-wider">SEO</h3>
                    <div class="space-y-4">
                        <div>
                            <label for="meta_title" class="block text-sm font-medium text-gray-700 mb-1">Meta Title <span class="text-gray-400">(max 70 car.)</span></label>
                            <input type="text" name="meta_title" id="meta_title" value="{{ old('meta_title', $project->getRawOriginal('meta_title')) }}" maxlength="70"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm">
                        </div>
                        <div>
                            <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-1">Meta Description <span class="text-gray-400">(max 160 car.)</span></label>
                            <textarea name="meta_description" id="meta_description" rows="2" maxlength="160"
                                      class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm resize-none">{{ old('meta_description', $project->getRawOriginal('meta_description')) }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Actions --}}
                <div class="flex items-center justify-between pt-4 border-t">
                    <div class="flex items-center space-x-4">
                        <button type="submit" class="px-6 py-2.5 bg-blue-700 hover:bg-blue-800 text-white font-medium rounded-lg transition shadow-sm">
                            Mettre à jour
                        </button>
                        <a href="{{ route('admin.projects.index') }}" class="px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition">
                            Annuler
                        </a>
                    </div>
                    <form action="{{ route('admin.projects.destroy', $project) }}" method="POST"
                          onsubmit="return confirm('Mettre « {{ $project->title }} » à la corbeille ?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="px-4 py-2.5 text-red-600 hover:text-red-800 hover:bg-red-50 font-medium rounded-lg transition text-sm">
                            Corbeille
                        </button>
                    </form>
                </div>
            </form>
        </div>

        {{-- ============================================================
             PANNEAU PHOTOS (1/3)
             ============================================================ --}}
        <div class="lg:col-span-1 space-y-6" x-data="photoManager()" x-cloak>
            <div class="bg-white rounded-xl shadow-sm border p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-bold text-gray-900">
                        Photos
                        <span class="text-sm font-normal text-gray-400" x-text="'(' + photos.length + ')'"></span>
                    </h3>
                    <span x-show="saving" class="text-xs text-blue-500 animate-pulse">Sauvegarde...</span>
                </div>

                {{-- ===== Zone de drag & drop ===== --}}
                <div class="relative mb-6"
                     @dragover.prevent="dragOver = true"
                     @dragleave.prevent="dragOver = false"
                     @drop.prevent="handleDrop($event)">
                    <div class="border-2 border-dashed rounded-xl p-6 text-center transition-all duration-200"
                         :class="dragOver ? 'border-blue-500 bg-blue-50 scale-[1.01]' : 'border-gray-300 hover:border-blue-400'">
                        <svg class="w-10 h-10 mx-auto mb-3" :class="dragOver ? 'text-blue-500' : 'text-gray-300'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <p class="text-sm font-medium" :class="dragOver ? 'text-blue-700' : 'text-gray-600'">
                            Glissez vos photos ici
                        </p>
                        <p class="text-xs text-gray-400 mt-1">ou</p>
                        <label class="mt-2 inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg cursor-pointer transition">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                            Parcourir
                            <input type="file" multiple accept="image/jpeg,image/png,image/webp" class="hidden"
                                   @change="handleFileSelect($event)">
                        </label>
                        <p class="text-xs text-gray-400 mt-3">JPG, PNG, WebP — max {{ config('image.max_upload_size', 10240) / 1024 }} Mo — {{ config('image.max_files_per_upload', 20) }} fichiers max</p>
                    </div>
                </div>

                {{-- ===== Barre de progression globale ===== --}}
                <template x-if="uploading">
                    <div class="mb-4">
                        <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                            <span x-text="uploadProgress.current + '/' + uploadProgress.total + ' photo(s)'"></span>
                            <span x-text="Math.round(uploadProgress.percent) + '%'"></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
                            <div class="bg-blue-600 h-full rounded-full transition-all duration-300"
                                 :style="'width: ' + uploadProgress.percent + '%'"></div>
                        </div>
                        <template x-if="uploadErrors.length > 0">
                            <div class="mt-2 p-2 bg-red-50 border border-red-200 rounded-lg">
                                <template x-for="err in uploadErrors" :key="err">
                                    <p class="text-xs text-red-600" x-text="err"></p>
                                </template>
                            </div>
                        </template>
                    </div>
                </template>

                {{-- ===== Liste triable des photos ===== --}}
                <template x-if="photos.length > 0">
                    <div>
                        <div id="photo-list" class="space-y-2 max-h-[600px] overflow-y-auto pr-1">
                            <template x-for="photo in photos" :key="photo.id">
                                <div class="flex items-center space-x-3 bg-gray-50 hover:bg-gray-100 rounded-lg p-2.5 group photo-item transition"
                                     :data-id="photo.id">
                                    {{-- Poignée de drag --}}
                                    <div class="cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600 drag-handle px-1 flex-shrink-0">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/>
                                        </svg>
                                    </div>

                                    {{-- Miniature --}}
                                    <img :src="photo.thumbnail_url" :alt="photo.caption || 'Photo'"
                                         class="w-14 h-14 object-cover rounded-lg flex-shrink-0 border">

                                    {{-- Légende éditable --}}
                                    <div class="flex-1 min-w-0">
                                        <input type="text" :value="photo.caption || ''" maxlength="255"
                                               placeholder="Légende..."
                                               class="w-full text-xs text-gray-600 bg-transparent border-0 border-b border-transparent focus:border-blue-400 focus:ring-0 px-0 py-1 placeholder-gray-300 transition"
                                               @blur="updateCaption(photo, $event.target.value)"
                                               @keydown.enter="$event.target.blur()">
                                    </div>

                                    {{-- Supprimer --}}
                                    <button @click="deletePhoto(photo)"
                                            class="text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition p-1.5 rounded-lg hover:bg-red-50 flex-shrink-0"
                                            title="Supprimer">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                        </svg>
                                    </button>
                                </div>
                            </template>
                        </div>
                        <p class="text-xs text-gray-400 mt-3 flex items-center">
                            <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
                            Glissez pour réordonner — cliquez sur la légende pour l'éditer
                        </p>
                    </div>
                </template>

                <template x-if="photos.length === 0 && !uploading">
                    <div class="text-center py-8">
                        <svg class="w-12 h-12 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        <p class="text-sm text-gray-400">Aucune photo pour le moment</p>
                        <p class="text-xs text-gray-300 mt-1">Glissez des images ou cliquez sur « Parcourir »</p>
                    </div>
                </template>
            </div>

            {{-- Aperçu lien public --}}
            @if($project->is_published)
                <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                    <p class="text-sm text-green-800 font-medium mb-1">Publié sur le site</p>
                    <a href="{{ route('projects.show', $project->slug) }}" target="_blank"
                       class="text-sm text-green-600 hover:text-green-800 underline break-all">
                        {{ route('projects.show', $project->slug) }}
                    </a>
                </div>
            @endif
        </div>
    </div>

    {{-- ================================================================
         Scripts : upload AJAX + SortableJS
         ================================================================ --}}
    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script>
        function photoManager() {
            return {
                photos: @json($project->photos->values()),
                dragOver: false,
                uploading: false,
                saving: false,
                uploadProgress: { current: 0, total: 0, percent: 0 },
                uploadErrors: [],

                // ---- Initialisation Sortable ----
                init() {
                    this.$nextTick(() => this.initSortable());
                },

                initSortable() {
                    const el = document.getElementById('photo-list');
                    if (!el) return;

                    if (el._sortable) el._sortable.destroy();

                    el._sortable = new Sortable(el, {
                        handle: '.drag-handle',
                        animation: 200,
                        ghostClass: 'opacity-40',
                        chosenClass: 'ring-2 ring-blue-300',
                        onEnd: () => {
                            const ids = Array.from(el.querySelectorAll('.photo-item'))
                                .map(item => parseInt(item.dataset.id));
                            this.persistOrder(ids);
                        }
                    });
                },

                // ---- Gestion du drag & drop de fichiers ----
                handleDrop(event) {
                    this.dragOver = false;
                    const files = event.dataTransfer?.files;
                    if (files?.length) this.uploadFiles(files);
                },

                handleFileSelect(event) {
                    const files = event.target.files;
                    if (files?.length) this.uploadFiles(files);
                    event.target.value = '';
                },

                // ---- Upload AJAX ----
                async uploadFiles(fileList) {
                    const maxFiles = {{ config('image.max_files_per_upload', 20) }};
                    const maxSize = {{ config('image.max_upload_size', 10240) }} * 1024; // octets
                    const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];

                    let files = Array.from(fileList);
                    this.uploadErrors = [];

                    // Validation côté client
                    if (files.length > maxFiles) {
                        this.uploadErrors.push(`Maximum ${maxFiles} fichiers par envoi.`);
                        files = files.slice(0, maxFiles);
                    }

                    const valid = [];
                    for (const f of files) {
                        if (!allowedTypes.includes(f.type)) {
                            this.uploadErrors.push(`${f.name} : format non supporté (${f.type || 'inconnu'}).`);
                        } else if (f.size > maxSize) {
                            this.uploadErrors.push(`${f.name} : trop volumineux (${(f.size / 1024 / 1024).toFixed(1)} Mo).`);
                        } else {
                            valid.push(f);
                        }
                    }

                    if (!valid.length) return;

                    this.uploading = true;
                    this.uploadProgress = { current: 0, total: valid.length, percent: 0 };

                    const formData = new FormData();
                    valid.forEach(f => formData.append('photos[]', f));

                    try {
                        const response = await new Promise((resolve, reject) => {
                            const xhr = new XMLHttpRequest();
                            xhr.open('POST', '{{ route("admin.photos.store", $project) }}');
                            xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content);
                            xhr.setRequestHeader('Accept', 'application/json');

                            xhr.upload.addEventListener('progress', (e) => {
                                if (e.lengthComputable) {
                                    this.uploadProgress.percent = (e.loaded / e.total) * 100;
                                }
                            });

                            xhr.onload = () => {
                                if (xhr.status >= 200 && xhr.status < 300) {
                                    resolve(JSON.parse(xhr.responseText));
                                } else {
                                    try {
                                        const err = JSON.parse(xhr.responseText);
                                        reject(err);
                                    } catch {
                                        reject({ message: 'Erreur serveur.' });
                                    }
                                }
                            };

                            xhr.onerror = () => reject({ message: 'Erreur réseau.' });
                            xhr.send(formData);
                        });

                        // Ajouter les nouvelles photos
                        if (response.photos?.length) {
                            this.photos.push(...response.photos);
                            this.$nextTick(() => this.initSortable());
                        }

                        if (response.errors?.length) {
                            this.uploadErrors.push(...response.errors);
                        }

                        this.uploadProgress.current = valid.length;
                        this.uploadProgress.percent = 100;

                    } catch (err) {
                        if (err.errors) {
                            Object.values(err.errors).flat().forEach(e => this.uploadErrors.push(e));
                        } else {
                            this.uploadErrors.push(err.message || 'Erreur lors de l\'upload.');
                        }
                    }

                    setTimeout(() => {
                        this.uploading = false;
                    }, 1500);
                },

                // ---- Persister l'ordre (PUT /admin/photos/reorder) ----
                async persistOrder(ids) {
                    this.saving = true;
                    try {
                        const res = await fetch('{{ route("admin.photos.reorder") }}', {
                            method: 'PUT',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify({ order: ids })
                        });

                        const data = await res.json();

                        if (res.ok && data.success) {
                            // Mettre à jour les positions locales
                            ids.forEach((id, idx) => {
                                const photo = this.photos.find(p => p.id === id);
                                if (photo) photo.position = idx;
                            });
                        } else {
                            console.error('Reorder refusé :', data.message);
                            alert(data.message || 'Erreur lors du réordonnancement.');
                        }
                    } catch (e) {
                        console.error('Erreur réordonnancement', e);
                    }
                    this.saving = false;
                },

                // ---- Mise à jour de la légende ----
                async updateCaption(photo, value) {
                    const trimmed = value?.trim() || null;
                    if (trimmed === photo.caption) return;

                    this.saving = true;
                    try {
                        const res = await fetch(`/admin/photos/${photo.id}/caption`, {
                            method: 'PATCH',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                            },
                            body: JSON.stringify({ caption: trimmed })
                        });

                        if (res.ok) {
                            const data = await res.json();
                            photo.caption = data.photo.caption;
                        }
                    } catch (e) {
                        console.error('Erreur caption', e);
                    }
                    this.saving = false;
                },

                // ---- Suppression ----
                async deletePhoto(photo) {
                    if (!confirm('Supprimer cette photo ?')) return;

                    this.saving = true;
                    try {
                        const res = await fetch(`/admin/photos/${photo.id}`, {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                            },
                        });

                        if (res.ok) {
                            this.photos = this.photos.filter(p => p.id !== photo.id);
                            this.$nextTick(() => this.initSortable());
                        }
                    } catch (e) {
                        console.error('Erreur suppression', e);
                    }
                    this.saving = false;
                },
            };
        }
    </script>
    @endpush
@endsection