<template>
    <Head title="Profile" />
    <AuthenticatedLayout title="My Profile" subtitle="Manage your account settings and preferences">
        <div class="max-w-7xl mx-auto space-y-6">
            
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-surface-200">
                <h3 class="text-lg font-medium text-surface-900 mb-4">Profile Information</h3>
                <p class="text-sm text-surface-500 mb-6">Update your account's profile information.</p>
                
                <form @submit.prevent="updateProfile" class="space-y-6 max-w-xl">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1">First Name</label>
                            <input v-model="form.firstname" type="text" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                            <p v-if="form.errors.firstname" class="mt-1 text-sm text-red-600">{{ form.errors.firstname }}</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-surface-700 mb-1">Surname</label>
                            <input v-model="form.surname" type="text" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                            <p v-if="form.errors.surname" class="mt-1 text-sm text-red-600">{{ form.errors.surname }}</p>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1">Email</label>
                        <input v-model="form.email" type="email" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                        <p v-if="form.errors.email" class="mt-1 text-sm text-red-600">{{ form.errors.email }}</p>
                    </div>

                     <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1">Phone</label>
                        <input v-model="form.phone" type="text" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                    </div>

                    <div class="flex items-center gap-4">
                        <button type="submit" :disabled="form.processing" class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Save
                        </button>
                        <Transition enter-active-class="transition ease-in-out duration-150" enter-from-class="opacity-0" leave-active-class="transition ease-in-out duration-150" leave-to-class="opacity-0">
                            <p v-if="form.recentlySuccessful" class="text-sm text-surface-600">Saved.</p>
                        </Transition>
                    </div>
                </form>
            </div>

            <div class="bg-white p-6 rounded-2xl shadow-sm border border-surface-200">
                <h3 class="text-lg font-medium text-surface-900 mb-4">Update Password</h3>
                <p class="text-sm text-surface-500 mb-6">Ensure your account is using a long, random password to stay secure.</p>
                
                <form @submit.prevent="updatePassword" class="space-y-6 max-w-xl">
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1">Current Password</label>
                        <input v-model="passwordForm.current_password" type="password" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                        <p v-if="passwordForm.errors.current_password" class="mt-1 text-sm text-red-600">{{ passwordForm.errors.current_password }}</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1">New Password</label>
                        <input v-model="passwordForm.password" type="password" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                        <p v-if="passwordForm.errors.password" class="mt-1 text-sm text-red-600">{{ passwordForm.errors.password }}</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-surface-700 mb-1">Confirm Password</label>
                        <input v-model="passwordForm.password_confirmation" type="password" class="w-full px-4 py-2 border border-surface-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 sm:text-sm" />
                    </div>

                    <div class="flex items-center gap-4">
                        <button type="submit" :disabled="passwordForm.processing" class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Save
                        </button>
                        <Transition enter-active-class="transition ease-in-out duration-150" enter-from-class="opacity-0" leave-active-class="transition ease-in-out duration-150" leave-to-class="opacity-0">
                            <p v-if="passwordForm.recentlySuccessful" class="text-sm text-surface-600">Saved.</p>
                        </Transition>
                    </div>
                </form>
            </div>

        </div>
    </AuthenticatedLayout>
</template>

<script setup>
import { Head, useForm, usePage } from '@inertiajs/vue3';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';

const user = usePage().props.auth.user;

const form = useForm({
    firstname: user.firstname,
    surname: user.surname,
    email: user.email,
    phone: user.phone || '',
});

const passwordForm = useForm({
    current_password: '',
    password: '',
    password_confirmation: '',
});

const updateProfile = () => {
    form.patch('/profile');
};

const updatePassword = () => {
    passwordForm.put('/password', {
        preserveScroll: true,
        onSuccess: () => passwordForm.reset(),
        onError: () => {
            if (passwordForm.errors.password) {
                passwordForm.reset('password', 'password_confirmation');
            }
            if (passwordForm.errors.current_password) {
                passwordForm.reset('current_password');
            }
        },
    });
};
</script>
