<script lang="ts">
	import Button from "$lib/components/ui/Button.svelte";
	import Tag from "$lib/components/ui/Tag.svelte";
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import SettingsHeader from "../SettingsHeader.svelte";
	import SettingsToolbar from "../SettingsToolbar.svelte";
	import SettingsList from "../SettingsList.svelte";
	import SettingsEntry from "../SettingsEntry.svelte";
	import DocsButton from "../DocsButton.svelte";
	import Globe from "$icon/globe";
	import Check from "$icon/check";
	import Unlink from "$icon/unlink";

	interface MockSite {
		id: string;
		domain: string;
		active: boolean;
	}

	// mocked — domain claims are backed by G7 (see TAN-575)
	let sites = $state<MockSite[]>([{ id: "1", domain: "user.tngl.sh", active: true }]);

	const release = (id: string) => {
		sites = sites.filter((s) => s.id !== id);
	};
</script>

<SettingsHeader
	title="Sites"
	description="Since your handle is on tngl.sh, it doubles as your sites domain—your site will be served from that subdomain automatically."
/>

<div class="flex w-full flex-col gap-4">
	<SettingsToolbar>
		{#snippet start()}
			<DocsButton href="https://docs.tangled.org/sites" />
		{/snippet}
	</SettingsToolbar>

	{#if sites.length === 0}
		<EmptyState message="No sites claimed yet" />
	{:else}
		<SettingsList>
			{#each sites as site (site.id)}
				<SettingsEntry icon={Globe} title={site.domain}>
					{#snippet tags()}
						{#if site.active}
							<Tag color="success" size="sm" icon={Check}>Active</Tag>
						{/if}
					{/snippet}
					{#snippet actions()}
						<Button variant="danger" icon={Unlink} onclick={() => release(site.id)}>Release</Button>
					{/snippet}
				</SettingsEntry>
			{/each}
		</SettingsList>
	{/if}
</div>
