<script lang="ts">
	import { onMount } from 'svelte';
	import { app } from './app.svelte';
	import type { WorkspaceListing } from './app.svelte';

	onMount(() => {
		void app.loadWorkspaces();
	});

	/** Group workspaces by their owning IDE's id (Phase 14, ADR 0031).
	 * Local-carrier workspaces (empty `ide`) appear under "This
	 * machine"; remote-carrier workspaces appear under their IDE's
	 * label (the `ide` field is the id — we show it as-is until the
	 * bridge sends a human label too). */
	function groupByIde(wss: WorkspaceListing[]): [string, WorkspaceListing[]][] {
		const map = new Map<string, WorkspaceListing[]>();
		for (const ws of wss) {
			const key = ws.ide ?? '';
			const list = map.get(key);
			if (list) {
				list.push(ws);
			} else {
				map.set(key, [ws]);
			}
		}
		// Sort so the local group ("") is first.
		return [...map.entries()].toSorted(([a], [b]) => {
			if (a === '') {
				return -1;
			}
			if (b === '') {
				return 1;
			}
			return a.localeCompare(b);
		});
	}
</script>

<div class="screen">
	<div class="row" style="justify-content: space-between;">
		<h1>Workspaces</h1>
		<button class="ghost" onclick={() => app.loadWorkspaces()} disabled={app.loadingWorkspaces}>Refresh</button>
	</div>

	{#if app.loadingWorkspaces}
		<p class="muted">Loading…</p>
	{:else if app.workspaces.length === 0}
		<p class="muted">No workspaces found on this machine.</p>
	{:else}
		{@const groups = groupByIde(app.workspaces)}
		{#each groups as [ideLabel, wss]}
			{#if ideLabel}
				<h2 class="group-header">{ideLabel}</h2>
			{:else}
				<h2 class="group-header">This machine</h2>
			{/if}
			<div class="list">
				{#each wss as ws ((ws.ide ?? '') + '/' + ws.id)}
					<div class="card list-item ws-row">
						<button class="ws-main" onclick={() => app.openWorkspace(ws.id, ws.ide ?? '', ws.name)}>
							<div class="row">
								<span class="pip" class:live={ws.live}></span>
								<strong>{ws.name}</strong>
							</div>
							<span class="muted">{ws.live ? 'running' : 'stopped'} · {ws.id}</span>
						</button>
						{#if !ws.live}
							{@const starting = app.launching.has(`${ws.ide ?? ''}\u0000${ws.id}`)}
							<button
								class="ghost launch-btn"
								class:starting
								title={starting ? 'Starting…' : 'Start this workspace'}
								disabled={starting}
								onclick={() => app.launchWorkspace(ws.id, ws.ide ?? '')}>{starting ? 'Starting…' : 'Start'}</button
							>
						{/if}
					</div>
				{/each}
			</div>
		{/each}
	{/if}

	<button class="ghost" onclick={() => app.unpair()}>Unpair this device</button>
</div>

<style>
	.ws-row {
		flex-direction: row;
		align-items: center;
		gap: 0.4rem;
	}
	.ws-main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		background: none;
		border: none;
		cursor: pointer;
		text-align: left;
		color: inherit;
		padding: 0;
	}
	.ws-main strong {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.launch-btn.starting {
		opacity: 0.6;
		animation: launch-pulse 1.2s ease-in-out infinite;
	}
	@keyframes launch-pulse {
		50% {
			opacity: 0.3;
		}
	}
	.launch-btn {
		flex: none;
		min-height: 36px;
		padding: 0.3rem 0.8rem;
		font-size: 0.85rem;
	}
	.group-header {
		font-size: 0.9rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--muted, #8b949e);
		margin-top: 1rem;
		margin-bottom: 0.3rem;
	}
	.group-header:first-child {
		margin-top: 0;
	}
</style>
