<script lang="ts">
	import { Card, Button, Spinner, Modal } from '$lib/components';
	import { restartService, stopService, startService } from '$lib/api/admin';
	import { toast } from '$lib/stores/toast.svelte';
	import { data } from '$lib/stores/data.svelte';
	import { Play, Square, RotateCw } from 'lucide-svelte';

	let actionLoading = $state<string | null>(null);
	let showRestartConfirm = $state(false);

	async function handleStart() {
		actionLoading = 'start';
		try {
			await startService();
			toast.success('Service started');
		} catch (e: any) {
			toast.error(e.message || 'Failed to start service');
		} finally {
			actionLoading = null;
		}
	}

	async function handleStop() {
		actionLoading = 'stop';
		try {
			await stopService();
			toast.success('Service stopped');
		} catch (e: any) {
			toast.error(e.message || 'Failed to stop service');
		} finally {
			actionLoading = null;
		}
	}

	async function handleRestart() {
		actionLoading = 'restart';
		try {
			await restartService();
			toast.success('Service restarted');
			showRestartConfirm = false;
		} catch (e: any) {
			toast.error(e.message || 'Failed to restart service');
		} finally {
			actionLoading = null;
		}
	}
</script>

<div class="page">
	{#if !data.initialLoaded}
		<div class="center"><Spinner /></div>
	{:else}
		<Card title="NanoClaw Service">
			{#snippet actions()}
				<div class="service-actions">
					<Button size="sm" loading={actionLoading === 'start'} onclick={handleStart}>
						<Play size={13} />
						Start
					</Button>
					<Button size="sm" loading={actionLoading === 'stop'} onclick={handleStop}>
						<Square size={13} />
						Stop
					</Button>
					<Button size="sm" variant="danger" onclick={() => showRestartConfirm = true}>
						<RotateCw size={13} />
						Restart
					</Button>
				</div>
			{/snippet}
			<p class="service-note">Restarting kills active containers, disconnects Discord bots, and interrupts agent sessions. Use SIGHUP for config reloads.</p>
		</Card>
	{/if}
</div>

<Modal open={showRestartConfirm} title="Restart NanoClaw" onclose={() => showRestartConfirm = false}>
	<p class="confirm-text">This will <strong>kill all active containers</strong>, disconnect Discord bots, and interrupt ongoing agent sessions.</p>
	<p class="confirm-text" style="margin-top: 8px;">Are you sure you want to restart?</p>
	{#snippet footer()}
		<Button variant="secondary" onclick={() => showRestartConfirm = false}>Cancel</Button>
		<Button variant="danger" loading={actionLoading === 'restart'} onclick={handleRestart}>
			<RotateCw size={13} />
			Restart
		</Button>
	{/snippet}
</Modal>

<style>
	.page {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.center {
		display: flex;
		justify-content: center;
		padding: 60px 0;
	}
	.service-actions {
		display: flex;
		gap: 6px;
		flex-wrap: wrap;
	}

	@media (max-width: 768px) {
		.service-actions {
			flex-direction: column;
			width: 100%;
		}
	}
	.service-note {
		font-size: var(--font-size-sm);
		color: var(--text-muted);
		line-height: 1.5;
	}
	.confirm-text {
		color: var(--text);
		line-height: 1.5;
	}
</style>
