@extends('layouts.app')

@section('title', 'Pointage Hebdomadaire - Évaluation Manager')

@section('content')
<div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8 pb-32"
     x-data="{
         ...checklistManagerDashboard({{ $activeStoreId ?? 'null' }}, {{ auth()->id() }}),
         ...managerChecklistDashboard(),
         ...checklistComponent({
             canModerate: true,
             storeId: {{ $activeStoreId ?? 'null' }},
             userId: {{ auth()->id() }},
             userName: '{{ trim(auth()->user()->first_name . ' ' . auth()->user()->last_name) }}'
         }),
         ...departmentsManager({
             storeId: {{ $activeStoreId ?? 'null' }},
             userId: {{ auth()->id() }}
         }),
         activeTab: 'checklists'
     }"
     x-init="init(); loadChecklists(); loadStats(); loadVendors(); @if($activeStoreId) loadTeam(); @endif"
     x-cloak>

    {{-- Notifications Toast --}}
    <div class="fixed top-4 right-4 z-50 space-y-2" style="max-width: 24rem;">
        <template x-for="notification in notifications" :key="notification.id">
            <div x-show="true"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 transform translate-x-full"
                 x-transition:enter-end="opacity-100 transform translate-x-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 transform translate-x-0"
                 x-transition:leave-end="opacity-0 transform translate-x-full"
                 :class="{
                     'bg-green-50 border-green-500': notification.type === 'success',
                     'bg-red-50 border-red-500': notification.type === 'error',
                     'bg-blue-50 border-blue-500': notification.type === 'info',
                     'bg-yellow-50 border-yellow-500': notification.type === 'warning'
                 }"
                 class="flex items-start gap-3 p-4 rounded-lg shadow-lg border-l-4">
                <div class="flex-shrink-0">
                    <template x-if="notification.type === 'success'">
                        <i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                    </template>
                    <template x-if="notification.type === 'error'">
                        <i data-lucide="x-circle" class="w-5 h-5 text-red-600"></i>
                    </template>
                    <template x-if="notification.type === 'info'">
                        <i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
                    </template>
                    <template x-if="notification.type === 'warning'">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-yellow-600"></i>
                    </template>
                </div>
                <p x-text="notification.message"
                   :class="{
                       'text-green-800': notification.type === 'success',
                       'text-red-800': notification.type === 'error',
                       'text-blue-800': notification.type === 'info',
                       'text-yellow-800': notification.type === 'warning'
                   }"
                   class="flex-1 text-sm font-medium"></p>
                <button @click="removeNotification(notification.id)"
                        class="flex-shrink-0 text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        </template>
    </div>

    <!-- En-tête -->
    <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-700 rounded-2xl mb-4 shadow-lg">
            <i data-lucide="clipboard-list" class="w-8 h-8 text-white"></i>
        </div>
        <h1 class="text-3xl font-display font-bold text-boulanger-dark">
            Évaluation des Pointages Rayons
        </h1>
        <p class="mt-2 text-gray-600">Évaluez et validez les pointages hebdomadaires de votre équipe</p>
    </div>

    {{-- Onglets --}}
    <div class="mb-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex border-b border-gray-200">
                <button @click="activeTab = 'checklists'"
                        :class="activeTab === 'checklists' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 px-3 py-3 sm:px-6 sm:py-4 font-semibold text-xs sm:text-base transition-colors duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="clipboard-check" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                    <span>Pointages</span>
                </button>
                <button @click="activeTab = 'departments'; loadStoreDepartments()"
                        :class="activeTab === 'departments' ? 'bg-boulanger-orange text-white' : 'bg-white text-gray-600 hover:bg-gray-50'"
                        class="flex-1 px-3 py-3 sm:px-6 sm:py-4 font-semibold text-xs sm:text-base transition-colors duration-200 flex items-center justify-center gap-2">
                    <i data-lucide="package" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                    <span>Rayons</span>
                </button>
            </div>
        </div>
    </div>

    {{-- Contenu de l'onglet Checklists --}}
    <div x-show="activeTab === 'checklists'" x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0">

    <!-- Statistiques --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-yellow-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide">En attente</p>
                    <p class="text-4xl font-bold text-gray-900 mt-2" x-text="stats.pending">0</p>
                </div>
                <div class="w-14 h-14 bg-yellow-100 rounded-xl flex items-center justify-center">
                    <i data-lucide="clock" class="w-7 h-7 text-yellow-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-green-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Validées</p>
                    <p class="text-4xl font-bold text-gray-900 mt-2" x-text="stats.validated">0</p>
                </div>
                <div class="w-14 h-14 bg-green-100 rounded-xl flex items-center justify-center">
                    <i data-lucide="check-circle" class="w-7 h-7 text-green-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-red-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Rejetées</p>
                    <p class="text-4xl font-bold text-gray-900 mt-2" x-text="stats.rejected">0</p>
                </div>
                <div class="w-14 h-14 bg-red-100 rounded-xl flex items-center justify-center">
                    <i data-lucide="x-circle" class="w-7 h-7 text-red-600"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-md p-6 border-l-4 border-purple-500 hover:shadow-lg transition-shadow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-semibold text-gray-600 uppercase tracking-wide">Total</p>
                    <p class="text-4xl font-bold text-gray-900 mt-2" x-text="stats.total">0</p>
                </div>
                <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center">
                    <i data-lucide="list-checks" class="w-7 h-7 text-purple-600"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-6 border border-gray-100">
        <div class="flex items-center gap-2 mb-4">
            <i data-lucide="filter" class="w-5 h-5 text-purple-600"></i>
            <h3 class="text-lg font-bold text-gray-900">Filtres</h3>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                    <i data-lucide="layers" class="w-4 h-4 text-purple-500"></i>
                    Statut
                </label>
                <select @change="loadChecklists()" x-model="filters.status"
                        class="w-full border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition">
                    <option value="">Tous les statuts</option>
                    <option value="pending">⏳ En attente</option>
                    <option value="validated">✓ Validées</option>
                    <option value="rejected">✗ Rejetées</option>
                </select>
            </div>

            <div>
                <label class="flex items-center gap-2 text-sm font-semibold text-gray-700 mb-2">
                    <i data-lucide="user" class="w-4 h-4 text-purple-500"></i>
                    Vendeur
                </label>
                <select @change="loadChecklists()" x-model="filters.user_id"
                        class="w-full border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition">
                    <option value="">Tous les vendeurs</option>
                    <template x-for="vendor in vendors" :key="vendor.id">
                        <option :value="vendor.id" x-text="`${vendor.first_name} ${vendor.last_name}`"></option>
                    </template>
                </select>
            </div>

            <div class="flex items-end">
                <button @click="resetFilters()"
                        class="w-full px-4 py-2.5 bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 rounded-lg hover:from-gray-200 hover:to-gray-300 transition-all font-medium shadow-sm flex items-center justify-center gap-2">
                    <i data-lucide="refresh-ccw" class="w-4 h-4"></i>
                    Réinitialiser
                </button>
            </div>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="isLoading" class="text-center py-12">
        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
        <p class="mt-4 text-gray-600">Chargement des pointages...</p>
    </div>

    <!-- Liste des pointages -->
    <div x-show="!isLoading" class="space-y-4">
        <template x-if="checklists.length === 0">
            <div class="bg-white rounded-lg shadow-sm p-12 text-center">
                <i data-lucide="inbox" class="w-16 h-16 mx-auto mb-4 text-gray-300"></i>
                <p class="text-lg font-medium text-gray-700">Aucun pointage trouvé</p>
                <p class="text-sm text-gray-500 mt-1">Aucun pointage ne correspond aux filtres sélectionnés</p>
            </div>
        </template>

        <template x-for="checklist in checklists" :key="checklist.id">
            <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow">
                <!-- En-tête checklist -->
                <div class="p-4 sm:p-6 bg-gradient-to-r from-gray-50 to-white border-b border-gray-200">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                        <div class="flex items-center gap-3 sm:gap-4 w-full sm:w-auto">
                            <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-md flex-shrink-0">
                                <span class="text-lg sm:text-xl font-bold text-white"
                                      x-text="checklist.user.first_name.charAt(0) + checklist.user.last_name.charAt(0)"></span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="text-base sm:text-lg font-bold text-gray-900 truncate"
                                    x-text="`${checklist.user.first_name} ${checklist.user.last_name}`"></h3>
                                <p class="text-xs sm:text-sm text-gray-600 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 mt-1">
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="calendar" class="w-3 h-3 sm:w-3.5 sm:h-3.5 flex-shrink-0"></i>
                                        <span class="truncate">Semaine du <span x-text="formatDate(checklist.week_start_date)"></span></span>
                                    </span>
                                    <span class="hidden sm:inline text-gray-400">•</span>
                                    <span class="flex items-center gap-1">
                                        <i data-lucide="send" class="w-3 h-3 sm:w-3.5 sm:h-3.5 flex-shrink-0"></i>
                                        <span class="truncate">Soumis le <span x-text="formatDate(checklist.submitted_at)"></span></span>
                                    </span>
                                </p>
                            </div>
                        </div>

                        <div class="flex flex-row sm:flex-col items-center justify-between sm:justify-start gap-2 sm:gap-3 w-full sm:w-auto">
                            <!-- Badge statut + Score -->
                            <div class="flex items-center gap-2">
                                <!-- Score Badge (si disponible) -->
                                <template x-if="checklist.evaluation_summary && checklist.evaluation_summary.score_percent !== undefined">
                                    <div class="px-2 py-1.5 rounded-lg border font-bold text-xs flex items-center gap-1"
                                         :class="{
                                             'bg-green-100 text-green-800 border-green-200': checklist.evaluation_summary.score_percent >= 80,
                                             'bg-orange-100 text-orange-800 border-orange-200': checklist.evaluation_summary.score_percent < 80 && checklist.evaluation_summary.score_percent >= 50,
                                             'bg-red-100 text-red-800 border-red-200': checklist.evaluation_summary.score_percent < 50
                                         }">
                                        <span x-text="checklist.evaluation_summary.score_percent + '%'"></span>
                                    </div>
                                </template>

                                <!-- Live Score (si pending et calculé localement) -->
                                <template x-if="checklist.validation_status === 'pending' && calculateLiveScore(checklist) !== null">
                                    <div class="px-2 py-1.5 rounded-lg border-2 border-purple-200 bg-purple-50 text-purple-800 font-bold text-xs flex items-center gap-1">
                                        <i data-lucide="calculator" class="w-3 h-3"></i>
                                        <span x-text="calculateLiveScore(checklist) + '%'"></span>
                                    </div>
                                </template>

                                <span :class="{
                                    'bg-yellow-100 text-yellow-800 border-yellow-300': checklist.validation_status === 'pending',
                                    'bg-green-100 text-green-800 border-green-300': checklist.validation_status === 'validated',
                                    'bg-red-100 text-red-800 border-red-300': checklist.validation_status === 'rejected'
                                }" class="px-3 py-1.5 text-xs font-bold rounded-lg border-2 whitespace-nowrap">
                                    <span x-show="checklist.validation_status === 'pending'">⏳ En attente</span>
                                    <span x-show="checklist.validation_status === 'validated'">✓ Validée</span>
                                    <span x-show="checklist.validation_status === 'rejected'">✗ Rejetée</span>
                                </span>
                            </div>

                            <!-- Bouton toggle détails -->
                            <button @click="checklist.expanded = !checklist.expanded"
                                    class="px-4 py-2 sm:px-5 sm:py-2.5 bg-white text-purple-600 border-2 border-purple-200 hover:bg-purple-50 hover:border-purple-300 rounded-lg transition-all font-medium shadow-sm flex items-center justify-center gap-2 whitespace-nowrap">
                                <span class="hidden sm:inline" x-show="!checklist.expanded">Voir les détails</span>
                                <span class="hidden sm:inline" x-show="checklist.expanded">Masquer les détails</span>
                                <span class="sm:hidden" x-show="!checklist.expanded">Détails</span>
                                <span class="sm:hidden" x-show="checklist.expanded">Masquer</span>
                                <i data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-200"
                                   :class="{ 'rotate-180': checklist.expanded }"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Détails (repliable) -->
                <div x-show="checklist.expanded" x-collapse>
                    <template x-if="checklist.template_id">
                        <!-- V2 : Affichage dynamique par sections -->
                        <div class="p-6 space-y-6">
                            <template x-for="section in checklist.sections" :key="section.id">
                                <div class="border-l-4 border-purple-500 pl-4">
                                    <h4 class="font-bold text-purple-900 mb-3" x-text="section.title"></h4>
                                    <div class="space-y-2">
                                        <template x-for="answer in section.answers" :key="answer.id">
                                            <div class="bg-white p-3 rounded-lg">
                                                <div class="flex items-start justify-between">
                                                    <div class="flex-1">
                                                        <span class="text-sm font-medium" x-text="answer.item.label"></span>
                                                        <p x-show="answer.comment"
                                                           x-text="'💬 ' + answer.comment"
                                                           class="text-xs text-gray-600 mt-1 italic"></p>
                                                    </div>
                                                    <div x-show="checklist.validation_status === 'pending'" class="flex gap-2">
                                                        <button @click="answer.manager_eval = true"
                                                                :class="answer.manager_eval === true ? 'bg-green-500 text-white' : 'bg-gray-100'"
                                                                class="px-2 py-1 rounded text-xs">✓</button>
                                                        <button @click="answer.manager_eval = false"
                                                                :class="answer.manager_eval === false ? 'bg-red-500 text-white' : 'bg-gray-100'"
                                                                class="px-2 py-1 rounded text-xs">✗</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>

                    <template x-if="!checklist.template_id">
                        <div class="p-8 text-center bg-gray-50 border-t border-gray-100 italic text-gray-500">
                            Ce pointage utilise un ancien format non supporté.
                        </div>
                    </template>

                </div>
            </div>
        </template>
    </div>
    </div>

    {{-- Contenu de l'onglet Gestion des Rayons --}}
    <div x-show="activeTab === 'departments'" x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform translate-y-4"
         x-transition:enter-end="opacity-100 transform translate-y-0">
        @include('checklists.partials.manager-departments-tab')
    </div>
</div>

@push('scripts')
<script>
function managerChecklistDashboard() {
    return {
        checklists: [],
        vendors: [],
        stats: {
            pending: 0,
            validated: 0,
            rejected: 0,
            total: 0
        },
        filters: {
            status: '',
            user_id: ''
        },
        isLoading: true,

        async init() {
            await Promise.all([
                this.loadStats(),
                this.loadVendors(),
                this.loadChecklists()
            ]);
        },

        async loadStats() {
            try {
                const response = await fetch('/api/checklists/stats');
                const data = await response.json();
                this.stats = data;
            } catch (error) {
                console.error('Erreur chargement stats:', error);
            }
        },

        async loadVendors() {
            try {
                const response = await fetch('/api/checklists/vendors');
                const data = await response.json();
                this.vendors = data;
            } catch (error) {
                console.error('Erreur chargement vendeurs:', error);
            }
        },

        async loadChecklists() {
            this.isLoading = true;
            try {
                const params = new URLSearchParams();
                if (this.filters.status) params.append('status', this.filters.status);
                if (this.filters.user_id) params.append('user_id', this.filters.user_id);
                params.append('with', 'answers.item.section');

                const response = await fetch(`/api/checklists?${params}`);
                const data = await response.json();

                const source = data.data || [];

                // Ajouter propriétés pour Alpine + initialiser évaluations
                this.checklists = source.map(checklist => {
                    const hydrated = {
                        ...checklist,
                        expanded: false,
                        temp_comment: '',
                        validating: false,
                        // Initialiser les propriétés d'évaluation manager (v1)
                        eval_reperage_hors_gamme: null,
                        eval_reperage_prix_barres: null,
                        eval_reperage_etiquettes: null,
                        eval_balisage_modeles_exposes: null,
                        eval_balisage_ilv: null,
                        eval_balisage_fiches_conseils: null,
                        eval_entretien_proprete: null,
                        eval_entretien_stocks_visibles: null,
                        eval_entretien_reserves: null
                    };

                    if (checklist.template_id && checklist.answers) {
                        const sectionsMap = {};

                        checklist.answers.forEach(answer => {
                            const section = answer.item?.section;
                            if (!section) return;

                            if (!sectionsMap[section.id]) {
                                sectionsMap[section.id] = {
                                    id: section.id,
                                    title: section.title,
                                    order: section.order ?? 0,
                                    answers: []
                                };
                            }

                            sectionsMap[section.id].answers.push({
                                ...answer,
                                item: {
                                    ...answer.item,
                                    order: answer.item?.order ?? 0
                                },
                                manager_eval: answer.manager_eval ?? null
                            });
                        });

                        hydrated.sections = Object.values(sectionsMap)
                            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
                            .map(section => ({
                                ...section,
                                answers: section.answers.sort(
                                    (a, b) => (a.item.order ?? 0) - (b.item.order ?? 0)
                                )
                            }));
                    }

                    return hydrated;
                });
            } catch (error) {
                console.error('Erreur chargement pointages:', error);
            } finally {
                this.isLoading = false;
            }
        },

        calculateLiveScore(checklist) {
            let totalEvaluated = 0;
            let okCount = 0;

            if (!checklist.sections) return null;

            checklist.sections.forEach(section => {
                section.answers.forEach(answer => {
                    if (answer.manager_eval !== null) {
                        totalEvaluated++;
                        if (answer.manager_eval === true) {
                            okCount++;
                        }
                    }
                });
            });

            if (totalEvaluated === 0) return 0;
            return Math.round((okCount / totalEvaluated) * 100);
        },

        async validateChecklist(checklist, status) {
            if (checklist.validating) return;

            // Collecter toutes les évaluations (V2 Structure)
            const answersToSubmit = {};
            let pendingCount = 0;
            let totalEvaluated = 0;
            let okCount = 0;

            if (checklist.sections) {
               checklist.sections.forEach(section => {
                   section.answers.forEach(answer => {
                       // On compte comme "à évaluer" si c'est null
                       if (answer.manager_eval === null) {
                           pendingCount++;
                       } else {
                           answersToSubmit[answer.id] = answer.manager_eval;
                           totalEvaluated++;
                           if (answer.manager_eval === true) okCount++;
                       }
                   });
               });
            }

            if (pendingCount > 0) {
                if (!confirm(`Il reste ${pendingCount} tâches sans évaluation. Voulez-vous vraiment valider ?`)) {
                    return;
                }
            }

            checklist.validating = true;

            try {
                const response = await fetch(`/api/checklists/${checklist.id}/validate`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        validation_status: status,
                        manager_comment: checklist.temp_comment || null,
                        answers_eval: answersToSubmit, // Nouvel format V2
                        // Le backend recalculera le summary, mais on peut l'envoyer pour info si besoin
                    })
                });

                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.message || 'Erreur lors de la validation');
                }

                // Afficher le nouveau score
                if (data.checklist && data.checklist.evaluation_summary) {
                    checklist.evaluation_summary = data.checklist.evaluation_summary;
                }

                checklist.validation_status = status;
                checklist.expanded = false;

                // Recharger les stats
                await Promise.all([
                    this.loadStats(),
                    this.loadChecklists() // Recharger pour avoir l'état frais
                ]);

            } catch (error) {
                console.error('Erreur:', error);
                // Erreur silencieuse
            } finally {
                checklist.validating = false;
            }
        },

        resetFilters() {
            this.filters = {
                status: '',
                user_id: ''
            };
            this.loadChecklists();
        },

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