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

	interface Props {
		sessionType: SessionType;
		activeTab: SessionTab;
		counts: SessionTabsCounts;
		onTabChange: (tab: SessionTab) => void;
	}

	const { sessionType, activeTab, counts, onTabChange }: Props = $props();

	const colors = $derived(getSessionColorClasses(sessionType));

	const tabs: { id: SessionTab; label: string; icon: string }[] = [
		{ id: 'summary', label: 'Summary', icon: 'chart' },
		{ id: 'tasks', label: 'Tasks', icon: 'check' },
		{ id: 'media', label: 'Media', icon: 'camera' },
		{ id: 'notes', label: 'Notes', icon: 'document' }
	];

	function getCount(tabId: SessionTab): number {
		switch (tabId) {
			case 'tasks':
				return counts.tasks;
			case 'media':
				return counts.photos + counts.videos;
			case 'notes':
				return counts.notes;
			default:
				return 0;
		}
	}

	// Mobile nav state
	const currentIndex = $derived(tabs.findIndex((t) => t.id === activeTab));
	const currentTab = $derived(tabs[currentIndex]);
	const currentCount = $derived(getCount(currentTab.id));
</script>

<!-- Mobile: Arrow navigation with current tab display -->
<div class="flex items-center gap-2 sm:hidden">
	<!-- Previous arrow -->
	<button
		type="button"
		class="shrink-0 rounded-lg p-2 text-gray-500 disabled:opacity-30 dark:text-gray-400"
		onclick={() => {
			const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
			onTabChange(tabs[prevIndex].id);
		}}
		aria-label="Previous tab"
	>
		<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
		</svg>
	</button>

	<!-- Current tab (centered) -->
	<div
		class="flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium {colors.bg} text-white"
	>
		{#if currentTab.icon === 'chart'}
			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
				></path>
			</svg>
		{:else if currentTab.icon === 'check'}
			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
				></path>
			</svg>
		{:else if currentTab.icon === 'camera'}
			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
				></path>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
				></path>
			</svg>
		{:else if currentTab.icon === 'document'}
			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
				></path>
			</svg>
		{/if}
		<span>{currentTab.label}</span>
		{#if currentCount > 0}
			<span class="rounded-full bg-white/20 px-1.5 py-0.5 text-xs">{currentCount}</span>
		{/if}
	</div>

	<!-- Next arrow -->
	<button
		type="button"
		class="shrink-0 rounded-lg p-2 text-gray-500 disabled:opacity-30 dark:text-gray-400"
		onclick={() => {
			const nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
			onTabChange(tabs[nextIndex].id);
		}}
		aria-label="Next tab"
	>
		<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
		</svg>
	</button>
</div>

<!-- Desktop: Horizontal tabs -->
<div class="hidden sm:block">
	<div class="border-b border-gray-200 dark:border-gray-700">
		<nav class="-mb-px flex gap-6" aria-label="Session tabs">
			{#each tabs as tab}
				{@const count = getCount(tab.id)}
				<button
					type="button"
					class="group inline-flex items-center gap-2 border-b-2 px-1 py-3 text-sm font-medium transition-colors focus:outline-none {activeTab ===
					tab.id
						? `${colors.border} ${colors.primary}`
						: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
					onclick={() => onTabChange(tab.id)}
				>
					{#if tab.icon === 'chart'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
							></path>
						</svg>
					{:else if tab.icon === 'check'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
							></path>
						</svg>
					{:else if tab.icon === 'camera'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
							></path>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
							></path>
						</svg>
					{:else if tab.icon === 'document'}
						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
							></path>
						</svg>
					{/if}
					<span>{tab.label}</span>
					{#if count > 0}
						<span
							class="rounded-full px-2 py-0.5 text-xs {activeTab === tab.id
								? `${colors.bg} text-white`
								: 'bg-gray-100 text-gray-600 group-hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400'}"
						>
							{count}
						</span>
					{/if}
				</button>
			{/each}
		</nav>
	</div>
</div>
