<script lang="ts">
	import type { Snippet } from 'svelte';
	import { page } from '$app/stores';
	import { getSettings } from '$lib/api';
	import { t } from '$lib/i18n';
	import { IconSettings, IconDatabase, IconShield, IconHardDrive, IconWifi } from '$lib/components/icons';

	interface Props {
		children: Snippet;
	}

	let { children }: Props = $props();
	let proxyProvider = $state('npm');

	// Load the proxy provider setting to show/hide tabs.
	$effect(() => {
		getSettings().then((s) => {
			proxyProvider = s.proxy_provider ?? 'npm';
		}).catch(() => {});
	});

	const baseItems = [
		{ href: '/settings', labelKey: 'settings.general', icon: 'general', always: true },
		{ href: '/settings/registries', labelKey: 'settings.registries', icon: 'registries', always: true },
		{ href: '/settings/npm', labelKey: 'settings.npm', icon: 'npm', provider: 'npm' },
		{ href: '/settings/traefik', labelKey: 'settings.traefik', icon: 'traefik', provider: 'traefik' },
		{ href: '/settings/auth', labelKey: 'settings.authentication', icon: 'auth', always: true },
		{ href: '/settings/backup', labelKey: 'settings.backup', icon: 'backup', always: true }
	];

	const navItems = $derived(
		baseItems.filter((item) => item.always || item.provider === proxyProvider)
	);

	let currentPath = $derived($page.url.pathname);

	function isActive(href: string): boolean {
		if (href === '/settings') return currentPath === '/settings';
		return currentPath.startsWith(href);
	}
</script>

<div class="mx-auto max-w-4xl">
	<h1 class="mb-6 text-2xl font-bold text-[var(--text-primary)]">{$t('settings.title')}</h1>

	<div class="flex flex-col gap-6 sm:flex-row">
		<!-- Sub-navigation -->
		<nav class="w-full flex-shrink-0 sm:w-48">
			<ul class="flex gap-1 overflow-x-auto sm:flex-col sm:space-y-0.5">
				{#each navItems as item}
					<li>
						<a
							href={item.href}
							class="flex items-center gap-2.5 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-all duration-150
								{isActive(item.href)
								? 'bg-[var(--color-brand-50)] text-[var(--color-brand-700)] shadow-sm'
								: 'text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)]'}"
						>
							{#if item.icon === 'general'}
								<IconSettings size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
							{:else if item.icon === 'registries'}
								<IconDatabase size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
							{:else if item.icon === 'npm' || item.icon === 'traefik'}
								<IconWifi size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
							{:else if item.icon === 'auth'}
								<IconShield size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
							{:else if item.icon === 'backup'}
								<IconHardDrive size={16} class="{isActive(item.href) ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)]'}" />
							{/if}
							{$t(item.labelKey)}
						</a>
					</li>
				{/each}
			</ul>
		</nav>

		<!-- Settings content -->
		<div class="flex-1 min-w-0">
			{@render children()}
		</div>
	</div>
</div>
