<script lang="ts">
	import { resolve } from "$app/paths";
	import GitBranch from "$icon/git-branch";
	import GitCommitHorizontal from "$icon/git-commit-horizontal";
	import Logs from "$icon/logs";
	import SearchCode from "$icon/search-code";
	import Tags from "$icon/tags";
	import TriangleAlert from "$icon/triangle-alert";
	import BranchList from "$lib/components/repo/BranchList.svelte";
	import CloneDropdown from "$lib/components/repo/CloneDropdown.svelte";
	import CommitList from "$lib/components/repo/CommitList.svelte";
	import EmptyRepo from "$lib/components/repo/EmptyRepo.svelte";
	import FileTree from "$lib/components/repo/FileTree.svelte";
	import LanguageBar from "$lib/components/repo/LanguageBar.svelte";
	import PanelHeader from "$lib/components/repo/PanelHeader.svelte";
	import Readme from "$lib/components/repo/Readme.svelte";
	import RefSelector from "$lib/components/repo/RefSelector.svelte";
	import TagList from "$lib/components/repo/TagList.svelte";

	let { data } = $props();

	const repo = $derived(data.repo);
	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.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}

		<div class="flex flex-wrap items-center justify-between gap-3 pb-5">
			<RefSelector
				ownerHandle={repo.ownerHandle}
				repoName={repo.name}
				current={data.ref}
				branches={data.refs.branches}
				tags={data.refs.tags}
			/>

			<form
				class="order-last flex h-8 w-full items-center md:order-none md:w-64"
				method="GET"
				action={resolve(`${base}/search` as "/")}
			>
				<div class="relative flex h-full w-full items-center">
					<SearchCode
						class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
						aria-hidden="true"
					/>
					<input
						class="h-full w-full rounded border border-border-default bg-background-default py-1 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
						type="text"
						name="q"
						placeholder="Find files or code..."
						aria-label="Search this repository"
					/>
				</div>
			</form>

			<div class="flex items-center gap-3">
				<a
					href={resolve(`${base}/commits/${encodedRef}` as "/")}
					class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
				>
					<GitCommitHorizontal class="size-4" aria-hidden="true" />
					{data.totalCommits}
				</a>
				<a
					href={resolve(`${base}/branches` as "/")}
					class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
				>
					<GitBranch class="size-4" aria-hidden="true" />
					{data.totalBranches}
				</a>
				<a
					href={resolve(`${base}/tags` as "/")}
					class="inline-flex items-center gap-1 text-sm font-medium text-foreground-default no-underline hover:underline md:hidden"
				>
					<Tags class="size-4" aria-hidden="true" />
					{data.totalTags}
				</a>
				<CloneDropdown {repo} ref={data.ref} bobbinUrl={data.publicConfig.bobbinUrl} />
			</div>
		</div>

		<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
			<FileTree
				ownerHandle={repo.ownerHandle}
				repoName={repo.name}
				ref={data.ref}
				entries={data.files}
			/>

			<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}
