<script setup>
import CoachLayout from '@/Layouts/CoachLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Head, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const form = useForm({
    title: '',
    description: '',
    before_image: null,
    after_image: null,
});

// Previews
const beforePreview = ref(null);
const afterPreview = ref(null);

const handleFileChange = (event, type) => {
    const file = event.target.files[0];
    if (!file) return;

    form[type] = file;

    const reader = new FileReader();
    reader.onload = (e) => {
        if (type === 'before_image') beforePreview.value = e.target.result;
        else afterPreview.value = e.target.result;
    };
    reader.readAsDataURL(file);
};

const submit = () => {
    form.post(route('coach.results.store'), {
        preserveScroll: true,
    });
};
</script>

<template>
    <Head title="Nuevo Resultado" />

    <CoachLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                Publicar Nuevo Resultado
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <form @submit.prevent="submit" class="p-6 space-y-6">
                        
                        <!-- Title -->
                        <div>
                            <InputLabel for="title" value="Título / Cliente" />
                            <TextInput
                                id="title"
                                type="text"
                                class="mt-1 block w-full"
                                v-model="form.title"
                                placeholder="Ej: Transformación de Juan Pérez - 12 Semanas"
                                required
                                autofocus
                            />
                            <InputError class="mt-2" :message="form.errors.title" />
                        </div>

                        <!-- Description -->
                        <div>
                            <InputLabel for="description" value="Descripción (Opcional)" />
                            <textarea
                                id="description"
                                v-model="form.description"
                                class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-orange-500 dark:focus:border-orange-600 focus:ring-orange-500 dark:focus:ring-orange-600 rounded-md shadow-sm"
                                rows="4"
                                placeholder="Describe los logros, tiempo transcurrido, estrategia usada..."
                            ></textarea>
                            <InputError class="mt-2" :message="form.errors.description" />
                        </div>

                        <!-- Images Upload -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <!-- Before Image -->
                            <div class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6 text-center hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors relative">
                                <InputLabel value="Foto del Antes" class="mb-4 text-lg" />
                                
                                <div v-if="beforePreview" class="mb-4 relative h-48 w-full group">
                                    <img :src="beforePreview" class="h-full w-full object-contain rounded-md" />
                                    <div class="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center rounded-md pointer-events-none">
                                        <p class="text-white font-medium">Cambiar imagen</p>
                                    </div>
                                </div>
                                <div v-else class="mb-4 text-gray-400">
                                    <svg class="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                        <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>

                                <input
                                    type="file"
                                    id="before_image"
                                    @change="(e) => handleFileChange(e, 'before_image')"
                                    accept="image/*"
                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                />
                                <p class="text-xs text-gray-500">PNG, JPG, GIF hasta 10MB</p>
                                <InputError class="mt-2" :message="form.errors.before_image" />
                            </div>

                            <!-- After Image -->
                            <div class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6 text-center hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors relative">
                                <InputLabel value="Foto del Después" class="mb-4 text-lg" />
                                
                                <div v-if="afterPreview" class="mb-4 relative h-48 w-full group">
                                    <img :src="afterPreview" class="h-full w-full object-contain rounded-md" />
                                    <div class="absolute inset-0 bg-black/40 hidden group-hover:flex items-center justify-center rounded-md pointer-events-none">
                                        <p class="text-white font-medium">Cambiar imagen</p>
                                    </div>
                                </div>
                                <div v-else class="mb-4 text-gray-400">
                                    <svg class="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                                        <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>

                                <input
                                    type="file"
                                    id="after_image"
                                    @change="(e) => handleFileChange(e, 'after_image')"
                                    accept="image/*"
                                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                                />
                                <p class="text-xs text-gray-500">PNG, JPG, GIF hasta 10MB</p>
                                <InputError class="mt-2" :message="form.errors.after_image" />
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                            <PrimaryButton class="ml-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                                Publicar Resultado
                            </PrimaryButton>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </CoachLayout>
</template>
