<script setup lang="ts">
import SearchableSelect from '@/Components/Common/SearchableSelect.vue';
import AdminLayout from '@/Layouts/AdminLayout.vue';
import admin from '@/routes/admin';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ChevronRight } from 'lucide-vue-next';
import { PropType, ref } from 'vue';

const props = defineProps({
    user: Object as PropType<any>,
    roles: {
        type: Array as PropType<any[]>,
        default: () => [],
    },
});

const form = useForm({
    name: props.user.name,
    email: props.user.email,
    role_id: props.user.role_id,
    password: '',
    password_confirmation: '',
});

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

const submit = () => {
    form.put(admin.users.update.url(props.user.id), {
        onSuccess: () => {
            form.reset('password', 'password_confirmation');
            showPasswordFields.value = false;
        },
    });
};
</script>

<template>
    <Head :title="__('Edit User Data')" />

    <AdminLayout>
        <div class="animate-fade-in mx-auto max-w-2xl space-y-6">
            <div
                class="flex flex-col items-start justify-between gap-6 border-b border-slate-200 pb-6 sm:flex-row sm:items-center dark:border-slate-800"
            >
                <div>
                    <div class="mb-2 flex items-center gap-2 text-[10px] font-black tracking-widest text-slate-400 uppercase">
                        <Link :href="admin.users.index.url()" class="hover:text-brand-500">{{ __('Member Directory') }}</Link>
                        <ChevronRight :size="8" class="opacity-40 rtl:rotate-180" />
                        <span class="text-brand-500">{{ __('Edit Member') }}</span>
                    </div>
                    <h2 class="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-white">{{ __('Edit User Data') }}</h2>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ __('Update member details and access role.') }}</p>
                </div>
            </div>

            <div class="rounded-4xl border border-slate-200/60 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <form @submit.prevent="submit" class="space-y-6">
                    <div>
                        <label class="mb-2 block text-xs font-bold text-slate-600 dark:text-slate-400">{{ __('Full Name') }}</label>
                        <input
                            v-model="form.name"
                            type="text"
                            class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-5 py-3 font-medium text-slate-900 transition-all outline-none placeholder:text-slate-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900/50 dark:text-white dark:placeholder:text-slate-500"
                        />
                        <p v-if="form.errors.name" class="mt-1 text-xs text-red-500">{{ form.errors.name }}</p>
                    </div>

                    <div>
                        <label class="mb-2 block text-xs font-bold text-slate-600 dark:text-slate-400">{{ __('Email Address') }}</label>
                        <input
                            v-model="form.email"
                            type="email"
                            class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-5 py-3 font-medium text-slate-900 transition-all outline-none placeholder:text-slate-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900/50 dark:text-white dark:placeholder:text-slate-500"
                        />
                        <p v-if="form.errors.email" class="mt-1 text-xs text-red-500">{{ form.errors.email }}</p>
                    </div>

                    <div
                        v-if="user.type === 'super-admin'"
                        class="mb-6 rounded-2xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-900/30 dark:bg-amber-900/10"
                    >
                        <div class="flex gap-3">
                            <AdminLayout.Shield :size="18" class="mt-0.5 text-amber-600" />
                            <div class="text-xs leading-relaxed font-medium text-amber-800 dark:text-amber-200">
                                {{
                                    __(
                                        'This is a Super Admin account. For security reasons, the role and access type of a Super Admin cannot be downgraded or changed from this directory.',
                                    )
                                }}
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="mb-2 block text-xs font-bold text-slate-600 dark:text-slate-400">{{ __('Access Role') }}</label>
                        <SearchableSelect
                            v-model="form.role_id"
                            :options="roles"
                            value-key="id"
                            label-key="name"
                            :placeholder="__('Select Role')"
                            :disabled="user.type === 'super-admin'"
                        />
                        <p v-if="form.errors.role_id" class="mt-1 text-xs text-red-500">{{ form.errors.role_id }}</p>
                    </div>

                    <!-- Password Update Section -->
                    <div class="border-t border-slate-200 pt-6 dark:border-slate-700">
                        <button
                            type="button"
                            @click="showPasswordFields = !showPasswordFields"
                            class="flex items-center gap-2 text-sm font-bold text-brand-600 transition-colors hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
                        >
                            <span v-if="!showPasswordFields">{{ __('Change Password') }}</span>
                            <span v-else>{{ __('Cancel Password Change') }}</span>
                        </button>

                        <div v-if="showPasswordFields" class="mt-4 space-y-4">
                            <div>
                                <label class="mb-2 block text-xs font-bold text-slate-600 dark:text-slate-400">{{ __('New Password') }}</label>
                                <div class="relative">
                                    <input
                                        v-model="form.password"
                                        :type="showNewPassword ? 'text' : 'password'"
                                        class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-5 py-3 pr-10 font-medium text-slate-900 transition-all outline-none placeholder:text-slate-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900/50 dark:text-white dark:placeholder:text-slate-500"
                                        placeholder="Enter new password"
                                    />
                                    <button
                                        type="button"
                                        @click="showNewPassword = !showNewPassword"
                                        class="absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                    >
                                        <svg v-if="!showNewPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                            ></path>
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                            ></path>
                                        </svg>
                                        <svg v-else class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                            ></path>
                                        </svg>
                                    </button>
                                </div>
                                <p v-if="form.errors.password" class="mt-1 text-xs text-red-500">{{ form.errors.password }}</p>
                            </div>

                            <div>
                                <label class="mb-2 block text-xs font-bold text-slate-600 dark:text-slate-400">{{
                                    __('Confirm New Password')
                                }}</label>
                                <div class="relative">
                                    <input
                                        v-model="form.password_confirmation"
                                        :type="showConfirmPassword ? 'text' : 'password'"
                                        class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-5 py-3 pr-10 font-medium text-slate-900 transition-all outline-none placeholder:text-slate-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-500/10 dark:border-slate-700 dark:bg-slate-900/50 dark:text-white dark:placeholder:text-slate-500"
                                        placeholder="Confirm new password"
                                    />
                                    <button
                                        type="button"
                                        @click="showConfirmPassword = !showConfirmPassword"
                                        class="absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300"
                                    >
                                        <svg v-if="!showConfirmPassword" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                            ></path>
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                            ></path>
                                        </svg>
                                        <svg v-else class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                                            ></path>
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 pt-4">
                        <Link
                            :href="admin.users.index.url()"
                            class="rounded-2xl border border-slate-200 px-6 py-3 text-center text-sm font-bold text-slate-500 transition-all hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800"
                        >
                            {{ __('Cancel') }}
                        </Link>
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="rounded-2xl bg-brand-600 px-8 py-3 text-sm font-bold text-white shadow-xl shadow-brand-600/20 transition-all hover:bg-brand-700 disabled:opacity-50"
                        >
                            {{ form.processing ? __('Saving...') : __('Save Changes') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
</template>
