<script lang="ts" generics="T">
	import type { Snippet } from 'svelte';
	import { navigating } from '$app/state';
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import TeamPageHeader from './TeamPageHeader.svelte';
	import MonthSelector from './MonthSelector.svelte';
	import StatusTabs from './StatusTabs.svelte';

	interface Props {
		title: string;
		subtitle: string;
		items: T[];
		currentStatus: string;
		currentMonth: string;
		counts?: {
			scheduled: number;
			inProgress: number;
			completed: number;
		};
		item: Snippet<[T]>;
		emptyIcon?: Snippet;
		emptyTitle?: string;
		emptyText?: string;
		colorScheme?: 'primary' | 'secondary' | 'accent' | 'accent2';
	}

	let {
		title,
		subtitle,
		items,
		currentStatus,
		currentMonth,
		counts,
		item,
		emptyIcon,
		emptyTitle = 'No items found',
		emptyText = 'There are no items matching your current filters.',
		colorScheme = 'primary'
	}: Props = $props();

	let hasItems = $derived(items.length > 0);
	let isLoading = $derived(navigating.to !== null);
</script>

<svelte:head>
	<title>{title} - Team - Nexus</title>
</svelte:head>

<div class="py-8">
	<ContentContainer>
		<!-- Header -->
		<TeamPageHeader {title} {subtitle} {colorScheme} />

		<!-- Filters Row -->
		<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
			<MonthSelector value={currentMonth} />
			<div class="sm:hidden">
				<StatusTabs current={currentStatus} {counts} compact />
			</div>
		</div>

		<!-- Desktop Tabs -->
		<div class="mb-6 hidden sm:block">
			<StatusTabs current={currentStatus} {counts} />
		</div>

		<!-- Content -->
		<div role="tabpanel" id="{currentStatus}-panel" class="relative">
			{#if isLoading}
				<!-- Loading Overlay -->
				<div
					class="bg-theme/50 absolute inset-0 z-10 flex min-h-[200px] items-start justify-center pt-12 backdrop-blur-sm"
				>
					<div class="flex flex-col items-center gap-3">
						<svg
							class="h-8 w-8 animate-spin text-theme-secondary"
							style="fill: none"
							viewBox="0 0 24 24"
						>
							<circle
								class="opacity-25"
								cx="12"
								cy="12"
								r="10"
								stroke="currentColor"
								stroke-width="4"
							></circle>
							<path
								class="opacity-75"
								fill="currentColor"
								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
							></path>
						</svg>
						<span class="text-sm text-theme-secondary">Loading...</span>
					</div>
				</div>
			{/if}

			{#if hasItems}
				<div class="space-y-3">
					{#each items as itemData, index (index)}
						{@render item(itemData)}
					{/each}
				</div>
			{:else if !isLoading}
				<!-- Empty State (only show when not loading) -->
				<div class="empty-state">
					{#if emptyIcon}
						{@render emptyIcon()}
					{:else}
						<svg
							class="empty-state-icon"
							style="fill: none"
							stroke="currentColor"
							viewBox="0 0 24 24"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="1.5"
								d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
							/>
						</svg>
					{/if}
					<h2 class="empty-state-title">{emptyTitle}</h2>
					<p class="empty-state-text">{emptyText}</p>
				</div>
			{/if}
		</div>
	</ContentContainer>
</div>
