<script lang="ts">
	import { untrack } from "svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import Radio from "$lib/components/ui/Radio.svelte";
	import Select from "$lib/components/ui/Select.svelte";
	import Toggle from "$lib/components/ui/Toggle.svelte";
	import Tag from "$lib/components/ui/Tag.svelte";
	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
	import SettingsSection from "$lib/components/settings/SettingsSection.svelte";
	import SettingsList from "$lib/components/settings/SettingsList.svelte";
	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
	import SettingsSaveBar from "$lib/components/settings/SettingsSaveBar.svelte";
	import CodeChip from "$lib/components/settings/CodeChip.svelte";
	import Check from "$icon/check";
	import ExternalLink from "$icon/external-link";
	import Settings2 from "$icon/settings-2";

	let { data } = $props();

	const domain = "user.tngl.sh";
	const subPath = $derived(`${domain}/${data.repo.name}`);

	// mocked — sites config is backed by G7 and has no write path here. Rendering
	// the deployed state so the live-status pair and Disable row are visible; an
	// undeployed repo drops both, as in the first Figma frame.
	const deployed = true;

	const initial = {
		branch: untrack(() => data.repo.defaultBranch),
		directory: "/",
		type: "index" as "index" | "subpath",
		disabled: false
	};
	let form = $state({ ...initial });
	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(initial));
	const reset = () => (form = { ...initial });

	// the "(default)" marker is display-only; the value stays the plain branch name
	const branches = $derived([
		{ value: data.repo.defaultBranch, label: `${data.repo.defaultBranch} (default)` },
		{ value: "develop", label: "develop" }
	]);

	const deploys = [
		{ branch: "main", status: "Success", reason: "Config change", when: "5 hours ago" }
	];
</script>

<div class="flex min-h-9 w-full items-center justify-between gap-4">
	<h1 class="typography-heading-2 text-foreground-default">Sites</h1>
	<SettingsSaveBar {dirty} onreset={reset} />
</div>

<div class="flex w-full flex-col gap-4">
	<p class="typography-paragraph-regular text-foreground-muted">
		Serve a static site directly from this repository. Choose a branch and the directory containing
		your <code class="font-mono typography-monospace-regular">index.html</code>.<br />
		Only repository owners can configure sites.
	</p>

	{#if deployed}
		<ButtonGroup class="w-fit">
			<Button icon={Check}>Live at {domain}</Button>
			<Button icon={ExternalLink}>Open</Button>
		</ButtonGroup>
	{/if}
</div>

<SettingsList gap="3">
	<SettingsRow title="Branch" description="The branch to build and deploy the site from." stack>
		<Select bind:value={form.branch} aria-label="Branch" class="w-full sm:w-80">
			{#each branches as branch (branch.value)}
				<option value={branch.value}>{branch.label}</option>
			{/each}
		</Select>
	</SettingsRow>

	<SettingsRow
		title="Deploy directory"
		description={[
			"Path within the repository that contains your index.html.",
			"Use / for the root, or a subdirectory like /docs."
		]}
		stack
	>
		<Input bind:value={form.directory} placeholder="/" class="w-full sm:w-80" />
	</SettingsRow>

	<SettingsRow
		title="Type"
		description={[
			"An index site is served at the root of your sites domain.",
			"A sub-path site is served under the repository name."
		]}
		align="start"
		stack
	>
		<div class="flex w-full flex-col gap-2 sm:w-80">
			<div class="flex flex-col gap-1">
				<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
				<CodeChip class="w-fit">{domain}</CodeChip>
			</div>
			<div class="flex flex-col gap-1">
				<Radio value="subpath" bind:group={form.type} name="site-type">Sub-path site</Radio>
				<CodeChip class="w-fit">{subPath}</CodeChip>
			</div>
		</div>
	</SettingsRow>

	{#if deployed}
		<SettingsRow
			title="Disable site"
			description="Disables the site for this repository. The site will no longer be served."
		>
			<Toggle bind:checked={form.disabled} aria-label="Disable site" />
		</SettingsRow>
	{/if}
</SettingsList>

<hr class="w-full border-0 border-t border-border-default" />

<SettingsSection title="Recent deploys" headingGap="4" rowGap="3" framed={deploys.length > 0}>
	{#if deploys.length === 0}
		<SettingsEmpty message="No deploys yet." />
	{:else}
		{#each deploys as deploy (deploy.branch)}
			<SettingsRow>
				{#snippet label()}
					<span class="flex min-w-0 items-center gap-2">
						<span class="font-mono typography-monospace-regular text-foreground-default">
							{deploy.branch}
						</span>
						<Tag color="success" size="sm" icon={Check}>{deploy.status}</Tag>
						<Tag color="gray" size="sm" icon={Settings2}>{deploy.reason}</Tag>
					</span>
				{/snippet}
				<span class="typography-paragraph-regular text-foreground-muted">{deploy.when}</span>
			</SettingsRow>
		{/each}
	{/if}
</SettingsSection>
