<script lang="ts">
	import { slide } from 'svelte/transition';
	import MdiIcon from './MdiIcon.svelte';

	let {
		label,
		description = '',
		expanded = false,
		status = 'empty',
		ontoggle,
		children,
	} = $props<{
		label: string;
		description?: string;
		expanded: boolean;
		status: 'empty' | 'valid' | 'error' | 'warning';
		ontoggle: () => void;
		children: import('svelte').Snippet;
	}>();

	const STATUS_MAP: Record<string, { icon: string; color: string; bg: string }> = {
		empty: { icon: 'mdiCircleOutline', color: 'var(--color-muted-foreground)', bg: 'transparent' },
		valid: { icon: 'mdiCheckCircle', color: 'var(--color-success-fg)', bg: 'var(--color-success-bg)' },
		warning: { icon: 'mdiAlert', color: 'var(--color-warning-fg)', bg: 'var(--color-warning-bg)' },
		error: { icon: 'mdiAlertCircle', color: 'var(--color-error-fg)', bg: 'var(--color-error-bg)' },
	};
	const statusConfig = $derived(STATUS_MAP[status]);
</script>

<div class="slot-root" class:slot-expanded={expanded}>
	<button type="button" class="slot-header" onclick={ontoggle}>
		<span class="slot-chevron" class:slot-chevron-open={expanded}>
			<MdiIcon name="mdiChevronRight" size={18} />
		</span>

		<span class="slot-label">{description || label}</span>

		<span class="slot-status-pill" style="color: {statusConfig.color}; background: {statusConfig.bg};">
			<MdiIcon name={statusConfig.icon} size={14} />
		</span>
	</button>

	{#if expanded}
		<div class="slot-body" transition:slide={{ duration: 150 }}>
			{@render children()}
		</div>
	{/if}
</div>

<style>
	.slot-root {
		border: 1px solid var(--color-border);
		border-radius: 0.5rem;
		overflow: hidden;
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.slot-root:hover {
		border-color: color-mix(in srgb, var(--color-border) 60%, var(--color-primary) 40%);
	}

	.slot-expanded {
		border-color: var(--color-primary);
		box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
	}

	.slot-header {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.5rem 0.75rem;
		background: transparent;
		border: none;
		cursor: pointer;
		text-align: left;
		color: var(--color-foreground);
		font-size: 0.8125rem;
		transition: background 0.15s ease;
	}

	.slot-header:hover {
		background: color-mix(in srgb, var(--color-muted) 50%, transparent);
	}

	.slot-chevron {
		display: inline-flex;
		color: var(--color-muted-foreground);
		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
		flex-shrink: 0;
	}

	.slot-chevron-open {
		transform: rotate(90deg);
	}

	.slot-label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.slot-status-pill {
		display: inline-flex;
		align-items: center;
		padding: 0.125rem 0.25rem;
		border-radius: 0.25rem;
		flex-shrink: 0;
	}

	.slot-body {
		padding: 0.75rem;
		border-top: 1px solid var(--color-border);
	}
</style>
