<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 UserRound from '$icon/user-round';
	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;
		avatar?: 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">
			{#if identity.avatar}
				<img
					class="absolute inset-0 h-full w-full rounded-full object-cover p-2"
					src={identity.avatar}
					alt={identity.handle}
				/>
			{:else}
				<span class="absolute inset-0 h-full w-full p-2" aria-hidden="true">
					<span
						class="flex h-full w-full items-center justify-center rounded-full bg-surface-muted text-fg-faint"
					>
						<UserRound class="size-1/2" />
					</span>
				</span>
			{/if}
		</div>
	</div>

	<div class="col-span-2">
		<div class="flex flex-row flex-nowrap items-center gap-2">
			<h1
				title={identity.handle}
				class="overflow-hidden text-lg font-bold text-ellipsis whitespace-nowrap"
			>
				{identity.handle}
			</h1>
			{#if shown?.pronouns}
				<p class="text-fg-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 text-sm">
				{#if shown?.description}
					<p class="pb-4 text-base 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 overflow-hidden text-ellipsis whitespace-nowrap"
					>
						{#if shown?.location}
							<div class="flex items-center gap-2">
								<span class="flex-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="flex-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="flex-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-4" 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"
						class="px-3"
						aria-label="RSS feed"
					>
						<Rss class="size-4" aria-hidden="true" />
					</Button>
				</div>
			</div>
		{/if}
	</div>
</div>
