<script lang="ts">
	import { onMount } from 'svelte';
	import { pushNotificationManager, type NotificationState } from '$lib/client/PushNotificationManager';
	import Chevron from './ic/Chevron.svelte';
	import Bell from './ic/Bell.svelte';
	import BellOff from './ic/BellOff.svelte';
	import Chip from './Chip.svelte';

	interface Props {
		onBack?: () => void;
		sseConnected?: boolean;
		sseLastPing?: string;
	}
	let { onBack, sseConnected = false, sseLastPing = '' }: Props = $props();

	let notifState = $state<NotificationState>({
		supported: false,
		permission: 'default',
		subscribed: false,
		loading: false,
		error: null
	});

	let unsub: (() => void) | null = null;

	onMount(() => {
		unsub = pushNotificationManager.onStateChange((s) => {
			notifState = s;
		});
		return () => unsub?.();
	});

	const enabled = $derived(notifState.subscribed);

	async function handleToggle() {
		await pushNotificationManager.toggleSubscription();
	}
</script>

<div class="screen">
	<!-- Back bar -->
	<div class="back-bar">
		<button class="ic-btn-reset back-btn" onclick={onBack} aria-label="Back">
			<Chevron size={18} dir="left" color="var(--ink)" />
		</button>
		<div class="screen-title">Notifications</div>
		<div style="width: 40px;"></div>
	</div>

	<div class="content">
		<!-- Big toggle card -->
		<div
			class="toggle-card"
			style="
				background: {enabled ? 'var(--brand-gradient)' : 'var(--surface)'};
				color: {enabled ? '#fff' : 'var(--ink)'};
				border: {enabled ? 'none' : '1px solid var(--border)'};
				box-shadow: {enabled ? 'var(--shadow-lg)' : 'var(--shadow-sm)'};
			"
		>
			<div class="bell-deco" style="opacity: {enabled ? 0.18 : 0.06}">
				{#if enabled}
					<Bell size={140} color="#fff" filled={true} />
				{:else}
					<BellOff size={120} color="var(--muted)" />
				{/if}
			</div>

			<div class="toggle-inner">
				<Chip color={enabled ? '#fff' : 'var(--muted)'} bg={enabled ? 'rgba(255,255,255,0.22)' : 'var(--surface-2)'} mono>
					{enabled ? '● LIVE' : 'OFF'}
				</Chip>
				<h2 class="ic-display toggle-title">
					{enabled ? 'Push is on.' : "Get a ping when it's ready."}
				</h2>
				<p class="toggle-sub" style="color: {enabled ? 'rgba(255,255,255,0.95)' : 'var(--muted)'}">
					{#if enabled}
						We'll buzz you the moment a recipe is saved, fails, or needs a retry.
					{:else}
						Don't miss a plate. Allow notifications and we'll buzz you when a recipe is saved.
					{/if}
				</p>

				{#if notifState.error}
					<div class="error-note">{notifState.error}</div>
				{/if}

				{#if notifState.permission === 'denied'}
					<div class="denied-note">
						Notifications are blocked. Enable them in your browser settings.
					</div>
				{:else}
					<button
						class="ic-btn-reset toggle-btn"
						onclick={handleToggle}
						disabled={!notifState.supported || notifState.loading}
						style="
							background: {enabled ? '#fff' : 'var(--ink)'};
							color: {enabled ? 'var(--purple)' : 'var(--bg)'};
						"
					>
						{#if notifState.loading}
							Working…
						{:else if enabled}
							<BellOff size={14} color="var(--purple)" /> Turn off
						{:else}
							<Bell size={14} color="var(--bg)" /> Enable
						{/if}
					</button>
				{/if}
			</div>
		</div>

		<!-- What you'll hear about -->
		<div class="info-card">
			<div class="info-header">You'll hear about</div>
			{#each [
				{ color: 'var(--status-success)', title: 'Recipe saved', desc: 'Tap the notification to open it in Tandoor.' },
				{ color: 'var(--status-error)', title: 'Extraction failed', desc: 'Retry directly from the notification.' },
				{ color: 'var(--orange)', title: 'Long-running parses', desc: 'When a post is taking longer than usual.' }
			] as row, i}
				<div class="info-row" class:info-row-border={i > 0}>
					<div class="info-dot" style="background: {row.color}"></div>
					<div class="info-text">
						<div class="info-title">{row.title}</div>
						<div class="info-desc">{row.desc}</div>
					</div>
				</div>
			{/each}
		</div>

		<!-- SSE status -->
		<div class="sse-card">
			<div class="sse-label">Live queue</div>
			<div class="sse-row">
				<span class="sse-dot" style="background: {sseConnected ? 'var(--status-success)' : 'var(--status-error)'}"></span>
				<span class="sse-status">{sseConnected ? 'SSE connected' : 'SSE disconnected'}</span>
				<span class="sse-spacer"></span>
				{#if sseLastPing}
					<span class="sse-ping">{sseLastPing}</span>
				{/if}
			</div>
		</div>
	</div>
</div>

<style>
	.screen {
		min-height: 100%;
		background: var(--bg);
		padding-bottom: 60px;
	}
	.back-bar {
		position: sticky;
		top: 0;
		z-index: 5;
		background: color-mix(in srgb, var(--bg) 92%, transparent);
		backdrop-filter: blur(14px) saturate(160%);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		padding: 60px 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 1px solid var(--border);
	}
	.back-btn {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: var(--surface-2);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.screen-title {
		flex: 1;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		font-family: 'Lilita One', system-ui, sans-serif;
		color: var(--ink);
	}
	.content {
		padding: 20px 18px;
	}
	.toggle-card {
		border-radius: 26px;
		padding: 24px;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
	}
	.bell-deco {
		position: absolute;
		right: -20px;
		top: -20px;
		pointer-events: none;
		transition: opacity 0.3s;
	}
	.toggle-inner {
		position: relative;
	}
	.toggle-title {
		font-size: 30px;
		line-height: 1;
		margin: 14px 0 6px;
		letter-spacing: -0.01em;
		max-width: 240px;
	}
	.toggle-sub {
		font-size: 13px;
		line-height: 1.4;
		margin: 0;
		max-width: 260px;
	}
	.error-note {
		margin-top: 10px;
		font-size: 12px;
		color: rgba(255, 80, 80, 0.9);
	}
	.denied-note {
		margin-top: 14px;
		font-size: 13px;
		opacity: 0.8;
	}
	.toggle-btn {
		margin-top: 18px;
		padding: 12px 18px;
		border-radius: 99px;
		font-size: 14px;
		font-weight: 700;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	.info-card {
		margin-top: 18px;
		border-radius: 22px;
		overflow: hidden;
		background: var(--surface);
		border: 1px solid var(--border);
	}
	.info-header {
		padding: 14px 18px;
		border-bottom: 1px solid var(--border);
		font-size: 11px;
		font-family: var(--font-mono);
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--muted);
	}
	.info-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 18px;
	}
	.info-row-border {
		border-top: 1px solid var(--border);
	}
	.info-dot {
		width: 10px;
		height: 10px;
		border-radius: 99px;
		flex-shrink: 0;
	}
	.info-text {
		flex: 1;
	}
	.info-title {
		font-size: 14px;
		font-weight: 600;
		color: var(--ink);
	}
	.info-desc {
		font-size: 12px;
		color: var(--muted);
	}
	.sse-card {
		margin-top: 18px;
		border-radius: 22px;
		padding: 18px;
		background: var(--surface);
		border: 1px solid var(--border);
	}
	.sse-label {
		font-size: 11px;
		font-family: var(--font-mono);
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 10px;
	}
	.sse-row {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.sse-dot {
		width: 8px;
		height: 8px;
		border-radius: 99px;
		flex-shrink: 0;
	}
	.sse-status {
		font-size: 14px;
		font-weight: 600;
		color: var(--ink);
	}
	.sse-spacer {
		flex: 1;
	}
	.sse-ping {
		font-size: 11px;
		color: var(--muted);
		font-family: var(--font-mono);
	}
</style>
