<script lang="ts">
	import { onMount } from 'svelte';
	import type { Maintenance } from '$lib/types';
	import '../app.css';

	let { children } = $props();
	let maintenance = $state<Maintenance | null>(null);

	onMount(async () => {
		try {
			const res = await fetch('/api/active-maintenance');
			if (res.ok) {
				const data = await res.json();
				maintenance = data.maintenance ?? null;
			}
		} catch { /* ignore */ }
	});
</script>

<div class="min-h-screen">
	{#if maintenance}
		<div class="border-b border-[#facc15]/30 bg-[#facc15]/5 px-6 py-3">
			<div class="mx-auto flex max-w-6xl items-center justify-center gap-2">
				<svg class="h-4 w-4 shrink-0 text-[#facc15]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
				</svg>
				<p class="text-xs font-medium text-[#facc15]">{maintenance.title}</p>
			</div>
		</div>
	{/if}

	<header class="border-b border-[var(--border-color)] px-6 py-4">
		<div class="mx-auto flex max-w-6xl items-center justify-between">
			<div class="flex items-center gap-3">
				<a href="/" class="text-lg font-bold tracking-tight text-white transition-colors hover:text-[var(--green)]">
					<span class="text-[var(--green)]">●</span> YAUM
				</a>
				<span class="hidden text-xs text-[var(--text-muted)] sm:inline">Yet Another Uptime Monitor</span>
			</div>
			<nav class="flex items-center gap-4">
				<a href="/" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Dashboard</a>
				<a href="/admin" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Admin</a>
			</nav>
		</div>
	</header>

	<main class="mx-auto max-w-6xl px-4 py-8">
		{@render children()}
	</main>
</div>
