<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, Link, router } from '@inertiajs/vue3'
import { ref, watch, computed } from 'vue'

const props = defineProps({
    lignes: Array,
    services: Array,
    filters: Object
})

const annee = ref(props.filters.annee)

const formatCurrency = (v) => {
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v)
}

const calculatePercent = (consumed, total) => {
    if (!total || total <= 0) return 0
    return Math.min(Math.round((consumed / total) * 100), 100)
}

const getProgressBarColor = (percent) => {
    if (percent < 50) return 'bg-blue-500'
    if (percent < 80) return 'bg-yellow-500'
    if (percent < 100) return 'bg-orange-500'
    return 'bg-red-500'
}

const getProgressBarHexColor = (percent) => {
    if (percent < 50) return '#3b82f6' // Blue 500
    if (percent < 80) return '#eab308' // Yellow 500
    if (percent < 100) return '#f97316' // Orange 500
    return '#ef4444' // Red 500
}

watch(annee, (val) => {
    router.get(route('budgets.execution'), { annee: val }, { preserveState: true })
})

const filterType = ref('all')
const filterEnvelope = ref('all')
const filterService = ref('all')

const expandedLines = ref([])

const toggleLine = (id) => {
    if (expandedLines.value.includes(id)) {
        expandedLines.value = expandedLines.value.filter(i => i !== id)
    } else {
        expandedLines.value.push(id)
    }
}

const lignesEnDepassement = computed(() => props.lignes.filter(l => l.reste < 0))

const filteredLignes = computed(() => {
    return props.lignes.filter(l => {
        const matchType = filterType.value === 'all' || l.type_depense === filterType.value
        const matchEnvelope = filterEnvelope.value === 'all' || l.type_budget === filterEnvelope.value
        const matchService = filterService.value === 'all' || l.service === filterService.value
        return matchType && matchEnvelope && matchService
    })
})</script>

<template>
    <Head title="Exécution Budgétaire" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Exécution Budgétaire</h1>
                    <p class="text-sm text-gray-500 mt-1">Suivi du consommé (TTC) par rapport aux enveloppes arbitrées.</p>
                </div>
                <div class="flex items-center gap-3">
                    <div class="relative group">
                        <button class="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-bold text-gray-700 hover:bg-gray-50 transition-colors shadow-sm">
                            <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
                            Exporter
                            <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
                        </button>
                        <div class="absolute right-0 mt-2 w-48 bg-white border border-gray-100 rounded-xl shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50 py-2">
                            <a :href="route('budgets.export.excel', { annee: annee, type: filterType, envelope: filterEnvelope, service: filterService })" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors">
                                <span class="p-1.5 bg-green-100 text-green-700 rounded-lg">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM13 3.5L18.5 9H13V3.5zM6 20V4h6V10h6v10H6z"/></svg>
                                </span>
                                Excel (.xlsx)
                            </a>
                            <a :href="route('budgets.export.pdf', { annee: annee, type: filterType, envelope: filterEnvelope, service: filterService })" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-red-50 hover:text-red-700 transition-colors">
                                <span class="p-1.5 bg-red-100 text-red-700 rounded-lg">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14h-2v-2h2v2zm0-4h-2V7h2v5z"/></svg>
                                </span>
                                PDF (.pdf)
                            </a>
                            <a :href="route('budgets.export.ods', { annee: annee, type: filterType, envelope: filterEnvelope, service: filterService })" class="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors">
                                <span class="p-1.5 bg-indigo-100 text-indigo-700 rounded-lg">
                                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"/></svg>
                                </span>
                                OpenDoc (.ods)
                            </a>
                        </div>
                    </div>
                    <select v-model="annee" class="rounded-lg border-gray-300 text-sm font-bold text-gray-700 focus:ring-blue-500 focus:border-blue-500 shadow-sm">
                        <option :value="new Date().getFullYear() + 1">{{ new Date().getFullYear() + 1 }}</option>
                        <option :value="new Date().getFullYear()">{{ new Date().getFullYear() }}</option>
                        <option :value="new Date().getFullYear() - 1">{{ new Date().getFullYear() - 1 }}</option>
                    </select>
                </div>
            </div>
        </template>

        <div class="space-y-6">
            <!-- Filters -->
            <div class="flex flex-wrap items-center gap-4 bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                <div class="flex items-center gap-2">
                    <label class="text-xs font-bold text-gray-500 uppercase">Type :</label>
                    <select v-model="filterType" class="rounded-lg border-gray-200 text-xs focus:ring-blue-500 focus:border-blue-500">
                        <option value="all">Tous les types</option>
                        <option value="investissement">Investissement</option>
                        <option value="fonctionnement">Fonctionnement</option>
                    </select>
                </div>
                <div class="flex items-center gap-2">
                    <label class="text-xs font-bold text-gray-500 uppercase">Enveloppe :</label>
                    <select v-model="filterEnvelope" class="rounded-lg border-gray-200 text-xs focus:ring-blue-500 focus:border-blue-500">
                        <option value="all">Toutes les enveloppes</option>
                        <option value="agglo">Agglo</option>
                        <option value="mutualise">Mutualisé</option>
                    </select>
                </div>
                <div class="flex items-center gap-2">
                    <label class="text-xs font-bold text-gray-500 uppercase">Service :</label>
                    <select v-model="filterService" class="rounded-lg border-gray-200 text-xs focus:ring-blue-500 focus:border-blue-500 max-w-[150px]">
                        <option value="all">Tous les services</option>
                        <option v-for="s in services" :key="s.id" :value="s.nom">{{ s.nom }}</option>
                    </select>
                </div>
                <div class="ml-auto flex items-center gap-3">
                    <span v-if="lignesEnDepassement.length" class="flex items-center gap-1.5 px-3 py-1.5 bg-red-50 border border-red-200 rounded-lg text-xs font-semibold text-red-700">
                        <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                        {{ lignesEnDepassement.length }} dépassement(s)
                    </span>
                    <span class="text-xs text-gray-400">{{ filteredLignes.length }} ligne(s) affichée(s)</span>
                </div>
            </div>

            <!-- Table of execution -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-100">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">Service / Ligne</th>
                                <th class="px-6 py-4 text-center text-xs font-bold text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Enveloppe</th>
                                <th class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Engagé (Brouillon)</th>
                                <th class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Consommé (Validé)</th>
                                <th class="px-6 py-4 text-right text-xs font-bold text-gray-500 uppercase tracking-wider">Reste à dépenser</th>
                                <th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider w-40">Progression</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50">
                            <template v-for="lb in filteredLignes" :key="lb.id">
                                <tr :class="['transition-colors cursor-pointer', lb.reste < 0 ? 'bg-red-50 hover:bg-red-100' : 'hover:bg-gray-50']" @click="toggleLine(lb.id)">
                                    <td class="px-6 py-4">
                                        <div class="flex items-center gap-3">
                                            <svg :class="['h-4 w-4 text-gray-400 transition-transform', expandedLines.includes(lb.id) ? 'rotate-180' : '']" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7 7" />
                                            </svg>
                                            <div>
                                                <div class="flex items-center gap-2">
                                                    <span class="text-sm font-bold text-gray-900">{{ lb.nom }}</span>
                                                    <span v-if="lb.reste < 0" class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded uppercase">
                                                        ⚠ Dépassement {{ formatCurrency(Math.abs(lb.reste)) }}
                                                    </span>
                                                    <span v-else-if="lb.montant_arbitre > 0 && calculatePercent(lb.total_cumule, lb.montant_arbitre) >= 80" class="inline-flex items-center gap-1 px-1.5 py-0.5 bg-orange-100 text-orange-700 text-[10px] font-bold rounded uppercase">
                                                        ⚡ {{ calculatePercent(lb.total_cumule, lb.montant_arbitre) }}%
                                                    </span>
                                                </div>
                                                <div class="text-xs text-gray-500">{{ lb.service }} • {{ lb.type_budget === 'agglo' ? 'Agglo' : 'Mutualisé' }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <span :class="['inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider', 
                                            lb.type_depense === 'investissement' ? 'bg-purple-100 text-purple-700' : 'bg-teal-100 text-teal-700']">
                                            {{ lb.type_depense }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-right text-sm font-medium text-gray-900">
                                        {{ formatCurrency(lb.montant_arbitre) }}
                                    </td>
                                    <td class="px-6 py-4 text-right text-sm font-medium text-orange-600">
                                        {{ formatCurrency(lb.engage) }}
                                    </td>
                                    <td class="px-6 py-4 text-right text-sm font-medium text-blue-600">
                                        {{ formatCurrency(lb.consomme) }}
                                    </td>
                                    <td class="px-6 py-4 text-right text-sm font-bold" :class="lb.reste < 0 ? 'text-red-600' : 'text-green-600'">
                                        {{ formatCurrency(lb.reste) }}
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-end gap-3">
                                            <span class="text-sm font-black text-gray-900 leading-none">{{ calculatePercent(lb.total_cumule, lb.montant_arbitre) }}%</span>
                                            <div class="relative w-14 h-8 flex items-center justify-center">
                                                <svg class="w-full h-full" viewBox="0 0 100 60">
                                                    <!-- Cadre -->
                                                    <path d="M 12 55 A 38 38 0 0 1 88 55" fill="#edf2f7" stroke="#2d3748" stroke-width="2" />
                                                    <!-- Secteurs -->
                                                    <path d="M 12 55 A 38 38 0 0 1 50 17 L 50 55 Z" fill="#48bb78" opacity="0.6" />
                                                    <path d="M 50 17 A 38 38 0 0 1 88 55 L 50 55 Z" fill="#f6ad55" opacity="0.6" />
                                                    <!-- Aiguille -->
                                                    <g :style="{ transform: `rotate(${(calculatePercent(lb.total_cumule, lb.montant_arbitre) * 1.8) - 90}deg)`, transformOrigin: '50px 55px' }" class="transition-transform duration-1000">
                                                        <line x1="50" y1="55" x2="50" y2="22" stroke="#e53e3e" stroke-width="4" stroke-linecap="round" />
                                                        <circle cx="50" cy="55" r="4" fill="#2d3748" />
                                                    </g>
                                                </svg>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <!-- Détail ventilation par commune et liste commandes -->
                                <tr v-if="expandedLines.includes(lb.id)" class="bg-gray-50/50">
                                    <td colspan="7" class="px-12 py-6">
                                        <div class="space-y-6">
                                            <!-- Ventilation -->
                                            <div class="bg-white rounded-lg border border-gray-100 shadow-sm p-4 max-w-4xl">
                                                <h4 class="text-xs font-bold text-gray-500 uppercase mb-3 px-1">Répartition par commune</h4>
                                                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                                    <div v-for="v in lb.ventilation" :key="v.commune" class="flex flex-col border-l-2 border-indigo-200 pl-3">
                                                        <span class="text-[10px] text-gray-500 truncate" :title="v.commune">{{ v.commune }}</span>
                                                        <span class="text-sm font-bold text-gray-900">{{ formatCurrency(v.total) }}</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Liste des commandes -->
                                            <div class="bg-white rounded-lg border border-gray-100 shadow-sm overflow-hidden">
                                                <div class="px-4 py-3 bg-gray-50 border-b border-gray-100 flex justify-between items-center">
                                                    <h4 class="text-xs font-bold text-gray-500 uppercase">Détail des commandes liées</h4>
                                                    <span class="text-[10px] font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded-full">{{ lb.commandes.length }} commande(s)</span>
                                                </div>
                                                <table class="min-w-full divide-y divide-gray-100">
                                                    <thead class="bg-gray-50/50">
                                                        <tr>
                                                            <th class="px-4 py-2 text-left text-[10px] font-bold text-gray-400 uppercase">Réf / Objet</th>
                                                            <th class="px-4 py-2 text-left text-[10px] font-bold text-gray-400 uppercase">Commune</th>
                                                            <th class="px-4 py-2 text-center text-[10px] font-bold text-gray-400 uppercase">Statut</th>
                                                            <th class="px-4 py-2 text-right text-[10px] font-bold text-gray-400 uppercase">Montant TTC</th>
                                                            <th class="px-4 py-2"></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="divide-y divide-gray-50">
                                                        <tr v-for="cmd in lb.commandes" :key="cmd.id" class="hover:bg-gray-50 transition-colors">
                                                            <td class="px-4 py-3">
                                                                <div class="text-xs font-bold text-indigo-600">{{ cmd.reference }}</div>
                                                                <div class="text-[10px] text-gray-500 truncate max-w-[200px]" :title="cmd.nom">{{ cmd.nom }}</div>
                                                            </td>
                                                            <td class="px-4 py-3 text-xs text-gray-600 italic">
                                                                {{ cmd.commune || '—' }}
                                                            </td>
                                                            <td class="px-4 py-3 text-center">
                                                                <span class="text-[9px] font-bold uppercase tracking-tight px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">
                                                                    {{ cmd.statut.replace('_', ' ') }}
                                                                </span>
                                                            </td>
                                                            <td class="px-4 py-3 text-right text-xs font-bold text-gray-900">
                                                                {{ formatCurrency(cmd.montant_ttc) }}
                                                            </td>
                                                            <td class="px-4 py-3 text-right">
                                                                <Link :href="route('commandes.show', cmd.id)" class="text-indigo-500 hover:text-indigo-700">
                                                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
                                                                </Link>
                                                            </td>
                                                        </tr>
                                                        <tr v-if="!lb.commandes.length">
                                                            <td colspan="5" class="px-4 py-8 text-center text-xs text-gray-400 italic">Aucune commande liée.</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                            <tr v-if="!filteredLignes.length">
                                <td colspan="7" class="px-6 py-12 text-center text-gray-500 italic">
                                    Aucune ligne budgétaire trouvée pour cette année.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
