<script lang="ts">
	type InvoiceTab = 'details' | 'wave';

	interface Props {
		activeTab: InvoiceTab;
		waveLinked: boolean;
		validationErrors: number;
		onTabChange: (tab: InvoiceTab) => void;
	}

	let { activeTab, waveLinked, validationErrors, onTabChange }: Props = $props();

	const tabs: { id: InvoiceTab; label: string }[] = [
		{ id: 'details', label: 'Details' },
		{ id: 'wave', label: 'Wave' }
	];

	// 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);
	}

	function getBadgeForTab(tabId: InvoiceTab): { text: string; class: string } | null {
		if (tabId === 'wave') {
			if (waveLinked) {
				return {
					text: 'Linked',
					class: 'bg-success-500/20 text-success-600 dark:text-success-400'
				};
			}
			if (validationErrors > 0) {
				return {
					text: String(validationErrors),
					class: 'bg-warning-500/20 text-warning-600 dark:text-warning-400'
				};
			}
		}
		return null;
	}
</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 getBadgeForTab(tabs[currentTabIndex].id)}
				{@const badge = getBadgeForTab(tabs[currentTabIndex].id)}
				{#if badge}
					<span class="rounded-full px-2 py-0.5 text-xs font-medium {badge.class}">
						{badge.text}
					</span>
				{/if}
			{/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-accent6-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="Invoice tabs">
			{#each tabs as tab (tab.id)}
				{@const badge = getBadgeForTab(tab.id)}
				<button
					type="button"
					onclick={() => onTabChange(tab.id)}
					class="relative px-4 py-3 text-sm font-medium transition-colors
						{activeTab === tab.id
						? 'text-accent6-600 dark:text-accent6-400'
						: 'text-theme-muted hover:text-theme'}"
				>
					<span class="flex items-center gap-2">
						{tab.label}
						{#if badge}
							<span
								class="rounded-full px-2 py-0.5 text-xs font-medium
									{activeTab === tab.id ? badge.class : 'bg-theme-secondary text-theme-muted'}"
							>
								{badge.text}
							</span>
						{/if}
					</span>

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