<script lang="ts">
	import type { Session } from '../api/sessions';
	import SessionCard from './SessionCard.svelte';

	let {
		sessions,
		onRevokeSession,
		onRevokeAll
	}: {
		sessions: Session[];
		onRevokeSession: (familyId: string) => Promise<void>;
		onRevokeAll: () => Promise<void>;
	} = $props();

	let isRevokingAll = $state(false);
	let showRevokeAllConfirm = $state(false);

	const otherSessions = $derived(sessions.filter((s) => !s.is_current));
	const hasOtherSessions = $derived(otherSessions.length > 0);

	async function handleRevokeAll() {
		if (!showRevokeAllConfirm) {
			showRevokeAllConfirm = true;
			return;
		}

		isRevokingAll = true;
		try {
			await onRevokeAll();
		} finally {
			isRevokingAll = false;
			showRevokeAllConfirm = false;
		}
	}

	function cancelRevokeAll() {
		showRevokeAllConfirm = false;
	}
</script>

<div class="sessions-list">
	<div class="sessions-header">
		<h2>Sessions actives</h2>
		<p class="sessions-count">
			{sessions.length} session{sessions.length > 1 ? 's' : ''} active{sessions.length > 1 ? 's' : ''}
		</p>
	</div>

	{#if hasOtherSessions}
		<div class="revoke-all-section">
			{#if showRevokeAllConfirm}
				<div class="revoke-all-confirm">
					<p>Déconnecter {otherSessions.length} autre{otherSessions.length > 1 ? 's' : ''} session{otherSessions.length > 1 ? 's' : ''} ?</p>
					<div class="confirm-buttons">
						<button class="btn-cancel" onclick={cancelRevokeAll} disabled={isRevokingAll}>
							Annuler
						</button>
						<button class="btn-confirm-all" onclick={handleRevokeAll} disabled={isRevokingAll}>
							{#if isRevokingAll}
								<span class="spinner"></span>
								Déconnexion...
							{:else}
								Confirmer
							{/if}
						</button>
					</div>
				</div>
			{:else}
				<button class="btn-revoke-all" onclick={handleRevokeAll}>
					Déconnecter toutes les autres sessions
				</button>
			{/if}
		</div>
	{/if}

	<div class="sessions-grid">
		{#each sessions as session (session.family_id)}
			<SessionCard {session} onRevoke={onRevokeSession} />
		{/each}
	</div>

	{#if sessions.length === 0}
		<div class="empty-state">
			<span class="empty-icon">
				<!-- Lock/Shield icon -->
				<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
					<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
					<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
				</svg>
			</span>
			<p>Aucune session active</p>
		</div>
	{/if}
</div>

<style>
	.sessions-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.sessions-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.sessions-header h2 {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-primary, #1a1f36);
		margin: 0;
	}

	.sessions-count {
		font-size: 14px;
		color: var(--text-secondary, #64748b);
		margin: 0;
	}

	.revoke-all-section {
		padding: 12px 16px;
		background: var(--surface-primary, #f8fafc);
		border-radius: 12px;
		border: 1px solid var(--border-subtle, #e2e8f0);
	}

	.btn-revoke-all {
		width: 100%;
		padding: 10px 16px;
		font-size: 14px;
		font-weight: 500;
		color: var(--color-alert, hsl(0, 72%, 51%));
		background: transparent;
		border: 1px solid var(--color-alert, hsl(0, 72%, 51%));
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.btn-revoke-all:hover {
		color: #fff;
		background: var(--color-alert, hsl(0, 72%, 51%));
	}

	.revoke-all-confirm {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.revoke-all-confirm p {
		margin: 0;
		font-size: 14px;
		font-weight: 500;
		color: var(--text-primary, #1a1f36);
		text-align: center;
	}

	.confirm-buttons {
		display: flex;
		gap: 12px;
		justify-content: center;
	}

	.btn-cancel {
		flex: 1;
		padding: 10px 16px;
		font-size: 14px;
		font-weight: 500;
		color: var(--text-secondary, #64748b);
		background: transparent;
		border: 1px solid var(--border-subtle, #e2e8f0);
		border-radius: 8px;
		cursor: pointer;
	}

	.btn-confirm-all {
		flex: 1;
		padding: 10px 16px;
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		background: var(--color-alert, hsl(0, 72%, 51%));
		border: none;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.btn-confirm-all:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.sessions-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 40px 20px;
		color: var(--text-muted, #94a3b8);
	}

	.empty-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--text-muted, #94a3b8);
	}

	.spinner {
		width: 16px;
		height: 16px;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-top-color: #fff;
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>
