<script setup lang="ts">
import EmployeeLayout from '@/Layouts/EmployeeLayout.vue';
import employee from '@/routes/employee';
import { Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps<{
    user: any;
}>();

const showCurrentPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);

const profile = props.user;
const employeeProfile = props.user?.employee_profile || {};
const preview = ref(profile.profile_image ? '/storage/' + profile.profile_image : null);
const fileInput = ref<HTMLInputElement | null>(null);

const photoForm = useForm({
    _method: 'PUT',
    profile_image: null as File | null,
});

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

const triggerFileInput = () => {
    fileInput.value?.click();
};

const onFileChange = (event: Event) => {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];

    if (!file) {
        return;
    }

    photoForm.profile_image = file;
    preview.value = URL.createObjectURL(file);
};

const savePhoto = () => {
    photoForm.post(employee.profile.update_image.url(), {
        preserveScroll: true,
        onSuccess: () => {
            photoForm.reset('profile_image');
        },
    });
};

const submit = () => {
    passwordForm.post(employee.profile.update_password.url(), {
        preserveScroll: true,
        onSuccess: () => {
            passwordForm.reset('current_password', 'password', 'password_confirmation');
        },
    });
};
</script>

<template>
    <EmployeeLayout>
        <div class="animate-fade-in mx-auto max-w-4xl space-y-6">
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ __('Profile Settings') }}</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('You can only change your password from this page.') }}</p>
            </div>

            <div class="grid gap-6">
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <h3 class="mb-6 text-base font-bold text-slate-900 dark:text-white">{{ __('My Profile Details') }}</h3>

                    <div class="mb-6 flex items-center gap-4">
                        <div class="h-20 w-20 overflow-hidden rounded-full border-4 border-slate-100 dark:border-slate-800">
                            <img
                                :src="preview || `https://ui-avatars.com/api/?name=${encodeURIComponent(profile.name)}&background=random`"
                                class="h-full w-full object-cover"
                                alt="Profile"
                            />
                        </div>
                        <div>
                            <p class="text-sm font-bold text-slate-900 dark:text-white">{{ profile.name }}</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">{{ profile.email }}</p>
                            <button type="button" @click="triggerFileInput" class="mt-2 text-xs font-bold text-(--brand-primary) hover:underline">
                                {{ __('Change Photo') }}
                            </button>
                            <button
                                v-if="photoForm.profile_image"
                                type="button"
                                @click="savePhoto"
                                :disabled="photoForm.processing"
                                class="mt-2 ml-3 rounded-lg bg-(--brand-primary) px-2.5 py-1 text-xs font-bold text-white hover:brightness-110 disabled:opacity-50"
                            >
                                {{ photoForm.processing ? __('Saving...') : __('Save Photo') }}
                            </button>
                            <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="onFileChange" />
                            <p v-if="photoForm.errors.profile_image" class="mt-1 text-xs text-red-500">{{ photoForm.errors.profile_image }}</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Full Name') }}</label>
                            <input
                                :value="profile.name"
                                type="text"
                                disabled
                                class="w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            />
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Work Email') }}</label>
                            <input
                                :value="profile.email"
                                type="text"
                                disabled
                                class="w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            />
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Work Phone') }}</label>
                            <input
                                :value="employeeProfile.phone || ''"
                                type="text"
                                disabled
                                class="w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            />
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Personal Email') }}</label>
                            <input
                                :value="employeeProfile.personal_email || ''"
                                type="text"
                                disabled
                                class="w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            />
                        </div>

                        <div class="space-y-1">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{ __('Personal Phone') }}</label>
                            <input
                                :value="employeeProfile.personal_phone || ''"
                                type="text"
                                disabled
                                class="w-full cursor-not-allowed rounded-xl border border-slate-200 bg-slate-100 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            />
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <form @submit.prevent="submit" class="space-y-6">
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ __('Change Password') }}</h3>

                        <div class="max-w-md space-y-4">
                            <div class="space-y-1">
                                <label for="current_password" class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{
                                    __('Current Password')
                                }}</label>
                                <div class="relative">
                                    <input
                                        id="current_password"
                                        v-model="passwordForm.current_password"
                                        :type="showCurrentPassword ? 'text' : 'password'"
                                        class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 pr-10 text-slate-900 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-(--brand-primary) dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                                    />
                                    <button
                                        type="button"
                                        @click="showCurrentPassword = !showCurrentPassword"
                                        class="absolute inset-y-0 right-0 px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                    >
                                        {{ showCurrentPassword ? 'Hide' : 'Show' }}
                                    </button>
                                </div>
                                <div v-if="passwordForm.errors.current_password" class="text-xs text-red-500">
                                    {{ passwordForm.errors.current_password }}
                                </div>
                            </div>

                            <div class="space-y-1">
                                <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{
                                    __('New Password')
                                }}</label>
                                <div class="relative">
                                    <input
                                        id="password"
                                        v-model="passwordForm.password"
                                        :type="showNewPassword ? 'text' : 'password'"
                                        class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 pr-10 text-slate-900 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-(--brand-primary) dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                                    />
                                    <button
                                        type="button"
                                        @click="showNewPassword = !showNewPassword"
                                        class="absolute inset-y-0 right-0 px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                    >
                                        {{ showNewPassword ? 'Hide' : 'Show' }}
                                    </button>
                                </div>
                                <div v-if="passwordForm.errors.password" class="text-xs text-red-500">{{ passwordForm.errors.password }}</div>
                            </div>

                            <div class="space-y-1">
                                <label for="password_confirmation" class="block text-sm font-medium text-slate-700 dark:text-slate-300">{{
                                    __('Confirm Password')
                                }}</label>
                                <div class="relative">
                                    <input
                                        id="password_confirmation"
                                        v-model="passwordForm.password_confirmation"
                                        :type="showConfirmPassword ? 'text' : 'password'"
                                        class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 pr-10 text-slate-900 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-(--brand-primary) dark:border-slate-700 dark:bg-slate-800 dark:text-white"
                                    />
                                    <button
                                        type="button"
                                        @click="showConfirmPassword = !showConfirmPassword"
                                        class="absolute inset-y-0 right-0 px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                    >
                                        {{ showConfirmPassword ? 'Hide' : 'Show' }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end">
                            <button
                                type="submit"
                                :disabled="passwordForm.processing"
                                class="flex items-center rounded-xl bg-(--brand-primary) px-4 py-2 text-sm font-bold text-white shadow-lg transition-all hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
                            >
                                {{ passwordForm.processing ? __('Saving...') : __('Update Password') }}
                            </button>
                        </div>
                    </form>
                </div>
                <div
                    class="flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
                >
                    <div>
                        <h3 class="text-base font-bold text-slate-900 dark:text-white">{{ __('Salary Certificate') }}</h3>
                        <p class="text-sm text-slate-500 dark:text-slate-400">{{ __('Request and download your salary certificates.') }}</p>
                    </div>
                    <Link
                        :href="employee.salaryCertificates.index.url()"
                        class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                    >
                        {{ __('Manage Requests') }}
                    </Link>
                </div>
            </div>
        </div>
    </EmployeeLayout>
</template>

<style scoped>
.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>
