<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	// the finish bento: a two-column grid where one tile runs the full width and
	// another spans both rows (appview onboarding/fragments/finish.html)
	export const tile = tv({
		slots: {
			root: "flex flex-col gap-2 rounded-sm border border-border-default p-4",
			heading: "flex items-center gap-2 typography-paragraph-regular text-foreground-default",
			body: "flex-1 typography-paragraph-small text-foreground-muted",
			action:
				"ml-auto flex w-fit items-center gap-1 typography-paragraph-small text-foreground-default no-underline hover:underline"
		},
		variants: {
			span: {
				full: { root: "sm:col-span-2" },
				tall: { root: "sm:row-span-2" },
				single: { root: "" }
			},
			// the community row's tiles are themselves the link, so they need the hover
			// surface and the tighter gap the four bento tiles don't want
			link: {
				true: {
					root: "flex-1 gap-1 no-underline transition-colors hover:bg-background-subtle hover:no-underline"
				},
				false: { root: "" }
			}
		},
		defaultVariants: {
			span: "single",
			link: false
		}
	});

	export type TileVariants = VariantProps<typeof tile>;
</script>

<script lang="ts">
	import type { Component } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import { resolve } from "$app/paths";
	import ArrowRight from "$icon/arrow-right";
	import BookMarked from "$icon/book-marked";
	import GitPullRequest from "$icon/git-pull-request";
	import Layers2 from "$icon/layers-2";
	import MessageCircle from "$icon/message-circle";
	import Server from "$icon/server";
	import Twitter from "$icon/twitter";
	import Bluesky from "$lib/components/icons/Bluesky.svelte";
	import StepHeader from "./StepHeader.svelte";

	const slot = tile();

	// the appview links /core, a shortcut route it owns; the svelte app addresses
	// repositories as /[handle]/[repo]
	const coreHref = resolve("/tangled.org/core" as "/");
	const newRepoHref = resolve("/repo/new");

	const docs: {
		icon: Component<SvelteHTMLElements["svg"]>;
		title: string;
		body: string;
		href: string;
	}[] = [
		{
			icon: Server,
			title: "Host your own knot",
			body: "Host repositories on your own infrastructure with knots.",
			href: "https://docs.tangled.org/knot-self-hosting-guide.html"
		},
		{
			icon: Layers2,
			title: "Host your own spindle",
			body: "Run CI jobs on your own infrastructure using spindles.",
			href: "https://docs.tangled.org/spindles.html#self-hosting-guide"
		}
	];

	const community: {
		icon: Component<SvelteHTMLElements["svg"]>;
		title: string;
		body: string;
		href: string;
	}[] = [
		{
			icon: Bluesky,
			title: "Bluesky",
			body: "Follow us @tangled.org on Bluesky for updates.",
			href: "https://bsky.app/profile/tangled.org"
		},
		{
			icon: MessageCircle,
			title: "Discord",
			body: "Join the community on Discord.",
			href: "https://chat.tangled.org"
		},
		{
			icon: Twitter,
			title: "X (Twitter)",
			body: "Follow us @tangled_org on X for updates.",
			href: "https://x.com/tangled_org"
		}
	];
</script>

<div class="flex flex-col gap-6">
	<StepHeader title="You're all set!" subtitle="Here are a few things to explore next:" />

	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
		<div class={tile({ span: "full" }).root()}>
			{@render heading(BookMarked, "Create a repository")}
			<p class={slot.body()}>Kick things off by creating your first repository.</p>
			<a href={newRepoHref} class={slot.action()}>
				Create
				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
			</a>
		</div>

		<div class={tile({ span: "tall" }).root()}>
			{@render heading(GitPullRequest, "Contribute to the Tangled project")}
			<p class={slot.body()}>
				Tangled is fully open-source: Open a feature request, or submit a bug-fix!
				<br /><br />
				All contributions are welcome.
			</p>
			<a href={coreHref} class={slot.action()}>
				Contribute
				<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
			</a>
		</div>

		{#each docs as doc (doc.title)}
			<div class={slot.root()}>
				{@render heading(doc.icon, doc.title)}
				<p class={slot.body()}>{doc.body}</p>
				<a href={doc.href} target="_blank" rel="external noopener noreferrer" class={slot.action()}>
					Read the docs
					<ArrowRight class="size-4 shrink-0" aria-hidden="true" />
				</a>
			</div>
		{/each}
	</div>

	<ul class="grid grid-cols-1 gap-3 sm:grid-cols-3">
		{#each community as link (link.title)}
			<li class="flex">
				<a
					href={link.href}
					target="_blank"
					rel="external noopener noreferrer"
					class={tile({ link: true }).root()}
				>
					{@render heading(link.icon, link.title)}
					<span class={slot.body()}>{link.body}</span>
				</a>
			</li>
		{/each}
	</ul>
</div>

{#snippet heading(icon: Component<SvelteHTMLElements["svg"]>, title: string)}
	{@const Icon = icon}
	<span class={slot.heading()}>
		<Icon class="size-4 shrink-0" aria-hidden="true" />
		{title}
	</span>
{/snippet}
