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

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

	// Build the terminal lines for the portfolio page
	const lines: TerminalLine[] = [
		// Header command
		{ type: 'command', content: 'cat ~/about.md' },
		{ type: 'blank', content: '' },
		
		// Avatar image
		{ type: 'image', content: '', image: user.avatar, imageAlt: user.name, imageWidth: 150 },
		{ type: 'blank', content: '' },
		
		// User info
		{ type: 'header', content: `(&primary,bold)${user.name}(&)` },
		{ type: 'info', content: `(&accent)${user.title}(&)` },
		{ type: 'output', content: `(&muted)${user.bio}(&)` },
		{ type: 'blank', content: '' },
		
		{ type: 'divider', content: 'CONTACT' },
		{ type: 'blank', content: '' },
		
		// Contact buttons - dynamically generated from socials array
		...user.socials.map(social => ({
			type: 'button' as const,
			content: `${social.name}: ${social.link}`,
			icon: social.icon,
			style: 'primary' as const,
			href: social.link
		})),
		// { 
		// 	type: 'button', 
		// 	content: `Email: ${user.email}`, 
		// 	icon: 'mdi:email',
		// 	style: 'secondary',
		// 	href: `mailto:${user.email}`
		// },
		
		{ type: 'blank', content: '' },
		{ type: 'divider', content: 'SKILLS' },
		{ type: 'blank', content: '' },
		
		// Skills as TUI sections
		{ type: 'info', content: '(&blue,bold)▸ Languages(&)' },
		{ type: 'output', content: '  ' + skills.languages.map(s => `(&cyan)${s}(&)`).join(' (&muted)•(&) ') },
		{ type: 'blank', content: '' },
		{ type: 'info', content: '(&magenta,bold)▸ Frameworks(&)' },
		{ type: 'output', content: '  ' + skills.frameworks.map(s => `(&pink)${s}(&)`).join(' (&muted)•(&) ') },
		{ type: 'blank', content: '' },
		{ type: 'info', content: '(&green,bold)▸ Tools(&)' },
		{ type: 'output', content: '  ' + skills.tools.map(s => `(&green)${s}(&)`).join(' (&muted)•(&) ') },
		{ type: 'blank', content: '' },
		{ type: 'info', content: '(&cyan,bold)▸ Databases(&)' },
		{ type: 'output', content: '  ' + skills.databases.map(s => `(&cyan)${s}(&)`).join(' (&muted)•(&) ') },
		{ type: 'blank', content: '' },
		{ type: 'info', content: '(&yellow,bold)▸ Cloud(&)' },
		{ type: 'output', content: '  ' + skills.cloud.map(s => `(&orange)${s}(&)`).join(' (&muted)•(&) ') },
		{ type: 'blank', content: '' },
		{ type: 'info', content: '(&accent,bold)▸ Interests(&)' },
		{ type: 'output', content: '  ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
		
		{ type: 'blank', content: '' },
		{ type: 'divider', content: 'PROJECTS' },
		{ type: 'blank', content: '' },
		
		// Featured projects with buttons
		...projects.filter(p => p.featured).flatMap(project => [
			{ type: 'header' as const, content: `(&primary,bold)${project.name}(&)` },
			{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
			{ type: 'info' as const, content: `(&info)Tech: (&primary)${project.tech.join(', ')}(&)` },
			...(project.github ? [{ 
				type: 'button' as const, 
				content: 'View on GitHub', 
				icon: 'mdi:github',
				style: 'accent' as const,
				href: project.github
			}] : []),
			...(project.live ? [{ 
				type: 'button' as const, 
				content: 'View Live Demo', 
				icon: 'mdi:open-in-new',
				style: 'accent' as const,
				href: project.live
			}] : []),
			{ type: 'blank' as const, content: '' }
		]),
		
		// Other projects
		...projects.filter(p => !p.featured).flatMap(project => [
			{ type: 'success' as const, content: `(&success)${project.name}(&)` },
			{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
			{ type: 'info' as const, content: `(&info)Tech:(&) (&primary)${project.tech.join(', ')}(&)` },
			...(project.github ? [{ 
				type: 'button' as const, 
				content: 'View on GitHub', 
				icon: 'mdi:github',
				style: 'accent' as const,
				href: project.github
			}] : []),
			...(project.live ? [{ 
				type: 'button' as const, 
				content: 'View Live', 
				icon: 'mdi:open-in-new',
				style: 'accent' as const,
				href: project.live
			}] : []),
			{ type: 'blank' as const, content: '' }
		]),
		
		// End
		{ type: 'success', content: `(&success)Portfolio loaded successfully!(&)` }
	];
</script>

<svelte:head>
	<title>Portfolio | {user.name}</title>
	<meta name="description" content={site.description} />
</svelte:head>

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

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