<script lang="ts">
	import type { SessionTab, SessionTabsCounts } from './types';

	interface Props {
		activeTab: SessionTab;
		counts: SessionTabsCounts;
		hasScope?: boolean;
		onTabChange: (tab: SessionTab) => void;
	}

	let { activeTab, counts, hasScope = true, onTabChange }: Props = $props();

	const allTabs: { id: SessionTab; label: string; countKey: keyof SessionTabsCounts | null }[] = [
		{ id: 'summary', label: 'Summary', countKey: null },
		{ id: 'tasks', label: 'Tasks', countKey: 'tasks' },
		{ id: 'media', label: 'Media', countKey: null },
		{ id: 'notes', label: 'Notes', countKey: 'notes' }
	];

	// Filter tabs based on whether scope exists (hide Tasks if no scope)
	let tabs = $derived(hasScope ? allTabs : allTabs.filter((t) => t.id !== 'tasks'));

	// Compute media count (photos + videos)
	let mediaCount = $derived(counts.photos + counts.videos);

	function getCount(tab: (typeof tabs)[number]): number | null {
		if (tab.id === 'media') return mediaCount > 0 ? mediaCount : null;
		if (tab.countKey) {
			const count = counts[tab.countKey];
			return count > 0 ? count : null;
		}
		return null;
	}

	// Mobile tab navigation
	let currentTabIndex = $derived(tabs.findIndex((t) => t.id === activeTab));

	function goToPrevTab() {
		const newIndex = currentTabIndex > 0 ? currentTabIndex - 1 : tabs.length - 1;
		onTabChange(tabs[newIndex].id);
	}

	function goToNextTab() {
		const newIndex = currentTabIndex < tabs.length - 1 ? currentTabIndex + 1 : 0;
		onTabChange(tabs[newIndex].id);
	}
</script>

<!-- Mobile: Carousel style -->
<div class="mb-6 md:hidden">
	<div class="flex items-center justify-between rounded-lg border border-theme bg-theme-card p-2">
		<button
			type="button"
			onclick={goToPrevTab}
			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
			aria-label="Previous tab"
		>
			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
			</svg>
		</button>

		<div class="flex items-center gap-2">
			<span class="font-medium text-theme">{tabs[currentTabIndex].label}</span>
			{#if getCount(tabs[currentTabIndex]) !== null}
				<span
					class="rounded-full bg-primary-500/20 px-2 py-0.5 text-xs font-medium text-primary-600 dark:text-primary-400"
				>
					{getCount(tabs[currentTabIndex])}
				</span>
			{/if}
		</div>

		<button
			type="button"
			onclick={goToNextTab}
			class="rounded-lg p-2 text-theme-muted hover:bg-black/5 hover:text-theme dark:hover:bg-white/10"
			aria-label="Next tab"
		>
			<svg class="h-5 w-5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
			</svg>
		</button>
	</div>

	<!-- Tab indicators -->
	<div class="mt-2 flex justify-center gap-1.5">
		{#each tabs as tab, i (tab.id)}
			<button
				type="button"
				onclick={() => onTabChange(tab.id)}
				class="h-1.5 rounded-full transition-all {i === currentTabIndex
					? 'w-4 bg-primary-500'
					: 'w-1.5 bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500'}"
				aria-label={tab.label}
			></button>
		{/each}
	</div>
</div>

<!-- Desktop: Horizontal tabs -->
<div class="mb-6 hidden md:block">
	<div class="border-b border-theme">
		<nav class="flex gap-1" aria-label="Session tabs">
			{#each tabs as tab (tab.id)}
				{@const count = getCount(tab)}
				<button
					type="button"
					onclick={() => onTabChange(tab.id)}
					class="relative px-4 py-3 text-sm font-medium transition-colors
						{activeTab === tab.id
						? 'text-primary-600 dark:text-primary-400'
						: 'text-theme-muted hover:text-theme'}"
				>
					<span class="flex items-center gap-2">
						{tab.label}
						{#if count !== null}
							<span
								class="rounded-full px-2 py-0.5 text-xs font-medium
									{activeTab === tab.id
									? 'bg-primary-500/20 text-primary-600 dark:text-primary-400'
									: 'bg-theme-secondary text-theme-muted'}"
							>
								{count}
							</span>
						{/if}
					</span>

					{#if activeTab === tab.id}
						<span class="absolute right-0 bottom-0 left-0 h-0.5 bg-primary-500"></span>
					{/if}
				</button>
			{/each}
		</nav>
	</div>
</div>
