<script lang="ts">
	import type { SessionType } from './types';
	import IconSpinner from '$lib/components/icons/IconSpinner.svelte';

	interface Props {
		sessionType: SessionType;
		entityName?: string;
		scopeName?: string | null;
		scopeDescription?: string | null;
		isActive: boolean;
		canClose?: boolean;
		isSubmitting?: boolean;
		isReverting?: boolean;
		onClose?: () => void;
		onRevert?: () => void;
	}

	let {
		sessionType,
		entityName,
		scopeName,
		scopeDescription,
		isActive,
		canClose = false,
		isSubmitting = false,
		isReverting = false,
		onClose,
		onRevert
	}: Props = $props();

	// Color classes based on session type
	let colorClasses = $derived(
		sessionType === 'service'
			? {
					bg: 'bg-secondary-500/10',
					border: 'border-secondary-500/20',
					text: 'text-secondary-600 dark:text-secondary-400',
					badge: 'bg-secondary-500/20 text-secondary-700 dark:text-secondary-300'
				}
			: {
					bg: 'bg-accent-500/10',
					border: 'border-accent-500/20',
					text: 'text-accent-600 dark:text-accent-400',
					badge: 'bg-accent-500/20 text-accent-700 dark:text-accent-300'
				}
	);
</script>

<div class="mb-6 rounded-xl {colorClasses.bg} border {colorClasses.border} p-4">
	<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
		<div class="min-w-0 flex-1">
			{#if entityName}
				<h2 class="text-lg font-semibold {colorClasses.text} truncate">{entityName}</h2>
			{/if}

			{#if scopeName}
				<div class="mt-3">
					<span
						class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium {colorClasses.badge}"
					>
						<svg class="h-3.5 w-3.5" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="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 2"
							/>
						</svg>
						{scopeName}
					</span>
					{#if scopeDescription}
						<p class="mt-2 text-xs text-theme-muted">{scopeDescription}</p>
					{/if}
				</div>
			{/if}
		</div>

		{#if isActive && onClose}
			<div class="flex-shrink-0 space-y-2">
				<button
					type="button"
					onclick={onClose}
					disabled={!canClose || isSubmitting || isReverting}
					class="btn-primary w-full disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
				>
					{#if isSubmitting}
						<span class="flex items-center gap-2">
							<IconSpinner class="h-4 w-4" />
							Closing...
						</span>
					{:else}
						Close Session
					{/if}
				</button>
				{#if !canClose}
					<p class="text-center text-xs text-theme-muted sm:text-right">
						Complete at least one task to close
					</p>
				{/if}
				{#if onRevert}
					<button
						type="button"
						onclick={onRevert}
						disabled={isSubmitting || isReverting}
						class="w-full rounded-lg px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto dark:text-red-400 dark:hover:bg-red-900/20"
					>
						{#if isReverting}
							<span class="flex items-center justify-center gap-2">
								<IconSpinner class="h-4 w-4" />
								Cancelling...
							</span>
						{:else}
							Cancel Session
						{/if}
					</button>
				{/if}
			</div>
		{:else if !isActive}
			<div class="flex-shrink-0">
				<span
					class="inline-flex items-center gap-1.5 rounded-full bg-theme-secondary px-3 py-1.5 text-sm font-medium text-theme-secondary"
				>
					<svg class="h-4 w-4" style="fill: none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M5 13l4 4L19 7"
						/>
					</svg>
					Session Closed
				</span>
			</div>
		{/if}
	</div>
</div>
