<script lang="ts">
	import TerminalTUI from '$lib/components/TerminalTUI.svelte';
	import type { TerminalLine } from '$lib/components/tui/types';
	import { user, sortedCards } from '$lib/config';
	import { getPageSpeedMultiplier, getPageAutoscroll } from '$lib';

	const speed = getPageSpeedMultiplier('hackathons');
	const autoscroll = getPageAutoscroll('hackathons');

	// Count stats
	const totalHackathons = sortedCards.length;
	const totalAwards = sortedCards.filter(c => c.awards && c.awards.length > 0).length;
	const featuredCount = sortedCards.filter(c => c.featured).length;

	// Build the terminal lines with card grid
	const lines: TerminalLine[] = [
		{ type: 'command', content: 'ls ~/hackathons --grid' },
		{ type: 'blank', content: '' },
		{ type: 'header', content: `Hackathon Journey` },
		{ type: 'output', content: `(&muted)Total:(&) (&primary)${totalHackathons}(&) (&muted)| Awards:(&) (&yellow)${totalAwards}(&) (&muted)| Featured:(&) (&accent)${featuredCount}(&)` },
		{ type: 'blank', content: '' },
		// { type: 'divider', content: 'PROJECTS' },
		{ type: 'blank', content: '' },
		{ type: 'cardgrid', content: '', cards: sortedCards },
		{ type: 'blank', content: '' },
		{ type: 'success', content: `(&success)Ready for the next hackathon! 🚀(&)` },
	];
</script>

<svelte:head>
	<title>Hackathons | {user.name}</title>
	<meta name="description" content="Hackathon projects and achievements" />
</svelte:head>

<div class="hackathons-container">
	<TerminalTUI {lines} title="~/hackathons" interactive={true} {speed} {autoscroll} />
</div>

<style>
	.hackathons-container {
		padding: 2rem 1rem;
		min-height: calc(100vh - 60px);
	}
</style>
