<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import StatusBadge from '@/Components/App/StatusBadge.vue';
import ServiceTaskCard from '@/Components/App/ServiceTaskCard.vue';
import ActivityTimeline from '@/Components/App/ActivityTimeline.vue';
import { router } from '@inertiajs/vue3';

const props = defineProps({
    integration: {
        type: Object,
        required: true,
    },
    activities: {
        type: Array,
        default: () => [],
    },
});

const validateRH = () => {
    if (confirm('Souhaitez-vous valider ce dossier et notifier les services ?')) {
        router.post(route('integrations.validate-rh', props.integration.id));
    }
};
</script>

<template>
    <Head title="Détails Intégration" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                    <span v-if="integration.type === 'offboarding'" class="text-red-600 mr-2">[DÉPART]</span>
                    <span v-else class="text-green-600 mr-2">[ARRIVÉE]</span>
                    Fiche Agent : {{ integration.agent.first_name }} {{ integration.agent.last_name }}
                </h2>
                <div class="flex items-center space-x-4">
                    <button 
                        v-if="integration.status === 'pending_rh_validation' || integration.status === 'draft'"
                        @click="validateRH"
                        class="px-4 py-2 bg-green-600 text-white rounded-md text-sm font-bold hover:bg-green-700"
                    >
                        Valider Dossier RH
                    </button>
                    <a 
                        v-if="integration.status === 'completed'"
                        :href="route('integrations.pdf', integration.id)"
                        target="_blank"
                        class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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>
                        Télécharger PDF
                    </a>
                    <StatusBadge :status="integration.status" />
                </div>
            </div>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-3 items-start">
                    <!-- Right/Side Column: Agent Info & Activity -->
                    <div class="md:col-span-1 space-y-6">
                        <!-- Agent Info -->
                        <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Informations Agent</h3>
                            <dl class="space-y-4">
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Poste</dt>
                                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ integration.agent.position }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Service</dt>
                                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ integration.agent.department }}</dd>
                                </div>
                                <div>
                                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Date d'arrivée</dt>
                                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ new Date(integration.agent.arrival_date).toLocaleDateString() }}</dd>
                                </div>
                            </dl>
                        </div>

                        <ActivityTimeline :activities="activities" />
                    </div>

                    <!-- Main Column: Tasks -->
                    <div class="md:col-span-2 space-y-6">
                        <div v-for="task in integration.service_tasks" :key="task.id">
                            <ServiceTaskCard :task="task" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
