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

	interface Props {
		sessionType: SessionType;
		stats: {
			completedTasks: number;
			photos: number;
			videos: number;
			notes: number;
		};
		sessionDetails: {
			start?: string | null;
			end?: string | null;
			isActive: boolean;
			durationSeconds?: number | null;
		};
		entityName?: string;
		addressInfo?: string | null;
		teamMembers?: Array<{ id: string; fullName: string; role: string }>;
	}

	let {
		sessionType,
		stats,
		sessionDetails,
		entityName,
		addressInfo,
		teamMembers = []
	}: Props = $props();

	// Color classes based on session type
	let colorClasses = $derived(
		sessionType === 'service'
			? {
					statBg: 'bg-secondary-500/10',
					statText: 'text-secondary-600 dark:text-secondary-400',
					statValue: 'text-secondary-700 dark:text-secondary-300'
				}
			: {
					statBg: 'bg-accent-500/10',
					statText: 'text-accent-600 dark:text-accent-400',
					statValue: 'text-accent-700 dark:text-accent-300'
				}
	);

	const statItems = $derived([
		{
			label: 'Tasks Completed',
			value: stats.completedTasks,
			icon: '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 2m-6 9l2 2 4-4'
		},
		{
			label: 'Photos',
			value: stats.photos,
			icon: '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'
		},
		{
			label: 'Videos',
			value: stats.videos,
			icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'
		},
		{
			label: 'Notes',
			value: stats.notes,
			icon: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
		}
	]);
</script>

<!-- Stats Grid -->
<div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
	{#each statItems as stat (stat.label)}
		<div class="rounded-xl {colorClasses.statBg} p-4 text-center">
			<div class="mb-2 flex justify-center">
				<svg
					class="h-6 w-6 {colorClasses.statText}"
					style="fill: none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={stat.icon} />
				</svg>
			</div>
			<p class="text-2xl font-bold {colorClasses.statValue}">{stat.value}</p>
			<p class="mt-1 text-xs text-theme-muted">{stat.label}</p>
		</div>
	{/each}
</div>

<!-- Session Details Card -->
<div class="card-padded">
	<h3 class="mb-4 text-sm font-medium text-theme-muted">Session Details</h3>

	<div class="space-y-4">
		<!-- Time Info -->
		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
			<div>
				<p class="text-xs tracking-wide text-theme-muted uppercase">Started</p>
				<p class="font-medium text-theme">{formatDateTime(sessionDetails.start)}</p>
			</div>
			{#if sessionDetails.end}
				<div>
					<p class="text-xs tracking-wide text-theme-muted uppercase">Ended</p>
					<p class="font-medium text-theme">{formatDateTime(sessionDetails.end)}</p>
				</div>
			{:else if sessionDetails.isActive}
				<div>
					<p class="text-xs tracking-wide text-theme-muted uppercase">Status</p>
					<p class="font-medium text-primary-600 dark:text-primary-400">In Progress</p>
				</div>
			{/if}
		</div>

		{#if sessionDetails.durationSeconds}
			<div class="border-t border-theme pt-3">
				<p class="text-xs tracking-wide text-theme-muted uppercase">Duration</p>
				<p class="font-medium text-theme">{formatDuration(sessionDetails.durationSeconds)}</p>
			</div>
		{/if}

		<!-- Entity Info -->
		{#if entityName || addressInfo}
			<div class="border-t border-theme pt-3">
				{#if entityName}
					<p class="mb-1 text-xs tracking-wide text-theme-muted uppercase">
						{sessionType === 'service' ? 'Account' : 'Project'}
					</p>
					<p class="font-medium text-theme">{entityName}</p>
				{/if}
				{#if addressInfo}
					<p class="mt-1 text-sm text-theme-secondary">{addressInfo}</p>
				{/if}
			</div>
		{/if}

		<!-- Team Members -->
		{#if teamMembers.length > 0}
			<div class="border-t border-theme pt-3">
				<p class="mb-2 text-xs tracking-wide text-theme-muted uppercase">Team Members</p>
				<div class="space-y-2">
					{#each teamMembers as member (member.id)}
						<div class="flex items-center gap-2">
							<span
								class="inline-flex h-6 w-6 items-center justify-center rounded text-xs font-bold
									{member.role === 'TEAM_LEADER'
									? 'bg-accent-500/20 text-accent-600 dark:text-accent-400'
									: 'bg-secondary-500/20 text-secondary-600 dark:text-secondary-400'}"
							>
								{member.role === 'TEAM_LEADER' ? 'TL' : 'TM'}
							</span>
							<span class="text-theme">{member.fullName}</span>
						</div>
					{/each}
				</div>
			</div>
		{/if}
	</div>
</div>
