<script lang="ts">
	import type { SvelteSet } from 'svelte/reactivity';
	import SessionHeader from './SessionHeader.svelte';
	import SessionTabs from './SessionTabs.svelte';
	import SessionSummaryTab from './SessionSummaryTab.svelte';
	import SessionTasksTab from './SessionTasksTab.svelte';
	import SessionMediaTab from './SessionMediaTab.svelte';
	import SessionNotesTab from './SessionNotesTab.svelte';
	import type {
		SessionType,
		SessionTab,
		ExtendedTask,
		AreaWithCompletions,
		AreaWithTasks,
		SessionImage,
		SessionVideo,
		SessionNote,
		ServiceArea,
		ProjectArea
	} from './types';

	interface TeamMember {
		id: string;
		fullName: string;
	}

	interface SessionData {
		isActive: boolean;
		start: string;
		end?: string | null;
		durationSeconds?: number | null;
		images?: SessionImage[];
		videos?: SessionVideo[];
		notes?: SessionNote[];
		completedTasks?: Array<{ taskId: string }>;
		createdBy?: TeamMember | null;
		closedBy?: TeamMember | null;
	}

	interface Props {
		sessionType: SessionType;
		isActive: boolean;
		session: SessionData;
		entityName: string;
		scopeName?: string | null;
		scopeDescription?: string | null;
		addressInfo?: string | null;
		teamMembers: TeamMember[];
		areas: (ServiceArea | ProjectArea)[];

		// Task state
		tasks: ExtendedTask[];
		selectedTaskIds: SvelteSet<string>;
		completedTaskIds: SvelteSet<string>;
		completedTasksByArea: AreaWithCompletions[];
		readyToSubmitByArea: AreaWithTasks[];
		availableTasksCount: number;

		// Loading states (only needed for active sessions)
		isSubmitting?: boolean;
		isReverting?: boolean;
		submittingTaskId?: string | null;
		removingTaskId?: string | null;

		// Session handlers
		onClose?: () => void;
		onRevert?: () => void;

		// Task handlers
		onToggleTask?: (id: string) => void;
		onSubmitTask?: (id: string) => void;
		onRemoveTask?: (id: string) => void;
		onRemoveCompletedTask?: (id: string) => void;
		onSubmitAllTasks?: () => void;
		onClearSelection?: () => void;

		// Note handlers (match SessionNotesTab signatures)
		onAddNote?: (content: string, internal: boolean) => Promise<void>;
		onUpdateNote?: (noteId: string, content: string, internal: boolean) => Promise<void>;
		onDeleteNote?: (noteId: string) => Promise<void>;

		// Media handlers (match SessionMediaTab signatures)
		onUploadPhoto?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
		onUploadVideo?: (file: File, title: string, notes: string, internal: boolean) => Promise<void>;
		onUpdatePhoto?: (
			photoId: string,
			title: string,
			notes: string,
			internal: boolean
		) => Promise<void>;
		onUpdateVideo?: (
			videoId: string,
			title: string,
			notes: string,
			internal: boolean
		) => Promise<void>;
		onDeletePhoto?: (photoId: string) => Promise<void>;
		onDeleteVideo?: (videoId: string) => Promise<void>;

		getTeamMemberName: (id: string | null | undefined) => string;
	}

	const {
		sessionType,
		isActive,
		session,
		entityName,
		scopeName,
		scopeDescription,
		addressInfo,
		teamMembers,
		areas,
		tasks,
		selectedTaskIds,
		completedTaskIds,
		completedTasksByArea,
		readyToSubmitByArea,
		availableTasksCount,
		isSubmitting = false,
		isReverting = false,
		submittingTaskId,
		removingTaskId,
		onClose,
		onRevert,
		onToggleTask,
		onSubmitTask,
		onRemoveTask,
		onRemoveCompletedTask,
		onSubmitAllTasks,
		onClearSelection,
		onAddNote,
		onUpdateNote,
		onDeleteNote,
		onUploadPhoto,
		onUploadVideo,
		onUpdatePhoto,
		onUpdateVideo,
		onDeletePhoto,
		onDeleteVideo,
		getTeamMemberName
	}: Props = $props();

	// Tab state
	let activeTab = $state<SessionTab>('summary');

	// Compute counts for tabs
	const counts = $derived({
		tasks: completedTaskIds.size,
		photos: session.images?.length ?? 0,
		videos: session.videos?.length ?? 0,
		notes: session.notes?.length ?? 0
	});

	// Can close when at least one task is completed
	const canClose = $derived(completedTaskIds.size > 0);

	// Can revert when session is active (for admins - parent should control visibility)
	const canRevert = $derived(isActive);

	function handleTabChange(tab: SessionTab) {
		activeTab = tab;
	}
</script>

<div class="space-y-6">
	<!-- Header -->
	<SessionHeader
		{sessionType}
		{entityName}
		{isActive}
		startTime={session.start}
		endTime={session.end}
		durationSeconds={session.durationSeconds}
		{canClose}
		{canRevert}
		{isSubmitting}
		{isReverting}
		{onClose}
		{onRevert}
	/>

	<!-- Tabs -->
	<SessionTabs {sessionType} {activeTab} {counts} onTabChange={handleTabChange} />

	<!-- Tab Content -->
	<div class="min-h-[300px]">
		{#if activeTab === 'summary'}
			<SessionSummaryTab
				{sessionType}
				{entityName}
				{scopeName}
				{scopeDescription}
				{addressInfo}
				startTime={session.start}
				endTime={session.end}
				durationSeconds={session.durationSeconds}
				{isActive}
				{counts}
				createdByName={session.createdBy?.fullName}
				closedByName={session.closedBy?.fullName}
				onTabChange={handleTabChange}
			/>
		{:else if activeTab === 'tasks'}
			<SessionTasksTab
				{sessionType}
				{isActive}
				{areas}
				{tasks}
				{selectedTaskIds}
				{completedTaskIds}
				{completedTasksByArea}
				{readyToSubmitByArea}
				{availableTasksCount}
				{submittingTaskId}
				{removingTaskId}
				{onToggleTask}
				{onSubmitTask}
				{onRemoveTask}
				{onRemoveCompletedTask}
				{onSubmitAllTasks}
				{onClearSelection}
			/>
		{:else if activeTab === 'media'}
			<SessionMediaTab
				{sessionType}
				photos={session.images ?? []}
				videos={session.videos ?? []}
				{isActive}
				{getTeamMemberName}
				{onUploadPhoto}
				{onUploadVideo}
				{onUpdatePhoto}
				{onUpdateVideo}
				{onDeletePhoto}
				{onDeleteVideo}
			/>
		{:else if activeTab === 'notes'}
			<SessionNotesTab
				{sessionType}
				notes={session.notes ?? []}
				{isActive}
				{getTeamMemberName}
				{onAddNote}
				{onUpdateNote}
				{onDeleteNote}
			/>
		{/if}
	</div>
</div>
