<script lang="ts">
	import GitBranch from "$icon/git-branch";
	import Logs from "$icon/logs";
	import Tags from "$icon/tags";
	import TriangleAlert from "$icon/triangle-alert";
	import BranchList from "./BranchList.svelte";
	import CommitList from "./CommitList.svelte";
	import EmptyRepo from "./EmptyRepo.svelte";
	import FileTree from "./FileTree.svelte";
	import LanguageBar from "./LanguageBar.svelte";
	import PanelHeader from "./PanelHeader.svelte";
	import Readme from "./Readme.svelte";
	import RepoToolbar from "./RepoToolbar.svelte";
	import TagList from "./TagList.svelte";
	import type { loadRepoIndex } from "$lib/api/repoIndex";
	import type { RepoInfo } from "./types";

	interface Props {
		repo: RepoInfo;
		data: Awaited<ReturnType<typeof loadRepoIndex>>;
		bobbinUrl: string;
	}

	let { repo, data, bobbinUrl }: Props = $props();

	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
	const encodedRef = $derived(encodeURIComponent(data.ref));
	const refsCapped = $derived(data.refs.capped);
</script>

<section
	class="relative mx-auto w-full rounded bg-background-default px-6 py-4 text-foreground-default"
>
	{#if data.needsUpgrade}
		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
			<div>
				<span class="flex items-center justify-center gap-2">
					<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
					The knot hosting this repository needs an upgrade.
				</span>
				<p class="mt-2">
					This repository is currently unavailable.
					<a
						href="https://docs.tangled.org/migrating-knots-and-spindles.html"
						rel="external noopener noreferrer"
						class="underline">Read the upgrade guide</a
					>
				</p>
			</div>
		</div>
	{:else if data.knotUnreachable}
		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
			<span class="flex items-center gap-2">
				<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
				The knot hosting this repository is unreachable.
			</span>
		</div>
	{:else if data.isEmpty}
		<EmptyRepo {repo} />
	{:else}
		{#if data.languages.length > 0}
			<LanguageBar languages={data.languages} />
		{/if}

		<RepoToolbar
			{repo}
			ref={data.ref}
			refs={data.refs}
			totalCommits={data.totalCommits}
			totalBranches={data.totalBranches}
			totalTags={data.totalTags}
			{bobbinUrl}
		/>

		<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
			<div class="min-w-0 md:border-r md:border-border-default md:pr-2">
				<FileTree
					ownerHandle={repo.ownerHandle}
					repoName={repo.name}
					ref={data.ref}
					entries={data.files}
				/>
			</div>

			<div class="hidden md:block">
				{#if data.commits.length > 0}
					<div class="px-2 pb-4">
						<PanelHeader
							title="Commits"
							icon={Logs}
							href={`${base}/commits/${encodedRef}`}
							count={data.totalCommits}
						/>
						<CommitList
							ownerHandle={repo.ownerHandle}
							repoName={repo.name}
							commits={data.commits}
							tagsByCommit={data.tagsByCommit}
						/>
					</div>
				{/if}

				{#if data.branches.length > 0}
					<div class="border-t border-border-default px-2 py-4">
						<PanelHeader
							title="Branches"
							icon={GitBranch}
							href={`${base}/branches`}
							count={data.totalBranches}
							approximate={refsCapped}
						/>
						<BranchList
							ownerHandle={repo.ownerHandle}
							repoName={repo.name}
							currentRef={data.ref}
							branches={data.branches}
						/>
					</div>
				{/if}

				{#if data.tags.length > 0}
					<div class="border-t border-border-default px-2 py-4">
						<PanelHeader
							title="Tags"
							icon={Tags}
							href={`${base}/tags`}
							count={data.totalTags}
							approximate={refsCapped}
						/>
						<TagList ownerHandle={repo.ownerHandle} repoName={repo.name} tags={data.tags} />
					</div>
				{/if}
			</div>
		</div>
	{/if}
</section>

{#if data.readme}
	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
{/if}
