<script setup>
import { computed } from 'vue'
import { Head, usePage } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import DeleteUserForm from './Partials/DeleteUserForm.vue'
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue'
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue'
import TwoFactorAuthForm from './Partials/TwoFactorAuthForm.vue'

defineProps({
    mustVerifyEmail: { type: Boolean },
    status: { type: String },
})

const page = usePage()
const isAdmin = computed(() => page.props.auth?.user?.is_admin)
const Layout = computed(() => isAdmin.value ? AdminLayout : CustomerLayout)
</script>

<template>
    <Head title="Profil & Güvenlik" />

    <component :is="Layout">
        <template #header>Profil & Güvenlik</template>

        <div class="space-y-6">
            <!-- Profile Information -->
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <UpdateProfileInformationForm
                    :must-verify-email="mustVerifyEmail"
                    :status="status"
                    class="max-w-2xl"
                />
            </div>

            <!-- Password -->
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <UpdatePasswordForm class="max-w-2xl" />
            </div>

            <!-- 2FA -->
            <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                <TwoFactorAuthForm />
            </div>

            <!-- Delete Account -->
            <div class="rounded-xl border border-red-200 bg-red-50/30 p-6 shadow-sm">
                <DeleteUserForm class="max-w-2xl" />
            </div>
        </div>
    </component>
</template>
