<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(/\/$/, "");
</script>

<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-heading-4 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="size-6" tiny />
					{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 text-sm 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>

		<div class="flex shrink-0 items-start gap-2">
			{#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>
				<Button
					href={resolve(`${base}/fork` as "/")}
					variant="default"
					size="sm"
					insetShadow={true}
					icon={GitFork}
				>
					Fork
				</Button>
				<Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="sm" title="Forked by">
					{counts.forks}
				</Button>
			</ButtonGroup>
		</div>
	</div>

	<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm 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 repo.topics?.length}
			<div class="flex flex-wrap items-center gap-1">
				{#each repo.topics as topic (topic)}
					<Tag color="gray">{topic}</Tag>
				{/each}
			</div>
		{/if}
	</div>
</section>
