<script lang="ts">
	import { t } from 'svelte-i18n';
	import WidgetRenderer from './WidgetRenderer.svelte';
	import WidgetContainer from './WidgetContainer.svelte';
	import type { CardSize } from '$lib/utils/constants.js';

	interface AppData {
		id: string;
		name: string;
		url: string;
		icon: string | null;
		iconType: string;
		description: string | null;
		statuses: Array<{ status: string; responseTime: number | null }>;
	}

	interface WidgetData {
		id: string;
		type: string;
		order: number;
		config: string;
		appId: string | null;
		app: AppData | null;
	}

	interface Props {
		widgets: WidgetData[];
		allApps?: AppData[];
		cardSize?: CardSize;
	}

	let { widgets, allApps = [], cardSize = 'medium' }: Props = $props();

	// Widgets that should span full width
	const fullWidthTypes = new Set(['note', 'embed', 'status', 'system_stats', 'rss', 'calendar', 'markdown', 'camera']);

	// Grid column classes based on card size
	const gridClass = $derived.by(() => {
		switch (cardSize) {
			case 'compact':
				return 'grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6';
			case 'large':
				return 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3';
			default:
				return 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4';
		}
	});

	const fullWidthClass = $derived.by(() => {
		switch (cardSize) {
			case 'compact':
				return 'col-span-2 sm:col-span-3 md:col-span-4 lg:col-span-6';
			case 'large':
				return 'col-span-1 sm:col-span-2 lg:col-span-3';
			default:
				return 'col-span-2 sm:col-span-3 lg:col-span-4';
		}
	});
</script>

{#if widgets.length === 0}
	<p class="text-sm text-muted-foreground">{$t('widget.no_widgets')}</p>
{:else}
	<div class={gridClass}>
		{#each widgets as widget (widget.id)}
			{@const isFullWidth = fullWidthTypes.has(widget.type)}
			<div class={isFullWidth ? fullWidthClass : ''}>
				<WidgetContainer>
					<WidgetRenderer {widget} {allApps} {cardSize} />
				</WidgetContainer>
			</div>
		{/each}
	</div>
{/if}
