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

	interface Props {
		sessionType: SessionType;
		entityName: string;
		isActive: boolean;
		startTime: string;
		endTime?: string | null;
		durationSeconds?: number | null;
		canClose?: boolean;
		canRevert?: boolean;
		isSubmitting?: boolean;
		isReverting?: boolean;
		onClose?: () => void;
		onRevert?: () => void;
	}

	const {
		sessionType,
		entityName,
		isActive,
		startTime,
		endTime,
		durationSeconds,
		canClose = false,
		canRevert = false,
		isSubmitting = false,
		isReverting = false,
		onClose,
		onRevert
	}: 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);
	});

	const statusLabel = $derived(isActive ? 'In Progress' : 'Completed');
	const statusClass = $derived(
		isActive
			? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
			: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
	);
</script>

<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
	<div class="flex items-center gap-3">
		<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg {colors.bg}">
			<svg class="h-5 w-5 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>
			<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
				{entityName}
			</h3>
			<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
				<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusClass}">
					{statusLabel}
				</span>
				<span class="text-gray-400 dark:text-gray-600">|</span>
				<span>{formatDuration(liveDuration)}</span>
			</div>
		</div>
	</div>

	{#if isActive && (onClose || onRevert)}
		<div class="flex gap-2">
			{#if canRevert && onRevert}
				<button
					type="button"
					class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-2 text-sm font-medium text-red-600 shadow-sm transition-colors hover:bg-red-50 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-800 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20"
					onclick={onRevert}
					disabled={isReverting || isSubmitting}
				>
					{#if isReverting}
						<svg class="h-4 w-4 animate-spin" 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>
					{:else}
						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"
							></path>
						</svg>
					{/if}
					<span>Cancel</span>
				</button>
			{/if}

			{#if onClose}
				<button
					type="button"
					class="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:opacity-90 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {colors.bg} {colors.ring}"
					onclick={onClose}
					disabled={!canClose || isSubmitting || isReverting}
				>
					{#if isSubmitting}
						<svg class="h-4 w-4 animate-spin" 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>
					{:else}
						<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M5 13l4 4L19 7"
							></path>
						</svg>
					{/if}
					<span>Close Session</span>
				</button>
			{/if}
		</div>
	{/if}
</div>
