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

	interface Props {
		sessionType: SessionType;
		entityName: string;
		scopeName?: string | null;
		scopeDescription?: string | null;
		addressInfo?: string | null;
		startTime: string;
		endTime?: string | null;
		durationSeconds?: number | null;
		isActive: boolean;
		counts: SessionTabsCounts;
		createdByName?: string | null;
		closedByName?: string | null;
		onTabChange?: (tab: SessionTab) => void;
	}

	const {
		sessionType,
		entityName,
		scopeName,
		scopeDescription,
		addressInfo,
		startTime,
		endTime,
		durationSeconds,
		isActive,
		counts,
		createdByName,
		closedByName,
		onTabChange
	}: Props = $props();

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

	// Calculate live duration for active sessions
	let tick = $state(0);
	$effect(() => {
		if (!isActive || endTime) return;
		// Update tick every minute for active sessions
		const interval = setInterval(() => {
			tick = Date.now();
		}, 60000);
		return () => clearInterval(interval);
	});

	const liveDuration = $derived.by(() => {
		// Include tick in computation to trigger re-render
		void tick;
		if (!isActive || endTime) {
			return durationSeconds ?? 0;
		}
		const start = new Date(startTime).getTime();
		return Math.floor((Date.now() - start) / 1000);
	});
</script>

<div class="space-y-6">
	<!-- Stats Grid -->
	<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
		<!-- Duration (not clickable) -->
		<div class="rounded-lg bg-gray-50 p-4 dark:bg-gray-800/50">
			<div class="flex items-center gap-2">
				<div class="rounded-lg p-2 {colors.bg}">
					<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
						></path>
					</svg>
				</div>
				<div>
					<p class="text-xs text-gray-500 dark:text-gray-400">Duration</p>
					<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">
						{formatDuration(liveDuration)}
					</p>
				</div>
			</div>
		</div>

		<!-- Tasks (clickable) -->
		<button
			type="button"
			class="rounded-lg bg-gray-50 p-4 text-left transition-colors hover:bg-gray-100 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
			onclick={() => onTabChange?.('tasks')}
		>
			<div class="flex items-center gap-2">
				<div class="rounded-lg bg-green-500 p-2">
					<svg class="h-4 w-4 text-white" 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>
				</div>
				<div>
					<p class="text-xs text-gray-500 dark:text-gray-400">Tasks</p>
					<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">{counts.tasks}</p>
				</div>
			</div>
		</button>

		<!-- Photos (clickable) -->
		<button
			type="button"
			class="rounded-lg bg-gray-50 p-4 text-left transition-colors hover:bg-gray-100 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
			onclick={() => onTabChange?.('media')}
		>
			<div class="flex items-center gap-2">
				<div class="rounded-lg bg-blue-500 p-2">
					<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
						></path>
					</svg>
				</div>
				<div>
					<p class="text-xs text-gray-500 dark:text-gray-400">Photos</p>
					<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">{counts.photos}</p>
				</div>
			</div>
		</button>

		<!-- Notes (clickable) -->
		<button
			type="button"
			class="rounded-lg bg-gray-50 p-4 text-left transition-colors hover:bg-gray-100 dark:bg-gray-800/50 dark:hover:bg-gray-700/50"
			onclick={() => onTabChange?.('notes')}
		>
			<div class="flex items-center gap-2">
				<div class="rounded-lg bg-purple-500 p-2">
					<svg class="h-4 w-4 text-white" 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>
				</div>
				<div>
					<p class="text-xs text-gray-500 dark:text-gray-400">Notes</p>
					<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">{counts.notes}</p>
				</div>
			</div>
		</button>
	</div>

	<!-- Session Details -->
	<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800">
		<h4 class="mb-4 font-medium text-gray-900 dark:text-gray-100">Session Details</h4>

		<dl class="space-y-3 text-sm">
			<div class="flex flex-col sm:flex-row sm:justify-between">
				<dt class="text-gray-500 dark:text-gray-400">
					{sessionType === 'service' ? 'Service' : 'Project'}
				</dt>
				<dd class="font-medium text-gray-900 dark:text-gray-100">{entityName}</dd>
			</div>

			{#if scopeName}
				<div class="flex flex-col sm:flex-row sm:justify-between">
					<dt class="text-gray-500 dark:text-gray-400">Scope</dt>
					<dd class="font-medium text-gray-900 dark:text-gray-100">{scopeName}</dd>
				</div>
			{/if}

			{#if addressInfo}
				<div class="flex flex-col sm:flex-row sm:justify-between">
					<dt class="text-gray-500 dark:text-gray-400">Location</dt>
					<dd class="font-medium text-gray-900 dark:text-gray-100">{addressInfo}</dd>
				</div>
			{/if}

			<div class="flex flex-col sm:flex-row sm:justify-between">
				<dt class="text-gray-500 dark:text-gray-400">Started</dt>
				<dd class="font-medium text-gray-900 dark:text-gray-100">{formatDateTime(startTime)}</dd>
			</div>

			{#if createdByName}
				<div class="flex flex-col sm:flex-row sm:justify-between">
					<dt class="text-gray-500 dark:text-gray-400">Started By</dt>
					<dd class="font-medium text-gray-900 dark:text-gray-100">{createdByName}</dd>
				</div>
			{/if}

			{#if endTime}
				<div class="flex flex-col sm:flex-row sm:justify-between">
					<dt class="text-gray-500 dark:text-gray-400">Ended</dt>
					<dd class="font-medium text-gray-900 dark:text-gray-100">{formatDateTime(endTime)}</dd>
				</div>
			{/if}

			{#if closedByName}
				<div class="flex flex-col sm:flex-row sm:justify-between">
					<dt class="text-gray-500 dark:text-gray-400">Closed By</dt>
					<dd class="font-medium text-gray-900 dark:text-gray-100">{closedByName}</dd>
				</div>
			{/if}
		</dl>

		{#if scopeDescription}
			<div class="mt-4 border-t border-gray-200 pt-4 dark:border-gray-700">
				<h5
					class="mb-2 text-xs font-medium tracking-wide text-gray-500 uppercase dark:text-gray-400"
				>
					Scope Description
				</h5>
				<p class="text-sm text-gray-700 dark:text-gray-300">{scopeDescription}</p>
			</div>
		{/if}
	</div>
</div>
