<script lang="ts">
	import { resolve } from "$app/paths";
	import GitFork from "$icon/git-fork";
	import Globe from "$icon/globe";
	import Star from "$icon/star";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import Tag from "$lib/components/ui/Tag.svelte";
	import { getAuth } from "$lib/auth.svelte";
	import StarButton from "./StarButton.svelte";
	import type { RepoCounts, RepoInfo } from "./types";

	interface Props {
		repo: RepoInfo;
		counts: RepoCounts;
		viewerStarRkey?: string | null;
	}

	let { repo, counts, viewerStarRkey }: Props = $props();

	const auth = getAuth();
	const signedIn = $derived(Boolean(auth.currentDid));
	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
	const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");
	const topics = $derived([...new Set(repo.topics ?? [])]);
</script>

{#snippet repoActions(className: string)}
	<div class={className}>
		{#if signedIn}
			<StarButton
				repoDid={repo.repoDid ?? ""}
				repoOwnerHandle={repo.ownerHandle}
				repoName={repo.name}
				initialCount={counts.stars}
				initialRkey={viewerStarRkey}
			/>
		{:else}
			<Button
				href={resolve(`${base}/stars` as "/")}
				variant="default"
				size="sm"
				icon={Star}
				title="Starred by"
			>
				{counts.stars}
			</Button>
		{/if}

		<ButtonGroup class="flex-1">
			<Button
				href={resolve(`${base}/fork` as "/")}
				variant="default"
				size="sm"
				insetShadow={true}
				icon={GitFork}
				class="flex-1"
			>
				Fork
			</Button>
			<Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="sm" title="Forked by">
				{counts.forks}
			</Button>
		</ButtonGroup>
	</div>
{/snippet}

<section class="mb-2 px-4 py-2">
	<div class="mb-2 flex flex-col items-start justify-between gap-4 sm:flex-row">
		<div class="flex min-w-0 flex-col gap-2">
			<div class="flex flex-wrap items-center gap-2 typography-paragraph-large font-normal">
				<a
					href={resolve(`/${repo.ownerHandle}` as "/")}
					class="flex items-center gap-2 text-foreground-default no-underline hover:underline"
				>
					<Avatar did={repo.ownerDid} handle={repo.ownerHandle} size="large" />
					{repo.ownerHandle}
				</a>
				<span class="text-foreground-subtle select-none">/</span>
				<a
					href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
					class="font-bold text-foreground-default no-underline hover:underline"
				>
					{repo.name}
				</a>
			</div>

			{#if repo.source}
				<div
					class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
				>
					<GitFork class="size-3 shrink-0" aria-hidden="true" />
					<span>forked from</span>
					<a
						href={resolve(`/${repo.source.ownerHandle}/${repo.source.name}` as "/")}
						class="underline"
					>
						{repo.source.ownerHandle}/{repo.source.name}
					</a>
				</div>
			{/if}
		</div>

		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
	</div>

	<div
		class="flex flex-wrap items-center justify gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
	>
		{#if repo.description}
			<span>{repo.description}</span>
		{:else}
			<span class="italic">This repository has no description</span>
		{/if}

		{#if repo.website}
			<span class="flex items-center gap-1">
				<Globe class="size-4 shrink-0" aria-hidden="true" />
				<a href={repo.website} rel="external ugc nofollow noopener noreferrer"
					>{trimScheme(repo.website)}</a
				>
			</span>
		{/if}

		{#if topics.length}
			<div class="flex flex-wrap items-center gap-1">
				{#each topics as topic (topic)}
					<Tag color="gray">{topic}</Tag>
				{/each}
			</div>
		{/if}
	</div>

	{@render repoActions("mt-2 flex flex-wrap items-start justify-end gap-2 sm:hidden")}
</section>
