@extends('layouts.admin')

@section('title', 'Magasin - Admin')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminStoreDetail({ storeId: {{ $store->id }}, storeName: @js($store->name) })" x-cloak>
    <!-- Header -->
    <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <div>
            <p class="text-sm text-gray-500">Magasin</p>
            <h1 class="text-3xl font-display font-bold text-boulanger-dark flex items-center gap-2">
                <span x-text="store.name"></span>
                <span class="text-sm font-mono text-boulanger-gray" x-text="store.code"></span>
                <span class="px-2 py-1 text-xs font-semibold rounded-full"
                      :class="store.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
                      x-text="store.is_active ? 'Actif' : 'Inactif'"></span>
            </h1>
            <p class="text-gray-600" x-text="store.region || 'Région non renseignée'"></p>
        </div>
        <div class="flex gap-2">
            <button @click="openEdit" class="px-4 py-2 bg-gray-100 text-gray-800 rounded-lg hover:bg-gray-200 text-sm">Modifier</button>
            <a href="{{ route('admin.stores.view') }}" class="px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50">← Retour</a>
        </div>
    </div>

    <!-- Cards summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
            <p class="text-xs text-boulanger-gray uppercase">Employés</p>
            <p class="text-2xl font-bold text-boulanger-dark" x-text="team.length"></p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
            <p class="text-xs text-boulanger-gray uppercase">Posts</p>
            <p class="text-2xl font-bold text-boulanger-dark" x-text="posts.length"></p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
            <p class="text-xs text-boulanger-gray uppercase">Dernier post</p>
            <p class="text-sm text-boulanger-gray" x-text="lastPostLabel"></p>
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
            <p class="text-xs text-boulanger-gray uppercase">Catégories de posts</p>
            <p class="text-sm text-boulanger-dark" x-text="postCategories.length ? postCategories.join(', ') : '—'"></p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Store details -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 lg:col-span-1">
            <h2 class="text-lg font-semibold text-boulanger-dark mb-3">Informations magasin</h2>
            <dl class="divide-y divide-gray-100 text-sm">
                <div class="py-3 flex justify-between"><dt class="text-boulanger-gray">Code</dt><dd class="font-mono" x-text="store.code"></dd></div>
                <div class="py-3 flex justify-between"><dt class="text-boulanger-gray">Région</dt><dd x-text="store.region || '—'"></dd></div>
                <div class="py-3 flex justify-between"><dt class="text-boulanger-gray">Actif</dt><dd x-text="store.is_active ? 'Oui' : 'Non'"></dd></div>
                <div class="py-3"><dt class="text-boulanger-gray">Photo</dt><dd class="mt-2" x-show="store.photo_url"><img :src="store.photo_url" class="rounded-lg border w-full max-h-48 object-cover" alt="Photo magasin"></dd><dd x-show="!store.photo_url" class="text-gray-500">Aucune photo</dd></div>
            </dl>
        </div>

        <!-- Team -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 lg:col-span-2">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-semibold text-boulanger-dark">Équipe</h2>
                <span class="text-xs text-boulanger-gray" x-text="team.length + ' personne(s)'"></span>
            </div>
            <div class="divide-y divide-gray-100">
                <template x-if="team.length === 0">
                    <p class="text-sm text-boulanger-gray py-3">Aucun membre associé.</p>
                </template>
                <template x-for="member in team" :key="member.id">
                    <div class="py-3 flex items-center justify-between">
                        <div>
                            <p class="font-semibold text-boulanger-dark" x-text="member.first_name + ' ' + member.last_name"></p>
                            <p class="text-xs text-boulanger-gray" x-text="member.role"></p>
                        </div>
                        <p class="text-xs text-boulanger-gray" x-text="member.email || ''"></p>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Posts -->
    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold text-boulanger-dark">Posts du magasin</h2>
            <span class="text-xs text-boulanger-gray">Suppression / épinglage admin</span>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="text-left text-boulanger-gray border-b">
                        <th class="py-2 pr-4">ID</th>
                        <th class="py-2 pr-4">Titre</th>
                        <th class="py-2 pr-4">Auteur</th>
                        <th class="py-2 pr-4">Créé</th>
                        <th class="py-2 pr-4">Épinglé</th>
                        <th class="py-2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <template x-if="posts.length === 0">
                        <tr><td colspan="5" class="py-4 text-center text-boulanger-gray">Aucun post.</td></tr>
                    </template>
                    <template x-for="post in posts" :key="post.id">
                        <tr class="border-b last:border-0">
                            <td class="py-2 pr-4 font-mono text-xs text-boulanger-gray" x-text="post.id"></td>
                            <td class="py-2 pr-4 font-semibold text-boulanger-dark" x-text="post.title || post.content?.slice(0,60) || 'Post'"></td>
                            <td class="py-2 pr-4" x-text="post.author ? (post.author.first_name + ' ' + post.author.last_name) : '—'"></td>
                            <td class="py-2 pr-4" x-text="formatDate(post.created_at)"></td>
                            <td class="py-2 pr-4">
                                <span class="px-2 py-1 text-xs rounded-full"
                                      :class="post.is_pinned ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'"
                                      x-text="post.is_pinned ? 'Oui' : 'Non'"></span>
                            </td>
                            <td class="py-2 flex items-center gap-2">
                                <button @click="togglePin(post)" class="px-3 py-1 text-xs rounded-lg border" :class="post.is_pinned ? 'border-green-500 text-green-700' : 'border-gray-300 text-gray-700'">
                                    <span x-text="post.is_pinned ? 'Désépingler' : 'Épingler'"></span>
                                </button>
                                <button @click="deletePost(post)" class="px-3 py-1 text-xs rounded-lg bg-red-50 text-red-700 hover:bg-red-100">Supprimer</button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal edit store -->
    <div x-show="modal.open" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50" x-transition>
        <div class="bg-white rounded-xl shadow-2xl w-full max-w-xl p-6 relative">
            <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600" @click="modal.open=false">&times;</button>
            <h3 class="text-xl font-semibold text-boulanger-dark mb-4">Modifier le magasin</h3>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Code</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2 font-mono" x-model="modal.form.code">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Région</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.region">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Photo (URL)</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.photo_url" placeholder="https://...">
                </div>
                <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange" x-model="modal.form.is_active">
                    Magasin actif
                </label>
            </div>
            <div class="mt-6 flex justify-end gap-3">
                <button class="px-4 py-2 text-gray-600 hover:text-gray-800" @click="modal.open=false">Annuler</button>
                <button class="px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 disabled:opacity-50" :disabled="isSaving" @click="saveStore">Enregistrer</button>
            </div>
        </div>
    </div>

    <!-- Toast -->
    <div x-cloak
         x-show="toast && toast.show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-2"
         class="fixed bottom-4 right-4 z-50 max-w-sm">
        <div class="rounded-lg shadow-lg p-4 border-l-4"
             :class="{
                'bg-green-50 border-green-500': toast && toast.type === 'success',
                'bg-red-50 border-red-500': toast && toast.type === 'error'
             }">
            <p class="text-sm font-medium" :class="toast && toast.type === 'success' ? 'text-green-800' : 'text-red-800'" x-text="toast ? toast.message : ''"></p>
        </div>
    </div>

    <!-- Outils / Catégories -->
    <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold text-boulanger-dark">Onglets Boîte à outils</h2>
            <span class="text-xs text-boulanger-gray" x-text="toolTabs.length + ' onglet(s)'"></span>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            <template x-if="toolTabs.length === 0">
                <p class="text-sm text-boulanger-gray">Aucun onglet configuré.</p>
            </template>
            <template x-for="tab in toolTabs" :key="tab.id">
                <div class="border border-gray-100 rounded-lg p-3 bg-white shadow-sm">
                    <p class="font-semibold text-boulanger-dark" x-text="tab.name"></p>
                    <p class="text-xs text-boulanger-gray mt-1" x-text="tab.description || '—'"></p>
                </div>
            </template>
        </div>
    </div>
</div>

@push('scripts')
<script>
function adminStoreDetail({ storeId, storeName }) {
    return {
        store: { id: storeId, name: storeName, code: '', region: '', is_active: true, photo_url: null },
        team: [],
        posts: [],
        postCategories: [],
        toolTabs: [],
        lastPostLabel: '—',
        isSaving: false,
        modal: { open: false, form: {} },
        toast: { show: false, message: '', type: 'success' },

        async init() {
            await Promise.all([this.loadStore(), this.loadTeam(), this.loadPosts(), this.loadToolTabs()]);
        },

        async loadStore() {
            try {
                const res = await fetch(`/api/stores/${this.store.id}`);
                const data = await res.json();
                this.store = data;
                this.modal.form = { ...data };
            } catch (e) {
                this.notify('Impossible de charger le magasin', 'error');
            }
        },

        async loadTeam() {
            try {
                const res = await fetch(`/api/stores/${this.store.id}/people`);
                this.team = await res.json();
            } catch (e) {
                this.notify('Impossible de charger l\'équipe', 'error');
            }
        },

        async loadPosts() {
            try {
                const res = await fetch(`/api/posts?store_id=${this.store.id}`);
                const data = await res.json();

                const merged = [...(data.pinned || []), ...(data.data || [])];
                // Unicité par id
                const map = new Map();
                merged.forEach((p) => {
                    map.set(p.id, {
                        ...p,
                        is_pinned: !!p.is_pinned,
                        pinned_at: p.pinned_at || null,
                        created_at: p.created_at,
                    });
                });
                this.posts = Array.from(map.values());
                this.postCategories = Array.from(
                    new Set(this.posts.map((p) => p.category).filter(Boolean))
                );

                if (this.posts.length) {
                    const latest = this.posts[0];
                    this.lastPostLabel = `${this.formatDate(latest.created_at)} • ${latest.title || (latest.content || '').slice(0, 40)}`;
                } else {
                    this.lastPostLabel = '—';
                }
            } catch (e) {
                this.notify('Impossible de charger les posts', 'error');
            }
        },

        async loadToolTabs() {
            try {
                const res = await fetch('/api/tool-tabs');
                const data = await res.json();
                this.toolTabs = data.data || [];
            } catch (e) {
                // Silent failure to load tool tabs
            }
        },

        openEdit() {
            this.modal.form = { ...this.store };
            this.modal.open = true;
        },

        async saveStore() {
            this.isSaving = true;
            try {
                const res = await fetch(`/admin/api/stores/${this.store.id}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.modal.form)
                });
                if (!res.ok) throw await res.json();
                await this.loadStore();
                this.notify('Magasin mis à jour', 'success');
                this.modal.open = false;
            } catch (e) {
                this.notify(e.message || 'Erreur lors de la sauvegarde', 'error');
            } finally {
                this.isSaving = false;
            }
        },

        async deletePost(post) {
            if (!confirm('Supprimer ce post ?')) return;
            try {
                const res = await fetch(`/api/posts/${post.id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    }
                });
                if (!res.ok) throw await res.json();
                this.posts = this.posts.filter(p => p.id !== post.id);
                this.notify('Post supprimé', 'success');
            } catch (e) {
                this.notify(e.message || 'Erreur lors de la suppression', 'error');
            }
        },

        async togglePin(post) {
            try {
                const res = await fetch(`/api/posts/${post.id}/pin`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ is_pinned: !post.is_pinned })
                });
                if (!res.ok) throw await res.json();
                const payload = await res.json();
                post.is_pinned = payload?.data?.is_pinned ?? !post.is_pinned;
                post.pinned_at = payload?.data?.pinned_at || null;
                this.notify(post.pinned_at ? 'Post épinglé' : 'Post désépinglé', 'success');
            } catch (e) {
                this.notify(e.message || 'Erreur épinglage', 'error');
            }
        },

        notify(message, type = 'success') {
            this.toast = { show: true, message, type };
            setTimeout(() => (this.toast.show = false), 2500);
        },

        formatDate(date) {
            if (!date) return '';
            return new Date(date).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' });
        }
    }
}
</script>
@endpush
@endsection