<script lang="ts">
	import SectionHeader from './SectionHeader.svelte';
	import SectionCollapsible from './SectionCollapsible.svelte';
	import WidgetGrid from '$lib/components/widget/WidgetGrid.svelte';
	import { editMode } from '$lib/stores/editMode.svelte.js';
	import type { CardSize } from '$lib/utils/constants.js';

	interface WidgetData {
		id: string;
		type: string;
		order: number;
		config: string;
		appId: string | null;
		app: {
			id: string;
			name: string;
			url: string;
			icon: string | null;
			iconType: string;
			description: string | null;
			statuses: Array<{ status: string; responseTime: number | null }>;
		} | null;
	}

	interface SectionData {
		id: string;
		title: string;
		icon: string | null;
		order: number;
		isExpandedByDefault: boolean;
		cardSize?: string | null;
		widgets: WidgetData[];
	}

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

	interface Props {
		section: SectionData;
		allApps?: AppData[];
		boardCardSize?: CardSize;
	}

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

	// Section-level cardSize overrides board-level
	const effectiveCardSize = $derived<CardSize>(
		(section.cardSize as CardSize) ?? boardCardSize
	);

	let expanded = $state(section.isExpandedByDefault);
</script>

<div class="rounded-[1.4rem] border border-border bg-card/40 shadow-[var(--shadow-soft)] backdrop-blur-sm {editMode.active ? 'ring-1 ring-primary/15' : ''}">
	<SectionHeader
		sectionId={section.id}
		title={section.title}
		icon={section.icon}
		{expanded}
		onToggle={() => (expanded = !expanded)}
		widgetCount={section.widgets.length}
	/>

	<SectionCollapsible {expanded}>
		<div class="px-4 pb-4">
			<WidgetGrid
				widgets={section.widgets}
				sectionId={section.id}
				{allApps}
				cardSize={effectiveCardSize}
			/>
		</div>
	</SectionCollapsible>
</div>
