<script lang="ts">
	import { onMount } from 'svelte';

	interface ProcessInfo {
		id: string;
		status: string;
		progress: number;
		started: string;
		message?: string | null;
	}

	let processes: ProcessInfo[] = [];
	let loading = true;
	let error = '';

	async function loadProcesses() {
		try {
			const res = await fetch('/api/crop-progress/list');
			if (!res.ok) throw new Error(await res.text());
			const data = await res.json();
			processes = data.items;
		} catch (err) {
			error = (err as Error).message;
		} finally {
			loading = false;
		}
	}

	async function cancelProcess(id: string) {
		if (!confirm(`Cancel process ${id}?`)) return;
		await fetch(`/api/crop-progress/${id}`, { method: 'DELETE' });
		await loadProcesses();
	}

	onMount(loadProcesses);
</script>

<!-- 전체 화면 그리드 -->
<div class="flex h-screen bg-gray-100">
	<!-- 사이드바 -->
	<aside class="w-64 bg-slate-800 text-white flex flex-col">
		<div class="px-4 py-4 text-lg font-bold border-b border-slate-700">
			BigData Server
		</div>
		<nav class="flex-1 p-2">
			<a
				href="/video-crop/list"
				class="flex items-center gap-2 p-2 rounded hover:bg-slate-700 transition">
				<span>🎬</span>
				<span>FFmpeg Crop Progress List</span>
			</a>
		</nav>
	</aside>

	<!-- 콘텐츠 영역 -->
	<main class="flex-1 p-6 overflow-auto">
		<div class="flex justify-between items-center mb-6">
			<h1 class="text-2xl font-bold">FFmpeg Crop Progress List</h1>
			<button
				on:click={loadProcesses}
				class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded">
				새로고침
			</button>
		</div>

		{#if loading}
			<p>Loading process list...</p>
		{:else if error}
			<p class="text-red-600">Error: {error}</p>
		{:else if processes.length === 0}
			<p>현재 실행 중인 작업이 없습니다.</p>
		{:else}
			<table class="min-w-full border border-gray-300 text-sm bg-white rounded-lg shadow">
				<thead class="bg-gray-100">
					<tr>
						<th class="px-3 py-2 text-left">ID</th>
						<th class="px-3 py-2 text-left">Status</th>
						<th class="px-3 py-2 text-center">Progress</th>
						<th class="px-3 py-2 text-left">Started</th>
						<th class="px-3 py-2 text-left">Message</th>
						<th class="px-3 py-2 text-center">Actions</th>
					</tr>
				</thead>
				<tbody>
					{#each processes as proc}
						<tr class="border-t hover:bg-gray-50">
							<td class="px-3 py-2">{proc.id}</td>
							<td class="px-3 py-2">
								<span
									class:!text-green-600={proc.status === 'completed'}
									class:!text-red-600={proc.status === 'error' || proc.status === 'cancelled'}
									class:!text-blue-600={proc.status === 'running'}>
									{proc.status}
								</span>
							</td>
							<td class="px-3 py-2 text-center">{proc.progress}%</td>
							<td class="px-3 py-2">{new Date(proc.started).toLocaleString()}</td>
							<td class="px-3 py-2">{proc.message ?? '-'}</td>
							<td class="px-3 py-2 text-center">
								{#if proc.status === 'running'}
									<button
										on:click={() => cancelProcess(proc.id)}
										class="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 text-xs">
										Cancel
									</button>
								{/if}
							</td>
						</tr>
					{/each}
				</tbody>
			</table>
		{/if}
	</main>
</div>

<style>
	table {
		border-collapse: collapse;
	}
</style>
