<script setup>
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    jobPosition: {
        type: Object,
        required: true,
    },
});

const form = useForm({
    name: '',
    email: '',
    phone: '',
    linkedin_url: '',
    city: '',
    cv: null,
    cover_letter: null,
});

const submit = () => {
    form.post(route('jobs.apply', props.jobPosition.id), {
        onSuccess: () => {
            // Success is handled by a redirect to dashboard and a flash message
        },
    });
};
</script>

<template>
    <Head :title="'Postuler: ' + jobPosition.title" />
    
    <div class="min-h-screen bg-neutral text-anthracite font-sans">
        <!-- Navigation Bar -->
        <nav class="bg-white border-b border-anthracite/10 p-6">
            <div class="max-w-4xl mx-auto flex items-center justify-between">
                <Link href="/" class="flex items-center gap-3">
                    <img src="/images/logo.png" alt="Logo CABM" class="h-12 object-contain" />
                </Link>
                <Link :href="route('jobs.index')" class="text-sm font-bold text-primary hover:text-highlight transition-colors">
                    &larr; Retour aux offres
                </Link>
            </div>
        </nav>

        <main class="max-w-4xl mx-auto py-12 px-6">
            <div class="mb-6">
                <Link :href="route('jobs.index')" class="inline-flex items-center gap-2 text-sm font-bold text-anthracite/60 hover:text-primary transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                    Retour à la liste des offres
                </Link>
            </div>
            
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <!-- Header -->
                <div class="bg-primary/5 border-b border-primary/10 px-8 py-10">
                    <h1 class="text-3xl font-serif font-bold text-primary mb-2">{{ jobPosition.title }}</h1>
                    <div class="flex items-center gap-4 text-sm text-anthracite/70">
                        <span class="inline-flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            Offre d'emploi
                        </span>
                        <span v-if="jobPosition.fpt_metadata?.infos_poste?.categorie" class="px-3 py-1 bg-white/50 rounded-full font-bold uppercase tracking-widest text-[10px]">
                            Catégorie {{ jobPosition.fpt_metadata.infos_poste.categorie }} - {{ jobPosition.fpt_metadata.infos_poste.cadre_emplois }}
                        </span>
                    </div>
                </div>

                <div class="p-8 grid grid-cols-1 md:grid-cols-2 gap-12">
                    <!-- Job Details -->
                    <div class="space-y-6">
                        <div>
                            <h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Description du poste</h2>
                            <div v-if="jobPosition.description_html" class="prose prose-sm prose-indigo text-anthracite/80 max-w-none" v-html="jobPosition.description_html"></div>
                            <div v-else class="prose prose-sm prose-neutral text-anthracite/80 whitespace-pre-line">{{ jobPosition.description }}</div>
                        </div>

                        <div v-if="jobPosition.requirements && jobPosition.requirements.length > 0">
                            <h2 class="text-xl font-bold font-subtitle text-anthracite mb-3 border-b pb-2">Prérequis</h2>
                            <ul class="list-disc list-inside text-anthracite/80 space-y-1">
                                <li v-for="(req, i) in jobPosition.requirements" :key="i">{{ req }}</li>
                            </ul>
                        </div>

                        <div v-if="jobPosition.fpt_metadata" class="bg-neutral/30 rounded-xl p-5 border border-anthracite/10 mt-8">
                            <h2 class="text-sm font-bold font-subtitle uppercase tracking-widest text-primary mb-4 flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
                                </svg>
                                Informations Statutaires (FPT)
                            </h2>
                            <div class="space-y-3 text-sm text-anthracite/80">
                                <p><strong class="text-anthracite">Grade(s) recherché(s) :</strong> {{ jobPosition.fpt_metadata.infos_poste?.grade_mini }} à {{ jobPosition.fpt_metadata.infos_poste?.grade_maxi }}</p>
                                <p><strong class="text-anthracite">Fondement :</strong> {{ jobPosition.fpt_metadata.conformite?.fondement_juridique_recrutement }}</p>
                                
                                <div class="pt-3 border-t border-anthracite/10">
                                    <strong class="text-anthracite block mb-2 text-xs uppercase tracking-wider">Mentions Légales :</strong>
                                    <ul class="list-disc list-inside space-y-1 text-xs">
                                        <li v-for="(mention, idx) in jobPosition.fpt_metadata.conformite?.mentions_legales_obligatoires" :key="idx">{{ mention }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Application Form -->
                    <div class="bg-neutral/50 p-6 rounded-xl border border-anthracite/10">
                        <h2 class="text-xl font-bold font-subtitle text-primary mb-6">Soumettre votre candidature</h2>
                        
                        <form @submit.prevent="submit" class="space-y-5">
                            <div>
                                <label class="block text-sm font-medium text-anthracite mb-1">Nom complet <span class="text-red-500">*</span></label>
                                <input type="text" v-model="form.name" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
                                <div v-if="form.errors.name" class="text-red-500 text-xs mt-1">{{ form.errors.name }}</div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-anthracite mb-1">Adresse Email <span class="text-red-500">*</span></label>
                                <input type="email" v-model="form.email" required class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
                                <div v-if="form.errors.email" class="text-red-500 text-xs mt-1">{{ form.errors.email }}</div>
                            </div>

                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-anthracite mb-1">Téléphone</label>
                                    <input type="text" v-model="form.phone" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
                                    <div v-if="form.errors.phone" class="text-red-500 text-xs mt-1">{{ form.errors.phone }}</div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-anthracite mb-1">Ville</label>
                                    <input type="text" v-model="form.city" class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
                                    <div v-if="form.errors.city" class="text-red-500 text-xs mt-1">{{ form.errors.city }}</div>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-anthracite mb-1">URL LinkedIn</label>
                                <input type="url" v-model="form.linkedin_url" placeholder="https://linkedin.com/in/..." class="w-full rounded-lg border-anthracite/20 focus:border-primary focus:ring-primary text-sm p-2.5" />
                                <div v-if="form.errors.linkedin_url" class="text-red-500 text-xs mt-1">{{ form.errors.linkedin_url }}</div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-anthracite mb-1">CV (PDF) <span class="text-red-500">*</span></label>
                                <input type="file" @input="form.cv = $event.target.files[0]" accept=".pdf" required class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
                                <div v-if="form.errors.cv" class="text-red-500 text-xs mt-1">{{ form.errors.cv }}</div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-anthracite mb-1">Lettre de motivation (PDF)</label>
                                <input type="file" @input="form.cover_letter = $event.target.files[0]" accept=".pdf" class="w-full text-sm text-anthracite/70 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary/10 file:text-primary hover:file:bg-primary/20" />
                                <div v-if="form.errors.cover_letter" class="text-red-500 text-xs mt-1">{{ form.errors.cover_letter }}</div>
                            </div>

                            <button type="submit" :disabled="form.processing" class="w-full mt-6 py-3 px-4 bg-highlight text-[#3a2800] rounded-xl font-bold font-subtitle uppercase tracking-wider text-sm hover:brightness-110 shadow-lg shadow-highlight/30 transition-all disabled:opacity-50 flex justify-center items-center">
                                <span v-if="form.processing">Envoi en cours...</span>
                                <span v-else>Postuler maintenant</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>
