<script lang="ts">
	import { resolve } from "$app/paths";
	import Avatar from "#lib/components/ui/Avatar.svelte";
	import Users from "$icon/users";
	import FollowButton from "#lib/components/profile/FollowButton.svelte";
	import type { FollowChange, PersonData } from "#lib/components/profile/types.ts";
	import { createOptimisticCount } from "#lib/optimistic.svelte.ts";
	import Separator from "#lib/components/ui/Separator.svelte";
	import { formatCount, pluralize } from "#lib/format.ts";
	import { profileIdentifier } from "#lib/api/identity.ts";

	let {
		person,
		onFollow,
		followButton = true
	}: {
		person: PersonData;
		onFollow?: (change: FollowChange) => void;
		followButton?: boolean;
	} = $props();

	const identifier = $derived(profileIdentifier(person.handle, person.did));
	const profilePath = $derived(`/${identifier}`);

	const followerCount = createOptimisticCount({
		key: () => person.did,
		loaded: () => person.followers
	});

	const followed = (change: FollowChange) => {
		followerCount.adjust(change.delta);
		onFollow?.(change);
	};
</script>

<div
	data-testid="person"
	data-handle={person.handle}
	data-followers={followerCount.value}
	data-following={person.following}
	class="flex flex-col gap-md @compact:flex-row @compact:items-start @compact:justify-between"
>
	<div class="flex min-w-0 flex-1 items-center gap-md">
		<a
			href={resolve(profilePath as "/")}
			tabindex="-1"
			aria-hidden="true"
			class="flex size-24 shrink-0 items-center justify-center"
		>
			<Avatar
				did={person.did}
				avatarCid={person.avatarCid}
				handle={person.handle}
				size="full"
				pixels={96}
			/>
		</a>

		<div class="flex min-w-0 flex-1 flex-col justify-around">
			<div class="flex max-w-full items-center gap-xs">
				<a
					href={resolve(profilePath as "/")}
					class="max-w-full shrink-0 truncate font-semibold text-foreground-default hover:underline"
				>
					{identifier}
				</a>
				{#if person.pronouns}
					<span class="min-w-0 truncate text-foreground-muted" title={person.pronouns}
						>{person.pronouns}</span
					>
				{/if}
			</div>
			{#if person.description}
				<p class="mb-xs line-clamp-1 wrap-break-word" title={person.description}>
					{person.description}
				</p>
			{/if}
			<div class="my-xs flex max-w-full items-center gap-xs truncate text-foreground-subtle">
				<Users class="size-3.5 shrink-0" />
				<span
					><a
						href={resolve(`${profilePath}?tab=followers` as "/")}
						class="hover:text-foreground-default hover:underline"
						>{pluralize(followerCount.value, "follower", "followers")}</a
					></span
				>
				<Separator variant="dot" />
				<span
					><a
						href={resolve(`${profilePath}?tab=following` as "/")}
						class="hover:text-foreground-default hover:underline"
						>{formatCount(person.following)} following</a
					></span
				>
			</div>
		</div>
	</div>

	{#if !person.isSelf && followButton}
		<div class="w-full @compact:w-auto @compact:max-w-32">
			<FollowButton
				profileDid={person.did}
				initialRkey={person.viewerFollowRkey}
				onCommit={followed}
			/>
		</div>
	{/if}
</div>