<script lang="ts">
	import type { Identity, Session } from '@ory/client';
	import { Modal } from 'flowbite-svelte';

	interface ModalData {
		identity: Identity;
		sessions: Session[];
	}

	interface Props {
		data: ModalData | null;
		onClose: () => void;
		onViewSession: (session: Session) => void;
		onExtendSession: (id: string) => Promise<void>;
		onDeleteSession: (id: string) => Promise<void>;
	}

	let { data, onClose, onViewSession, onExtendSession, onDeleteSession }: Props = $props();

	let open = $derived(!!data);
</script>

<Modal
	bind:open
	onclose={onClose}
	size="xl"
	autoclose={false}
	dismissable={false}
	outsideclose={false}
>
	{#snippet header()}
		<div>
			<h3 class="text-lg leading-6 font-medium text-gray-900">
				Sessions for {data?.identity.traits?.email || 'User'}
			</h3>
			<p class="mt-1 text-sm text-gray-600">
				{data?.sessions.length || 0} active
				{data?.sessions.length === 1 ? 'session' : 'sessions'}
			</p>
		</div>
	{/snippet}

	<div class="w-full">
		{#if data && data.sessions.length === 0}
			<p class="py-8 text-center text-gray-500">No active sessions for this user.</p>
		{:else if data}
			<div class="overflow-x-auto">
				<table class="min-w-full divide-y divide-gray-200">
					<thead>
						<tr>
							<th
								class="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>
								Session ID
							</th>
							<th
								class="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>
								Issued At
							</th>
							<th
								class="px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
							>
								Expires At
							</th>
							<th
								class="px-4 py-3 text-right text-xs font-medium tracking-wider text-gray-500 uppercase"
							>
								Actions
							</th>
						</tr>
					</thead>
					<tbody class="divide-y divide-gray-200 bg-white">
						{#each data.sessions as session (session.id)}
							<tr class="hover:bg-gray-50">
								<td class="px-4 py-4 font-mono text-sm whitespace-nowrap text-gray-600">
									{session.id.substring(0, 12)}...
								</td>
								<td class="px-4 py-4 text-sm whitespace-nowrap text-gray-500">
									{new Date(session.issued_at || '').toLocaleString()}
								</td>
								<td class="px-4 py-4 text-sm whitespace-nowrap text-gray-500">
									{new Date(session.expires_at || '').toLocaleString()}
								</td>
								<td class="space-x-2 px-4 py-4 text-right text-sm whitespace-nowrap">
									<button
										onclick={() => onViewSession(session)}
										class="text-blue-600 hover:text-blue-900"
									>
										View
									</button>
									<button
										onclick={() => onExtendSession(session.id)}
										class="text-green-600 hover:text-green-900"
									>
										Extend
									</button>
									<button
										onclick={() => onDeleteSession(session.id)}
										class="text-red-600 hover:text-red-900"
									>
										Revoke
									</button>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		{/if}
	</div>

	{#snippet footer()}
		<button
			type="button"
			onclick={onClose}
			class="rounded-md bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
		>
			Close
		</button>
	{/snippet}
</Modal>
