<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import PiecesJointesSection from '@/Components/Contrats/PiecesJointesSection.vue'
import { Head, Link } from '@inertiajs/vue3'

const props = defineProps({
    contrat: Object,
})

function formatDate(d) {
    if (!d) return '—'
    return new Intl.DateTimeFormat('fr-FR').format(new Date(d))
}

function formatCurrency(v) {
    if (v == null) return '—'
    return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(v)
}

const statutLabels = {
    actif: 'Actif',
    a_renouveler: 'À renouveler',
    expire: 'Expiré',
    resilie: 'Résilié',
}

const statutColors = {
    actif: 'bg-green-100 text-green-800',
    a_renouveler: 'bg-yellow-100 text-yellow-800',
    expire: 'bg-red-100 text-red-800',
    resilie: 'bg-gray-100 text-gray-800',
}
</script>

<template>
    <Head :title="contrat.titre" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <Link :href="route('contrats.index')" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <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-semibold text-gray-900">{{ contrat.titre }}</h1>
                        <p class="text-sm text-gray-500">Fournisseur : {{ contrat.fournisseur?.nom ?? '—' }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <span :class="['inline-flex items-center px-3 py-1 rounded-full text-sm font-medium', statutColors[contrat.statut]]">
                        {{ statutLabels[contrat.statut] }}
                    </span>
                    <Link :href="route('contrats.edit', contrat.id)"
                        class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        Modifier
                    </Link>
                </div>
            </div>
        </template>

        <div class="grid gap-6 lg:grid-cols-3">
            <!-- Colonne gauche -->
            <div class="space-y-6 lg:col-span-2">
                <div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
                    <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations</h2>
                    
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <p class="text-xs text-gray-500">Service concerné</p>
                            <p class="mt-0.5 font-medium text-gray-900">{{ contrat.service?.nom ?? '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Fournisseur</p>
                            <p class="mt-0.5 font-medium text-gray-900">{{ contrat.fournisseur?.nom ?? '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Date de début</p>
                            <p class="mt-0.5 font-medium text-gray-900">{{ formatDate(contrat.date_debut) }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Date d'échéance</p>
                            <p class="mt-0.5 font-medium" :class="contrat.est_en_retard ? 'text-red-600' : (contrat.est_proche_echeance ? 'text-orange-600' : 'text-gray-900')">
                                {{ formatDate(contrat.date_echeance) }}
                                <span v-if="contrat.est_en_retard" class="ml-1 text-xs">⚠️</span>
                                <span v-else-if="contrat.est_proche_echeance" class="ml-1 text-xs">⏳</span>
                            </p>
                        </div>
                        <div v-if="contrat.preavis_jours">
                            <p class="text-xs text-gray-500">Préavis de non-renouvellement</p>
                            <p class="mt-0.5 font-medium text-gray-900">{{ contrat.preavis_jours }} jours</p>
                        </div>
                        <div v-if="contrat.montant">
                            <p class="text-xs text-gray-500">Montant</p>
                            <p class="mt-0.5 font-bold text-gray-900">{{ formatCurrency(contrat.montant) }}</p>
                        </div>
                        <div v-if="contrat.description" class="sm:col-span-2 mt-2">
                            <p class="text-xs text-gray-500">Description</p>
                            <p class="mt-1 text-sm text-gray-700 whitespace-pre-wrap">{{ contrat.description }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Colonne droite (Pièces jointes) -->
            <div class="space-y-6">
                <div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
                    <PiecesJointesSection :contrat="contrat" />
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
