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

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

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

	// Test notification state
	let testLoading = $state<boolean>(false);
	let testMessage = $state<string | null>(null);

	onMount(() => {
		// Subscribe to state changes
		unsubscribe = pushNotificationManager.onStateChange((newState) => {
			viewModel = newState;
		});

		return () => {
			unsubscribe?.();
		};
	});

	async function handleToggle() {
		await pushNotificationManager.toggleSubscription();
	}

	function getStatusText(): string {
		if (!viewModel.supported) return 'Not supported';
		if (viewModel.permission === 'denied') return 'Permission denied';
		if (viewModel.subscribed) return 'Enabled';
		if (viewModel.permission === 'granted') return 'Available';
		return 'Permission needed';
	}

	function getStatusColor(): string {
		if (!viewModel.supported || viewModel.permission === 'denied') return 'text-red-600';
		if (viewModel.subscribed) return 'text-green-600';
		return 'text-yellow-600';
	}

	function getButtonText(): string {
		if (viewModel.loading) return 'Working...';
		if (viewModel.subscribed) return 'Disable Notifications';
		return 'Enable Notifications';
	}

	function canToggle(): boolean {
		return viewModel.supported && viewModel.permission !== 'denied' && !viewModel.loading;
	}

	async function sendTestNotification(type: 'success' | 'error' | 'progress') {
		testLoading = true;
		testMessage = null;

		try {
			const response = await fetch('/api/notifications/test', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ type })
			});

			if (!response.ok) {
				throw new Error('Failed to send test notification');
			}

			const result = await response.json();
			testMessage = `✓ Test ${type} notification sent to ${result.subscriberCount} subscriber(s)`;
		} catch (error) {
			testMessage = `✗ Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
		} finally {
			testLoading = false;

			// Auto-dismiss message after 3 seconds
			setTimeout(() => {
				testMessage = null;
			}, 3000);
		}
	}
</script>

<div class="bg-white border rounded-lg shadow-sm p-6">
	<div class="flex items-start justify-between">
		<div class="flex-1">
			<div class="flex items-center space-x-2 mb-2">
				<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5-5-5h5v-8a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1h-7v7z"></path>
				</svg>
				<h3 class="text-lg font-medium text-gray-900">Push Notifications</h3>
			</div>

			<p class="text-sm text-gray-600 mb-4">
				Get notified when your recipe extractions complete, even when InstaRecipe is not open.
				{#if typeof window !== 'undefined'}
					<!-- Check if we're on the homepage and queue appears empty -->
					{#if window.location.pathname === '/' && !document.querySelector('[data-queue-item]')}
						Start by adding some Instagram recipe URLs to see notifications in action!
					{/if}
				{/if}
			</p>

			<!-- Status -->
			<div class="flex items-center space-x-2 mb-4">
				<span class="text-sm text-gray-500">Status:</span>
				<span class="text-sm font-medium {getStatusColor()}">
					{getStatusText()}
				</span>
			</div>

			<!-- Error Message -->
			{#if viewModel.error}
				<div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
					<div class="flex items-start space-x-2">
						<svg class="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
						</svg>
						<div>
							<div class="text-sm font-medium text-red-800">Error</div>
							<div class="text-sm text-red-700">{viewModel.error}</div>
						</div>
					</div>
				</div>
			{/if}

			<!-- Browser Support Info -->
			{#if !viewModel.supported}
				<div class="mb-4 p-3 bg-gray-50 border border-gray-200 rounded-lg">
					<div class="flex items-start space-x-2">
						<svg class="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
						</svg>
						<div>
							<div class="text-sm font-medium text-gray-800">Not Supported</div>
							<div class="text-sm text-gray-600">
								Your browser doesn't support push notifications or the site is not running over HTTPS.
							</div>
						</div>
					</div>
				</div>
			{/if}

			<!-- Permission Denied Info -->
			{#if viewModel.permission === 'denied'}
				<div class="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
					<div class="flex items-start space-x-2">
						<svg class="w-4 h-4 text-yellow-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
						</svg>
						<div>
							<div class="text-sm font-medium text-yellow-800">Permission Denied</div>
							<div class="text-sm text-yellow-700">
								You've blocked notifications for this site. Please enable them in your browser settings to receive updates.
							</div>
						</div>
					</div>
				</div>
			{/if}

			<!-- Features List -->
			{#if viewModel.supported && viewModel.permission !== 'denied'}
				<div class="mb-4">
					<div class="text-sm text-gray-600 mb-2">You'll receive notifications for:</div>
					<ul class="text-sm text-gray-600 space-y-1">
						<li class="flex items-center space-x-2">
							<svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
							</svg>
							<span>✅ Successful recipe extractions</span>
						</li>
						<li class="flex items-center space-x-2">
							<svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
							</svg>
							<span>❌ Failed extractions (with retry option)</span>
						</li>
						<li class="flex items-center space-x-2">
							<svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
							</svg>
							<span>🔗 Direct links to view in Tandoor</span>
						</li>
					</ul>
				</div>
			{/if}
		</div>

		<!-- Toggle Button -->
		<div class="ml-6">
			<button
				onclick={handleToggle}
				disabled={!canToggle()}
				class="flex items-center space-x-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors {viewModel.subscribed 
					? 'bg-red-100 text-red-700 hover:bg-red-200 disabled:opacity-50' 
					: 'bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50'} disabled:cursor-not-allowed"
			>
				{#if viewModel.loading}
					<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
					</svg>
				{:else}
					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={viewModel.subscribed ? "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728" : "M15 17h5l-5 5-5-5h5v-8a1 1 0 011-1h8a1 1 0 011 1v1a1 1 0 01-1 1h-7v7z"}></path>
					</svg>
				{/if}
				<span>{getButtonText()}</span>
			</button>
		</div>
	</div>

	<!-- Test Notification Buttons (only shown when subscribed) -->
	{#if viewModel.subscribed}
		<div class="mt-6 pt-6 border-t border-gray-200">
			<h4 class="text-sm font-medium text-gray-900 mb-3">Test Notifications</h4>
			<p class="text-sm text-gray-600 mb-4">
				Send a test notification to verify your subscription is working correctly.
			</p>

			<div class="flex flex-wrap gap-2">
				<button
					onclick={() => sendTestNotification('success')}
					disabled={testLoading || viewModel.loading}
					class="px-3 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
				>
					{testLoading ? 'Sending...' : 'Test Success'}
				</button>

				<button
					onclick={() => sendTestNotification('error')}
					disabled={testLoading || viewModel.loading}
					class="px-3 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
				>
					{testLoading ? 'Sending...' : 'Test Error'}
				</button>

				<button
					onclick={() => sendTestNotification('progress')}
					disabled={testLoading || viewModel.loading}
					class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
				>
					{testLoading ? 'Sending...' : 'Test Progress'}
				</button>
			</div>

			<!-- Test Message -->
			{#if testMessage}
				<div class="mt-4 p-3 rounded-lg {testMessage.startsWith('✓') ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}">
					<div class="flex items-start space-x-2">
						<svg class="w-4 h-4 flex-shrink-0 mt-0.5 {testMessage.startsWith('✓') ? 'text-green-400' : 'text-red-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={testMessage.startsWith('✓') ? "M5 13l4 4L19 7" : "M6 18L18 6M6 6l12 12"}></path>
						</svg>
						<div class="text-sm {testMessage.startsWith('✓') ? 'text-green-800' : 'text-red-800'}">
							{testMessage}
						</div>
					</div>
				</div>
			{/if}
		</div>
	{/if}
</div>