<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/state';

	interface Props {
		current: string;
		counts?: {
			scheduled: number;
			inProgress: number;
			completed: number;
		};
		compact?: boolean;
	}

	let { current, counts, compact = false }: Props = $props();

	const tabs = [
		{ id: 'scheduled', label: 'Scheduled', countKey: 'scheduled' as const, color: 'primary' },
		{ id: 'in_progress', label: 'In Progress', countKey: 'inProgress' as const, color: 'accent' },
		{ id: 'completed', label: 'Completed', countKey: 'completed' as const, color: 'secondary' }
	] as const;

	// Color classes for active tabs
	const activeColorClasses: Record<string, string> = {
		primary: 'bg-primary-500/15 text-primary-600 dark:text-primary-400',
		secondary: 'bg-secondary-500/15 text-secondary-600 dark:text-secondary-400',
		accent: 'bg-accent-500/15 text-accent-600 dark:text-accent-400'
	};

	const badgeColorClasses: Record<string, string> = {
		primary: 'bg-primary-500/20 text-primary-600 dark:text-primary-400',
		secondary: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400',
		accent: 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
	};

	let currentIndex = $derived(tabs.findIndex((t) => t.id === current));
	let currentTab = $derived(tabs[currentIndex]);
	let currentCount = $derived(counts?.[currentTab.countKey]);

	function selectTab(tabId: string) {
		const url = new URL(page.url);
		url.searchParams.set('status', tabId);
		goto(url.toString(), { replaceState: true, noScroll: true });
	}

	function navigateTab(delta: number) {
		const newIndex = (currentIndex + delta + tabs.length) % tabs.length;
		selectTab(tabs[newIndex].id);
	}
</script>

{#if compact}
	<!-- Compact mobile view: < Status > -->
	<div
		class="flex items-center justify-center gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/5"
		role="tablist"
	>
		<button
			type="button"
			onclick={() => navigateTab(-1)}
			class="rounded-md interactive p-2 text-theme-secondary"
			aria-label="Previous status"
		>
			<svg
				class="h-4 w-4"
				style="fill: none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
			</svg>
		</button>

		<div
			class="flex-1 rounded-md px-4 py-2 text-center text-sm font-medium {activeColorClasses[
				currentTab.color
			]}"
			role="tab"
			aria-selected="true"
		>
			{currentTab.label}
			{#if currentCount !== undefined}
				<span
					class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs {badgeColorClasses[currentTab.color]}"
				>
					{currentCount}
				</span>
			{/if}
		</div>

		<button
			type="button"
			onclick={() => navigateTab(1)}
			class="rounded-md interactive p-2 text-theme-secondary"
			aria-label="Next status"
		>
			<svg
				class="h-4 w-4"
				style="fill: none"
				viewBox="0 0 24 24"
				stroke="currentColor"
				stroke-width="2"
			>
				<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
			</svg>
		</button>
	</div>
{:else}
	<!-- Full tabs view -->
	<div class="flex gap-1 rounded-lg bg-black/5 p-1 dark:bg-white/5" role="tablist">
		{#each tabs as tab (tab.id)}
			{@const isActive = current === tab.id}
			{@const count = counts?.[tab.countKey]}
			<button
				type="button"
				onclick={() => selectTab(tab.id)}
				class="flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors
					{isActive
					? activeColorClasses[tab.color]
					: 'text-theme-secondary hover:bg-black/5 hover:text-theme dark:hover:bg-white/5'}"
				role="tab"
				aria-selected={isActive}
				aria-controls="{tab.id}-panel"
			>
				{tab.label}
				{#if count !== undefined}
					<span
						class="ml-1.5 rounded-full px-1.5 py-0.5 text-xs
							{isActive ? badgeColorClasses[tab.color] : 'bg-black/5 dark:bg-white/5'}"
					>
						{count}
					</span>
				{/if}
			</button>
		{/each}
	</div>
{/if}
