<script lang="ts">
	import { pageTitle } from "$lib/hooks/page-title.svelte";
	import type { PageData } from "./$types";

	import { adminSiteNavMap } from "$lib/core/constants";
	import { sessionUserInfo } from "$lib/stores/session.info";
	import Title from "$lib/components/atoms/title.svelte";
	import Container from "$lib/components/atoms/container.svelte";
	import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
	import ProfileInfoForm from "$lib/domains/user/view/profile/profile-info-form.svelte";
	import ChangePasswordForm from "$lib/domains/auth/view/security/change-password-form.svelte";
	import { profileInfoVM } from "$lib/domains/user/view/profile/profile.vm.svelte";

	pageTitle.set("Profile");

	interface Props {
		data: PageData;
	}

	let { data }: Props = $props();

	profileInfoVM.userInfo = data.user;
	sessionUserInfo.set(data.user);
</script>

<Breadcrumb.Root class="m-2.5 mb-8">
	<Breadcrumb.List>
		<Breadcrumb.Item>
			<Breadcrumb.Link href={adminSiteNavMap.dashboard}>
				Dashboard
			</Breadcrumb.Link>
		</Breadcrumb.Item>
		<Breadcrumb.Separator />
		<Breadcrumb.Item>
			<Breadcrumb.Page>Profile</Breadcrumb.Page>
		</Breadcrumb.Item>
	</Breadcrumb.List>
</Breadcrumb.Root>

<main class="grid w-full place-items-center pb-12 md:p-8">
	<Container wrapperClass="max-w-3xl">
		<Title size="h3" color="theme">Profile Info</Title>
		{#if profileInfoVM.userInfo}
			<ProfileInfoForm />

			<Title size="h3" color="theme">Account Security</Title>
			<Title size="h4" color="black">Update Password</Title>
			<ChangePasswordForm />
			<small class="text-center font-medium text-red-800/60">
				Warning : This will revoke all other sessions
			</small>
		{:else}
			<div class="flex flex-col items-center gap-4">
				<Title size="h3" color="theme">User Info</Title>
				<p class="text-center text-muted">Profile info not found</p>
			</div>
		{/if}
	</Container>
</main>
