<script lang="ts">
	import ChatPanel from '$lib/components/ChatPanel.svelte';
	import ActivityPanel from '$lib/components/ActivityPanel.svelte';
	import AgentView from '$lib/components/AgentView.svelte';
</script>

<div class="panels">
	<!-- Linkes Panel: Chat -->
	<section class="panel panel-chat">
		<ChatPanel />
	</section>

	<!-- Mittleres Panel: Aktivität + Agents -->
	<section class="panel panel-activity">
		<div class="panel-tabs">
			<button class="tab active">📋 Aktivität</button>
			<button class="tab">🤖 Agents</button>
		</div>
		<div class="panel-content">
			<ActivityPanel />
		</div>
	</section>

	<!-- Rechtes Panel: Agent-Details / Präsentation -->
	<section class="panel panel-details">
		<AgentView />
	</section>
</div>

<style>
	.panels {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1px;
		height: 100%;
		background: var(--bg-tertiary);
	}

	.panel {
		display: flex;
		flex-direction: column;
		background: var(--bg-primary);
		overflow: hidden;
	}

	.panel-tabs {
		display: flex;
		background: var(--bg-secondary);
		border-bottom: 1px solid var(--bg-tertiary);
	}

	.tab {
		flex: 1;
		padding: var(--spacing-sm) var(--spacing-md);
		font-size: 0.875rem;
		color: var(--text-secondary);
		background: transparent;
		border: none;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.tab:hover {
		color: var(--text-primary);
		background: var(--bg-tertiary);
	}

	.tab.active {
		color: var(--accent);
		border-bottom: 2px solid var(--accent);
	}

	.panel-content {
		flex: 1;
		overflow: auto;
	}

	/* Responsive: Auf kleineren Bildschirmen stapeln */
	@media (max-width: 1200px) {
		.panels {
			grid-template-columns: 1fr 1fr;
		}
		.panel-details {
			display: none;
		}
	}

	@media (max-width: 800px) {
		.panels {
			grid-template-columns: 1fr;
		}
		.panel-activity {
			display: none;
		}
	}
</style>
