<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, Link, useForm, router } from '@inertiajs/vue3'
import Modal from '@/Components/Modal.vue'
import TextInput from '@/Components/TextInput.vue'
import InputLabel from '@/Components/InputLabel.vue'
import PrimaryButton from '@/Components/PrimaryButton.vue'
import SecondaryButton from '@/Components/SecondaryButton.vue'
import { ref, computed } from 'vue'

const props = defineProps({
    budget: Object,
    lignes: Array,
    totals: Object,
    communes: Array
})

function formatCurrency(value) {
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value)
}

const investissements = computed(() => props.lignes.filter(l => l.type_depense === 'investissement'))
const fonctionnements = computed(() => props.lignes.filter(l => l.type_depense === 'fonctionnement'))

const showAddLigneModal = ref(false)
const ligneForm = useForm({
    id: null,
    budget_id: props.budget.id,
    commune_id: '',
    type_depense: 'investissement',
    nom: '',
    description: '',
    montant_propose: 0
})

const isLocked = computed(() => ['arbitrage_direction', 'valide', 'cloture'].includes(props.budget.statut))

function submitLigne() {
    if (ligneForm.id) {
        ligneForm.put(route('lignes-budget.update', ligneForm.id), {
            onSuccess: () => {
                showAddLigneModal.value = false
                ligneForm.reset()
            }
        })
    } else {
        ligneForm.post(route('lignes-budget.store'), {
            onSuccess: () => {
                showAddLigneModal.value = false
                ligneForm.reset('nom', 'description', 'montant_propose')
            }
        })
    }
}

function openEditLigne(ligne) {
    ligneForm.id = ligne.id
    ligneForm.budget_id = props.budget.id
    ligneForm.commune_id = ligne.commune_id || ''
    ligneForm.type_depense = ligne.type_depense
    ligneForm.nom = ligne.nom
    ligneForm.description = ligne.description
    ligneForm.montant_propose = ligne.montant_propose
    showAddLigneModal.value = true
}

function openAddLigne() {
    ligneForm.reset()
    ligneForm.id = null
    ligneForm.budget_id = props.budget.id
    showAddLigneModal.value = true
}

// Historique
const showHistoriqueModal = ref(false)
const selectedLigneHistorique = ref(null)

function openHistorique(ligne) {
    selectedLigneHistorique.value = ligne
    showHistoriqueModal.value = true
}

const statusLabelMap = {
    'brouillon': 'Brouillon', 'propose': 'Proposé', 'accepte_dsi': 'Accepté DSI',
    'accepte_direction': 'Accepté Direction', 'valide_definitif': 'Validé Définitif',
    'refuse': 'Refusé', 'reporte': 'Reporté',
}
function labelStatut(s) { return statusLabelMap[s] ?? s }

// Arbitrage
const showArbitrageModal = ref(false)
const selectedLigne = ref(null)
const arbitrageForm = useForm({
    statut_arbitrage: '',
    montant_arbitre: '',
    commentaire: '',
})

function openArbitrage(ligne) {
    selectedLigne.value = ligne
    arbitrageForm.statut_arbitrage = ligne.statut_arbitrage
    arbitrageForm.montant_arbitre = ligne.montant_arbitre || ligne.montant_propose
    showArbitrageModal.value = true
}

function submitArbitrage() {
    arbitrageForm.patch(route('lignes-budget.arbitrer', selectedLigne.value.id), {
        onSuccess: () => showArbitrageModal.value = false
    })
}

const statusOptions = [
    { value: 'propose', label: 'Proposé' },
    { value: 'accepte_dsi', label: 'Accepté (Pré-arbitrage DSI)' },
    { value: 'accepte_direction', label: 'Accepté (Pré-arbitrage Direction)' },
    { value: 'valide_definitif', label: 'Validé Définitif' },
    { value: 'refuse', label: 'Refusé' },
    { value: 'reporte', label: 'Reporté à A+1' }
]

const statusBadgeConfig = {
    'brouillon':          { class: 'bg-gray-100 text-gray-800',                          label: 'Brouillon' },
    'propose':            { class: 'bg-blue-100 text-blue-800',                           label: 'Proposé' },
    'accepte_dsi':        { class: 'bg-indigo-100 text-indigo-800 border border-indigo-200', label: 'Accepté (Pré-arbitrage DSI)' },
    'accepte_direction':  { class: 'bg-purple-100 text-purple-800 border border-purple-200', label: 'Accepté (Pré-arbitrage Direction)' },
    'valide_definitif':   { class: 'bg-green-100 text-green-800',                         label: 'Validé Définitif' },
    'refuse':             { class: 'bg-red-100 text-red-800',                             label: 'Refusé' },
    'reporte':            { class: 'bg-orange-100 text-orange-800',                       label: 'Reporté à A+1' },
}

function getStatusClass(status) {
    return statusBadgeConfig[status]?.class ?? statusBadgeConfig['brouillon'].class
}

function getStatusLabel(status) {
    return statusBadgeConfig[status]?.label ?? status
}

function updateBudgetStatus(newStatus) {
    router.put(route('budgets.update', props.budget.id), { statut: newStatus })
}
</script>

<template>
    <Head :title="`Budget ${budget.annee} - ${budget.service.nom}`" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center gap-3">
                <Link :href="route('budgets.index')" class="text-gray-400 hover:text-gray-600">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
                </Link>
                <div>
                    <h1 class="text-xl font-bold text-gray-900">
                        {{ budget.service.nom }} • Budget {{ budget.annee }}
                    </h1>
                    <p class="text-sm text-gray-500 flex items-center gap-2 mt-1">
                        <span class="uppercase tracking-wider font-semibold text-xs text-indigo-600">{{ budget.type_budget === 'agglo' ? 'Agglo' : 'Mutualisé' }}</span>
                        • Statut : 
                        <select v-if="$page.props.auth.user.roles.some(r => ['admin', 'directeur'].includes(r.name))" 
                                :value="budget.statut" @change="updateBudgetStatus($event.target.value)" 
                                class="text-xs rounded border-gray-300 py-0 pl-2 pr-6 h-6">
                            <option value="preparation">En préparation</option>
                            <option value="arbitrage_dsi">Arbitrage DSI</option>
                            <option value="arbitrage_direction">Arbitrage Direction</option>
                            <option value="valide">Validé</option>
                            <option value="cloture">Clôturé</option>
                        </select>
                        <span v-else class="font-medium text-gray-700 capitalize">{{ budget.statut.replace('_', ' ') }}</span>
                    </p>
                </div>
            </div>
            <div class="ml-auto flex gap-3">
                <button v-if="!isLocked" @click="openAddLigne" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500">
                    + Ajouter une demande
                </button>
            </div>
        </template>

        <div class="space-y-8 pb-12">
            <!-- Tableaux -->
            <div class="grid xl:grid-cols-2 gap-8">
                <!-- Investissement -->
                <div>
                    <div class="flex justify-between items-end mb-4">
                        <h2 class="text-lg font-bold text-gray-900 border-b-2 border-indigo-500 pb-1 inline-block">Investissement</h2>
                        <div class="text-right">
                            <p class="text-sm text-gray-500 font-medium">Proposé : {{ formatCurrency(totals.invest_propose) }}</p>
                            <p class="text-base text-indigo-700 font-bold">Arbitré : {{ formatCurrency(totals.invest_arbitre) }}</p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Projet / Achat</th>
                                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Proposé</th>
                                    <th class="px-4 py-3 text-right text-xs font-semibold text-indigo-600 uppercase">Arbitré</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Statut</th>
                                    <th class="px-4 py-3"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr v-for="ligne in investissements" :key="ligne.id" class="hover:bg-gray-50 group">
                                    <td class="px-4 py-4 text-sm text-gray-900">
                                        <p class="font-medium">{{ ligne.nom }}</p>
                                        <div class="flex items-center gap-2 mt-0.5">
                                            <span v-if="ligne.commune_id" class="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded border border-blue-100 font-bold uppercase">
                                                {{ communes.find(c => c.id === ligne.commune_id)?.nom }}
                                            </span>
                                            <p class="text-xs text-gray-500 truncate max-w-[150px]" :title="ligne.description">{{ ligne.description }}</p>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-sm text-right text-gray-500 whitespace-nowrap">{{ formatCurrency(ligne.montant_propose) }}</td>
                                    <td class="px-4 py-4 text-sm text-right font-bold text-gray-900 whitespace-nowrap">
                                        {{ ligne.montant_arbitre ? formatCurrency(ligne.montant_arbitre) : '-' }}
                                    </td>
                                    <td class="px-4 py-4 text-sm">
                                        <span class="px-2 py-1 text-xs rounded-md font-medium" :class="getStatusClass(ligne.statut_arbitrage)">
                                            {{ getStatusLabel(ligne.statut_arbitrage) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-4 text-right whitespace-nowrap">
                                        <div class="flex items-center justify-end gap-2">
                                            <button v-if="ligne.historique?.length" @click="openHistorique(ligne)" class="text-gray-400 hover:text-gray-700 text-xs font-medium" :title="`${ligne.historique.length} arbitrage(s)`">
                                                📋 {{ ligne.historique.length }}
                                            </button>
                                            <button v-if="!isLocked" @click="openEditLigne(ligne)" class="text-gray-600 hover:text-gray-900 text-xs font-medium">Éditer</button>
                                            <button v-if="$page.props.auth.user.roles.some(r => ['admin', 'directeur', 'raf'].includes(r.name))" @click="openArbitrage(ligne)" class="text-indigo-600 hover:text-indigo-900 text-xs font-medium">Arbitrer</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="investissements.length === 0">
                                    <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">Aucun projet d'investissement.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Fonctionnement -->
                <div>
                     <div class="flex justify-between items-end mb-4">
                        <h2 class="text-lg font-bold text-gray-900 border-b-2 border-emerald-500 pb-1 inline-block">Fonctionnement</h2>
                        <div class="text-right">
                            <p class="text-sm text-gray-500 font-medium">Proposé : {{ formatCurrency(totals.fonct_propose) }}</p>
                            <p class="text-base text-emerald-700 font-bold">Arbitré : {{ formatCurrency(totals.fonct_arbitre) }}</p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Achat / Suivi</th>
                                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Proposé</th>
                                    <th class="px-4 py-3 text-right text-xs font-semibold text-emerald-600 uppercase">Arbitré</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Statut</th>
                                    <th class="px-4 py-3"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr v-for="ligne in fonctionnements" :key="ligne.id" class="hover:bg-gray-50 group">
                                    <td class="px-4 py-4 text-sm text-gray-900">
                                        <p class="font-medium">{{ ligne.nom }}</p>
                                        <div class="flex items-center gap-3 mt-0.5">
                                            <span v-if="ligne.commune_id" class="text-[10px] bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded border border-blue-100 font-bold uppercase whitespace-nowrap">
                                                {{ communes.find(c => c.id === ligne.commune_id)?.nom }}
                                            </span>
                                            <p class="text-xs text-gray-500 truncate max-w-[150px]" :title="ligne.description">{{ ligne.description }}</p>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4 text-sm text-right text-gray-500 whitespace-nowrap">{{ formatCurrency(ligne.montant_propose) }}</td>
                                    <td class="px-4 py-4 text-sm text-right font-bold text-gray-900 whitespace-nowrap">
                                        {{ ligne.montant_arbitre ? formatCurrency(ligne.montant_arbitre) : '-' }}
                                    </td>
                                    <td class="px-4 py-4 text-sm">
                                        <span class="px-2 py-1 text-xs rounded-md font-medium" :class="getStatusClass(ligne.statut_arbitrage)">
                                            {{ getStatusLabel(ligne.statut_arbitrage) }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-4 text-right whitespace-nowrap">
                                        <div class="flex items-center justify-end gap-2">
                                            <button v-if="ligne.historique?.length" @click="openHistorique(ligne)" class="text-gray-400 hover:text-gray-700 text-xs font-medium" :title="`${ligne.historique.length} arbitrage(s)`">
                                                📋 {{ ligne.historique.length }}
                                            </button>
                                            <button v-if="!isLocked" @click="openEditLigne(ligne)" class="text-gray-600 hover:text-gray-900 text-xs font-medium">Éditer</button>
                                            <button v-if="$page.props.auth.user.roles.some(r => ['admin', 'directeur', 'raf'].includes(r.name))" @click="openArbitrage(ligne)" class="text-indigo-600 hover:text-indigo-900 text-xs font-medium">Arbitrer</button>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="fonctionnements.length === 0">
                                    <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">Aucun achat de fonctionnement.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Ajout Ligne -->
        <Modal :show="showAddLigneModal" @close="showAddLigneModal = false">
            <div class="p-6">
                <h2 class="text-lg font-bold text-gray-900 mb-6">{{ ligneForm.id ? 'Modifier la demande' : 'Ajouter une demande budgétaire' }}</h2>
                <form @submit.prevent="submitLigne" class="space-y-4">
                    <div>
                        <InputLabel value="Type de dépense" />
                        <select v-model="ligneForm.type_depense" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                            <option value="investissement">Investissement (Projets, Nouveaux matériels...)</option>
                            <option value="fonctionnement">Fonctionnement (Licences, Maintenance...)</option>
                        </select>
                    </div>
                    <div v-if="budget.type_budget === 'mutualise'">
                        <InputLabel value="Commune bénéficiaire" />
                        <select v-model="ligneForm.commune_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                            <option value="">Sélectionner une ville</option>
                            <option v-for="c in communes" :key="c.id" :value="c.id">{{ c.nom }}</option>
                        </select>
                    </div>
                    <div>
                        <InputLabel value="Nom de l'achat ou du projet" />
                        <TextInput v-model="ligneForm.nom" class="mt-1 block w-full" required />
                    </div>
                    <div>
                        <InputLabel value="Description (optionnel)" />
                        <textarea v-model="ligneForm.description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
                    </div>
                    <div>
                        <InputLabel value="Montant estimé / proposé (€)" />
                        <input v-model.number="ligneForm.montant_propose" type="number" step="0.01" min="0"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                            required />
                    </div>
                    
                    <div class="mt-6 flex justify-end gap-3">
                        <SecondaryButton @click="showAddLigneModal = false">Annuler</SecondaryButton>
                        <PrimaryButton :class="{ 'opacity-25': ligneForm.processing }" :disabled="ligneForm.processing">
                            {{ ligneForm.id ? 'Mettre à jour' : 'Ajouter' }}
                        </PrimaryButton>
                    </div>
                </form>
            </div>
        </Modal>

        <!-- Modal Arbitrage -->
        <Modal :show="showArbitrageModal" @close="showArbitrageModal = false" max-width="md">
            <div class="p-6" v-if="selectedLigne">
                <h2 class="text-lg font-bold text-gray-900 mb-2">Arbitrer la ligne</h2>
                <p class="text-sm font-medium mb-1">{{ selectedLigne.nom }}</p>
                <div class="bg-gray-50 p-3 rounded-lg mb-6 border border-gray-200">
                    <p class="text-xs text-gray-500">Montant initialement proposé :</p>
                    <p class="text-lg font-bold text-gray-900">{{ formatCurrency(selectedLigne.montant_propose) }}</p>
                </div>

                <form @submit.prevent="submitArbitrage" class="space-y-4">
                    <div>
                        <InputLabel value="Décision / Statut" />
                        <select v-model="arbitrageForm.statut_arbitrage" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                            <option v-for="opt in statusOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                        </select>
                    </div>
                    <div>
                        <InputLabel value="Montant accordé (arbitré) en €" />
                        <input v-model.number="arbitrageForm.montant_arbitre" type="number" step="0.01" min="0"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-lg font-bold text-indigo-700" />
                        <p class="text-xs text-gray-500 mt-1">Le montant ne peut pas dépasser le montant proposé.</p>
                    </div>
                    <div>
                        <InputLabel value="Commentaire (optionnel)" />
                        <textarea v-model="arbitrageForm.commentaire" rows="2" placeholder="Motif de la décision..." class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
                    </div>

                    <div class="mt-6 flex justify-end gap-3">
                        <SecondaryButton @click="showArbitrageModal = false">Annuler</SecondaryButton>
                        <PrimaryButton :class="{ 'opacity-25': arbitrageForm.processing }" :disabled="arbitrageForm.processing">Enregistrer l'arbitrage</PrimaryButton>
                    </div>
                </form>
            </div>
        </Modal>
        <!-- Modal Historique Arbitrages -->
        <Modal :show="showHistoriqueModal" @close="showHistoriqueModal = false" max-width="lg">
            <div class="p-6" v-if="selectedLigneHistorique">
                <h2 class="text-lg font-bold text-gray-900 mb-1">Historique des arbitrages</h2>
                <p class="text-sm text-gray-500 mb-5">{{ selectedLigneHistorique.nom }}</p>

                <div v-if="selectedLigneHistorique.historique?.length" class="space-y-3">
                    <div v-for="h in selectedLigneHistorique.historique" :key="h.id"
                         class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-gray-900">{{ h.user }}</span>
                                <span class="text-gray-400">·</span>
                                <span class="text-gray-500 text-xs">{{ h.created_at }}</span>
                            </div>
                            <div class="flex items-center gap-1 text-xs">
                                <span class="text-gray-500">{{ labelStatut(h.ancien_statut) }}</span>
                                <span class="text-gray-400">→</span>
                                <span class="font-semibold text-indigo-700">{{ labelStatut(h.nouveau_statut) }}</span>
                            </div>
                        </div>
                        <div v-if="h.ancien_montant_arbitre !== h.nouveau_montant_arbitre" class="text-xs text-gray-600 mb-1">
                            Montant : {{ formatCurrency(h.ancien_montant_arbitre ?? 0) }} → <span class="font-semibold">{{ formatCurrency(h.nouveau_montant_arbitre ?? 0) }}</span>
                        </div>
                        <p v-if="h.commentaire" class="text-xs text-gray-700 italic mt-1 border-l-2 border-indigo-300 pl-2">{{ h.commentaire }}</p>
                    </div>
                </div>
                <p v-else class="text-sm text-gray-500 text-center py-4">Aucun arbitrage enregistré.</p>

                <div class="mt-5 flex justify-end">
                    <SecondaryButton @click="showHistoriqueModal = false">Fermer</SecondaryButton>
                </div>
            </div>
        </Modal>
    </AuthenticatedLayout>
</template>
