<script lang="ts">
	import { t } from 'svelte-i18n';
	import IconGrid from '$lib/components/ui/IconGrid.svelte';
	import EntityPicker from '$lib/components/ui/EntityPicker.svelte';
	import type { IconGridItem } from '$lib/components/ui/IconGrid.svelte';
	import type { EntityPickerItem } from '$lib/components/ui/EntityPicker.svelte';

	interface Props {
		sectionId: string;
		apps: Array<{ id: string; name: string }>;
		onSubmit: (sectionId: string, widgetData: string) => void;
	}

	let { sectionId, apps, onSubmit }: Props = $props();

	// Widget form state
	let selectedWidgetType = $state('app');
	let selectedAppId = $state('');

	// Bookmark fields
	let bookmarkUrl = $state('');
	let bookmarkLabel = $state('');
	let bookmarkIcon = $state('');
	let bookmarkDescription = $state('');

	// Note fields
	let noteContent = $state('');
	let noteFormat = $state<'markdown' | 'text'>('markdown');

	// Embed fields
	let embedUrl = $state('');
	let embedHeight = $state(300);

	// Status fields
	let statusLabel = $state('');
	let statusAppIds = $state<string[]>([]);

	const widgetTypeItems: IconGridItem[] = [
		{ value: 'app', icon: '🖥️', label: 'App' },
		{ value: 'bookmark', icon: '🔖', label: 'Bookmark' },
		{ value: 'note', icon: '📝', label: 'Note' },
		{ value: 'embed', icon: '🧩', label: 'Embed' },
		{ value: 'status', icon: '📊', label: 'Status' }
	];

	const noteFormatItems: IconGridItem[] = [
		{ value: 'markdown', icon: '📝', label: 'Markdown' },
		{ value: 'text', icon: '📄', label: 'Plain Text' }
	];

	const appPickerItems: EntityPickerItem[] = $derived(
		apps.map((app) => ({
			value: app.id,
			label: app.name
		}))
	);

	function resetForm() {
		selectedWidgetType = 'app';
		selectedAppId = '';
		bookmarkUrl = '';
		bookmarkLabel = '';
		bookmarkIcon = '';
		bookmarkDescription = '';
		noteContent = '';
		noteFormat = 'markdown';
		embedUrl = '';
		embedHeight = 300;
		statusLabel = '';
		statusAppIds = [];
	}

	function handleSubmitWidget() {
		let widgetData: Record<string, unknown> = { type: selectedWidgetType };

		switch (selectedWidgetType) {
			case 'app':
				if (!selectedAppId) return;
				widgetData.appId = selectedAppId;
				break;
			case 'bookmark':
				if (!bookmarkUrl || !bookmarkLabel) return;
				widgetData.url = bookmarkUrl;
				widgetData.label = bookmarkLabel;
				if (bookmarkIcon) widgetData.icon = bookmarkIcon;
				if (bookmarkDescription) widgetData.description = bookmarkDescription;
				break;
			case 'note':
				if (!noteContent) return;
				widgetData.content = noteContent;
				widgetData.format = noteFormat;
				break;
			case 'embed':
				if (!embedUrl) return;
				widgetData.url = embedUrl;
				widgetData.height = embedHeight;
				break;
			case 'status':
				if (statusAppIds.length === 0) return;
				widgetData.appIds = statusAppIds;
				if (statusLabel) widgetData.label = statusLabel;
				break;
			default:
				return;
		}

		onSubmit(sectionId, JSON.stringify(widgetData));
		resetForm();
	}

	function toggleStatusApp(appId: string) {
		if (statusAppIds.includes(appId)) {
			statusAppIds = statusAppIds.filter((id) => id !== appId);
		} else {
			statusAppIds = [...statusAppIds, appId];
		}
	}
</script>

<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
	<!-- Widget Type Selector (Icon Grid) -->
	<div class="mb-3">
		<label class="mb-1 block text-sm font-medium text-foreground">
			Widget Type
		</label>
		<IconGrid
			items={widgetTypeItems}
			bind:value={selectedWidgetType}
			columns={5}
		/>
	</div>

	<!-- Type-specific config forms -->
	{#if selectedWidgetType === 'app'}
		<div>
			<label class="mb-1 block text-sm font-medium text-foreground">
				{$t('widget.select_app')}
			</label>
			<EntityPicker
				items={appPickerItems}
				bind:value={selectedAppId}
				placeholder={$t('widget.choose_app')}
				searchPlaceholder={$t('widget.choose_app')}
			/>
		</div>
	{:else if selectedWidgetType === 'bookmark'}
		<div class="grid gap-3 sm:grid-cols-2">
			<div>
				<label for="bm-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
				<input
					id="bm-url-{sectionId}"
					type="url"
					bind:value={bookmarkUrl}
					placeholder="https://example.com"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					required
				/>
			</div>
			<div>
				<label for="bm-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
				<input
					id="bm-label-{sectionId}"
					type="text"
					bind:value={bookmarkLabel}
					placeholder="My Bookmark"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					required
				/>
			</div>
			<div>
				<label for="bm-icon-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
				<input
					id="bm-icon-{sectionId}"
					type="text"
					bind:value={bookmarkIcon}
					placeholder="e.g. an emoji or icon name"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
				/>
			</div>
			<div>
				<label for="bm-desc-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
				<input
					id="bm-desc-{sectionId}"
					type="text"
					bind:value={bookmarkDescription}
					placeholder="A short description"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
				/>
			</div>
		</div>
	{:else if selectedWidgetType === 'note'}
		<div class="space-y-3">
			<div>
				<label class="mb-1 block text-sm font-medium text-foreground">Format</label>
				<IconGrid
					items={noteFormatItems}
					bind:value={noteFormat}
					columns={2}
				/>
			</div>
			<div>
				<label for="note-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
				<textarea
					id="note-content-{sectionId}"
					bind:value={noteContent}
					rows="4"
					placeholder="Write your note here..."
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					required
				></textarea>
			</div>
		</div>
	{:else if selectedWidgetType === 'embed'}
		<div class="grid gap-3 sm:grid-cols-2">
			<div class="sm:col-span-2">
				<label for="embed-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
				<input
					id="embed-url-{sectionId}"
					type="url"
					bind:value={embedUrl}
					placeholder="https://example.com/embed"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
					required
				/>
			</div>
			<div>
				<label for="embed-height-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
				<input
					id="embed-height-{sectionId}"
					type="number"
					bind:value={embedHeight}
					min="100"
					max="2000"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
				/>
			</div>
		</div>
	{:else if selectedWidgetType === 'status'}
		<div class="space-y-3">
			<div>
				<label for="status-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
				<input
					id="status-label-{sectionId}"
					type="text"
					bind:value={statusLabel}
					placeholder="e.g. Production Services"
					class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
				/>
			</div>
			<div>
				<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
				<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
					{#each apps as app (app.id)}
						<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
							<input
								type="checkbox"
								checked={statusAppIds.includes(app.id)}
								onchange={() => toggleStatusApp(app.id)}
								class="h-4 w-4 rounded border-input accent-primary"
							/>
							{app.name}
						</label>
					{/each}
				</div>
				{#if statusAppIds.length > 0}
					<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
				{/if}
			</div>
		</div>
	{/if}

	<div class="mt-3">
		<button
			type="button"
			onclick={handleSubmitWidget}
			class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
		>
			{$t('common.add')}
		</button>
	</div>
</div>
