<script lang="ts">
	import { resolve } from "$app/paths";
	import GalleryVertical from "$icon/gallery-vertical";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import User from "$lib/components/ui/User.svelte";
	import RepoCard from "$lib/components/repo/RepoCard.svelte";
	import FollowCard from "$lib/components/profile/FollowCard.svelte";
	import { rkeyFromUri } from "$lib/api/uri";
	import { relativeTime } from "$lib/format";
	import type { RepoCardData, PersonData } from "$lib/components/profile/types";
	import type * as ShTangledRepoDefs from "$lib/api/lexicons/types/sh/tangled/repo/defs";
	import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
	import type { PageData } from "./$types";

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

	const toRepoCard = (repo: ShTangledRepoDefs.RepoViewBasic): RepoCardData => ({
		name: repo.slug,
		repoDid: repo.did,
		ownerHandle: repo.owner.handle,
		description: repo.description,
		createdAt: repo.createdAt,
		stars: repo.starCount,
        viewerStarRkey: repo.viewer?.star ? rkeyFromUri(repo.viewer.star) : null
	});

	const toPerson = (profile: ShTangledActorDefs.ProfileViewDetailed): PersonData => ({
		did: profile.did,
		handle: profile.handle,
		avatar: profile.avatar,
		followers: profile.followersCount,
		following: profile.followsCount,
		viewerFollowRkey: profile.viewer?.following ? rkeyFromUri(profile.viewer.following) : null
	});

	const repoHref = (repo: ShTangledRepoDefs.RepoViewBasic) =>
		resolve(`/${repo.owner.handle}/${repo.slug}` as "/");
</script>

<svelte:head>
	<title>Timeline &middot; Tangled</title>
</svelte:head>

<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
	<div class="flex items-center justify-between">
		<h1 class="flex items-center gap-2 text-2xl font-semibold">
			<GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
			Timeline
		</h1>
		{#if data.signedIn}
			<ButtonGroup>
				<Button
					href={resolve("/timeline" as "/")}
					variant={data.followingOnly ? "ghost" : "default"}>Global</Button
				>
				<Button
					href={resolve("/timeline?following=true" as "/")}
					variant={data.followingOnly ? "default" : "ghost"}>Following</Button
				>
			</ButtonGroup>
		{/if}
	</div>

	{#each data.feed as item (item.event.uri)}
		{@const event = item.event}
		<div class="flex flex-col gap-2">
			<div class="flex flex-wrap items-center gap-2 text-sm text-foreground-muted">
				{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
					<User handle={event.repo.owner.handle} src={event.repo.owner.avatar} size="sm" />
					{#if event.source}
						<span>forked</span>
						<a href={repoHref(event.source)} class="text-foreground-default"
							>{event.source.owner.handle}/{event.source.slug}</a
						>
						<span>to {event.repo.slug}</span>
					{:else}
						<span>created {event.repo.slug}</span>
					{/if}
				{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
					<User handle={event.actor.handle} src={event.actor.avatar} size="sm" />
					<span>starred</span>
					<a href={repoHref(event.repo)} class="text-foreground-default"
						>{event.repo.owner.handle}/{event.repo.slug}</a
					>
				{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
					<User handle={event.actor.handle} src={event.actor.avatar} size="sm" />
					<span>followed</span>
					<User handle={event.subject.handle} src={event.subject.avatar} size="sm" />
				{/if}
				<span class="text-foreground-subtle">{relativeTime(item.eventAt)}</span>
			</div>

			{#if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
				<FollowCard person={toPerson(event.subject)} />
			{:else}
				<RepoCard repo={toRepoCard(event.repo)} />
			{/if}
		</div>
	{:else}
		<EmptyState
			message={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
		/>
	{/each}
</section>
