<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm, Link, usePage, router } from '@inertiajs/vue3';
import { ref, computed } from 'vue';

const page = usePage();
const flashSuccess = computed(() => page.props.flash?.success);
import Modal from '@/Components/Modal.vue';
import InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import InputError from '@/Components/InputError.vue';

const props = defineProps({
    candidates: Array
});

const isModalOpen = ref(false);
const selectedDocument = ref(null);

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

const submit = () => {
    form.post(route('admin.candidates.store'), {
        onSuccess: () => {
            isModalOpen.value = false;
            form.reset();
        },
    });
};

const deleteCandidate = (id) => {
    if (confirm('Voulez-vous vraiment supprimer ce candidat ?')) {
        router.delete(route('admin.candidates.destroy', id));
    }
};

const openPreview = (doc) => {
    selectedDocument.value = doc;
};
</script>

<template>
    <Head title="Gestion des Candidats" />

    <AdminLayout>
        <template #header>
            Gestion des Candidats
        </template>

        <div class="flex justify-between items-center mb-8">
            <h3 class="text-2xl font-bold">Liste des Candidats</h3>
            <PrimaryButton @click="isModalOpen = true">
                Ajouter un Candidat
            </PrimaryButton>
        </div>

        <!-- Flash Messages -->
        <div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
            <div class="p-2 bg-emerald-500 rounded-lg text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            <div>
                <p class="font-bold text-emerald-800 dark:text-emerald-400">Succès !</p>
                <p class="text-emerald-700 dark:text-emerald-500 text-sm">{{ flashSuccess }}</p>
            </div>
        </div>

        <!-- Candidates Table -->
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <table class="w-full text-left">
                <thead class="bg-slate-50 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-700">
                    <tr>
                        <th class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">Nom</th>
                        <th class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">Email</th>
                        <th class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">Statut</th>
                        <th class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300">Documents</th>
                        <th class="px-6 py-4 font-semibold text-slate-700 dark:text-slate-300 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                    <tr v-for="candidate in candidates" :key="candidate.id" class="hover:bg-slate-50/50 dark:hover:bg-slate-700/30 transition-colors">
                        <td class="px-6 py-4">
                            <div class="font-medium">{{ candidate.user.name }}</div>
                            <div class="text-xs text-slate-500">{{ candidate.phone }}</div>
                        </td>
                        <td class="px-6 py-4 text-slate-600 dark:text-slate-400">
                            {{ candidate.user.email }}
                        </td>
                        <td class="px-6 py-4">
                            <span 
                                class="px-2 py-1 rounded-full text-xs font-semibold"
                                :class="{
                                    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400': candidate.status === 'en_attente',
                                    'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': candidate.status === 'en_cours',
                                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': candidate.status === 'termine'
                                }"
                            >
                                {{ candidate.status }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex gap-2">
                                <button 
                                    v-for="doc in candidate.documents" 
                                    :key="doc.id"
                                    @click="openPreview(doc)"
                                    class="p-2 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
                                    :title="doc.type.toUpperCase()"
                                >
                                    <svg v-if="doc.type === 'cv'" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end gap-3">
                                <Link :href="route('admin.candidates.show', candidate.id)" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium">Détails</Link>
                                <button @click="deleteCandidate(candidate.id)" class="p-2 text-slate-400 hover:text-red-600 transition-colors" title="Supprimer">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="candidates.length === 0">
                        <td colspan="5" class="px-6 py-12 text-center text-slate-500 italic">
                            Aucun candidat trouvé.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Add Candidate Modal -->
        <Modal :show="isModalOpen" @close="isModalOpen = false">
            <div class="p-6">
                <h3 class="text-xl font-bold mb-6">Ajouter un nouveau candidat</h3>
                
                <form @submit.prevent="submit" class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <InputLabel for="name" value="Nom Complet" />
                            <TextInput id="name" type="text" class="mt-1 block w-full" v-model="form.name" required />
                            <InputError class="mt-2" :message="form.errors.name" />
                        </div>
                        <div>
                            <InputLabel for="email" value="Email" />
                            <TextInput id="email" type="email" class="mt-1 block w-full" v-model="form.email" required />
                            <InputError class="mt-2" :message="form.errors.email" />
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <InputLabel for="phone" value="Téléphone" />
                            <TextInput id="phone" type="text" class="mt-1 block w-full" v-model="form.phone" />
                            <InputError class="mt-2" :message="form.errors.phone" />
                        </div>
                        <div>
                            <InputLabel for="linkedin_url" value="LinkedIn URL" />
                            <TextInput id="linkedin_url" type="url" class="mt-1 block w-full" v-model="form.linkedin_url" />
                            <InputError class="mt-2" :message="form.errors.linkedin_url" />
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <InputLabel value="CV (PDF)" />
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-lg">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-10 w-10 text-slate-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-slate-600 dark:text-slate-400">
                                        <label class="relative cursor-pointer bg-white dark:bg-slate-800 rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                            <span>Téléverser</span>
                                            <input type="file" class="sr-only" @input="form.cv = $event.target.files[0]" accept="application/pdf" />
                                        </label>
                                    </div>
                                    <p class="text-xs text-slate-500">{{ form.cv ? form.cv.name : 'PDF uniquement' }}</p>
                                </div>
                            </div>
                            <InputError class="mt-2" :message="form.errors.cv" />
                        </div>
                        <div>
                            <InputLabel value="Lettre de motivation (PDF)" />
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-lg">
                                <div class="space-y-1 text-center">
                                    <svg class="mx-auto h-10 w-10 text-slate-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                    <div class="flex text-sm text-slate-600 dark:text-slate-400">
                                        <label class="relative cursor-pointer bg-white dark:bg-slate-800 rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                                            <span>Téléverser</span>
                                            <input type="file" class="sr-only" @input="form.cover_letter = $event.target.files[0]" accept="application/pdf" />
                                        </label>
                                    </div>
                                    <p class="text-xs text-slate-500">{{ form.cover_letter ? form.cover_letter.name : 'PDF uniquement' }}</p>
                                </div>
                            </div>
                            <InputError class="mt-2" :message="form.errors.cover_letter" />
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 mt-8">
                        <SecondaryButton @click="isModalOpen = false" :disabled="form.processing">
                            Annuler
                        </SecondaryButton>
                        <PrimaryButton :disabled="form.processing">
                            Enregistrer Candidat
                        </PrimaryButton>
                    </div>
                </form>
            </div>
        </Modal>

        <!-- Document Preview Modal -->
        <Modal :show="!!selectedDocument" @close="selectedDocument = null" max-width="4xl">
            <div class="p-6 h-[80vh] flex flex-col">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold">Aperçu : {{ selectedDocument.original_name }}</h3>
                    <SecondaryButton @click="selectedDocument = null">Fermer</SecondaryButton>
                </div>
                <div class="flex-1 bg-slate-100 dark:bg-slate-900 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
                    <iframe 
                        v-if="selectedDocument" 
                        :src="route('admin.documents.show', selectedDocument.id)" 
                        class="w-full h-full"
                    ></iframe>
                </div>
            </div>
        </Modal>
    </AdminLayout>
</template>
