<script lang="ts">
	import { getAuth } from "$lib/auth.svelte";
	import { createBobbinClient } from "$lib/api/client";
	import { resolveMiniDoc } from "$lib/api/identity";

	const auth = getAuth();
	const user = $derived(auth.currentUser);

	let pds = $state<string | null>(null);

	$effect(() => {
		const did = user?.did;
		if (!did) return;
		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
		let cancelled = false;
		resolveMiniDoc(ctx, did)
			.then((doc) => {
				if (!cancelled) pds = doc.pds ?? null;
			})
			.catch(() => {
				if (!cancelled) pds = null;
			});
		return () => {
			cancelled = true;
		};
	});
</script>

<div>
	<h2 class="text-lg font-medium text-foreground-default">Profile</h2>
	<p class="pb-2 text-sm text-foreground-subtle">
		Your account information from your AT Protocol identity.
	</p>

	<div class="flex flex-col divide-y divide-border-default rounded border border-border-default">
		<div class="flex flex-col gap-1 p-4">
			<span class="text-sm text-foreground-subtle">Handle</span>
			<span class="font-bold text-foreground-default">{user?.handle ?? "…"}</span>
		</div>
		<div class="flex flex-col gap-1 p-4">
			<span class="text-sm text-foreground-subtle">Decentralized Identifier (DID)</span>
			<span class="font-mono font-bold break-all text-foreground-default">{user?.did ?? "…"}</span>
		</div>
		<div class="flex flex-col gap-1 p-4">
			<span class="text-sm text-foreground-subtle">Personal Data Server (PDS)</span>
			<span class="font-bold break-all text-foreground-default">{pds ?? "…"}</span>
		</div>
	</div>
</div>
