<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,
		SessionPhoto,
		SessionVideo,
		SessionNote,
		ServiceArea,
		ProjectArea
	} from './types';

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

	interface SessionData {
		isActive: boolean;
		start: string;
		end?: string | null;
		durationSeconds?: number | null;
		photos?: SessionPhoto[];
		videos?: SessionVideo[];
		notes?: SessionNote[];
		completedTasks?: Array<{ taskId: string }>;
	}

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

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

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

	// Computed tab counts
	let tabCounts = $derived({
		tasks: tasks.length,
		photos: session.photos?.length || 0,
		videos: session.videos?.length || 0,
		notes: session.notes?.length || 0
	});

	// Check if can close (has at least one completed task)
	let canClose = $derived(completedTaskIds.size > 0);

	// No-op handler for read-only mode
	const noop = () => {};
</script>

<SessionHeader
	{sessionType}
	{entityName}
	{scopeName}
	scopeDescription={isActive ? scopeDescription : undefined}
	{isActive}
	{canClose}
	{isSubmitting}
	{isReverting}
	onClose={isActive ? onClose : undefined}
	onRevert={isActive ? onRevert : undefined}
/>

<SessionTabs
	{activeTab}
	counts={tabCounts}
	hasScope={areas.length > 0}
	onTabChange={(tab) => (activeTab = tab)}
/>

{#if activeTab === 'summary'}
	<SessionSummaryTab
		{sessionType}
		stats={{
			completedTasks: session.completedTasks?.length || 0,
			photos: session.photos?.length || 0,
			videos: session.videos?.length || 0,
			notes: session.notes?.length || 0
		}}
		sessionDetails={{
			start: session.start,
			end: session.end,
			isActive,
			durationSeconds: session.durationSeconds
		}}
		{entityName}
		{addressInfo}
		{teamMembers}
	/>
{:else if activeTab === 'tasks'}
	<SessionTasksTab
		{sessionType}
		{isActive}
		hasScope={areas.length > 0}
		{selectedTaskIds}
		{completedTasksByArea}
		{readyToSubmitByArea}
		{availableTasksCount}
		{tasks}
		{completedTaskIds}
		{areas}
		isSubmitting={isActive ? isSubmitting : undefined}
		submittingTaskId={isActive ? submittingTaskId : undefined}
		removingTaskId={isActive ? removingTaskId : undefined}
		{getTeamMemberName}
		onToggleTask={isActive && onToggleTask ? onToggleTask : noop}
		onSubmitTask={isActive && onSubmitTask ? onSubmitTask : noop}
		onRemoveTask={isActive && onRemoveTask ? onRemoveTask : noop}
		onRemoveCompletedTask={isActive && onRemoveCompletedTask ? onRemoveCompletedTask : noop}
		onSubmitAllTasks={isActive && onSubmitAllTasks ? onSubmitAllTasks : noop}
		onClearSelection={isActive && onClearSelection ? onClearSelection : noop}
	/>
{:else if activeTab === 'media'}
	<SessionMediaTab
		photos={session.photos || []}
		videos={session.videos || []}
		{isActive}
		{getTeamMemberName}
		onUploadPhoto={isActive ? onUploadPhoto : undefined}
		onUploadVideo={isActive ? onUploadVideo : undefined}
		onUpdatePhoto={isActive ? onUpdatePhoto : undefined}
		onUpdateVideo={isActive ? onUpdateVideo : undefined}
		onDeletePhoto={isActive ? onDeletePhoto : undefined}
		onDeleteVideo={isActive ? onDeleteVideo : undefined}
	/>
{:else if activeTab === 'notes'}
	<SessionNotesTab
		notes={session.notes || []}
		{isActive}
		{getTeamMemberName}
		onAdd={isActive ? onAddNote : undefined}
		onUpdate={isActive ? onUpdateNote : undefined}
		onDelete={isActive ? onDeleteNote : undefined}
	/>
{/if}
