<script lang="ts">
	import FollowButton from "./FollowButton.svelte";
	import ProfileEditForm from "./ProfileEditForm.svelte";
	import FollowerFollowing from "./FollowerFollowing.svelte";
	import MapPin from "$icon/map-pin";
	import Link from "$icon/link";
	import Pencil from "$icon/pencil";
	import Rss from "$icon/rss";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import { getAuth } from "$lib/auth.svelte";
	import type { ProfileRecord } from "$lib/api/records";

	interface Identity {
		did: string;
		handle: string;
	}

	interface Props {
		identity: Identity;
		profile: ProfileRecord | null;
		followers: number;
		following: number;
		viewerFollowRkey?: string | null;
	}

	let { identity, profile, followers, following, viewerFollowRkey }: Props = $props();

	const auth = getAuth();
	const isSelf = $derived(auth.currentDid === identity.did);

	let editing = $state(false);
	let saved = $state<ProfileRecord | null>(null);
	const shown = $derived(saved ?? profile);

	const links = $derived((shown?.links ?? []).filter((l) => l.trim().length > 0));
	const blueskyUrl = $derived(shown?.bluesky ? `https://bsky.app/profile/${identity.did}` : null);
</script>

<div class="grid grid-cols-3 items-center gap-1 md:grid-cols-1">
	<div class="col-span-1 flex items-center justify-center">
		<div class="relative aspect-square w-3/4">
			<Avatar
				did={identity.did}
				handle={identity.handle}
				size="h-full w-full"
				class="absolute inset-0"
			/>
		</div>
	</div>

	<div class="col-span-2">
		<div class="flex flex-row flex-nowrap items-center gap-2">
			<h1 title={identity.handle} class="truncate typography-heading-4 font-bold">
				{identity.handle}
			</h1>
			{#if shown?.pronouns}
				<p class="text-foreground-subtle">{shown.pronouns}</p>
			{/if}
		</div>
		<div class="md:hidden">
			<FollowerFollowing handle={identity.handle} {followers} {following} />
		</div>
	</div>

	<div class="col-span-3 md:col-span-full">
		{#if editing}
			<ProfileEditForm
				profile={shown}
				onSaved={(record) => {
					saved = record;
					editing = false;
				}}
				onCancel={() => (editing = false)}
			/>
		{:else}
			<div class="space-y-2 typography-paragraph-small">
				{#if shown?.description}
					<p class="pb-4 typography-paragraph-large md:pb-2">{shown.description}</p>
				{/if}

				<div class="hidden md:block">
					<FollowerFollowing handle={identity.handle} {followers} {following} />
				</div>

				{#if shown?.location || links.length > 0 || blueskyUrl}
					<div class="mb-2 flex max-w-full flex-col gap-2 truncate">
						{#if shown?.location}
							<div class="flex items-center gap-2">
								<span class="shrink-0"><MapPin class="size-4" aria-hidden="true" /></span>
								<span>{shown.location}</span>
							</div>
						{/if}
						{#if blueskyUrl}
							<div class="flex items-center gap-2">
								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
								<a
									href={blueskyUrl}
									target="_blank"
									rel="external noopener noreferrer"
									class="truncate no-underline hover:underline">{identity.handle}</a
								>
							</div>
						{/if}
						{#each links as link, index (index)}
							<div class="flex items-center gap-2">
								<span class="shrink-0"><Link class="size-4" aria-hidden="true" /></span>
								<a
									href={link}
									target="_blank"
									rel="external nofollow me noopener noreferrer"
									class="truncate no-underline hover:underline">{link}</a
								>
							</div>
						{/each}
					</div>
				{/if}

				<div class="my-2 flex items-center gap-2">
					{#if isSelf}
						<Button variant="default" class="w-full gap-2" onclick={() => (editing = true)}>
							<Pencil class="size-3" aria-hidden="true" />
							Edit
						</Button>
					{:else}
						<div class="w-full">
							<FollowButton profileDid={identity.did} initialRkey={viewerFollowRkey} />
						</div>
					{/if}
					<Button href={`/${identity.handle}/feed.atom`} variant="default" aria-label="RSS feed">
						<Rss class="size-4" aria-hidden="true" />
					</Button>
				</div>
			</div>
		{/if}
	</div>
</div>
